锋利的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 相关文章推荐
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 Javascript
锋利的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
php中文件上传的安全问题
2006/10/09 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
PHP设置头信息及取得返回头信息的方法
2016/01/25 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
Prototype RegExp对象 学习
2009/07/19 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
windows支持哪个版本的python
2020/07/03 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
收入及婚姻状况证明
2014/11/20 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
Nginx HTTP跳转至HTTPS
2022/05/15 Servers
讨论nginx location 顺序问题
2022/05/30 Servers
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技