jQuery：＜4＞克隆事件、修改属性、获取数值和注册事件的实用方式

这一期的内容有点多，不过都是简单的知识，只要看一看大家就会用的，毕竟jQuery那么方便，对了，给大家推荐一个快速引入jQuery的方法，以后就不需要在自己磁盘上引入了：

1、网上引入jQuery：

打开浏览器输入bootcdn点击第一个搜索jQuery:

搜到之后单击第一个：

上面后面的连接随便复制一个就可以拿来用了

2、克隆事件：

我们可以使用clone（），方法来进行元素的克隆，这个方法含有一个参数，false true，如果是true的话就会克隆事件，否则不会，如果不写参数，就默认为false，我们来看一个例子：

    //1.1 按键点击事件
    $('#btn1').click(function(){
        //1.2 进行事件的克隆
        var box2 = $('.box1').clone()
        console.log(box2)
        $('body').append(box2)
    });
    //1.3 对盒子进行事件绑定
    $('div').click(function(){
        alert('单击了盒子')
    });

在我们没有加true的时候我们点击克隆的盒子是没有任何反应的，当我们加了true之后我们点击盒子就会有相同的事件：

 

3、修改属性，有一些元素可能有时候需要我们修改属性，比如相片的大小，需要我们修改宽高，还有之前用到的下拉菜单 ：

这种格式并不是默认的格式，而是需要我们加一个属性 ：

<select class="left-city" multiple>
          <option>上海</option>
            <option>广州</option>
            <option>杭州</option>
            <option>浙江</option>
            <option>北京</option>
        </select>

所以我们可以使用attr()来修改一些元素的属性：

这个属性可不是样式，而是那种id，class之类的，还有自定义属性，使用attr()方法来添加或者更改，有两个参数，前一个参数是属性名，后一个参数是属性值，如果属性名不存在的话就会添加属性，当做自定义属性，如果存在的话就会更改属性；如果要更改或添加多个属性，主需要用空格隔开就可以；如果给了参数没给值的话就是获取参数的值；

注意一点，如果是具有bool属性的就不可以用attr()修改，需要用prop（）方法，比如selected、checked

    //2.1 点击按钮修改属性
    var tou2 = '../Code1/images/tou2.jpg'
    $('#btn2').click(function(){
        $('img').attr('src',tou2)
    });

 当我们点击按钮的时候，我们更改图片的路径可以换一张图片：

 对于一些带有bool类型的属性，我们使用attr是无效的，不行可以去试一试，我们直接演示用prop（）来更改CheckBox的属性：

//2.1 为单选框添加单击响应事件
        $('.box3 .title input').click(function(){
            //2.2 一个总的选择框，后面的单选框和他一致
            var head = $('.box3 .title input').prop('checked')
            $('.box3 .tb_body input').prop('checked',head)
            //2.3 根据下面的单选框来设置上面的总单选框

            //2.5 不过首先先添加响应函数
            $('.box3 .tb_body input').click(function(){
                var numchecked = $('.box3 .tb_body input').length
                var selectedchecked = $('.box3 .tb_body input:checked').length
                console.log(numchecked+':'+selectedchecked)
                //2.4 根据数量来判断是否选择
                $('.box3 .title input').prop('checked',numchecked == selectedchecked)
            });

这里有五个单选框，当我们勾选第一个其他会一起变化，当下面没有勾满时第一个会清除，这里用到的逻辑就是第一个的属性是什么然后其他的属性就是什么，当勾的数量等于4的时候，也就是出第一个外其余单选框的数量是，说明勾满了那么第一个就会勾：

4、如果我们要拿到一个盒子的宽高你们会怎么做？

是不是使用：

$('div').css('width')

 这样的话你们就会拿到一个字符串，如果我不想要这个字符串呢？我就要整型，我们可以使用下面的方法：

1> width()/height():获取不带边距和边框的长宽度

2> innerwidth()/innerheight():带有内边距的长宽度

3> outerwidth()/outerheight():带有内边距和边框的长宽度

4> outerwidth(true)/outerheight(true):带有内边距、外边距和边框的长宽度

5> offset()/position():前者是元素对于document元素的top和left偏移量；后者是相对于定位父级的偏移量

$(selector).offset({top:value,left:value})

6>scrollTop()/scrollLeft():当我们滚动滚动条时滚出去的距离

上面这些都是整型，而且当我们不设置参数的时候是获取相应的值，设置参数的时候是设置相应的值；

这样，我们就拿获取滚动距离为例，其他就不一一展示，我们如果要做一个这样的导航栏，要怎么做：

 

我们经常会看到一个导航栏，当滑出一定距离的时候就固定，其实我们就可以用到scrollTop()/scrollLeft()的方法，这里可以分成三部分，当滑出的距离大于第一部分的高是，我们就使用固定定位将导航栏固定在一个位置，当我们滑上去的时候又可以将导航栏的定位设置为默认定位，就可以回到原来的位置，不过要注意上边距的衔接问题，一般我们可以通过增加边距来减少盒子以为定位引起的突兀：

//3.1 为页面滚动事件设置监听事件
           //首先算出第一部分高度和第二部分的高度和边距
           var first = $('.box4>.first').height() + 10
           var nav = $('.box4>.nav').height() +10
           $(window).scroll(function(){
                //3.2 获取到页面滚出去的值，判断是否和第一部分一致
                var scheight = $(window).scrollTop()
                console.log('滚动触发')
                console.log(first+":"+scheight)
                if(first < scheight){
                    
                    //3.3 如果一致的话，我们需要将导航栏设置为固定定位而且给第二部分加一个上边距
                    $('.box4>.nav').css({
                        position:'fixed',
                        top:0,
                        left:0
                    });
                    //3.4 这个上边距的高度为导航栏高度加上原来的边距
                    $('.box4>.seccond').css('margin-top',nav)
                }else{
                    //3.5 如果滚回去了，我们需要清除掉固定定位，也就是设置为默认定位，并且还原边距
                    $('.box4>.nav').css({
                        position:'static',
                        top:0,
                        left:0
                    });
                    //3.4 这个上边距的高度为导航栏高度加上原来的边距
                    $('.box4>.seccond').css('margin-top',10)
                }
           });

5、注册事件的方式：

其实我们有好几种方式，之前我们使用的click()、mouseenter（）等都是简单事件的注册，不仅不支持同时注册还不支持动态注册，什么是动态注册呢，就是通过事件创建的盒子不会自己绑定事件，就相当于我们分苹果，分完了之后后来的人没有一样；

那么还有blid()、delegate()的方法注册，由于不常用，我就不赘述了，如果想了解的人可以自己去百度一下，这里主要讲解一下最常用的也是最实用的on()方法：

我们知道通过普通的事件注册不支持同时注册和动态注册事件，所以我们使用on()这个函数来注册，它含有两种注册方式，一种是简单注册，一种是委托注册：

1、简单注册

            //5.1 为btn1添加响应函数
            $('#btn1').on('click',function(){
                
            })
//多个事件
            $('#btn1').on('click mouseenter',function(){
                
            })

这种注册不支持动态注册，但可以同时注册；这里直接有由事件源本身点出来；

2、委派注册

            //5.1 为btn1添加响应函数
            $('body').on('click','div,span',function(){
​
            })
//多个事件
            $('body').on('click','div,span',function(){
​
            })

这种方式有父元素点出来，三个参数，第一个参数是触发方式，第二个是事件源，第三个是回调函数，这种注册方式用的是事件冒泡原理，通过父元素委托处理，所以当我们动态生成元素的时候(div)，是会注册相应的事件的，比如这里的单击事件；

好的，讲了这么多快去试试吧；