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!哈哈哈