前端 -- 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>

    

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>

 

事件冒泡

• 冒泡的意思就是因为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>