0
点赞
收藏
分享

微信扫一扫

jQuery API的特点

乱世小白 2022-06-27 阅读 101

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>

   jQuery API的特点_css

 

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>

   jQuery API的特点_jquery_02

 

 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>

  jQuery API的特点_html_03

 

 

 

 

 完成!good!哈哈哈

 

【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!

【重要说明】本文为本人的学习记录,论点和观点仅代表个人而不代表当时技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!

【Gitee地址】秦浩铖:​​https://gitee.com/wjw1014​​


举报

相关推荐

0 条评论