基本操作:增删改查。
前端开发中,基本就是对DOM进行操作,简略分成设计、逻辑、DOM操作方法三大块。其中DOM操作方法必须了解增删改查。
在jQuery出现前的时代,仅仅使用javaScript来操作DOM是一种非常辛苦的事情,而jQuery很好的封装了js的方法,使得操作DOM变得简便起来,因此在当时具有跨时代的意义。
(当然,Angular出来后,js向大型应用开发进军,也是一个跨时代的意义)
以下是整理的一些jQuery的DOM操作方法
查(选择)
1、jQuery选择器:$(‘#text’)
最基本的选择器,简化了js的getElementById\byClassNames,querySelectorAll()等方法。允许使用css选择器来对DOM元素进行选择。
###遍历2、子元素
$(“.parent”).children();//所有子元素的集合
#####3、next()、prev()、first()、last()方法 常用的方法,比起js(特别是IE,还需要留意text节点)更加简便 #####4、siblings()方法,获得相邻的所有元素集合
5、parent()、parents()、closest()
parent()用于查找一级父元素,parents()查找所有父元素的集合,closest()查找最近的父元素
例如:
<div>
<ul>
<li id=“a”></li>
</ul>
</div>
var test = $(“#a”);
test.parent();//ul
test.parents();//ul,div..一直到html
test.closest(“div”)//div
6、find()
同js的[某元素].getElementById(),在某元素里面找元素
7、nextAll()、prevAll()
Ps:javaScript的对应方法
firstChild(),lastChild,parent()….
增(增加、插入节点)
1、jQuery选择器:$(“ ”)(支持直接写入表达式)
复制
2、克隆
$(“.origin”).clone();//原来的不会消失
插入
3、append()、prepend()//向某元素的最前或者最后插入元素
4、appendTo()、prependTo()//颠倒使用
5、after()、before()//对匹配的元素的前或后都插入
改(修改节点)
1、替换节点replaceWith()(前换成后)和replaceAll()
2、包裹节点wrap()如:$(“strong”).wrap(“”);//用标签把strong包裹起来
获取文本和值
3、html()、text()(同innerHTML和innerText)
4、val()(获取input控件的value)
删(删除节点)
1、remove()
2、empty()
3、detach()方法//使用后,可以重新追加元素,原来的事件仍然存在。类似于clone后再append
参考资料:
1、http://www.45it.com/javascript/201003/23730.htm
2、《锋利的jQuery》