锋利的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 09 Javascript
javascript实现简单的分页特效
Aug 12 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
JavaScript命名空间模式实例详解
Jun 20 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 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
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
php生成静态页面的简单示例
2014/04/17 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
python3+PyQt5实现柱状图
2018/04/24 Python
python  logging日志打印过程解析
2019/10/22 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
python集合的新增元素方法整理
2020/12/07 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
行政监察建议书
2014/05/19 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python
Python爬虫实战之爬取携程评论
2021/06/02 Python
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS