锋利的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 相关文章推荐
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
JS实现的几个常用算法
Nov 12 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 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连接SQLServer2005方法及代码
2013/12/26 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
显示、隐藏密码
2006/07/01 Javascript
Jquery+WebService 校验账号是否已被注册的代码
2010/07/12 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
用Python编写一个国际象棋AI程序
2014/11/28 Python
Django发送html邮件的方法
2015/05/26 Python
flask框架视图函数用法示例
2018/07/19 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
python matplotlib拟合直线的实现
2019/11/19 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
服装厂厂长职责
2013/12/16 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
2014年教研员工作总结
2014/12/23 职场文书
农村党员干部承诺书
2015/05/04 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
《三国志》赏析
2019/08/27 职场文书