jQuery API 的特點

jQuery API 的特點


  jQuery API 的三大特點

 1. jQuery 對象是一個類數組對象,API自帶遍歷效果

  - 對 jQuery 對象調用一次API,等效於對 jQuery 對象中的每一個元素分別調用一次 API

  - 例如:$(...).css();

<p id="p1">我是p1元素</p>
<p id="p2">我是p2元素</p>
<p id="p3">我是p3元素</p>
<script src="js/jquery-3.3.1.js"></script>
<script>
    /* 修改所有的p元素中文本的顏色 */
    // 核心 DOM
    // var ps = document.getElementsByTagName("p")
    // for (var i = 0; i < ps.length; i++) {
    //     ps[i].style.color = "#f00";
    // }
    // jquery方法
    var $ps =$("p");
    $ps.css("color","#00f")

</script>

   

 

2. 鏈式操作

  - 幾乎每個API都返回當前正在操作的jQuery對象本身,一個API調用完畢後可直接在後面繼續另一個API。

  - 例如:$(...).css().attr().html();

<div id="d1" title="第一個div">我是第一個div</div>
<div id="d2" title="第二個div">我是第二個div</div>
<script src="js/jquery-3.3.1.js"></script>
<script>
    /*修改文本顏色和title屬性值*/
    // 核心 dom
    var d1 = document.getElementById("d1");
    d1.style.color = "#f00";
    d1.title = "修改後的title";  //HTML DOM
    d1.setAttribute("title","修改後的title1") // 核心 DOM

    // jquery
    // $("d2").css("color","#00f");
    // $("d2").attr("title","修改後的title");
    // 鏈式操作
    $("#d2").css("color","#00f").attr("title","修改後的title");
</script>

   

 

 3. 一個 API 兩用

   - 如果沒給新值,就獲取;給新值,就修改

   - 例如:$(...).attr("title")  // 獲取

      $(...).attr("title","ESchool")  // 修改

<div id="d1" title="第一個div">我是第一個div</div>
<div id="d2" title="第二個div">我是第二個div</div>
<script src="js/jquery-3.3.1.js"></script>
<script>
    /*獲取 / 設置 div的 title 屬性值*/
    // 核心 dom
    var d1 = document.getElementById("d1");
    console.log(d1.getAttribute("title")); // 獲取
    d1.setAttribute("title", "修改後的title1") // 修改

    // jquery
    console.log($("#d2").attr("title")) // 獲取
    $("#d2").attr("title","修改後的title2") // 修改
    console.log($("#d2").html()) //獲取文本
</script>

  

 


 

 完成!good!哈哈哈

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章