使用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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
document.getElementById介绍
Sep 13 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
js确定对象类型方法
Mar 30 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
AngularJS表单验证功能分析
May 26 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
微信小程序实现上传图片功能
May 28 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
javascript创建对象的3种方法
2016/11/02 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python查看多台服务器进程的脚本分享
2014/06/11 Python
python进阶教程之文本文件的读取和写入
2014/08/29 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
python使用Matplotlib画饼图
2018/09/25 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
妇产医师自荐信
2014/01/29 职场文书
委托书范本
2014/04/02 职场文书
会计工作总结范文2014
2014/12/23 职场文书
2015年团支部工作总结
2015/04/03 职场文书
初中语文教师研修日志
2015/11/13 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
JavaScript实现班级抽签小程序
2021/05/19 Javascript