jQuery03

最新推荐文章于 2022-03-29 17:08:08 发布

Ordbiao

最新推荐文章于 2022-03-29 17:08:08 发布

阅读量109

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/tooHar/article/details/116939083

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

笔记目录

小概
1. val()
2. 元素属性操作
3. 尺寸
4. 事件
总结

小概

本章学习jQuery中的4个部分分别是：val()，属性操作(attr() removeAttr() prop())，尺寸(宽高,offset(),position(),scrollLeft()/scrollTop())，事件(事件注册，事件解绑，事件触发器，事件对象（e/event）)。
关键字：val，defaultValue（默认值），arr，removeAttr，prop，width，height，innerWidth/Height，outerWidth/Height，offset，position，offsetParent，scrollLeft/Top，on，off，trigger，e.stopPropagation（阻止事件冒泡），e.preventDefault（阻止默认事件）,e.keyCode，e.target。

1. val()

在原生js中获取表单元素的值用value，jQuery中用val()来获取/设置表单元素的值
defaultValue：默认值

      $('#btn').click(function () {
        //1.获取 val()不给参数
        //console.log($('#txt').val());

        //2.设置 val()给参数
        $('#txt').val('我是设置的内容');
      });

扩展：下拉菜单的value值

    <select name="" id="sel" >
        <option value="">G港</option>
        <option value="pc">p城</option>
        <option value="机场1">机场</option>
        <option >学校</option>
    </select>
            //入口函数
        $(function(){
            //下拉菜单的value值 : 获取/设置 也是使用val()方法
            //1.获取value值
            //下拉菜单的value值,是当前选中的option项的value值.
            //如果当前选中的option项没有value值,那就以选中的这个option项的文本为值. 
            $('#get').click(function(){
                console.log($('#sel').val());
            });

            //2.设置value值.
            //把设置的value值和每一个option项的value对比,看有没有这个value值. 
            //如果有.就把当前这个option项作为选中项. 
            $('#set').click(function(){
               $('#sel').val('pc');
            });
        });

获取下拉框的val(),得到的是选中的option项的value值，如果这个option项没有value值那就会得到他的文本内容；多选框设置value值，会把与value值相同的option项变成选中项。

2. 元素属性操作

2.1 attr属性

attr(),查询/设置元素的属性。和原生中的attribute（自定义属性）基本一致.

      //1.获取属性 attr(属性名);
      $('#btn1').click(function(){
        console.log($('img').attr('src'));//'991.gif'
        console.log($('img').attr('alt')); //'周五晚睡1'
        console.log($('img').attr('title'));//'周五晚睡'
        console.log($('img').attr('aaa'));//'aaa'
        console.log($('img').attr('bbb'));//没有这个属性返回值是undefined. 
      });

      //2.设置属性 
      //原来有的属性就是修改,原来没有属性就是添加. 
      $('#btn2').click(function(){
          //2.1 设置单属性 attr(属性名,属性值);
          // $('img').attr('src','992.gif');
          // $('img').attr('alt','柯柯玩水');
          // $('img').attr('title','柯柯玩水2');
          // $('img').attr('aaa','aaa1111');
          // $('img').attr('bbb','bbb1111');

          //2.2 设置多属性 attr({属性名1:属性值1,属性名2:属性值2});
          $('img').attr({
            src:'992.gif',
            alt:'柯柯玩水',
            title:'柯柯玩水2',
            aaa:'aaa222',
            bbb:'bbb222'
          });
      });

jQuery中的attr()其实原理就是原生中的getAttribute(属性名) setAttribute(属性名，属性值)，注意attr()可以传一个对象，实现一次性设置多个属性。

2.2 removeAttr移除属性

语法： removeAttr(属性名);

      $('#btn3').click(function(){
        //3.1 移除单属性
        // $('img').removeAttr('alt');
        // $('img').removeAttr('title');

        //3.2 移除多属性
        $('img').removeAttr('alt title aaa');
      });

2.3 prop

有一类属性(disabled checked selected),写在元素身上是一种效果,不写是另外一种效果,这类属性我们称为布尔类型的属性.
这种boolear类型的属性,jQuery中用prop() 方法设置

      $('#btn1').click(function(){
        //console.log($('#ckb1').attr('checked'));//不管选中与否,都返回undefined. 
        //原因是: 
        //在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。

        console.log($('#ckb1').prop('checked'));
      });

总结：布尔类型的属性：prop() //用attr()会undefined
非布尔类型的属性:attr()

3. 尺寸

3.1 宽高

width()/height()：设置或者获取宽高，不包含内边距、边框和外边框 = content(内容)
.css()也可以实现获取/设置content的宽高

      //设置或者获取高度，不包括内边距、边框和外边距
      //2.1 获取
       console.log($('#one').width());//200
       console.log($('#one').height());//200
      //2.2 设置
      //设置在行内,改变的是width和height的样式
       $('#one').width(300);
       $('#one').height(300)

innerWidth/Height()：方法返回元素的宽高（包括内边距） 用法和width/height一样

outerWidth()/outerHeight() : 方法返回元素的宽度/高度（包括内边距和边框）

outerWidth(true)/outerHeight(true) ：方法返回元素的宽度/高度（包括内边距、边框和外边距）

3.2 offset()

这个offset()和原生中的offset家族不一样，元素.offset()获取的是一个对象，里面有top和left的值，offset()方法获取元素距离document的位置。
设置的话，修改本质其实改的是定位的left和top的值，如果元素自己没有定位，设置offset()会自动给元素加上一个relative定位

console.log($('#son').offset());

        $('#son').offset({
          top:200,
          left:200
        })

3.3 position()

返回一个对象{top:xx,left:xxx} ,其实就是原生js中的offsetLeft,offsetTop获取的属性值
描述：position方法获取的是元素距离有定位的父元素(offsetParent)的位置

      $('#btn2').on('click', function () {
        console.log($('#son').position());
        let a = document.querySelector('#son');
        console.log(a.offsetLeft);
        console.log(a.offsetTop);
      })

3.4 scrollLeft() / scrollTop()

scrollLeft()和scrollTop()和原生js中的scrollLeft/scrollTop一样,都表示元素内存滚(卷曲))出去的距离

      $('#btn').on('click', function () {
        //1. 获取
        console.log($('div').scrollLeft(),$('div').scrollTop());

        //2. 设置
         $('div').scrollLeft(217);
         $('div').scrollTop(217)

        //3. 补充: 
         $('div').animate({
           scrollTop:217,
           scrollLeft:217,
         },3000);

        //-----------------------------------------------------------------
        //1.获取 
        // 获取页面被卷曲的高度 $(window).scrollTop();
        // 获取页面被卷曲的宽度 $(window).scrollLeft();
        //console.log($(window).scrollTop(),$(window).scrollLeft());

        //2.设置
        // $(window).scrollTop(1701);
        // $(window).scrollLeft(651);

        //3.补充: 
        // $('html,body').animate({
        //   scrollTop:1700
        // },5000);

      })

scrollLeft()和scrollTop()可以用自定义动画的方式设置属性,.animate({scrollLeft：xx，scrollTop:xx},用时,回调函数);获取页面滑动的高/宽$ (window).scrollTop(),$ (window).scrollLeft()，也可以用此方法设置。

4. 事件

4.1 事件注册(on)

简单注册$ (‘div’).click(function(){})
缺点：不能同时注册多个，不能动态注册
动态注册：创建一个同名元素，新的同名元素也会有绑定的事事件。

bind方式注册
支持同时注册多个，缺点：不支持动态注册

      $('div').bind({
        click:function(){
          console.log('点击了');
        },
        mouseenter:function(){
          console.log('鼠标移入了');
        }
      });

委托注册
支持同时注册多个事件，支持动态注册

     $('body').delegate('div,span',{
        click:function(){
          console.log('点击了');
        },
        mouseenter:function(){
          console.log('鼠标移入了');
        }
      })

需要掌握

jQuery用on的方式统一了事件注册.
简单注册
支持同时注册多个事件
缺点：不支持动态注册

     $('div').on('click',function(){
        console.log('单击了');
      })
      $('div').on({
        click:function(){
          console.log('鼠标点击');
        },
        mouseenter:function(){
          console.log('鼠标移入');
        }
      })

on的委托注册
支持动态绑定

      $('body').on('click','div',function(e){
        console.log('点击了');
        console.log(this);//jQuery很贴心,把this重新指向了触发事件的元素(事件源)
      });

注意：jQuery中on方法的委托注册，this
是指向e.target(触发事件源),原生中this是指向调用事件的父元素。

4.2 事件解绑(off)

解绑匹配元素的所有事件 $ (selector).off();
解绑匹配元素的所有 click事件$(selector).off(‘click’);
off(‘事件名’)给事件名，就只解除这个事件的

4.3 事件触发器(trigger)

可以用代码的方式去触发事件
用来触发自定义事件

           $('#one').click();  //都能实现
           $('#one').trigger('click');

      //2.给div注册自定义事件. 
      $('#one').on('linge',function(){
        alert('我是自定义事件');
      })
     
      $('#btn2').on('click',function(){
        if(confirm('是否触发自定义事件?')){
          $('#one').trigger('linge');
        }else{
          alert('未触发');
        }
      })

4.4 事件对象(e)

jQuery中的事件对象解决了，原生对象兼容性的问题

e中的坐标参数和原生事件对象一致，

   	  	 console.log("e.screenX:"+e.screenX, e.screenY);//屏幕左上角距离触发事件那一点的距离
         console.log("e.clientX:"+e.clientX, e.clientY);//可视区左上角距离触发事件那一点的距离
         console.log("e.pageX:"+e.pageX, e.pageY);//页面左上角距离触发事件那一点的距离

阻止事件冒泡和阻止默认事件
e.stuopPropagation() / e.preventDefault()
return false 既能阻止事件冒泡又能阻止默认事件

      $('#btn').on('click',function(e){
        //不想事件冒泡
        e.stopPropagation();//阻止事件冒泡
        e.preventDefault();
        alert('我是按钮');
      })