JQuery中的DOM操作
JQuery中有很多DOM操作,但是因为之前没有总结过,所以用来用去都是那几个,一写html中的表单交互,尤其是那些复杂的表单交互,就是一大坨的js,我自己看着都费劲。
所以我感觉有必要总结一下
<div id="divlist" class="ddiv">
<a>我是第一层的a标签</a>
<ul>
<li class="li1" title="你妹啊"><a>乔安生 我是 ul > li 里面的a标签1</a></li>
<li><a>我是 乔安生ul > li 里面的a标签2</a></li>
<li><a>我是 ul > 乔安生li 里面的a标签3</a></li>
<li><a>我是 ul > li 乔安生里面的a标签4</a></li>
<li><a>我是 ul > li 里面的a标签5乔安生</a></li>
<li title="你妹啊"></li>
</ul>
<a>我是第一层的a标签2</a>
<a>我是第一层的a标签3</a>
<ul>
<li class="li1" title="你妹啊"><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li title="你妹啊"></li>
</ul>
</div>
查找节点
$(".ddiv ul li:eq(1)").text()//获取元素的文本内容
$(".ddiv ul li:eq(0)").attr('title');//获取元素的属性(属性有class、id、title、date-id等)
<div id="div2">
<p id="haha">哈哈哈哈哈</p>
<p id="hehe">嘿嘿嘿嘿嘿</p>
<p id="lala">啦啦啦啦啦</p>
</div>
插入节点
append() $("#haha").append("<p>我是append</p>"); 结果<p id="haha">哈哈哈哈哈<p>我是append</p></p> 结论append会把属性插入到指定元素结尾处(注意是结尾处不是后面)
appendTo() $("<p id='qwe'>appendTo</p>").appendTo("#haha"); 结果<p id="haha">哈哈哈哈哈<p id="qwe">appendTo</p></p> 结论appendTo和append相反是把前面的元素放到后面元素的结尾处
prepend() $("#haha").prepend("<p>我是prepend</p>"); 结果<p id="haha"><p>我是prepend</p>哈哈哈哈哈</p> 结论prepend会把数据元素放到目标元素文本开始处
prependTo() $("<p>prependTo</p>").prependTo("#haha"); 结果<p id="haha"><p>prependTo</p>哈哈哈哈哈</p> 结论prependTo他是和上面的相反他是把目标元素插入到
after() $("#haha").after("<p>我是after</p>") 结果<p id="haha">哈哈哈哈哈</p><p>我是after</p> 结论after可以把自定义元素插入到目标元素的后面
insertAfter() $("<p>我是insertAfter</p>").insertAfter("#haha") 结果<p id="haha">哈哈哈哈哈</p><p>我是insertAfter</p> 结论他也是把目标元素放到数据元素的后面
before() $("#haha").before("<p>我是before</p>") 结果<p>我是before</p><p id="haha">哈哈哈哈哈</p> 结论before是把自定义元素添加到目标元素的前面
insertBefore()
<div id="divlist" class="ddiv">
<a>我是第一层的a标签</a>
<ul>
<li class="li1" title="你妹啊"><a>乔安生 我是 ul > li 里面的a标签1</a></li>
<li><a>我是 乔安生ul > li 里面的a标签2</a></li>
<li><a>我是 ul > 乔安生li 里面的a标签3</a></li>
<li><a>我是 ul > li 乔安生里面的a标签4</a></li>
<li><a>我是 ul > li 里面的a标签5乔安生</a></li>
<li title="你妹啊"></li>
</ul>
<a>我是第一层的a标签2</a>
<a>我是第一层的a标签3</a>
<ul>
<li class="li1" title="你妹啊"><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li title="你妹啊"></li>
</ul>
</div>
删除节点
JQuery提供了三种删除节点的方法 remove(),detach(),empty()
$("#haha").remove() 直接干掉 目标元素
$("ul li").remove("li[title=你妹啊]") 干掉 title=你妹啊 的所有元素
$(".li1").empty() 清空目标元素里面的元素和文本
$(".li1").detach()和remove()一样移除掉元素,但是这个方法会保留删除元素已经绑定的事件
复制节点
clone()
$("ul li").click(function () {
$(this).clone().appendTo("ul");
//复制当前点击的节点,并追加到<ul>元素中
});//end ul li
替换节点
$("#haha").click(function () {
$("#haha").replaceWith("换了!!!");
});//end haha
包裹节点
$("p").wrap("<strong></strong>") 在p元素外面添加一个<strong></strong>标签
$("p").wrapAll("<strong></strong>")
wrap是为每一个p标签外面都添加一个<strong></strong>标签
wrapAll是把p标签包裹起来 如果上下两行都是p 那么<strong></strong>标签会把他们两个都包起来。
属性操作
在JQuery中可以使用attr()方法来获取和设置元素的属性,removeAttr()方法来删除元素属性
$(".li1").attr("title") 获取目标元素的title属性
$(".li1").attr("title","aa") 设置目标元素的title属性的值
$(".li1").attr({"title":"aa","name":"qioa"}) 同时设置目标元素的多个属性的值
$(".li1").removeAttr("title"); 删除目标元素的title元素
样式操作
设置样式
$("#haha").attr("class","aa"); 设置目标元素的引用的样式
追加样式
$("#haha").addClass("qiao") 为目标元素追加一个样式
移除样式
$("#haha").removeClass("qiao") 移除目标元素的样式
JQuery中的DOM操作的更多相关文章
- jQuery中的DOM操作<思维导图>
DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...
- jQuery中的选择器《思维导图》
学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...
- jQuery中的Ajax应用<思维导图>
传统的WEB应用程序模型是这样工作的:当用户的界面操作触发HTTP请求,服务器在接到请求后进行一些业务逻辑处理,如保存数据等,然后向客户端返回一个html页面.但这种方式并没有给予用户很好的应用体验, ...
- jQuery中的DOM操作《思维导图》
首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...
- 如何合理利用iMindMap中的模板创建思维导图
思维导图的制作并不是一项简单的工作,尤其是对许多工作或学习有特殊要求的朋友而言,当我们需要应对不同场景制作不同的思维导图时,总不能都靠自己从头制作,这样难度比较大也比较耗时.而iMindMap(win ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- Jquery:jquery中的DOM操作<一>
之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- JavaWeb学习笔记——jquery中的dom操作
jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...
- 锋利的jQuery ——jQuery中的DOM操作(三)
一.DOM的操作分类 1>DOM Core 2>HTML-DOM 3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...
随机推荐
- secureCRT会话导入到xshell中的方法
官方给出了一个工具,sessionimporter.exe 不过软件有点老了,导入的会话路径和xshell默认的会话路径不一致,导致导入后,xshell没有导入的会话信息 sessionimporte ...
- tp5 中 model 的删除方法
根据主键删除(推荐) use app\index\model\User as UserModel; public function delete(){ UserModel::destroy([1,2, ...
- DataTable select根据条件取值
1.封装独立方法 // 执行DataTable中的查询返回新的DataTable /// </summary> /// <param name="dt">源 ...
- java冒泡排序
public class BubbleSort { public static void main(String[] args) { int score[] = {1,4,5,7,2,3,9,0,6, ...
- bzoj3439 trie+可持久化线段树
挺好想的 trie建树后,按dfn序建可持久化 注意:计数变量多的题目一定要注意检查会不会用的时候搞混了 #include <cstdio> #include <cstdlib> ...
- SQL IN ANY ,(all any) 区别
EXITS 和 IN 的区别: 从效率来看: 1) select * from T1 where exists(select 1 from T2 where T1.a=T2.a) ; T1数据量小而T ...
- apache自带的web监控器配置
第一:将mod_status模块放开,即去掉httpd.conf中的# 第二:在httpd.conf后面添加下面内容 <Location /server-status> SetHandle ...
- 【数据结构初学】(java实现篇)——队列(转)
原文地址:http://www.cnblogs.com/skywang12345/p/3603935.html 原文地址:http://www.cnblogs.com/skywang12345/p/3 ...
- Java如何保存含有时间的日期到Oracle数据库
原文:http://www.oracle.com/technetwork/database/enterprise-edition/jdbc-faq-090281.html#08_01 从Oracle ...
- 查看nginx在安装时开启了哪些模块
[root@nginx07 conf]# ./../sbin/nginx -V Tengine version: Tengine/ (nginx/) built by gcc (Red Hat -) ...