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> 
完成！
【版权声明】本博文著作权归作者所有，任何形式的转载都请联系作者获取授权并注明出处！
【重要说明】本文为本人的学习记录，论点和观点仅代表个人而不代表当时技术的真理，目的是自我学习和有幸成为可以向他人分享的经验，因此有错误会虚心接受改正，但不代表此刻博文无误！
【Gitee地址】秦浩铖：https://gitee.com/wjw1014
