使用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 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
vue计算属性+vue中class与style绑定(推荐)
Mar 30 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
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
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
原生js实现移动开发轮播图、相册滑动特效
2015/04/17 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
jQuery动态生成的元素绑定事件操作实例分析
2019/05/04 jQuery
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
python的else子句使用指南
2016/02/27 Python
Python中的pack和unpack的使用
2018/03/12 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
python Xpath语法的使用
2020/11/26 Python
css3给背景图片加颜色遮罩的方法
2019/11/05 HTML / CSS
中科软测试工程师面试题
2012/06/16 面试题
模具专业推荐信
2013/10/30 职场文书
建筑经济管理专业求职信分享
2014/01/06 职场文书
关于赌博的检讨书
2014/01/08 职场文书
总经理的岗位职责
2014/02/23 职场文书
企业安全生产承诺书
2014/05/22 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
python实现Nao机器人的单目测距
2021/09/04 Python
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers