1.查找节点
1.1查找元素节点
1.2查找属性节点
2.创建节点
2.1创建元素节点
2.2创建文本节点
2.3创建属性节点
3.插入节点
append()向每个匹配的元素内部追加内容
appendTo()将所有匹配的元素添加到指定的元素
prepend()在每个匹配的元素内部前置内容
prependTo()将所有匹配的元素前置到指定元素
after()在每个匹配的元素后插入内容
insertAfter()将所有匹配的元素插入到指定元素后
before()在每个匹配的元素前插入内容
insertBefore()将所有匹配的元素插入指定元素之前
4.删除节点
4.1 remove()方法
从DOM中删除所有匹配的元素,该节点的子节点也会被删除。返回值为被删除的元素。
remove方法也可以传入参数进行选择性的删除。
4.2 detach()方法
该方法与remove方法的区别是,所有绑定的事件,附加的数据都会保留。
4.3 empty()方法
empty方法是清除节点的内容,包括所有的子节点。
5.复制节点
clone()方法用来复制节点。不传参数或传入参数与false等价时,该方法只是简单的复制元素节点,新生成的元素节点不具有任何行为。如果需要新复制的节点与被复制节点有同样的行为,测需要传入参数true。
6.替换节点
replaceWith()将所有匹配的元素替换成指定的HTML或DOM元素。
replaceAll()与replaceWith方法的功能类似,只不过两者的操作顺序刚好颠倒。
比如,a.replaceWith(b)与b.replaceAll(a)等价。
替换后的元素不具有任何行为,无论被替换的元素是否有绑定事件。
7.包裹节点
wrap()将所有匹配的元素单独用元素包裹。
wrapAll()将所有匹配的元素用一个元素包裹。如果被包裹的多个元素间有其他元素,其他元素会被放到包裹元素之后。
wrapInner()将所有匹配元素的子内容(包括文本节点)用其他结构化的标记包裹起来。
8.属性操作
attr()获取(传入属性名作为参数)和设置(传入属性名值对作为参数)元素属性
removeAttr()删除元素属性
prop()V1.6新增,获取和设置匹配元素中的一个元素的属性
removeProp()V1.6新增,删除元素的属性
9.样式操作
9.1获取样式和设置样式
$element.attr("class"[, "newClass"])
9.2追加式样
$element.addClass("newClass")
9.3移除样式
$element.removeClass("class")
9.4切换样式
$element.toggle(f1,f2)
9.5判断是否含有某个样式
$element.hasClass("class")
$element.is(".class")
10.设置和获取HTML、文本和值
html()方法,用来读取(无参数)和设置(传入字符串作为参数)某个元素中的HTML内容。
text()方法,用来读取(无参数)和设置(传入字符串作为参数)某个元素中的文本内容。
val()方法,用来获取(无参数)和设置(传入元素的value作为参数)元素的值。
11.遍历节点
children()方法,获取匹配元素的子元素的集合。该方法只考虑子元素,不考虑其他后代元素。
next()方法,获取匹配元素后面紧临的兄弟元素。
prev()方法,获取匹配元素前面紧临的兄弟元素。
siblings()方法,获取匹配元素前后所有的兄弟元素。
closest()方法,获取最近的匹配元素。
parent(),parents()与closest()方法比较:
parent()获取集合中每个匹配元素的父元素
parents()获取集合中每个匹配元素的祖先元素
closest()从元素自身开始,逐级向上级元素匹配,返回最先匹配到的元素
12.CSS-DOM操作
读取和设置style对象的各种属性。
$element.css(),获取(传入属性名作为参数)和设置(传入属性名值对作为参数)css样式。
$element.css("height")与$element.height()的不同,前者获取的高度值与样式的设置有关,可能会得到"auto"等字符串;而后者获取的高度则是元素在页面中的实际高度,与样式的设置无关,且不带单位。
offset()方法,获取元素相对于document的偏移,返回的对象包含两个属性,top和left。该方法仅对可见元素有效。
position()方法,获取元素相对于最近一个position属性为absolute或relative的父元素的相对偏移。返回对象包含两个属性,top和left。
scrollTop()和scrollLeft()方法,获取(无参数)和设置(数值参数)元素的滚动条距离顶端和左侧的距离。
相关推荐
JQuery DoM和ajax 操作大全源码
jquery学习资料jQuery DOM的操作jQuery插件源码jQuery插件等资料: jQuery DOM教辅.pdf jQuery DOM源码 jQuery DOM的操作.pdf jQuery 丰富的插件.pdf jQuery 事件的处理.pdf jQuery 元素选择器参考手册(教辅) .pdf ...
jQuery选择器 jQuery操作DOM jQuery事件处理 jQuery动画基础
本书循序渐进地对jQuery的各种函数和方法调用进行了介绍,读者可以系统地掌握jQuery的DOM操作、事件监听和动画、表单操作、AJAX以及插件方面等知识点,并结合每个章节后面的案例演示进行练习,达到掌握核心知识点的...
jQuery DOM节点操作源码,适合初学者哦,可以下载下来作为参考资料的。
jQuery操作DOM解析
Propeller.js是一款jQuery鼠标拖动旋转DOM元素插件。通过该插件,可以使用鼠标拖动旋转页面中的任意DOM元素。
关于JQ的DOM操作面试问题很多,可以从各个点问,所以列举几个常见问题,毕竟面试只是过程,重要的是知识自己掌握了。 面试题一:JQ中html()、text()和val()区别? 面试题二:JQ中find()、has()和filter()区别? 面试...
不要分! Jquery 炒作Dom 请亲们收藏!
锋利的jQuery 要点归纳(二)上 jQuery中的DOM操作,需要的朋友可以参考下。
jQuery 一个非常流行的操作Dom的 JavaScript 库
《锋利的jQuery》循序渐进地对jQuery的各种函数和方法调用进行了介绍,读者可以系统地掌握jQuery的DOM操作、事件监听和动画、表单操作、AJAX以及插件方面等知识点,并结合每个章节后面的案例演示进行练习,达到掌握...
《锋利的jQuery》循序渐进地对jQuery的各种函数和方法调用进行了介绍,读者可以系统地掌握jQuery的选择器、DOM操作、事件和动画、AJAX应用、插件、jQuery Mobile、jQuery各个版本变化、jQuery性能优化和技巧等知识点...
Jsoup HTML解析器For Java 在Java程序中使用JQuery操作DOM 模式识别的新技术 狂顶
《锋利的jQuery(第2版)》循序渐进地对jQuery的各种函数和方法调用进行了介绍,读者可以系统地掌握jQuery的选择器、DOM操作、事件和动画、AJAX应用、插件、jQuery Mobile、jQuery各个版本变化、jQuery性能优化和技巧...
jQuery的各种函数和方法调用进行了介绍,读者可以系统地掌握jQuery的DOM操作、事件监听和动画、表单操作、AJAX以及插件方面等知识点,并结合每个章节后面的案例演示进行练习,达到掌握核心知识点的目的。为使读者更...
jQuery中的DOM操作.ppt
Ch08-jQuery操作DOM核心笔记.txtCh08-jQuery操作DOM核心笔记.txt Ch08-jQuery操作DOM核心笔记.txtCh08-jQuery操作DOM核心笔记.txt Ch08-jQuery操作DOM核心笔记.txt
【练习向】jQuery基础教程第四版章节源码——Book05_jQuery_操作DOM
本书循序渐进地对jQuery的各种函数和方法调用进行了介绍,读者可以系统地掌握jQuery的DOM操作、事件监听和动画、表单操作、AJAX以及插件方面等知识点,并结合每个章节后面的案例演示进行练习,达到掌握核心知识点的...