锋利的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 相关文章推荐
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
jquery+css+ul模拟列表菜单具体实现思路
Apr 15 Javascript
js返回顶部实例分享
Dec 21 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
vue中实现上传文件给后台实例详解
Aug 22 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
JS轻量级函数式编程实现XDM三
Jun 16 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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
php 常用类整理
2009/12/23 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
php抽象类用法实例分析
2015/07/07 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
wxPython中文教程入门实例
2014/06/09 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
专业销售业务员求职信
2013/11/18 职场文书
品质主管的岗位职责
2013/12/04 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
团代会闭幕词
2015/01/28 职场文书
会计出纳岗位职责
2015/03/31 职场文书
2016年法制宣传月活动总结
2016/04/01 职场文书
从贫穷到富有,是知识技能和学习力的差别
2019/08/20 职场文书