使用jQuery操作DOM的方法小结


Posted in Javascript onFebruary 27, 2017

一.DOM操作分为3类

1.DOM Core

DOM Core不是Javascript的专属品,任何一种支持DOM的编程语言都可以使用它.它的用途不仅限于处理一种使用标记语言编写出来的文档

2.HTML-DOM

比DOM Core出现的更早,它提供了一些更加简明的标记来描述各种HTML-DOM的元素属性

3.CSS-DOM

CSS-DOM 失针对CSS的操作,在JavaScript中,只要作用是获取和设置style对象各种属性

二.样式操作

1.直接设置样式值

css(name,value)  //设置单个属性
css({name:value,name:value,name:value....})  //同事设置多个属性

2.追加样式和移除样式

addClass(class) //追加样式
removeClass(class)  //移除样式

3.切换样式

taggleClass()    //可以切换不同元素的类样式

三.类容操作

1.html代码操作

html([content])  //可选,规定备选元素的新类容,该参数可以包含HTML标签,无参数时,表示被选元素的文本类容

2.标签类容操作

text([content])  //可选,规定被选元素的新文本类容.  注释,特殊字符会被编码.无参数时,表示获取元素的被选类容

3.属性值操作

val([value])   

四.节点属性操作

1.查找节点

$("xxx")

2.创建节点

$(selector) //选择器
$(element) //Dom元素
$(html)    //html代码

3.插入节点

内部插入:append(content)  appendTo(content)   prepend(content)   prependTo(content)

外部插入:after(content)   insertAfter(content)   before(content)   insertBefore(content)

4.删除节点

$(selector).remove([expr])

5.替换节点

$("ul li:eq(1)").replaceWith($xxx)

6.复制节点

$(selector).clone([includeEvents])

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
Augularjs-起步详解
Jul 08 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
Vue入门之数据绑定(小结)
Jan 08 Javascript
官方推荐react-navigation的具体使用详解
May 08 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
jQuery模拟淘宝购物车功能
Feb 27 #Javascript
原生js实现轮播图
Feb 27 #Javascript
PHP实现本地图片上传和验证功能
Feb 27 #Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 #Javascript
提高Web性能的前端优化技巧总结
Feb 27 #Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 #Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 #Javascript
You might like
PHP容易忘记的知识点分享
2013/04/30 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
PHP时间函数使用详解
2019/03/21 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
javascript 自动填写表单的实现方法
2010/04/09 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
JavaScript两种跨域技术全面介绍
2014/04/16 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
python实现扫描日志关键字的示例
2018/04/28 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
护士见习期自我鉴定
2014/02/08 职场文书
网络营销策划方案
2014/06/04 职场文书
贯彻落实“八项规定”思想汇报
2014/09/13 职场文书
生日答谢词
2015/01/05 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
会议主持词通用版
2019/04/02 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js