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 ...
随机推荐
- Angular2 组件
1. 组件说明 Angular2 组件是构成Angular2应用程序的核心部分,Angualr2应用程序本质上来说就是一个组件树,Angular2组件一般由模块,注解,元数据以及组件类组成,实现组件类 ...
- input文本框设置和移除默认值
input文本框设置和移除默认值 这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: ...
- Qt文件路径分隔符
QDir::toNativeSeparators()QDir::separator()
- ASP.NET知识总结(6.一般处理程序动态处理图片(验证码、水印、缩略图))
->使用GDI+完成图片的处理,需要引入程序集System.Drawing ->GDI+的基本处理模型 <1>创建画布Bitmap <2>创建画图工具对象Graph ...
- <select> 默认选中
不多bb,直接上代码 html代码: <li><span>所属类别</span> <select id="cate" name=" ...
- python中datetime模块
Python提供了多个内置模块用于操作日期时间,像calendar,time,datetime.time模块我在之前的文章已经有所介绍,它提供 的接口与C标准库time.h基本一致.相比于time模块 ...
- 【Java EE 学习 49 下】【Spring学习第一天】【MVC】【注解回顾】
一.MVC 1.使用Spring有一个非常大的好处,那就是能够实现完全面向接口编程,传统的使用Dao.Service并不能实现完全的面向接口编程. 2.示例:https://github.com/kd ...
- Could not open Selected VM debug port (8700) (转)
Could not open Selected VM debug port (8700) 2014年11月14日 ⁄ 综合 ⁄ 共 446字 ⁄ 字号 小 中 大 ⁄ 评论关闭 在运行项目的时候, ...
- 使用samba实现linux与windows共享(测试成功)
samba服务器搭建 实现linux与windows文件共享有很多种方法,诸如wpc,vmtools等,今天我来介绍我在rehat系统中实验成功并且现在在用的的方法,直接给出操作步骤: ...
- 【Junit 报错】Test class should have exactly one public zero-argument constructor和Test class can only have one constructor
错误1: java.lang.Exception: Test class should have exactly one public zero-argument constructor at org ...