锋利的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脚本 Node.js 使用入门
Mar 07 Javascript
js字符串截取函数substr substring slice使用对比
Nov 27 Javascript
在Linux上用forever实现Node.js项目自启动
Jul 09 Javascript
js简单倒计时实现代码
Apr 30 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
JavaScript类的写法
Sep 17 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
微信小程序登录session的使用
Mar 17 Javascript
JS实现继承的几种常用方式示例
Jun 22 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中基本符号及使用方法
2010/03/23 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
Node.js编码规范
2014/07/14 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
深入理解Node内建模块和对象
2019/03/12 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
python中调试或排错的五种方法示例
2019/09/12 Python
python能否java成为主流语言吗
2020/06/22 Python
实例代码讲解Python 线程池
2020/08/24 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
python中doctest库实例用法
2020/12/31 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
易程科技软件测试笔试
2013/03/24 面试题
信息管理应届生求职信
2014/03/07 职场文书
《秋思》教学反思
2016/02/23 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python