锋利的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修改css样式style
Apr 15 Javascript
javascript脚本调试方法小结
Nov 24 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
Jul 20 Javascript
Vue axios获取token临时令牌封装案例
Sep 11 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生成静态html页面的方法(2种方法)
2015/09/14 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
jQuery的css()方法用法实例
2014/12/24 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
简单模拟node.js中require的加载机制
2016/10/27 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
Python爬虫实战之12306抢票开源
2019/01/24 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
Python对列表的操作知识点详解
2019/08/20 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
Python编写单元测试代码实例
2020/09/10 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
迪梵英国官方网站:Darphin英国
2017/12/06 全球购物
什么是抽象
2015/12/13 面试题
品牌宣传方案
2014/03/21 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
检讨书范文2000字
2015/01/28 职场文书
证劵公司反洗钱宣传活动总结
2015/05/08 职场文书
《雷雨》教学反思
2016/02/20 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书