锋利的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 相关文章推荐
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
vue实现页面加载动画效果
Sep 19 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
layui清空,重置表单数据的实例
Sep 12 Javascript
js实现购物车商品数量加减
Sep 21 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+ajax实现无刷新数据分页的办法
2015/11/02 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
JavaScript中利用Array和Object实现Map的方法
2015/07/27 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
详解vue中组件参数
2018/07/09 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
Python 打印中文字符的三种方法
2018/08/14 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
Python实现Linux监控的方法
2019/05/16 Python
anaconda中更改python版本的方法步骤
2019/07/14 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
资深生产主管自我评价
2013/09/22 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
会计师事务所实习证明
2014/11/16 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
寒假生活随笔
2015/08/15 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
教你怎么用python实现字符串转日期
2021/05/24 Python
js实现自动锁屏功能
2021/06/02 Javascript