jQuery特殊屬性操作

Class類操作

Class類方法和css方法作用相同，Class類樣式是針對內部和外部樣式表，css方法是針對行內樣式表

<script>
  $(function () {
    //1.添加類 addClass(類名);
    $('#addClass').click(function () {
      //1.1 給id爲div1的元素添加類.
      //添加單個類
      //$('#div1').addClass('fontSize30');
      //添加多個類.
      $('#div1').addClass('fontSize30 width200');
    });

    //2.移除類
    $('#removeClass').click(function () {
      //2.1 給id爲div1的元素移除類.
      //移除單個類
      //$('#div1').removeClass('fontSize30');
      //移除多個類
      //$('#div1').removeClass('fontSize30 width200');
      //移除所有的類
      $('#div1').removeClass();
    });

    //3.判斷類
    $('#hasClass').click(function () {
      //判斷一個元素有沒有某個類,如果有就返回true,如果沒有就返回false.
      console.log($('#div1').hasClass('fontSize30'));
    });


    //4.切換類（開關類）
    $('#toggleClass').click(function () {
      //如果元素有某個類就移除這個類, 如果元素沒有這類就添加這個類.
      $('#div1').toggleClass('fontSize30');
    });
  });
</script>

【案例-tab欄切換.html】
<script>
    $(function () {
        //需求:給tab欄的每一個li標籤設置鼠標移入事件: 當前li添加active類,其他的兄弟li移除active類.
        //    找到當前tab欄索引一致的div,讓他添加 selected類,其他的兄弟div移除selected類.

        //需求1
        $('.tab>.tab-item').mouseenter(function () {
            $(this).addClass('active').siblings('li').removeClass('active');

            //獲取鼠標當前移入的這個li標籤的索引
            var idx = $(this).index();

            //需求2:
            $('.products>.main').eq(idx).addClass('selected').siblings('div').removeClass('selected');
        });

    });
</script>

動畫方法：show/hide/toggle(顯示/隱藏/切換)，slideDown/slideUp/slideToggle(滑入/滑出/切換)，fadeIn/fadeOut/fadeToggle(淡入/淡出/切換)，stop清除動畫隊列(防止多次點擊動畫排隊情況)，animate(自定義動畫)

【顯示/隱藏/切換】
<script>
  $(function () {
    //1.顯示 show();
    //參數1:代表執行動畫的時長 毫秒數,也可以是代表時長的字符串 fast normal  slow
    //參數2:代表動畫執行完畢後的回調函數.
    $('#show').click(function () {
      //給id爲div1的元素動畫顯示.
      //1.1 如果show()這個方法沒有參數,那就沒有動畫效果.
      //$('#div1').show();
      //1.2 如果要想要動畫效果,就應該給他參數.
      //$('#div1').show(2000);
      $('#div1').show('fast'); //200毫秒
      //$('#div1').show('normal'); //400毫秒
      //$('#div1').show('slow'); //600毫秒
      //$('#div1').show('penglin'); //如果代表時長的單詞寫錯了,就相當於寫了一個normal
      //1.3 回調函數.
      // $('#div1').show(2000, function () {
      //   alert('動畫執行完畢了...');
      // })
    });


    //2.隱藏
    $('#hide').click(function () {
      //讓id爲div1的元素動畫影藏.
      //$('#div1').hide();//沒有參數沒有動畫效果.
      $('#div1').hide(2000);
      // $('#div1').hide(2000, function () {
      //   alert('隱藏了');
      // });
    });

    //3.切換 toggle
    //如果元素是隱藏狀態就動畫顯示; 如果元素是顯示狀態就動畫影藏.
    $('#toggle').click(function () {
      $('#div1').toggle(1000);
    });

  });
</script>
【滑入/滑出/切換】
<script>
  $(function () {
    //1.滑入 slideDown(參數1,參數2);
    //參數1: 動畫執行的時長
    //參數2: 動畫執行完畢後的回調函數
    $('#slideDown').click(function () {
      //讓id爲div1的元素滑入.
      //$('#div1').slideDown();//沒有給參數相當於給了一個默認的時長,mormal代表的400毫秒
      $('#div1').slideDown(2000);
      // $('#div1').slideDown(2000, function () {
      //   alert('滑入完成了..');
      // });
    });


    //2.滑出 slideUp();
    $('#slideUp').click(function () {
      //讓id爲div1的元素滑出
      $('#div1').slideUp(2000);
      // $('#div1').slideUp(2000, function () {
      //   alert('滑出做完了...');
      // });
    });

    //3.切換 slideToggle();
    //元素是隱藏狀態就滑入; 元素是顯示狀態就滑出.
    $('#slideToggle').click(function () {
      $('#div1').slideToggle(1000);
    });

  });
</script>
【清除動畫隊列】
<script>
  $(function () {
    //1.開始動畫:模擬一個動畫隊列
    $('#start').click(function () {
      $('div').slideDown(2000).slideUp(2000);
    });

    //2.停止動畫: 執行stop方法.
    //stop();
    // 第一個參數：是否清除隊列
    // 第二個參數：是否跳轉到最終效果
    $('#stop').click(function () {
      //$('div').stop(true,true);
      //$('div').stop(true,false);
      //$('div').stop(false,true);
      $('div').stop(false,false);

      //如果stop()方法不寫參數,默認就是兩個false.
      //$('div').stop();
    });

  });
</script>
【淡入/淡出/切換】
<script>
  $(function () {
    //1.淡入 fadeIn
    $('#fadeIn').click(function () {
      //讓id爲div1的這個元素淡入.
      //$('#div1').fadeIn(); //不給參數相當於給了一個默認的動畫時長,mormal400毫秒
      $('#div1').fadeIn(1000);
      // $('#div1').fadeIn(2000, function () {
      //   alert('淡入完成了...');
      // });
    });

    //2.淡出 fadeOut
    $('#fadeOut').click(function () {
      //讓id爲div1的這個元素淡出
      $('#div1').fadeOut(1000);
      // $('#div1').fadeOut(1000, function () {
      //   alert('淡出完成了');
      // });
    });


    //3.切換 fadeToggle
    $('#fadeToggle').click(function () {
      $('#div1').fadeToggle(1000);
    });


    //4.淡入到那裏 fadeTo
    $('#fadeTo').click(function () {
      $('#div1').fadeTo(1000,0.5);
    });

  });
</script>
【自定義動畫】
<script>
  $(function () {
    //自定義動畫 animate();
    //參數1:必選的 對象 代表的是需要做動畫的屬性
    //參數2:可選的 代表執行動畫的時長.
    //參數3:可選的 easing 代表的是緩動還是勻速 linear(勻速)  swing(緩動)   默認不寫是緩動
    //參數4:可選的 動畫執行完畢後的回調函數.
    $('#lr800').click(function () {

      //讓id爲div1的元素動畫移動到800那個位置.
      // $('#div1').animate({
      //   left:800,
      //   width:200,
      //   height:200,
      //   opacity:0.5
      // },2000,'linear', function () {
      //   alert('動畫執行完畢了');
      // });

      $('#div1').animate({
        left:800,
        width:200,
        height:200,
        opacity:0.5
      },2000,'linear', function () {
        //既然這裏是一個函數,那就可以寫任意的代碼,那就可以在這裏讓div1做動畫.
        $('#div1').animate({
          left:400,
          width:300,
          height:300,
          top:150,
          opacity:1
        },2000);
      });

      //讓id爲div2的元素動畫移動到800那個位置.
      // $('#div2').animate({
      //   left:800
      // },2000,'swing');
    });
  });
</script>

html()方法和$()動態創建元素以及添加節點的幾種方式，empty清空節點/remove移除節點，clone克隆節點

<script>
  $(function () {
    //原生js中創建節點: document.write();  innerHTML;  document.createElement();

    //jQuery中如何創建節點呢?
    //html();   $();


    //1.html();
    //設置或者獲取內容的.
    $('#btnHtml1').click(function () {
      //1.1 獲取內容: html()方法不給參數
      //獲取到元素的所有內容.
      // console.log($('#div1').html());

      //1.2 設置內容: html()方法給參數
      //會把原來的內容給覆蓋
      //如果設置的內容中包含了標籤,是會把標籤給解析出來的.
      $('#div1').html('我是設置的內容<a href="https://www.baidu.com">百度一下</a>');
    });


    //2.$();
    //確實能創建元素,但是創建的元素只存在於內存中,如果要在頁面上顯示,就要追加.
    $('#btn1').click(function () {
      var $link = $('<a href="http://news.baidu.com/">我是新聞</a>');
      //console.log($link);
      //追加節點.
      $('#div1').append($link);
    });


  });
</script>

<script>
  $(function () {
    //1.append()
    //父元素.append(子元素); //作爲最後一個子元素添加.
    $('#btnAppend').click(function () {
      //1.1 新創建一個li標籤,添加到ul1中的去.
      // var $liNew = $("<li>我是新創建的li標籤</li>");
      // $('#ul1').append($liNew);

      //1.2 把ul1中已經存在的li標籤添加到ul中去. 剪切後作爲最後一個子元素添加.
      // var $li3 = $('#li3');
      // $('#ul1').append($li3);

      //1.3 把ul2中已經存在的li標籤添加到ul1中去.剪切後作爲最後一個子元素添加.
      var $li32 = $('#li32');
      $('#ul1').append($li32);
    });


    //2.prepend();
    //父元素.prepend(子元素); //作爲第一個子元素添加.
    $('#btnPrepend').click(function () {
      //2.1 新建一個li標籤,添加到ul1中去.
      // var $liNew = $("<li>我是新創建的li標籤</li>");
      // $('#ul1').prepend($liNew);

      //2.1 把ul1中已經存在的li標籤添加到ul1中去. 剪切後作爲第一個子元素添加.
      // var $li3 = $('#li3');
      // $('#ul1').prepend($li3);

      //2.2 把ul2中已經存在的li標籤添加到ul1中去. 剪切後作爲第一個子元素添加.
      var $li32 = $('#li32');
      $('#ul1').prepend($li32);
    });


    //3.before()
    //元素A.before(元素B); //把元素B插入到元素A的前面,作爲兄弟元素添加
    $('#btnBefore').click(function () {
      //新建一個div
      var $divNew = $('<div>我是新建的div</div>');
      $('#ul1').before($divNew);
    });

    //4.after();
    //元素A.after(元素B); //把元素B插入到元素A的後面,作爲兄弟元素添加.
    $('#btnAfter').click(function () {
      //新建一個div
      var $divNew = $('<div>我是新建的div</div>');
      $('#ul1').after($divNew);
    });


    //5.appendTo();
    //子元素.appendTo(父元素); //把子元素作爲父元素的最後一個子元素添加.
    $('#btnAppendTo').click(function () {
      //5.1 新建一個li標籤,添加到ul1中去.
      var $liNew = $("<li>我是新創建的li標籤</li>");
      $liNew.appendTo($('#ul1'));

    });
  });
</script>

<script>
  //清空元素: empty();
  //移除節點: remove();
  $(function () {
    //給按鈕設置點擊事件.
    $('#btn').click(function () {
      //1.清空ul.
      //$('#ul1').html(""); //不推薦使用,有可能會造成內存泄漏,不安全.
      // $('#ul1').empty();//推薦使用.

      //2.移除某一個元素.
      // $('#li3').remove(); //"自殺"

      //3.移除ul.但是隻能獲取li3這個標籤.
      $('#li3').parent().remove();

    });
  });
</script>

<script>
  $(function () {
    //給id爲div1的這個元素添加一個點擊事件.
    $('#div1').click(function () {
      alert('哈哈,我被點擊了...');
    });


    //jQuery中克隆節點:clone()
    //只存在與內存中,如果要在頁面上顯示,就應該追加到頁面上.
    //clone()方法參數不管是true還是false,都是會克隆到後代節點的.
    //clone()方法參數是true表示會把事件一起克隆到. 參數如果是false就不會克隆事件. 不給參數默認是false.
    //給按鈕設置點擊事件
    $('#clone').click(function () {
      var $cloneDiv = $('#div1').clone();
      //修改克隆節點的id
      $cloneDiv.attr('id','div2');
      //console.log($cloneDiv);
      //把克隆的節點追加到body中.
      $('body').append($cloneDiv);
    });

  });
</script>

val方法

val方法用於設置和獲取表單元素的值，例如input、textarea的值

//設置值
$("#name").val(“張三”);
//獲取值
$("#name").val();

html方法與text方法

html方法相當於innerHTML text方法相當於innerText

//設置內容
$(“div”).html(“<span>這是一段內容</span>”);
//獲取內容
$(“div”).html()

//設置內容
$(“div”).text(“<span>這是一段內容</span>”);
//獲取內容
$(“div”).text()

區別：html方法會識別html標籤，text方法會那內容直接當成字符串，並不會識別html標籤。

width方法與height方法

設置或者獲取高度

//帶參數表示設置高度
$(“img”).height(200);
//不帶參數獲取高度
$(“img”).height();

獲取網頁的可視區寬高

//獲取可視區寬度
$(window).width();
//獲取可視區高度
$(window).height();

scrollTop與scrollLeft

設置或者獲取垂直滾動條的位置

//獲取頁面被捲曲的高度
$(window).scrollTop();
//獲取頁面被捲曲的寬度
$(window).scrollLeft();

【案例：仿騰訊固定菜單欄案例】【案例：小火箭返航案例】

offset方法與position方法

offset方法獲取元素距離document的位置，position方法獲取的是元素距離有定位的父元素的位置。

//獲取元素距離document的位置,返回值爲對象：{left:100, top:100}
$(selector).offset();
//獲取相對於其最近的有定位的父元素的位置。
$(selector).position();

【案例：固定頂部導航欄】

<script>
  $(function () {
    //思路:給頁面設置一個滾動事件,時刻監視頁面的scrollTop的值,
    // 如果這個值大於第一部分的高度,就設置第二部分爲固定定位.
    // 如果這個值小於第一部分的高度,就設置第二部分的定位還原.

    //計算第一部分的高度.
    var topHeight = $('.top').height();
    //計算第二部分的高度.
    var navHeight = $('.nav').height();

    //給頁面設置一個滾動事件.
    $(window).scroll(function () {
      //1.獲取頁面滾出去的距離(被捲曲出去的距離);
      var scrollTopValue =  $(window).scrollTop();
      //2.判斷,看scrollTopValue的值是不是大於第一部分的高度.
      if(scrollTopValue >= topHeight){
        //讓第二部分固定定位.
        $('.nav').css({
          position:'fixed',
          top:0,
          left:0
        });
        //設置第三部分的margin-top的值爲第二部分的高度.
        $('.main').css({
          marginTop:navHeight+10
        });
      }else {
        //讓第二部分定位還原.
        $('.nav').css({
          position:'static',
          top:0,
          left:0
        });
        //設置第三部分的margin-top的值爲原來的值.
        $('.main').css({
          marginTop:10
        });
      }
    });



  });
</script>

attr設置屬性或添加屬性和removeAttr移除屬性

<script>
  $(function () {
    //jQuery中操作屬性:attr() removeAttr();
    //1.設置屬性
    $('#btn2').click(function () {
      //設置單屬性.
      // $('img').attr('src','992.gif');//以前有src屬性,更改這個屬性.
      // $('img').attr('aaa','哈哈哈');//修改自定義屬性.
      // $('img').attr('bbb','bbb');//如果元素原來沒有這個屬性,那就是添加屬性.
      //設置多屬性.
      $('img').attr({
        src:'992.gif',
        aaa:"hahaha",
        bbb:'bbb'
      });
    });

    //2.獲取屬性.
    $('#btn1').click(function () {
      //console.log($('img').attr('src'));//自帶的屬性可以獲取
      //console.log($('img').attr('aaa'));//自定義的屬性也可以獲取
      console.log($('img').attr('bbb'));//如果沒有這個屬性,獲取到的值就是undefined; attr()設置的屬性也是可以獲取的.
    });

    //3.移除屬性.
    $('#btn3').click(function () {
      //移除單屬性.
      // $('img').removeAttr('alt');
      // $('img').removeAttr('aaa');
      // $('img').removeAttr('bbb');

      $('img').removeAttr('alt aaa bbb'); //移除多屬性.
    });

  });
</script>
【美女相冊】
<script>
  $(function () {
      //1.需求
      //給小圖片a標籤設置一個單擊事件.
      //讓id爲image的img標籤修改src屬性爲當前點擊的a標籤的href屬性的值
      //讓id爲des的這個p標籤的文本設置爲當前點擊的這個a標籤的title屬性的值.

      $('#imagegallery>li>a').click(function () {
          //獲取當前點擊的a標籤的href屬性的值和title屬性的值。
          var srcValue = $(this).attr('href');
          var contentValue = $(this).attr('title');
          //給img標籤的src屬性賦值，以及給p標籤的內容賦值。
          $('#image').attr('src',srcValue);
          $('#des').text(contentValue);
          //阻止a標籤的跳轉
          return false;
      });


  });
</script>

對於checked、selected、disabled這類boolean類型的屬性來說，不能用attr方法，只能用prop方法

<script>
  $(function () {
    //回憶一下，有一類屬性比如：checked，寫在元素的身上就表示選中，沒有寫在元素的身上就表示沒有選中。
    //這一類屬性，用原生js是如何操作的呢？ 給他設置true或者false, 取值也是得到true或者false.
    // document.getElementById("btn1").onclick = function () {
    //   //設置操作。
    //   //document.getElementById("ckb1").checked = false;
    //   //獲取操作。
    //   console.log(document.getElementById("ckb1").checked);
    // };

    //jQuery.
    // $('#btn1').click(function () {
    //   console.log($('#ckb1').attr('checked')); //無論是選中還是沒有選中，都返回一個undefined。
    // });

    //原因是：
    //在jQuery1.6之後，對於checked、selected、disabled這類boolean類型的屬性來說，不能用attr方法，只能用prop方法。

     $('#btn1').click(function () {
       console.log($('#ckb1').prop('checked'));
       //如果多選框是選中狀態返回一個true； 如果多選框是取消選中狀態那返回就是一個false.
     });
  });
</script>
【案例：多選框全選】
<script>
  $(function () {
      //需求1:上面的多選框選中,下面的多選框們跟着選中,上面的多選框沒有選中,下面的多選框們跟着不選中.
      //需求2:下面的多選框們,都有單擊事件:
      //如果下面的多選框們都選中了,那麼上面的那個多選框跟着選中,如果下面多選框有一個沒有選中,那麼上面的多選框就不選中.

      //需求1：
      $('#j_cbAll').click(function () {
          //獲取這多選框的checked值。
          var checkedValue = $(this).prop('checked');
          //console.log(checkedValue);
          //讓下面的多選框們的checked跟隨這個checkedValue
          $('#j_tb input').prop('checked',checkedValue);
      });

      //需求2：
      $('#j_tb input').click(function () {
          //判斷下面的那四個多選框是否都被選中了。
          var numOfAll = $('#j_tb input').length; //獲取到下面所有多選框的個數。
          var numOfSelect = $('#j_tb input:checked').length; //獲取到下面被選中的多選框的個數。
          console.log(numOfAll + ":" + numOfSelect);
          //判斷
          // if(numOfAll == numOfSelect){
          //     //全部被選中。
          //     $('#j_cbAll').prop('checked',true);
          // }else {
          //     //有的有沒選中。
          //     $('#j_cbAll').prop('checked',false);
          // }

          //上面這個判斷其實可以優化。
          $('#j_cbAll').prop('checked',numOfAll == numOfSelect);
      });

  });
</script>

jQuery事件機制

JavaScript中已經學習過了事件，但是jQuery對JavaScript事件進行了封裝，增加並擴展了事件處理機制。jQuery不僅提供了更加優雅的事件處理語法，而且極大的增強了事件的處理能力。

jQuery事件發展歷程(瞭解)

簡單事件綁定>>bind事件綁定>>delegate事件綁定>>on事件綁定(推薦)

簡單事件註冊

click(handler)          單擊事件
mouseenter(handler)     鼠標進入事件
mouseleave(handler)     鼠標離開事件

特點：不支持同時註冊,也不支持動態註冊.

   //jQuery註冊事件的發展歷程. (瞭解)

    //1.簡單事件綁定 click();
     $('div').click(function () {
       console.log("鼠標單擊事件");
     });
     $('div').mouseenter(function () {
       console.log("鼠標移入事件...");
     });

bind方式註冊事件

//第一個參數：事件類型
//第二個參數：事件處理程序
$("p").bind("click mouseenter", function(){
    //事件響應方法
});

特點：支持同時註冊,也不支持動態註冊.

    //2. bind方式註冊事件
    //支持同時註冊,也不支持動態註冊.
     $('div').bind({
       mouseenter: function () {
         console.log("鼠標移入事件...");
       },
       click: function () {
         console.log("鼠標單擊事件");
       }
    });

delegate註冊委託事件

// 第一個參數：selector，要綁定事件的元素
// 第二個參數：事件類型
// 第三個參數：事件處理函數
$(".parentBox").delegate("p", "click", function(){
    //爲 .parentBox下面的所有的p標籤綁定事件
});

特點：支持同時註冊,也不支持動態註冊.，只能註冊委託事件，因此註冊時間需要記得方法太多了

    //3.delegate註冊委託事件-原理是事件冒泡.
    //支持同時註冊,也支持動態註冊.
     $('body').delegate('div',{
       mouseenter: function () {
         console.log("鼠標移入事件");
       },
       click: function () {
         console.log("鼠標單擊事件");
       }
     });

on註冊事件

on註冊事件(重點)

jQuery1.7之後，jQuery用on統一了所有事件的處理方法。上面的三種註冊綁定事件方式都不用了！

最現代的方式，兼容zepto(移動端類似jQuery的一個庫)，強烈建議使用。

on註冊簡單事件（特點：支持同時註冊，不支持動態註冊.）

// 表示給$(selector)綁定事件，並且由自己觸發，不支持動態綁定。
$(selector).on( "click", function() {});

on註冊委託事件（特點：支持同時註冊，支持動態註冊.）

// 表示給$(selector)綁定代理事件，當必須是它的內部元素span才能觸發這個事件，支持動態綁定
$(selector).on( "click",“span”, function() {});----->原理：將span的點擊事件委託給selector代理
效果：點擊span會觸發函數

on註冊事件的語法：

// 第一個參數：events，綁定事件的名稱可以是由空格分隔的多個事件（標準事件或者自定義事件）
// 第二個參數：selector, 執行事件的後代元素（可選），如果沒有後代元素，那麼事件將有自己執行。
// 第三個參數：data，傳遞給處理函數的數據，事件觸發的時候通過event.data來使用（不常使用）
// 第四個參數：handler，事件處理函數
$(selector).on(events[,selector][,data],handler);

事件解綁

unbind方式（不用）

$(selector).unbind(); //解綁所有的事件
$(selector).unbind("click"); //解綁指定的事件

undelegate方式（不用）

$( selector ).undelegate(); //解綁所有的delegate事件
$( selector).undelegate( “click” ); //解綁所有的click事件

off方式（推薦）

// 解綁匹配元素的所有事件
$(selector).off();
// 解綁匹配元素的所有click事件
$(selector).off("click");

觸發事件

$(selector).click(); //觸發 click事件
$(selector).trigger("click");

滿足條件才觸發事件：

    $('#btn2').on('click', function () {
      var res = confirm('請問林哥帥嗎');
      if(res){
        //觸發自定義的linge事件.
        $('#one').trigger('linge');
      }
    });

jQuery事件對象

jQuery事件對象其實就是js事件對象的一個封裝，處理了兼容性。

//screenX和screenY   對應屏幕最左上角的值
//clientX和clientY   距離頁面左上角的位置（忽視滾動條）
//pageX和pageY   距離頁面最頂部的左上角的位置（會計算滾動條的距離）

//event.keyCode 按下的鍵盤代碼
//event.data    存儲綁定事件時傳遞的附加數據

//event.stopPropagation()   阻止事件冒泡行爲
//event.preventDefault()    阻止瀏覽器默認行爲
//return false:既能阻止事件冒泡，又能阻止瀏覽器默認行爲。

【案例：鋼琴版導航（加強）.html】

<script>
  $(function () {

      //獲取div
      var $div = $('#bgChange');
      //獲取顯示按鍵的span
      var $showCode = $('#keyCodeSpan');

      //給頁面註冊一個鍵盤按下事件.
      $(document).on('keydown', function (e) {
          //console.log(e.keyCode); //r 82   g 71   b 66   p 80   y 89
          switch (e.keyCode){
              case 82:
                  $div.css('backgroundColor','red');
                  $showCode.text(82);
                  break;
              case 71:
                  $div.css('backgroundColor','green');
                  $showCode.text(71);
                  break;
              case 66:
                  $div.css('backgroundColor','blue');
                  $showCode.text(66);
                  break;
              case 80:
                  $div.css('backgroundColor','purple');
                  $showCode.text(80);
                  break;
              case 89:
                  $div.css('backgroundColor','yellow');
                  $showCode.text(89);
                  break;
              default :
                  $div.css('backgroundColor','pink');
                  $showCode.text("查無此鍵");
                  break;
          }
      });

  });
</script>

jQuery補充知識點

鏈式編程

通常情況下，只有設置操作才能把鏈式編程延續下去。因爲獲取操作的時候，會返回獲取到的相應的值，無法返回 jQuery對象。

end(); // 篩選選擇器會改變jQuery對象的DOM對象，想要回復到上一次的狀態，並且返回匹配元素之前的狀態。

1.什麼時候可以鏈式編程?
如果給元素調用一個方法,這個方法有返回值,並且返回的是一個jQuery對象,那就可以繼續再點出jQuery方法.
//$('div').width(100).height(100).css('backgroundColor','red');

2.必須是jQuery對象才能點出jQuery方法.
console.log($('div').width(100).width()); 100
//$('div').width(100).width().height(100); 報錯了,因爲數值不能點出jQuery方法.

3.有些時候我們一個方法返回的確實是一個jQuery對象
但是這個對象又不是我們想要的對象,那這個時候就不要再繼續點下去了..

4.end(); 回到上一個狀態.
//$(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx);

5.end()方法他也是jQuery方法,那他也需要一個jQuery對象才能點出了啊,
width()方法返回的是一個數值, 數值能點出end()方法來嗎? 顯然不行.
//$('div').width(100).width().end().height(100); 不行

【案例：五角星評分案例.html】

<script>
   $(function () {
     //需求1:鼠標移入到li標籤上,當前li標籤和他之前的li標籤顯示實心五角心,後面的li顯示空心五角心.
     //需求2:鼠標離開li,所有的li都變成空心.
     //需求3:點擊li,鼠標離開後,剛纔點擊的那個li和之前的li都變成實心五角心,後面空心五角心.

     //prev();    上一個兄弟.
     //prevAll(); 之前所有的兄弟
     //next();    下一個兄弟.
     //nextAll(); 之後所有的兄弟

     //聲明兩個個變量,分別記錄這個實心/空心五角心.
     var sx_wjx = '★';
     var kx_wjx = '☆';

     //需求1:
     $('.comment>li').on('mouseenter', function () {
       // //當前鼠標移入的li和他之前的兄弟li都顯示實心五角心.
       // $(this).text(sx_wjx).prevAll().text(sx_wjx);
       // //當前鼠標移入的li之後的兄弟li都顯示空心五角心.
       // $(this).nextAll().text(kx_wjx);

       //這樣不行.
       //$(this).text(sx_wjx).prevAll().text(sx_wjx).nextAll().text(kx_wjx);

       //這樣又可行, 加了一個end();
       $(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx);

     }).on('mouseleave', function () {
       //需求2:
       $('.comment>li').text(kx_wjx);

       //獲取剛纔點擊的那個li.
       $('.comment>li[clickCurrent]').text(sx_wjx).prevAll().text(sx_wjx);

     }).on('click', function () {
       //需求3:
       //給鼠標當前點擊的li做一個記號,爲什麼要做一個記號,是因爲鼠標離開的時候,要知道你剛纔點擊的是哪一個li.
       //給當前鼠標點擊的這個li添加一個獨一無二的屬性.
       $(this).attr('clickCurrent','current').siblings().removeAttr('clickCurrent');
     });


   });
</script>

each方法

jQuery的隱式迭代會對所有的DOM對象設置相同的值，但是如果我們需要給每一個對象設置不同的值的時候，就需要自己進行迭代了。

作用：遍歷jQuery對象集合，爲每個匹配的元素執行一個函數

// 參數一表示當前元素在所有匹配元素中的索引號
// 參數二表示當前元素（DOM對象）
$(selector).each(function(index,element){});

【案例：不同的透明度.html】

<script>
  $(function () {
    //需求:找到所有的li標籤,分別設置透明度,透明度是遞增到1.

    //1.獲取所有的li標籤.
    var $lis = $('#ulList').children();
    //console.log($lis);

    //2.給$lis裏面的每一個li標籤設置透明度.
    //$lis.css('opacity',0.5);//如果這樣設置的話,由於隱式迭代那每一個li標籤的透明度都設置成了0.5,不符合需求.

    //給每一個對象設置不同的值的時候
    //作用：遍歷jQuery對象集合，爲每個匹配的元素執行一個函數
    $lis.each(function (index,element) {
      // console.log(index); //每一個li標籤的索引
      // console.log(element);//每一個li標籤,是一個dom對象.

      $(element).css('opacity',(index+1)/10);
    });

  });
</script>

多庫共存

jQuery使用$作爲標示符，但是如果與其他框架中的$衝突時，jQuery可以釋放$符的控制權.

var c = $.noConflict();//釋放$的控制權,並且把$的能力給了c

<script src="heima.js"></script>
<script src="jquery-1.12.4.js"></script>
<script src="jquery-3.0.0.js"></script>

<script>
  //1.如何查看jQuery的版本?
  //通過jQuery文件名來查看jQuery的版本是不靠譜的做法.
  //通過以下四種方式可以查看jQuery的版本.
  // console.log(jQuery.fn.jquery);
  // console.log(jQuery.prototype.jquery);
  // console.log($.fn.jquery);
  // console.log($.prototype.jquery);


  //2.如果引入了多個jQuery文件. 那使用的$是哪一個jQuery文件中的呢?
  //那個文件後引入,使用的$就是誰的.
  //console.log($.fn.jquery);


  //3.多庫共存
  // var _$ =  $.noConflict(); //3.0.0版本jQuery文件把$符號的控制權給釋放了.
  //
  // (function ($) {
  //   //在這個自執行函數中,就可以繼續使用$了.
  // }(_$));
//
  // console.log(_$.fn.jquery);//3.0.0
  // console.log(jQuery.fn.jquery);//3.0.0
  // console.log($.fn.jquery);//1.12.4



  //4.多庫共存2
  //console.log($.fn.jquery);
  var _$300 = $.noConflict(); //3.0.0版本的jQuery把$的控制權給釋放了

  var _$1124 = $.noConflict(); //1.12.4版本的jQuery把$的控制權給釋放了

  console.log($);
  console.log(_$1124.fn.jquery);
  console.log(_$300.fn.jquery);


</script>

C-A-L-D

發佈了108 篇原創文章 · 獲贊 31 · 訪問量 9295

私信關注

jQuery（二）——特殊屬性操作及事件

jQuery特殊屬性操作

Class類操作

動畫方法：show/hide/toggle(顯示/隱藏/切換)，slideDown/slideUp/slideToggle(滑入/滑出/切換)，fadeIn/fadeOut/fadeToggle(淡入/淡出/切換)，stop清除動畫隊列(防止多次點擊動畫排隊情況)，animate(自定義動畫)

html()方法和$()動態創建元素以及添加節點的幾種方式，empty清空節點/remove移除節點，clone克隆節點

val方法

html方法與text方法

width方法與height方法

scrollTop與scrollLeft

offset方法與position方法

attr設置屬性或添加屬性和removeAttr移除屬性

對於checked、selected、disabled這類boolean類型的屬性來說，不能用attr方法，只能用prop方法

jQuery事件機制

jQuery事件發展歷程(瞭解)

on註冊事件(重點)

事件解綁

觸發事件

jQuery事件對象

jQuery補充知識點

鏈式編程

each方法

多庫共存

PDManer [元數建模]-v4.9.0 發佈：一款簡單好用的數據庫建模平臺

使用neovim打造go ide(支持代碼跳轉, 代碼補全, 實時語法檢查)

sql求連續值問題

cs01 CSS Syntax

挑戰程序設計競賽 2.3章習題 poj 3046 Ant Counting

[MASM拾遺]Offset僞指令

h30 HTML Layout Elements

瞭解顯卡

一款基於C#開發的通訊調試工具（支持Modbus RTU、MQTT調試）

Linux/Golang/glibC系統調用

每日更新收藏文章目錄

JavaScript面試自我補充

前端面試題：JavaScript

Vue全掌握二——命令行工具 (CLI——Vue腳手架)

前端面試刷題（牛客）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

jQuery（ 二）——特殊屬性操作及事件

jQuery特殊屬性操作

Class類操作

動畫方法：show/hide/toggle(顯示/隱藏/切換)，slideDown/slideUp/slideToggle(滑入/滑出/切換)，fadeIn/fadeOut/fadeToggle(淡入/淡出/切換)，stop清除動畫隊列(防止多次點擊動畫排隊情況)，animate(自定義動畫)

html()方法和$()動態創建元素以及添加節點的幾種方式，empty清空節點/remove移除節點，clone克隆節點

val方法

html方法與text方法

width方法與height方法

scrollTop與scrollLeft

offset方法與position方法

attr設置屬性或添加屬性和removeAttr移除屬性

對於checked、selected、disabled這類boolean類型的屬性來說，不能用attr方法，只能用prop方法

jQuery事件機制

jQuery事件發展歷程(瞭解)

on註冊事件(重點)

事件解綁

觸發事件

jQuery事件對象

jQuery補充知識點

鏈式編程

each方法

多庫共存

jQuery（二）——特殊屬性操作及事件