锋利的jQuery jQuery中的DOM操作


Posted in Javascript onMarch 21, 2010

1 查找元素节点

    var $x = $("selector").text()

2 查找属性节点

    var $x = $("selector").attr("property")

3 创建节点

    var $x = $("html")

4 插入节点

$("selector").append()
    向每个匹配的元素内部追加内容
$("selector").appendTo()
    等价于.append()操作符左右互换

$("selector").prepend()
    向每个匹配的元素内部前置内容
$("selector").prependTo()
    等价于.prepend()操作符左右互换

$("selector").after()
    在每个匹配的元素之后插入内容
$("selector").insertAfter
    等价于.after()操作符左右互换

$("selector").before()
    在每个匹配的元素之前插入内容
$("selector").insertBefore()
    等价于.before()操作符左右互换

5 移动节点

本书P70例:

<script> 
var $one_li = $("ul li:eq(1)"); //获取<ul>节点中第2个<li>元素节点 
var $two_li = $("ul li:eq(2)"); //获取<ul>节点中第3个<li>元素节点 
$two_li.insertBefore($one_li); //移动节点 
</script>


6 删除节点

6.1 remove()方法

$("selector").remove()
    remove()方法将删除selector所有后代节点,元素用remove()方法删除后,仍可以继续使用。另外remove()方法也可以通过传递参数

来选择性地删除元素,如$("ul li").remove("li[title!=xxx]");

6.2 empty()方法

$("selector").empty()
    清空selector的所有后代节点

7 复制节点

$("selector").clone()
    如$(this).clone().appendTo("ul")。若要使复制后的新元素带有原元素所拥有的行为,需要传递参数true。如$("selector").clone(true)

8 替换节点

$("selector").replaceWith()
    将所有匹配的元素都替换成指定的HTML或者DOM元素
$("selector").replaceAll()
    等价于.replaceWith()操作符左右互换

9 包裹节点

$("selector").wrap()
    将所有匹配的元素单独包裹
$("selector").wrapAll()
    将所有匹配的元素用一个元素包裹
$("selector").wrapInner()
    将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来

10 属性操作

$("selector").attr()
    获取(一个property参数)和设置元素属性(两个参数,property和value),如$("p").attr("title","your title")。如果同时设

置多个属性,格式如$("p").attr({"title" : "your title" , "name" : "test"})
$("selector").removeAttr()
    删除元素属性

11 样式操作

$("selector").attr()
    替换样式

$("selector").addClass()
    追加样式

$("selector").removeClass()
    移除样式

$("selector").toggle()
    行为重复切换
例:

<script> 
$x.toggle(function(){ 
//code1 
},function(){ 
//code2 
}) 
</script>

交替执行code1和code2

$("selector").toggleClass()
    控制样式上的重复切换,如$("p").toggleClass("anotherClass")

$("selector").hasClass("anotherClass")
    判断selector中是否含有anotherClass

Javascript 相关文章推荐
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
比Jquery的document.ready更快的方法
Apr 28 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
Angular实现form自动布局
Jan 28 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 #Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 #Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 #Javascript
javascript qq右下角滑出窗口 sheyMsg
Mar 21 #Javascript
js 居中漂浮广告
Mar 21 #Javascript
jquery checkbox,radio是否选中的判断代码
Mar 20 #Javascript
javascript中的new使用
Mar 20 #Javascript
You might like
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
js arguments.callee的应用代码
2009/05/07 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
jQuery之选项卡的简单实现
2014/02/28 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
js实现图片无缝滚动特效
2020/03/19 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
js在HTML的三种引用方式详解
2020/08/29 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
Python3简单实例计算同花的概率代码
2017/12/06 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
出国英文推荐信
2014/05/10 职场文书
趣味运动会策划方案
2014/06/02 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
走进科学观后感
2015/06/18 职场文书
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL