锋利的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实现的激活输入框后隐藏初始内容
Jun 29 Javascript
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
关于Jquery中的事件绑定总结
Oct 26 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
vue中使用input[type=&quot;file&quot;]实现文件上传功能
Sep 10 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
vue实现倒计时功能
Mar 24 Vue.js
elementui的el-popover修改样式不生效的解决
Jun 30 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
关于我转生变成史莱姆这档事:第二季PV上线,萌王2021年回归
2020/05/06 日漫
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
javascript定义函数的方法
2010/12/06 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
在Sublime Editor中配置Python环境的详细教程
2020/05/03 Python
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
大学毕业的自我鉴定
2013/10/08 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
舞蹈教育学专业自荐信
2014/06/15 职场文书
企业公益活动策划方案
2014/08/24 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书