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