jQuery object
What is the jQuery object
jQuery object is an object generated DOM objects packaged by jQuery.
jQuery object is an array object class.
jQuery jQuery object is unique. If an object is a jQuery object, you can use jQuery.
DOM objects can not be used in any method of jQuery object, anyway, can not use any of the jQuery DOM object.
<!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>How to create a jQuery object
Use jQuery () constructor creates an object of type jQuery.
1. DOM objects that have been obtained using jQuery jQuery object encapsulating functions.
- 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. Find selector DOM elements, and the package DOM elements.
- 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>
Workshop
Respectively, using the core jquery dom and method to modify the color of this div Chinese
<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>
Conversion between the object and the DOM object jQuery
DOM object encapsulated as jQuery objects (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 object dismantling DOM object (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>
carry out!
