一般来说,DOM操作分为:DOM Core, HTML-DOM、CSS-DOM
jQuery中的dom操作。
一、查找
1.元素节点
2.属性节点 e.m. $para.attr("title")
二、创建
1. 元素节点 e.m. $("<li></li>") $("ul").append($li_1)
2.创建文本内容 e.m. $("<li>text</li>")
3.创建属性节点 e.m. $("<li title='ss'></li>")
三、插入节点
方法 | 描述 | 实例 |
append() | 向每个匹配的元素内部追加内容 | $("p").append("<b>hello</b>") |
appendTo() | 将所有匹配的元素追加到指定元素中 |
HTML: <p></p> $("<b>hello</p>").appendTo("P") 结果是<p><b>hello</b></p> |
prepend() | 向每个匹配的元素内部前置内容 |
HTML: <p>I want</p> $("p").prepend("<b>hello</b>") result:<p><b>hello</b>i want<p> |
prependTo() | 将所有匹配的元素前置到指定元素中 | |
after() | 在每个元素之后插入内容 |
$("p").after("<b>hello</b>") result: <p></p><b>hello</b> |
insertAfter() | 将所有匹配的元素插入到指定元素后面 | |
before() | 在每个匹配的元素之前插入元素 | |
insertBefore() | 将所有匹配的元素插入到指定的元素前面 |
四、删除元素
1.remove: 从DOM中删除所有匹配的元素
2:detach():从DOM中删除所有匹配的元素.。 但注意的是,这个方法不会把匹配的元素从jQuery对象中删除
因而可以在将来使用这些元素。
3.empty: 并不是删除节点而是清空节点。
五、复制节点 clone()
六、替换节点
replaceWith(): 将所有匹配的元素替换成制定的HTML或DOM元素。
replaceAll():只是颠倒了replaceWith的操作。
七、包裹元素
wrap() e.m. $("p").wrap("<b></b>") result: <b><p><p></b>
wrapAll():将所有匹配的元素包裹起来,不同于wrap(), wrap只是单独包裹。
e.m. wrapAll: <b><p></p><p></p></b>
wrap():<b><p></p><b/><b><p></p></b>
wrapInner(): 将每一个匹配的元素的子内容用其他结构化标记包裹起来。
八、属性操作
获取属性: attr()
设置属性:e.m. attr("title","your title"), attr("title":"your title", name:"test")
删除属性:removeAttr
九、样式操作
获取样式:e.m. attr("class")
设置样式: e.m. attr("class","height")
追加样式:addClass 如果有不同class设定同一个样式属性,则后者覆盖前者
移除样式:removeClass e.m. removeClass("high" "another")
切换样式:toggle() 交替一组动作 。这里是:toggleClass(),即存在删除,不存在添加
判断是否含有某个样式:hasClass()
十、设置获取HTML、文本和值
- html() 该方法获取html元素的内容,如:var var1=$("p").html();//获取P元素内的内容
- text() 获取或设置某个html元素的内容
- val() 获取元素的Value值
- children() 获取html元素的所有子节点
- next() 获取html元素后紧邻的同辈节点
- prev() 获取html元素前紧邻的同辈节点
- siblings() 获取html元素前后紧邻的同辈节点
closest():用于取得最近的匹配的元素。首先检查当前元素是否匹配,不匹配,逐级向上匹配。找不到返回null
parent()
parents()
十一、CSS-DOM
css("属性",“值”) e.m. css("color","red")
offset:获取元素在当前视窗的相对偏移量
position():获取元素相对于最近的一个position样式属性设置为relative或absolute的祖父节点相对位置
scrollTop():获取元素滚动条距顶端的距离
scrollLeft():获取元素滚动条距左边的距离
相关推荐
JQuery DoM和ajax 操作大全源码
jQuery DOM节点操作源码,适合初学者哦,可以下载下来作为参考资料的。
jQuery操作DOM解析
不要分! Jquery 炒作Dom 请亲们收藏!
Jquery的常用方法,各种对Demo的操作。
Ch08-jQuery操作DOM核心笔记.txtCh08-jQuery操作DOM核心笔记.txt Ch08-jQuery操作DOM核心笔记.txtCh08-jQuery操作DOM核心笔记.txt Ch08-jQuery操作DOM核心笔记.txt
jquery学习资料jQuery DOM的操作jQuery插件源码jQuery插件等资料: jQuery DOM教辅.pdf jQuery DOM源码 jQuery DOM的操作.pdf jQuery 丰富的插件.pdf jQuery 事件的处理.pdf jQuery 元素选择器参考手册(教辅) .pdf ...
Jsoup HTML解析器For Java 在Java程序中使用JQuery操作DOM 模式识别的新技术 狂顶
jQuery选择器 jQuery操作DOM jQuery事件处理 jQuery动画基础
关于JQ的DOM操作面试问题很多,可以从各个点问,所以列举几个常见问题,毕竟面试只是过程,重要的是知识自己掌握了。 面试题一:JQ中html()、text()和val()区别? 面试题二:JQ中find()、has()和filter()区别? 面试...
jQuery基础DOM和CSS操作源码,适合初学者哦,可以下载下来作为参考资料的。
《jQuery权威指南》学习笔记之第3章 jQuery操作DOM
主要介绍了jQuery中DOM常见操作,结合实例形式总结分析了jQuery针对dom属性操作、文档操作等常用方法与操作技巧,需要的朋友可以参考下
教程文件 jQuery是一个了不起的轻量级的JavaScript框架,事实上在jQuery发布之前,就已经有无数功能强大得多的JavaScript框架在流行。jQuery的口号是“write less, do more”。(选择器,dom操作,jquery-ajax)
引用 jquery ,只是用一些 DOM 操作函数, 还是觉得 jQuery 的体积有点大,抽取其中常用的 DOM 操作函数,形成了 gQuery,去除空格后,只有不到 4k
jquery 基本 层级 控制器 可见性 属性 子元素 表单对象属性 dom对象 等详细的一些操作~ 详细 简单~易懂 实用!
DOM操作是JQuery最常见的用法,下面我们来将JQuery的DOM操作逐个剖析下。先来最简单的查找节点操作。 为了能全面地讲解DOM操作,首先需要构建一个网页。因为每一张网页都能用DOM表示出来,而每一份DOM都可以看作一棵...
jQuery中的DOM操作.ppt
jQuery 一个非常流行的操作Dom的 JavaScript 库