使用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如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
基于javascript的异步编程实例详解
Apr 10 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
JavaScript订单操作小程序完整版
Jun 23 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
用vue 实现手机触屏滑动功能
May 28 Javascript
10分钟学会js处理json的常用方法
Dec 06 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
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 heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
JSON相关知识汇总
2015/07/03 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
js自定义select下拉框美化特效
2016/05/12 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
打字效果动画的4种实现方法(超简单)
2017/10/18 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
Python extract及contains方法代码实例
2020/09/11 Python
python 如何引入协程和原理分析
2020/11/30 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
韩国三星集团旗下时尚品牌官网:SSF SHOP
2016/08/02 全球购物
先进集体事迹材料
2014/02/17 职场文书
公司合作意向书范文
2014/07/30 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
国家助学金受助感言
2015/08/01 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers