当前位置：首页 > news >正文

jQuery API的特点

news 来源：原创 2024/5/2 20:16:19

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>