jQuery简单操作④

jQuery简单操作

嗨嗨害!我又来水文章了

1. jQuery元素大小

公共样式

 div {
            width: 200px;
            height: 200px;
            background-color: black;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        } 

① width() / height()
用于获取或设置元素 width和height大小
比如

 console.log($("div").width()); // 输出了盒子的宽度 200
            $("div").width(300); 带数值则修改大小 

② innerWidth() / innerHeight()
用于获取或设置元素 width和height + padding 大小

 console.log($("div").innerWidth()); //220
    // console.log($("div").innerWidth(1000));
    // 带数值则是将盒子的宽+padding修改成1000px,padding还是原来的大小,宽变为980px 

③ outerWidth() / outerHeight()
用于获取设置元素 width和height + padding + border 大小

 console.log($("div").outerWidth()); //250
    // console.log($("div").outerWidth(1000));
    // 同样的,带数值会修改盒子大小,boder和padding不变还是原来的数值,盒子的宽变为950px 

④ outerWidth(true) / outerHeight(true)
用于获取设置 width和height + padding + border + margin

 console.log($("div").outerWidth(true)); //290
    // console.log($("div").outerWidth(1000,true));
    // 第二个参数为true意为为宽内边距边框外边距设置大小,而内边距、边框、外边距大小保持不变 
    // 这里盒子的宽变成910px,和外边距、边距、边框加起来1000px 

总结:

  • 以上参数为空,则是获取相应数值,返回的是数字型
  • 如果参数为数字,则是修改相应值
  • 参数可以不用写单位

2. jQuery位置

位置主要有3个:offset()、position()、scrollTop()/scrollLeft()
公共样式

 
    
    

① offset()设置或获取元素偏移
该方法设置或者返回被选元素相对于文档的偏移坐标,跟父级没有关系

 console.log($(".son").offset());
    console.log($(".son").offset().top); 

jQuery简单操作④_第1张图片

也可以在offset()方法中传递一个对象就可以重新设置盒子的偏移

 $(".son").offset({
                top: 200,
                left: 200
            }); 

jQuery简单操作④_第2张图片

② position()获取元素偏移
该方法用于返回元素相对于带有定位的父级的偏移坐标,如果父级没定位,则以文档为准

 console.log($(".son").position()); 

jQuery简单操作④_第3张图片
这时候因为刚刚上面在offset中传了一个设置盒子偏移的对象,而这个方法是以文档为准(此时父盒子外边距是100px),结果就是子盒子在父盒子中的偏移是top 100px 和 left 100px。

③ 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()
这两个方法分别用于获取被卷去的头部的大小
如图

jQuery简单操作④_第4张图片
案例:
结构

 

    
返回顶部
 // 页面滚动事件
            var boxTop = $(".container").offset().top;
            $(window).scroll(function () {
                // console.log(11);
                console.log($(document).scrollTop());
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });
            // 返回顶部
            $(".back").click(function () {
                // $(document).scrollTop(0);
                $("body, html").stop().animate({
                    scrollTop: 0
                });
            })
        }) 

该案例效果是,当被卷去的头部到达目标数值,就让对应的“返回顶部”模块出现,点击后能返回顶部,模仿了一些网站返回顶部功能。

3. 事件处理

① 单个事件注册
同一个对象多个事件需要一个一个绑定
语法: element.事件(function(){})

 比如 
                $("div").click(function () {
                    $(this).css("background", "purple");
                })
                $("div").mouseenter(function () {
                    $(this).css("background", "skyblue");
                }) 

② 事件处理on
on()方法在匹配元上绑定一个或多个事件的事件处理函数
语法:element.on(events,[selector],fn)
events : 一个或多个用空格分隔的事件类型,如"click"、“keydown”
selector : 元素的子元素选择器
fn : 回调函数 绑定在元素身上的监听函数

on()方法的特点:
(1) on可以绑定一个或多个事件

 $("div").on({
                    mouseenter: function () {
                        $(this).css("background", "skyblue");
                    },
                    click: function () {
                        $(this).css("background", "purple");
                    },
                    mouseleave: function () {
                        $(this).css("background", "blue");
                    }
                });   
                
                // 将多个事件以对象格式传进来 

以上是事件处理程序不同的情况下。如果事件处理程序相同,可以这么写

 $("div").on("mouseover mouseout", function () {
                $(this).toggleClass("current");
            }); 

(2) on可以实现事件委托(委派)

 // $("ul li").click(function(){}); 正常这么写会利用隐式迭代给每一个li都绑定事件 
     $("ul").on("click", "li", function () {
              alert("11");
       }) 

利用on实现事件委派,将li的事件委派给ul,只有ul添加了事件,而触发对象是每一个ul中的li。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,即把事件委派给父亲。

(3) on可以给未来动态创建的元素绑定事件
之前的绑定事件,无法给未来动态创建的元素绑定事件,如

 $("ol li").click(function () {
             alert("11");
    });
    var li = $("
  • 我是后来创建的
  • "); $("ol").append(li);

    后来动态创建的元素没有绑定到事件。

     $("ol").on("click", "li", function () {
                    alert("11");
           }); 
    

    将注册事件的方式换成on,就能解决上面的问题。

    4. jQuery对象拷贝

    如果想要把某个对象拷贝(合并)给另外一个对象使用,此时可以使用$.extend()方法
    语法: $
    .extend([deep],target,object1,[objectN])

    deep:如果设为true则为深拷贝,默认为false
    target: 目标对象
    object1:待拷贝到目标对象的对象

    案例1:

     var targetObj = {};
                // 这是原来targetObj是空对象的情况
                var obj = {
                    id: 1,
                    name: "andy"
                }
                $.extend(targetObj, obj);
                console.log(targetObj); 
    

    image.png

    案例2:

     var targetObj = {
                    id: 0,
                    msg: {
                        sex: '男'
                    }
                };
                var obj = {
                    id: 1,
                    name: "andy",
                    msg: {
                        age: 18
                    }
                }
                $.extend(targetObj, obj);
                console.log(targetObj); 
    

    被拷贝的对象会覆盖目标对象原来的冲突的数据
    比如案例2中,目标对象已经存在id和msg,被拷贝的对象也有,则被拷贝对象中的这两个属性值会覆盖目标对象中的。console.log(targetObj)输出如下:

    jQuery简单操作④_第5张图片
    以上这些呢,默认是浅拷贝,什么是浅拷贝,就是把被拷贝的对象中复杂数据类型的地址拷贝给目标对象,修改目标对象中的复杂数据类型,会影响原先被拷贝的对象。

     targetObj.msg.age = 20;
                console.log(targetObj);
                console.log(obj); 
    

    输出结果如下
    jQuery简单操作④_第6张图片
    可以看到,age都变为20了,就是因为浅拷贝遇到复杂数据类型时,拷贝的是地址,这两个对象中的复杂数据类型地址相同,指向的都是同一个数据,那么任何一方进行修改的时候,都会影响另外一方。

    深拷贝: extend方法中第一个参数设置为true,完全克隆(拷贝的对象,而不是地址),修改目标对象,不会影响到被拷贝对象,如果里面有不冲突的属性,那么会合并到一起。

     $.extend(true, targetObj, obj);
                console.log(targetObj); //虽然都有msg,但msg里面的属性不冲突,直接合并到一起了
                console.log(obj); 
    

    结果如下

    jQuery简单操作④_第7张图片

    这时候你再对拷贝完的目标对象修改里面的属性值,不会影响到原先的被拷贝对象中的属性,因为深拷贝在内存中又开辟一块空间来存被拷贝的内容,两者地址不同,不影响。

    5. 多库共存

    问题概述: jQuery使用$作为标示符,随着jQuery的流行,其他js库也会用这$作为标识符,这样可能会引起一些冲突
    客观需求: 需要一个解决方案,让jQuery和其他的js库不存在冲突,可以同时存在,这就叫多库共存

    jQuery的解决方案:

    1. 统一把$符号改成jQuery,之前讲过,$等同于jQuery,比如jQuery(“div”)
    2. 让jquery释放对$的控制权,让用户重新规定jQuery变量的名称:$.noConflict()

    var xx = $.noConflict(); 那么这个xx就可以直接替换jQuery和$进行使用
    比如:

     var Guguuuu = jQuery.noConflict();
                console.log(Guguuu("span")); 
    

    你可能感兴趣的