锋利的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 eval函数深入认识
Feb 21 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
微信小程序之购物车功能
Sep 23 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
js判断两个数组相等的5种方法
May 06 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
PHP面向对象编程快速入门
2006/12/14 PHP
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
PHP中extract()函数的定义和用法
2012/08/17 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
Vue2路由动画效果的实现代码
2017/07/10 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
python使用opencv读取图片的实例
2017/08/17 Python
python try 异常处理(史上最全)
2019/03/07 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
策划总监岗位职责
2014/02/16 职场文书
项目建议书范文
2014/05/12 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
成绩单评语
2015/01/04 职场文书
物资采购管理制度
2015/08/06 职场文书
怎么用Python识别手势数字
2021/06/07 Python
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python