使用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 相关文章推荐
JS控制表格隔行变色
Jun 26 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 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之sphinx
2013/05/15 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
2013/09/03 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
Vue.js划分组件的方法
2017/10/29 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
python解决网站的反爬虫策略总结
2016/10/26 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
Python中print函数简单使用总结
2019/08/05 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
python打包生成so文件的实现
2020/10/30 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
排查整治工作方案
2014/06/09 职场文书
海洋科学专业求职信
2014/08/10 职场文书
佛光寺导游词
2015/02/10 职场文书