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