使用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 相关文章推荐
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
Oct 14 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
JS实现4位随机验证码
Oct 19 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 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脚本[带参数]的方法
2010/01/22 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
2017/11/25 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
2014年党务公开实施方案
2014/02/27 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis