jQuery 对象
版权声明：未经博主授权，严禁转载分享
什么是 jQuery 对象
jQuery 对象是通过 jQuery 包装 DOM 对象后产生的对象。
jQuery 对象是一个类数组对象。
jQuery 对象是 jQuery 独有的。如果一个对象是 jQuery 对象，就可以使用 jQuery 的方法。
在 jQuery 对象中无法使用 DOM 对象的任何方法，反正在 DOM 对象也无法使用任何 jQuery 的方法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery对象</title> </head> <body> <p id="p1">我是p1元素</p> <p id="p2">我是p2元素</p> <script src="js/jquery-3.3.1.js"></script> <script> /*修改p元素的文本*/ // 使用核心DOM的方法, // 使用核心dom获取的元素是dom对象 //之能使用核心dom的API var p1 = document.getElementById("p1"); p1.innerHTML = "我是核心DOM的方法"; // 使用 jquery 函数库的API，只能使用jquery对象的api var p2 = document.getElementById("p2"); // dom对象 p2.html("我是jquery函数库中的方法！") // 不能使用 错的 </script> </body> </html>
如何创建 jQuery 对象
使用 jQuery() 构造函数创建 jQuery 类型的对象。
1.将已经获得的 DOM 对象使用 jQuery 函数封装为 jQuery 对象。
- jQuery( domObj )
<p id="p1">我是p1元素</p> <p id="p2">我是p2元素</p> <script src="js/jquery-3.3.1.js"></script> <script> /*修改p元素的文本*/ // 使用核心DOM的方法, // 使用核心dom获取的元素是dom对象 //之能使用核心dom的API var p1 = document.getElementById("p1"); p1.innerHTML = "我是核心DOM的方法"; // 使用 jquery 函数库的API，只能使用jquery对象的api var p2 = document.getElementById("p2"); // dom对象 p2 = jQuery(p2); // 将dom对象封装为jquery对象 p2.html("我是jquery函数库中的方法！") // 可以使用 </script>
- $( domObj )
<p id="p1">我是p1元素</p> <p id="p2">我是p2元素</p> <script src="js/jquery-3.3.1.js"></script> <script> /*修改p元素的文本*/ // 使用核心DOM的方法, // 使用核心dom获取的元素是dom对象 //之能使用核心dom的API var p1 = document.getElementById("p1"); p1.innerHTML = "我是核心DOM的方法"; // 使用 jquery 函数库的API，只能使用jquery对象的api var p2 = document.getElementById("p2"); // dom对象 // p2 = jQuery(p2); // 将dom对象封装为jquery对象 p2 = $(p2); // 将dom对象封装为jquery对象 p2.html("我是jquery函数库中的方法！") // 可以使用 </script>
2.使用选择器查找 DOM 元素，并封装 DOM 元素。
- jQuery( "selecter" )
- $( "select" )
<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的方法, // 使用核心dom获取的元素是dom对象 //之能使用核心dom的API var p1 = document.getElementById("p1"); p1.innerHTML = "我是核心DOM的方法"; // 使用 jquery 函数库的API，只能使用jquery对象的api var p2 = document.getElementById("p2"); // dom对象 // p2 = jQuery(p2); // 将dom对象封装为jquery对象 p2 = $(p2); // 将dom对象封装为jquery对象 p2.html("我是jquery函数库中的方法！") // 可以使用 // 直接获取 jquery对象 // var p3 = jQuery("#p3"); var p3 = $("#p3"); p3.html("我是jquery函数库中的方法") </script>
课堂练习
分别使用核心dom 和 jquery 方法修改div中文本的颜色
<div id="d1">我是d1标记</div> <div id="d2">我是d2标记</div> <script src="js/jquery-3.3.1.js"></script> <script> // 分别使用核心dom 和 jquery 方法修改div中文本的颜色 // ：css（‘样式名’，‘值’） // 核心 dom 方法 var d1 = document.getElementById("d1"); d1.style.color = "#f00"; // jquery 方法 // var $d2 = $("#d2"); // $d2.css("color","#f00"); $("#d2").css("color","#f00"); </script>
jQuery 对象 和 DOM 对象之间的相互转换
DOM 对象封装为 jQuery 对象 （DOM => jQuery ）
- jQuery（domObj）
- $（domObj）
- 如：$( this )、 $( document )、 $( window )
<button type="button" id="btn1">我是btn1</button> <button type="button" id="btn2">我是btn2</button> <script src="js/jquery-3.3.1.js"></script> <script> /*实现单击按钮式修改按钮背景颜色*/ // DOM var btn1 =document.getElementById("btn1"); btn1.onclick = function () { this.style.backgroundColor="#0ff"; } //jquery $("#btn2").click(function () { // this是一个DOM对象，所以必须封装为一个 jquery对象 $(this).css("background-color","#0ff"); }); </script>
jQuery 对象拆解为 DOM 对象 （jQuery => DOM）
- $( ".mybox" )[0]
- $( "input" ).get(1)
<button type="button" id="btn1">我是btn1</button> <button type="button" id="btn2">我是btn2</button> <script src="js/jquery-3.3.1.js"></script> <script> /*实现单击按钮式修改按钮背景颜色*/ // DOM var btn1 =document.getElementById("btn1"); btn1.onclick = function () { this.style.backgroundColor="#0ff"; } //jquery $("#btn2").click(function () { // this是一个DOM对象，所以必须封装为一个 jquery对象 $(this).css("background-color","#0ff"); }); // jQuery对象拆解为DOM对象 var $btns = $("button"); console.log($btns); var domObj1 = $btns[0]; // 拆解为DOM对象 domObj1.innerHTML="[]使用DOM对象的API修改内容"; var domObj2 = $btns.get(1); // 拆解为DOM对象 domObj2.innerHTML="()使用DOM对象的API修改内容"; </script>
完成！