锋利的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 相关文章推荐
js event事件的传递与冒泡处理
Dec 06 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
Node.js使用Koa搭建 基础项目
Jan 08 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
JS使用for in有序获取对象数据
May 19 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
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
javascript 小型动画组件与实现代码
2010/06/02 PHP
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
探讨如何把session存入数据库
2013/06/07 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
php字符串截取函数用法分析
2014/11/25 PHP
php动态函数调用方法
2015/05/21 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
基于jQuery的表格操作插件
2010/04/22 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
js中function()使用方法
2013/12/24 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
django2.0扩展用户字段示例
2019/02/13 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
一行python实现树形结构的方法
2019/08/09 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
高中竞选班长演讲稿
2014/04/24 职场文书
企业总经理任命书
2014/06/05 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
新手初学Java List 接口
2021/07/07 Java/Android