jQuery DOM操作

文献种类：专题技术总结文献；
开发工具与关键技术：DW与 JavaScript
作者： 熊江宇 ；年级： 2019 ；撰写时间： 2020 年 5 月 4 日

JavaScript对象总结

开发工具与关键技术：Adobe Dreamweaver JavaScript作者：熊江宇撰写时间：2020年4月20日

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对象”;
}

//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对象

例如： $(document).ready(function () {
//通过原生的JS代码获取DOM对象
var box = document.getElementById(“box”);//dom对象
console.log(box);
var jqBox = $(box);//jquery对象
console.log(jqBox);
var $box = $(\”#jqBox\”);//jQuery中的对象
//var div = $box[0];//DOM对象
var div = $box.get(0);//DOM对象
console.log(div);
})