锋利的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调试工具(下载)
Jan 09 Javascript
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
jquery 滚动条事件简单实例
Jul 12 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
锋利的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获取qq用户昵称和在线状态(实例分析)
2013/10/27 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
JS模拟多线程
2007/02/07 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
python实现简易版计算器
2020/06/22 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
Pycharm中import torch报错的快速解决方法
2020/03/05 Python
python 日志 logging模块详细解析
2020/03/31 Python
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
便利店的创业计划书
2014/01/15 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
通过Python把学姐照片做成拼图游戏
2022/02/15 Python