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操作的更多相关文章

  1. jQuery中的DOM操作<思维导图>

    DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...

  2. jQuery中的选择器《思维导图》

    学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...

  3. jQuery中的Ajax应用<思维导图>

    传统的WEB应用程序模型是这样工作的:当用户的界面操作触发HTTP请求,服务器在接到请求后进行一些业务逻辑处理,如保存数据等,然后向客户端返回一个html页面.但这种方式并没有给予用户很好的应用体验, ...

  4. jQuery中的DOM操作《思维导图》

    首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...

  5. 如何合理利用iMindMap中的模板创建思维导图

    思维导图的制作并不是一项简单的工作,尤其是对许多工作或学习有特殊要求的朋友而言,当我们需要应对不同场景制作不同的思维导图时,总不能都靠自己从头制作,这样难度比较大也比较耗时.而iMindMap(win ...

  6. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  7. Jquery:jquery中的DOM操作<一>

    之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...

  8. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  9. JavaWeb学习笔记——jquery中的dom操作

     jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...

  10. 锋利的jQuery ——jQuery中的DOM操作(三)

    一.DOM的操作分类 1>DOM Core   2>HTML-DOM   3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...

随机推荐

  1. secureCRT会话导入到xshell中的方法

    官方给出了一个工具,sessionimporter.exe 不过软件有点老了,导入的会话路径和xshell默认的会话路径不一致,导致导入后,xshell没有导入的会话信息 sessionimporte ...

  2. tp5 中 model 的删除方法

    根据主键删除(推荐) use app\index\model\User as UserModel; public function delete(){ UserModel::destroy([1,2, ...

  3. DataTable select根据条件取值

    1.封装独立方法 // 执行DataTable中的查询返回新的DataTable /// </summary> /// <param name="dt">源 ...

  4. java冒泡排序

    public class BubbleSort { public static void main(String[] args) { int score[] = {1,4,5,7,2,3,9,0,6, ...

  5. bzoj3439 trie+可持久化线段树

    挺好想的 trie建树后,按dfn序建可持久化 注意:计数变量多的题目一定要注意检查会不会用的时候搞混了 #include <cstdio> #include <cstdlib> ...

  6. SQL IN ANY ,(all any) 区别

    EXITS 和 IN 的区别: 从效率来看: 1) select * from T1 where exists(select 1 from T2 where T1.a=T2.a) ; T1数据量小而T ...

  7. apache自带的web监控器配置

    第一:将mod_status模块放开,即去掉httpd.conf中的# 第二:在httpd.conf后面添加下面内容 <Location /server-status> SetHandle ...

  8. 【数据结构初学】(java实现篇)——队列(转)

    原文地址:http://www.cnblogs.com/skywang12345/p/3603935.html 原文地址:http://www.cnblogs.com/skywang12345/p/3 ...

  9. Java如何保存含有时间的日期到Oracle数据库

    原文:http://www.oracle.com/technetwork/database/enterprise-edition/jdbc-faq-090281.html#08_01 从Oracle ...

  10. 查看nginx在安装时开启了哪些模块

    [root@nginx07 conf]# ./../sbin/nginx -V Tengine version: Tengine/ (nginx/) built by gcc (Red Hat -) ...