jQueryDOM节点操作
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:Adobe Dreamweaver JavaScript
作者:曾维嘉
撰写时间:2020年05月03日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1.0 JavaScript中的DOM对象
例如:document.getElementById("box");DOM对象
1.1 jQuery对象
在JQuery库中,可以通过本身自带的方法获取页面元素的对象叫做JQurey对象
$(".box");//jQuery对象
1.2 DOM对象与jQuery对象的区别
1.DOM对象是通过原生的JS获取的对象,DOM对象只能使用JS中的方法和属性
2.jQuery对象是通过jQuery包装DOM对象后产生的对象,它是jQuery独有的。
jQuery可以使用jQuery库里面的方法,但是不能使用JS中的方法
js中window.onload
window.onload = function () {
通过原生的JS代码获取DOM对象
var box = document.getElementById("box");
console.log(box);//js中的DOM对象
通过对象的属性修改对象的样式
box.style.width = "400px";
box.innerHTML = "这是一个JS对象";
}
jQuery中页面加载事件
$(document).ready(function () {
* 通过jQuery语法获取id为jqBox的元素获得一个jQuery对象
* 调用该对象的html()方法进行更改内容
* 调用该对象的css()方法进行更改颜色样式
var $box = $("#jqBox");//jQuery中的对象
console.log($box);
$box.css("width", "400px");
$box.html("这是一个jQuery对象");
链式写法
$("#jqBox").css("width", "400px").html("这是一个jQuery对象");
})
JS对象只能调用JS中提供的方法和属性,不能使用jquery中的方法和属性
jquery对象只能使用jQuery的方法和属性,不能使用JS提供的方法和属性
通过标准的JavaScript操作DOM与jQuery操作DOM的对比,我们不难发现:
通过jQuery方法包装后的对象,是一个类数组对象。它与DOM对象完全不同,唯一相似的是它们都能操作DOM。
通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,
而不需要我们具体知道哪个DOM节点有那些方法,
也不需要关心不同浏览器的兼容性问题,
我们通过jQuery提供的API进行开发,代码也会更加精短。
1.3 DOM对象与jQuery对象之间的转换 //JS对象包含 DOM对象
jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,
为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。
我们使用jQuery的同时也能混合JavaScript原生代码一起使用。
在很多场景中,我们需要jQuery与DOM能够相互的转换,
它们都是可以操作的DOM元素,jQuery是一个类数组对象,
而DOM对象就是一个单独的DOM元素。
相比较jQuery转化成DOM,开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法,
通过传递不同的参数而产生不同的作用。
如果传递给$(DOM)函数的参数是一个DOM对象,jQuery方法会把这个DOM对象给包装成一个新的jQuery对象
通过$(dom)方法将普通的dom对象加工成jQuery对象之后,我们就可以调用jQuery的方法了
1.DOM对象转换为jQuery对象
var box = document.getElementById("box");//DOM对象
$(box);//jQuery对象
2.jQuery对象转换为一个DOM对象
var $divs=$("div");//jQuery对象 divs中包含所有的$divs元素
var div=$divs[0];//div为DOM对象
//使用jQuery中的get()方法进行转换,只需要提供一个索引就可以了
var div=$divs.get(0);//将$divs对象中索引为0的元素转换为DOM对象