objeto jQuery
¿Cuál es el objeto jQuery
objeto jQuery es un objeto DOM generado objetos embalados por jQuery.
objeto jQuery es una clase de matriz de objetos.
objeto jQuery jQuery es único. Si un objeto es un objeto jQuery, puede utilizar jQuery.
objetos DOM no se pueden utilizar en cualquier método de objeto jQuery, de todos modos, no puede utilizar cualquiera del objeto jQuery DOM.
<!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>Cómo crear un objeto jQuery
Uso de jQuery () crea un objeto de tipo jQuery.
objetos 1. DOM que se han obtenido utilizando las funciones objeto de encapsulación 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. Encontrar elementos selector de DOM, y los elementos del paquete de 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>
taller
Respectivamente, usando el DOM de jQuery núcleo y método para modificar el color de este div china
<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>
La conversión entre el objeto y el objeto DOM jQuery
objeto DOM encapsulado como jQuery objetos (DOM => jQuery)
- jQuery (domObj)
- $ (domObj)
-如: $ (este), $ (document), $ (ventana)
<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 objeto desmantelamiento objeto 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>
Completa!
