jQuery（四）——动态操作

作者: CNLISIYIII | 来源:发表于2019-04-22 15:35 被阅读0次

（一）jQuery操作元素的尺寸

1.width和height

设置语法：jQuery对象.width(数字);
获取语法：jQuery对象.width();
得到的只是内容的大小。

代码举栗：

    <style>
        div {
            width: 500px;
            height: 500px;
            padding: 10px;
            border: 10px solid;
        }
    </style>
<body>
    <div></div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        var w = $('div').width(); //返回的是一个number
        console.log(w); //500
        $('div').width(300); //把div设置为300px
    </script>
</body>

2.innerWidth和innerHeight

设置语法：jQuery对象.innerWidth(数字);
获取语法：jQuery对象.innerWidth();
得到的是内容部分大小 + padding的大小。
设置时padding固定不变，内容部分自动适应变化。

代码举栗：

    <style>
        div {
            width: 500px;
            height: 500px;
            padding: 10px;
            border: 10px solid;
        }
    </style>
<body>
    <div></div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        var w = $('div').innerwidth(); //返回的是一个number
        console.log(w); //520。width+padding
        $('div').innerwidth(300); //div设置为300-20=280px，padding占有20px
    </script>
</body>

3.outerWidth和outerHeight

设置语法：jQuery对象.outerWidth(数字);
获取语法：jQuery对象.outerWidth();
得到的是内容部分大小 + padding + border的大小。
设置时padding和边框border固定不变，内容部分自动适应变化。

代码举栗：

    <style>
        div {
            width: 500px;
            height: 500px;
            padding: 10px;
            border: 10px solid;
        }
    </style>
<body>
    <div></div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        var w = $('div').outerwidth(); //返回的是一个number
        console.log(w); //540。width+padding+border
        //div设置为300-20-20=260px，padding占有20px，border占有20px
        $('div').outerwidth(300); 
    </script>
</body>

（二）jQuery操作元素的位置

1.获取元素距离文档的位置

语法：jQuery对象.offset();
返回的是一个对象，对象中包含了元素的位置。（相对于文档的位置）
位置和定位无关。若元素加了（子绝父相）定位后也依然参照文档的位置。不论元素是否定位。

代码举栗：

    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background: red;
        }
        p {
            height: 600px;
        }
    </style>
<body>
    <p></p>
    <div></div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        var o = $('div').offset();
        console.log(o); //得到一个对象，其中包含top:632, left:574.5
        //设置时传参传的是对象。位置依然参照文档，和定位无关。
        var s = $('div').offset({top:0,left:0}); 
        console.log(s); //div变到页面左上角
    </script>
</body>

一般不会用到设置。
在DOM对象中，元素.offsetLeft和元素.offsetTop是只读的。

2.获取元素距离定位元素的位置

语法：**jQuery对象.position(); **
和定位有关系。返回一个包含left和top的对象。
但是position不能设置。

代码举栗：

    <style>
        .f {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background: red;
            position: relative;
        }
        .son {
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }
        p {
            height: 600px;
        }
    </style>
<body>
    <p></p>
    <div class="f">
        <div class="son"></div>
    </div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        var o = $('.son').position();
        console.log(o); //得到一个对象，其中包含top:0, left:0
        //position方法只能获取元素的位置不能传参设置位置
        $('.son').position({left:50, top:50});
    </script>
</body>

3.操作卷去的页面间距

获取语法：jQuery对象.scrollTop();
设置语法：jQuery对象.scrollTop(数字);

代码举栗：

    <style>
        body {
            text-align: center;
        }
        div {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid;
            overflow: auto;
        }
    </style>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        //入口函数
        $(function () {
            //给div注册滚动条滚动事件
            $('div').scroll(function(){ 
                var v = $(this).scrollTop();
                console.log(v);
            });
            //回到顶部
            $('button').click(function(){
                $('div').scrollTop(0);
            });
        });
    </script>
<body>
    <div>
        <p></p>*100
    </div>
    <button>回到顶部</button>
</body>

在jQuery中可以使用$(window)直接获取页面卷去的间距，但是在原生方法中不可以。
不加动画时，可以直接使用$(window).scrollTop(数字)来直接设置值，但是在原生中不可以。

4.固定导航和回到顶部案例

<body>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        var _top = $('.box2').offset().top;
        $(window).scroll(function () {
            var v = $('window').scrollTop();
            if (v >= _top) {
                //给固定导航设置定位
                $('.box2').addClass('active');
                //设置回到顶部按钮显示
                $('.top').show();
            }
            else {
                $('.box2').removeClass('active');
                $('.top').hide();
            }
        });
        $('.top').click(function () {
            //动画中动的必须是元素（即标签）。
            $('html,body').animate({ scrollTop: 0 }, 500);
        })
    </script>
</body>

（三）jQuery事件操作

1.注册事件

语法：jQuery对象.事件名(事件处理程序);
在jQuery中事件的底层就是事件监听，可以实现事件叠加。

2.on方法注册事件

注册简单事件语法：jQuery对象.on('事件名',事件处理程序);

代码举栗：

<body>
    <button>click</button>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        $('button').on('click',function(){
            console.log(1);
        });
        $('button').on('click',function(){
            console.log(2);  //输出1 2。事件叠加
        });
    </script>
</body>

事件委托语法：jQuery对象.on('事件名','选择器',事件处理程序);
选择器：子孙元素
在事件处理程序中，this代表的是子孙元素（所点最先触发的）

3.off方法移除事件

移除简单事件语法：jQuery对象.off('click',事件处理程序名称);
移除事件委托的事件语法：jQuery对象.off('click',‘选择器’,事件处理程序名称);
不传参数的话会移除所有事件类型。
移除事件的底层也是事件监听（removeEventListener）。

代码举栗：

<script>
    // 解绑按钮的事件处理程序：fn1和fn2
    $('button').off('click',fn1);
    $('button').off('click',fn2);

    // 解绑通过事件委托给p注册的事件处理程序 fn2
    $('div').off('click','p',fn2);
</script>

4.触发事件

语法：jQuery对象.trigger('事件名');

5.事件对象

1）鼠标事件对象相关的属性
事件对象.clientX/Y 参照浏览器
事件对象.pageX/Y 参照文档
事件对象.offsetX/Y 参照元素
2）键盘事件对象相关的属性
事件对象.keyCode 返回键码数字
事件对象.alt/shift/ctrlKey 返回是布尔值。检测是否按下（true）
3）公共的属性或方法
属性：事件对象.target;
方法：
事件对象.preventDefault(); 阻止默认行为
事件对象.stopPropagation(); 阻止事件冒泡

（四）链式编程

可以用连续点点方式调用其他方法。
css方法只能jQuery对象调用

1.end方法

在链式上可以返回到上一个jQuery对象

代码举栗：

<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
    </ul>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        $('ul li').eq(0).css('color','red') //返回索引为0的li的jQuery对象
        .parent().css('border','1px solid blue') //返回ul这个jQuery对象
        .end().css('background','gold');  //返回了索引为0的li的jQuery对象
    </script>
</body>

2.星级评级案例

    <style>
        span {
            font: bold 100px '宋体';
            float: left;
            color: gold;
            cursor: pointer;
        }
    </style>
<body>
    <div>
        <span>☆</span>
        <span>☆</span>
        <span>☆</span>
        <span>☆</span>
        <span>☆</span>
    </div>
    <script src="lib/jquery-1.12.4.js"></script>
    <script>
        $('span').mouseenter(function () {
            $(this).text('★').prevAll().text('★').end().nextAll().text('☆');
        });
        $('span').mouseleave(function () {
            $('span').text('☆');
            $('.active').text('★').prevAll().text('★').end().nextAll().text('☆');
        });
        $('span').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
        });
    </script>
</body>

jQuery（四）——动态操作

（一）jQuery操作元素的尺寸

1.width和height

2.innerWidth和innerHeight

3.outerWidth和outerHeight

（二）jQuery操作元素的位置

1.获取元素距离文档的位置

2.获取元素距离定位元素的位置

3.操作卷去的页面间距

4.固定导航和回到顶部案例

（三）jQuery事件操作

1.注册事件

2.on方法注册事件

3.off方法移除事件

4.触发事件

5.事件对象

（四）链式编程

1.end方法

2.星级评级案例

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

吃饭用的前端