jQuery入门demo【001】-优快云博客

本文链接：https://blog.youkuaiyun.com/dc4125/article/details/83971794

本文介绍了如何使用jQuery控制网页元素的位置移动，包括按钮触发移动及键盘控制移动两种方式，并提供了具体实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于jQuery的介绍各位请google。一直在看大家写的博客，想自己写点原创，第一次写写得不好还请指教。最后会写个小游戏吧。:)
1.ready简写：
Js代码

$(document).ready(function(){});

相当于
Js代码

function load(){}

Html代码

<body οnlοad="load()">

当然。我们也可以这样写：
Js代码

$(function(){});

2.关于$
这个只是简化document.getElementById()的工作。
比如我们要取到页面的DOM对象。就可以这样
Js代码

$('#test');

而html的代码为<div id='test'></div>
3.一个简单的demo。
单击左移右移可以使方块左右移动。
Js代码

<style>  
            body{margin:0 auto;text-align:center;}  
            /*position必须是absolute--绝对定位*/  
            .block{background:red;width:80px;height:80px;position:absolute;top:200px;left:600px;}  
        </style>  
        <script type="text/javascript" src="js/jquery142min.js"></script>  
        <script type="text/javascript">  
            $(function(){  
                var lbtn = $('#leftBtn');  
                var rbtn = $('#rightBtn');  
                var block = $('#block');  
                lbtn.click(function(){  
                    /*offset()是获取该元素在网页的真实位置有top和left俩个属性*/  
                    var left = block.offset().left-20;  
                    /*这一句是设置css属性*/  
                    block.css('left',left+'px');  
                });  
                rbtn.click(function(){  
                    var left = block.offset().left+20;  
                    block.css('left',left+'px');  
                });  
            });  
        </script>  
    </head>  
    <body>  
        <input type='button' id='leftBtn' value='左移'>  
        <input type='button' id='rightBtn' value='右移'>  
        <div id='block' class='block'></div>  
    </body>

4.通过上述的例子，我们可以很简单的控制到页面元素的css属性。下面是通过键盘控制block移动
Js代码

<html>  
    <head>  
        <title>jqueryDemo</title>  
        <style>  
            body{margin:0 auto;text-align:center;}  
            /**position必须是absolute--绝对定位*/  
            .block{background:red;width:80px;height:80px;position:absolute;top:200px;left:600px;}  
        </style>  
        <script type="text/javascript" src="js/jquery142min.js"></script>  
        <script type="text/javascript">  
            $(function(){  
                var block = $('#block');  
                $(this).keydown(function(event){  
                    switch(event.keyCode){  
                        /*如果是A键则往左,D键往右,S是往下移动,W是往上移动*/  
                        case 65:block.action("left").leftRun();break;  
                        case 68:block.action("right").leftRun();break;  
                        case 87:block.action("up").slideRun();break;  
                        case 83:block.action("down").slideRun();break;  
                    }  
                });  
            });  
            $.fn.action = function(flag){  
                var dom = this;  
                var left = dom.offset().left;  
                var top  = dom.offset().top;  
                if(typeof flag === 'string'){  
                    left = flag == 'right'? left += 20flag == 'left'? left -= 20:left);  
                    top  = flag == 'up'? top -= 20 : (flag == 'down' ? top += 20 : left);  
                }  
                return {  
                    leftRun :function(){dom.css('left',left+'px');}  
                    /*这不要忘了有个,号*/  
                    ,slideRun:function(){dom.css('top',top+'px');}  
                };  
            }  
        </script>  
    </head>  
    <body>  
        <div id='block' class='block'></div>  
    </body>  
</html>

这样就简单的实现了通过键盘操作方块。下一步我们可以加一些更加复杂的操作。