jQuery DOM操作
2020-06-05 08:49
471 查看
文献种类:专题技术总结文献;
开发工具与关键技术: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);
})
相关文章推荐
- jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
- jQuery操作DOM_动力节点Java学院整理
- jQuery基础教程笔记-DOM操作
- jquery和js中对DOM元素的操作
- jQuery源码分析-12 DOM操作-Manipulation-核心函数jQuery.buildFragment()
- 你真的了解jQuery的ready函数吗?当 DOM(文档对象模型) 已经加载,就执行ready里的代码。DOM何时加载完毕?jQuery对html局部操作,DOM为什么不重新加载?
- JQuery DOM 的常用操作
- jQuery 03 DOM操作
- 【转】 原生JS与jQuery操作DOM对比
- 3.2.7: jQuery的DOM操作之包裹节点
- jquery操作DOM元素
- jquery中的Dom操作
- JQuery中的DOM操作
- jQuery的DOM操作之删除节点示例
- JqueryDOM操作-移除样式
- 笔记6,使用jQuery操作DOM
- jQuery使用手册之二 DOM操作
- JQuery之DOM操作学习笔记
- jQuery 学习之路(3):DOM操作
- 牛叉的Jquery――Jquery与DOM对象的互相转换及DOM的三种操作