前端 -- jQuery

jQuery引入

• 下载连接: [jQuery官网](https://jquery.com/)，首先须要下载这个jQuery的文件，而后在HTML文件中引入这个文件，就可使用这个文件中帮咱们提供的jquery的接口了。

• 引入: <script src = 'jquery.js'> </script>

jQuery对象和dom对象

• jQuery找到的对象称为 --> jQuery对象

• 原生js找到的标签称为 --> dom对象

• dom对象只能使用dom对象的方法,不能使用jquery对象的方法,jquery对象也是,它不能使用dom对象的方法

• dom对象和jquery对象互相转换:

  • jquery对象转dom对象 -- jquery对象[0] 示例: $('#d1')[0]

  • dom对象转jquery对象 -- $(dom对象)

 

jQuery选择器

基本选择器(同css同样)

• 无论找什么标签，用什么选择器，都必需要写$("")，引号里面再写选择器，经过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫作DOM对象

• 经过 .text() 能够拿到标签里面的文本内容

1. id选择器

   • $("#id值")

2. 标签选择器

   • $("标签名")

3. class选择器

   • $(".类名")

4. 配合使用

   • $("div.c1") 找到有c1 class类的div 标签

5. 全部元素选择器

   • $("*")

6. 组合选择器

   • $("#id, .className, tagName")

7. 层级选择器

   • x和y能够为任意选择器

   • $("x y"); x的全部后代y（子子孙孙）

   • $("x > y"); x的全部儿子y（儿子）

   • $("x + y"); 找到全部紧挨在x后面的y(一个)

   • $("x ~ y"); x以后全部的兄弟y

• 选择器找到的多是多个标签,会放到数组里面,但仍是jquery对象,可以直接使用jquery的方法,意思是找到的全部标签进行统一设置,若是要单独设置选中的全部标签中的某个标签,能够经过索引取值的方式找到,而后注意,经过索引取值拿到的标签,是个dom对象

基本筛选器(选择以后进行过滤)

<ul>
    <li id="1">南山</li>
    <li id="2">
        <a href="">百度</a>
        宝安
    </li>
    <li id="3">坪山</li>
    <li id="4">罗湖</li>
    <li id="5">
        <a href="">华为</a>
        福田
    </li>
    <li id="6">龙岗</li>
</ul>
​
:first  -- 示例:$('li:first')  // 第一个
:last       // 最后一个
:eq(index)  // 索引等于index的那个元素
:even  　　　// 匹配全部索引值为偶数的元素，从 0 开始计数
:odd        // 匹配全部索引值为奇数的元素，从 0 开始计数
:gt(index)     // 匹配全部大于给定索引值的元素
:lt(index)     // 匹配全部小于给定索引值的元素
:not(选择器)    // 排除全部知足not条件的标签
:has(选择器)    // --$('li:has(.c1)')  找到后代中含有知足has里面选择器的那个标签
:not(:has(.c1)) -- $('li:not(:has(.c1))') 排除后代中含有知足has里面选择器的那个标签

 

属性选择器

• [attribute = value] 属性等于

• [attribute != value] 属性不等于

  // 示例,多用于input标签
  <input type="text">
  <input type="password">
  <input type="checkbox">
  $("input[type='checkbox']");  // 取到checkbox类型的input标签
  $("input[type!='text']");     // 取到类型不是text的input标签

   

表单筛选器

• 多用于找form表单里面出现的input标签,固然经过属性选择器找确定没有问题的,这样就是写着简单一点

  找到的是type属性为这个值的input标签中
  :text
  :password
  :file
  ​
  :radio
  :checkbox
  ​
  :submit
  :reset
  :button
  ​
  // 例子:
  $(":checkbox")  // 找到全部的checkbox

   

表单对象属性筛选器

• :enabled 可用的标签

• :disabled 不可用的标签

• :checked 选中的input标签

• :selected 选中的option标签

  // 找到可用的input标签
  <form>
    <input name="email" disabled="disabled" />
    <input name="id" />
  </form>
  ​
  $("input:enabled")  // 找到可用的input标签
  ​
  // 找到被选中的option：
  <select id="s1">
    <option value="beijing">北京市</option>
    <option value="shanghai">上海市</option>
    <option selected value="guangzhou">广州市</option>
    <option value="shenzhen">深圳市</option>
  </select>
  ​
  $(":selected")  // 找到全部被选中的option

   

筛选器方法

• 选择器或者筛选器选择出来的都是对象，而筛选器方法其实就是经过对象来调用一个进一步过滤做用的方法，写在对象后面加括号，再也不是写在选择器里面的了。

• 下一个元素

  $('#l3').next();  找到下一个兄弟标签
  $('#l3').nextAll(); 找到下面全部的兄弟标签
  $('#l3').nextUntil('#l5');  直到找到id为l5的标签就结束查找，不包含它

   

• 上一个元素

  $("#id").prev()   找到上一个兄弟标签
  $("#id").prevAll()  找到上面全部的兄弟标签
  $("#id").prevUntil("#i2") 直到找到id为i2的标签就结束查找，不包含它

   

• 父亲元素

  $("#id").parent()   // 查找一级父类                   
  $("#id").parents()  // 查找当前元素的全部的父辈元素（爷爷辈、祖先辈都找到）       
  $("#id").parentsUntil('body') // 查找当前元素的全部的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器均可以放到这里面使用。 

            

• 儿子和兄弟元素

  $('ul').children();       // 找全部的儿子们标签
  $('ul').children('#l3');  // 找到符合后面这个选择器的儿子标签
  ​
  $('#l5').siblings();      // 找到全部的兄弟们标签,不包含本身
  $('#l5').siblings('#l3'); // 找到符合后面这个选择器的兄弟标签

   

• 查找

  • 搜索全部与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法

  • $("div").find("p") 找到div后代中的p标签,至关于 `$('div p')

• 筛选

  • 筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式

    $("div").filter(".c1")  // 从结果集中过滤出有c1样式类的，从全部的div标签中过滤出有class='c1'属性的div，和find不一样，find是从div标签的子子孙孙中找到一个符合条件的标签 等价于 $("div.c1")--> 找到类值等于c1的div标签
    .first() // 获取匹配的第一个元素
    .last()  // 获取匹配的最后一个元素
    .not()   // 从匹配元素的集合中删除与指定表达式匹配的元素$('li').not('#l3');
    .has()   // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
    .eq()    // 索引值等于指定值的元素

     

标签操做

样式操做

1. 样式类操做

   • addClass(); 添加指定的css类名

   • removeClass(); 移除指定的css类名

   • hasClass(); 判断样式是否存在

   • toggleClass(); 切换css类名,有就移除没有就添加

     示例代码
         $('.c1').addClass('c2');
         $('.c1').removeClass('c2');
         $('.c1').hasClass('c2');
         $('.c1').toggleClass('c2');

      

2. css样式

   • 原生js: 标签.style.color = 'red';

   • jquery: $('.c1').css('background-color','red')

     同时设置多个css样式:
     $('.c1').css({'background-color':'red','width':'200px'})

3. 位置操做

   • position() 查看相对位置,不能设置位置

   • offset() 查看距离窗口左上角的绝对位置

     查看位置:
      $('.c2').position();  //查看相对位置 
      $('.c2').offset();    //查看距离窗口左上角的绝对位置
     设置位置:
      $('.c2').offset({'top':'20','left':'40'});

4. jQuery绑定点击事件的写法

   //原生js绑定点击事件:
       $('.c1')[0].onclick = function(){
           this.style.background = 'red';
       }
   ​
   // jquery绑定点击事件
       $('.c1').click(function () {
           $(this).css('background-color','green');
       })

    

5. $(window).scrollTop() // 滚轮向下移动的距离

   $(window).scrollLeft() // 滚轮向右移动的距离

   // 滚动事件.监听滚动事件来显示或者隐藏标签
   ​
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <style>
           .c1{
               background-color: green;
               height: 4000px;
               width: 100px;
           }
           .s1{
               position: fixed;
               left:20px;
               bottom:20px;
               height: 30px;
               width: 70px;
               background-color: black;
               text-align: center;
               line-height: 30px;
           }
           .s1 a{
               color: white;
               font-size: 14px;
               text-decoration: none;
           }
           .hide{
               display: none;   // 隐藏标签
           }
       </style>
   </head>
   <body>
       <span>顶部位置</span>
       <div class="c1"></div>
       <span class="s1 hide">
           <a href="#top">回到顶部</a>
           // <span>返回顶部</span>
       </span>
       <script src="jqu.js"></script>
       <script>
           $(window).scroll(function () {
               console.log($(window).scrollTop());
               if ($(window).scrollTop()>200){  
                   $('.s1').removeClass('hide') // 当滑动的距离超过200的时候,就显示标签
               }else{
                   $('.s1').addClass('hide')
               }
           })
   ​
       // 回到顶部,scrollTop设置值
       // $('.s1').click(function(){
       //     $(window).scrollTop(0)
       // })
       </script>
   </body>
   </html>

   View Code

    

6. 尺寸

   $('.c1').height();      //content 高度
   $('.c1').width();       //content 宽度
   $('.c1').innerHeight(); //content高度+padding高度
   $('.c1').innerWidth();  //content宽度+padding宽度
   $('.c1').outerHeight(); //content高度+padding高度 + border高度
   $('.c1').outerWidth();  //content宽度+padding宽度+ border宽度

    

文本操做

• html() 取得第一个匹配元素的html内容，包含标签内容

• html(val) 设置全部匹配元素的html内容，识别标签，可以表现出标签的效果

• text() 取得全部匹配元素的内容，只有文本内容，没有标签

• text(val) 设置全部匹配元素的内容，不识别标签，将标签做为文本插入进去

  $('.c1').html('<h1>你好</h1>');  // 将你好插入文本中
  $('.c1').text('<h1>你好</h1>');   // 没法识别标签,因此将标签做为文本插入进去

   

值操做

获取值

input type='text'的标签--$('#username').val();
    input type='radio'标签获取被选中的标签的值 --- $(':radio:checked').val();
    input type='checkbox'标签获取被选中的标签的值 --- 直接$(':checkbox:checked').val();是不行的,只会拿到一个值,须要循环取值  
        var d = $(':checkbox:checked');
        for (var i=0;i<d.length;i++){
            console.log(d.eq(i).val());
        }
        
    单选select --- $('#city').val();  拿到value设置的值
    多选select --- $('#author').val(); // ["2", "3"]  

 

​
设置值

input type='text'的标签 --- $('#username').val('李杰');
    input type='radio'标签 ---  $('[name="sex"]').val(['3']);
            若是 $('[name="sex"]').val('3'),全部标签的值都变成了'3';
    input type='checkbox'设置值 --- $('[name="hobby"]').val(['2','3'])
    单选select --- $('#city').val('1');  option value='1'
    多选select --- $('#author').val(['2','3'])

 

属性操做

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为全部匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为全部匹配元素设置多个属性值
removeAttr(attrName)// 从每个匹配的元素中删除一个属性

 

​

示例:
    设置单个属性
        $('.c1').attr('xx','oo');
    设置多个属性
        $('.c1').attr({'age':'18','sex':'alex'});
    查看属性
        $('.c1').attr('属性名');
        $('.c1').attr('xx');
    删除属性
        $('.c1').removeAttr('xx');
​
prop -- 针对的是checked\selected\disabled..
​
查看标签是否有checked属性,也就是是否被选中
        attr $(':checked').attr('checked'); //checked --没被选中: undefined
        prop $(':checked').prop('checked'); //true  -- 没被选中 : false
        
        经过设置属性的方式来设置是否选中:
            $(':radio').eq(2).prop('checked',true);  true和false不能加引号
            $(':radio').eq(2).prop('checked',false);
​
简单总结:
    1.对于标签上有的能看到的属性和自定义属性都用attr
    2.对于返回布尔值的好比checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
    具备 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其余的使用 attr()

 

文档处理

添加到指定元素内部的后面
    $(A).append(B)     // 把B追加到A
    $(B).appendTo(A)   // 把B追加到A
    // 添加字符串照样能识别标签  *****
    $('#d1').append('<a href="http://www.jd.com">京东</a>');
​
添加到指定元素内部的前面
    $(A).prepend(B)    // 把B前置到A
    $(B).prependTo(A)  // 把B前置到A
    示例
        $('a').prependTo($('div'));
​
添加到指定元素外部的后面
    $(A).after(B)        // 把B放到A的后面
    $(B).insertAfter(A)  // 把B放到A的后面
​
添加到指定元素外部的前面
    $(A).before(B)         // 把B放到A的前面
    $(B).insertBefore(A)   // 把B放到A的前面
    
移除和清空元素
    remove()    // 从DOM中删除全部匹配的元素,包括本身也删除
    empty()     // 删除匹配的元素集合中全部的子节点，包括文本被所有删除，可是匹配的元素还在
    $('div').remove();   // 清空包括div本身的数据
    $('div').empty();    // 清空div标签里面的数据
​
替换
    replaceWith()
    replaceAll()
    示例:
        var a = document.createElement('a')
        a.href = 'http://www.baidu.com';
        a.innerText = 'xxx';
        
        $('span').replaceWith(a);  // 用a标签替换span标签
        $(a).replaceAll('span');   // 用a标签替换span标签
        
clone()克隆
    <button class="btn">屠龙宝刀,点击就送!</button> 
​
    $('.btn').click(function () {
        // var a = $(this).clone();   // 克隆标签
        var a = $(this).clone(true);  // 括号内加一个true,连带事件一块儿克隆
        $(this).after(a);
​
    })

 

事件

事件绑定方式

<script>
    // 方式一
    $('.c1').click(function () {
        $(this).css({'background-color':'purple'})
    })
​
    // 方式二
    $('.c1').on('click',function () {
        $(this).css({'background-color':'purple'})
    })
</script>

 

经常使用事件

click  左键点击事件
    //获取光标触发的事件
    $('[type="text"]').focus(function () {
        $('.c1').css({'background-color':'black'});
    });
    //失去光标(焦点)触发的事件
    $('[type="text"]').blur(function () {
        $('.c1').css({'background-color':'purple'});
    });
​
    //域内容发生改变时触发的事件
    $('select').change(function () {
        $('.c1').toggleClass('cc');
    });
​
    //鼠标悬浮触发的事件
    // $('.c1').hover(
    //     //第一步:鼠标放上去
    //     function () {
    //         $(this).css({'background-color':'blue'});
    //     },
    //     //第二步,鼠标移走
    //     function () {
    //         $(this).css({'background-color':'yellow'});
    //     }
    // )
​
    // 鼠标悬浮  等同于hover事件
    // 鼠标进入
    // $('.c1').mouseenter(function () {
    //     $(this).css({'background-color':'blue'});
    // });
    // 鼠标移出
    //  $('.c1').mouseout(function () {
    //     $(this).css({'background-color':'yellow'});
    // });
    
    // $('.c2').mouseenter(function () {
    //     console.log('啦啦啦啦');
    // });
    // 鼠标悬浮事件
    // $('.c2').mouseover(function () {
    //     console.log('啦啦啦啦');
    // });
    // mouseover 和 mouseenter的区别是：mouseover事件是若是该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mmouseenter事件无论有没有子标签都只触发一次，表示鼠标进入这个对象
​
​
//键盘按下触发的事件  e\event事件对象
    $(window).keydown(function (e) {
        // console.log(e.keyCode); //每一个键都有一个keyCode值,经过不一样的值来触发不一样的事件
        if (e.keyCode === 37){
            $('.c1').css({'background-color':'red'});
        }else if(e.keyCode === 39){
            $('.c1').css({'background-color':'green'});
        }
        else {
            $('.c1').css({'background-color':'black'});
        }
    })
    // 键盘抬起触发的事件
    $(window).keyup(function (e) {
        console.log(e.keyCode);
    })
​
    
    input事件:
        22期百度:<input type="text" id="search">
        <script src="jquery.js"></script>
        <script>
            $('#search').on('input',function () {
                console.log($(this).val());
            })
​
        </script>

View Code

 

事件冒泡

• 冒泡的意思就是由于html能够嵌套，若是你给儿子标签绑定了点事件或者没有绑定点击事件，父级标签绑定了点击事件，那么你一点击子标签，无论子标签有没有绑定事件，都会触发父级标签的点击事件，若是有，会先触发子标签的点击事件，而后触发父级标签的点击事件，无论子标签有没有点击事件，都会一级一级的还往上找点击事件

<style>
    #d1{
        background-color: red;
        height: 200px;
    }
    #d2{
        background-color: green;
        height: 100px;
        width: 100px;
    }
</style>
​
<div id="d1">
    <div id="d2"></div>
</div>
<script src="jquery.js"></script>
<script>
    $('#d1').click(function () {
        alert('父级标签');
    });
    $('#d2').click(function () {
        alert('子级标签');
    });
</script>

 

阻止后续事件发生

    $('#d1').click(function () {
        alert('父级标签');
    });
    $('#d2').click(function (e) {
        alert('子级标签');
        return false;
        // e.stopPropagation();
    });

 

事件委托

• 事件委托是经过事件冒泡的原理.利用父级标签捕获子标签的事件,将将来添加进来的某些子标签自动绑定上事件

  <div id="d1">
      <button class="c1">xin</button>
  </div>
  ​
  <script src="jqu.js"></script>
  ​
  <script>
      // 将button按钮选择器选中的标签的点击事件委托给了$('#d1')
      $('#d1').on('click','.c1',function () {
          alert('未成年禁入');
          var btn = document.createElement('button');
          $(btn).text('xin');
          $(btn).addClass('c1');
          console.log(btn);
          console.log($(this));  // this仍是点击的那个button按钮
          $('#d1').append(btn)   // 添加到div标签里面的后面
      })
  </script>