使用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 相关文章推荐
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
JS调用CS里的带参方法实例
Aug 01 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
Aug 21 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
Bootstrap选项卡动态切换效果
Nov 28 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
php获取qq用户昵称和在线状态(实例分析)
2013/10/27 PHP
可输入的下拉框
2006/06/19 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
python33 urllib2使用方法细节讲解
2013/12/03 Python
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
Python time库基本使用方法分析
2019/12/13 Python
Django 再谈一谈json序列化
2020/03/16 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
python属于解释型语言么
2020/06/15 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
入党积极分子评语
2014/05/04 职场文书
社区志愿者培训方案
2014/06/10 职场文书
2014年城管工作总结
2014/11/20 职场文书