锋利的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 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
有效的捕获JavaScript焦点的方法小结
Oct 08 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
Javascript call及apply应用场景及实例
Aug 26 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 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 mysql Errcode: 28 终极解决方法
2009/07/01 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
php intval函数用法总结
2019/04/14 PHP
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Python 实现简单的电话本功能
2015/08/09 Python
python导入时小括号大作用
2017/01/10 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
详解python调用cmd命令三种方法
2019/07/08 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
九一八事变演讲稿范文
2014/09/14 职场文书
领导班子四风查摆对照检查材料思想汇报
2014/10/05 职场文书
超市督导岗位职责
2015/04/10 职场文书
患者身份识别制度
2015/08/06 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python