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 ...
随机推荐
- MySQL 5.7 学习:功能性能的提升
背景: 继上次介绍 初识 MySQL 5.6 新功能.参数完之后,刚好MySQL 5.7又GA了,在官方测试里看到,MySQL5.7在功能.性能.可用性.安全和监控上又提升了很高.现在看看和MySQL ...
- 校园网搭建HUSTOJ记录
上学期和网管中心的老师说过很多次--要在校园网上搭OJ,当时那边老师说要等"虚拟化搞好了以后才能搭".直到上周,终于在校园网上申请到了一个虚拟主机,4核,10G内存,100G硬盘, ...
- Android编程容易犯的错误之一
1.设置TextView的文本颜色 TextView tv; ... tv.setTextColor(R.color.white); 其实这样设置的颜色是 R.color.white的资源ID值所代表 ...
- jquery.smint.js 页面菜单浮动之谷歌浏览器异常
jquery.smint.js 做公司项目时,谷歌测试,页面向下拉,刷新后,导航栏菜单与顶部距离发生变动,并不在设置的relative元素top下固定像素 我的relative元素的高为80,然后在j ...
- 为 placeholder 自定义样式
textarea::-webkit-input-placeholder{ padding: 1em; } textarea::-moz-placeholder{ padding: 1em; } 同理, ...
- iOS TabeView 头视图和尾视图不滑动的实现
因项目有需求不能让section中的头尾视图滑动,顾根据网上的一些资料和自己整理的思路,已实现了不滑动效果,上代码,啥都说了,搞了2个小时都是泪.... 1.创建一个tableview _mainTa ...
- HTTP TCP UDP Socket 关系的几个经典图
从上图可以看到,TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层. 在网络层有IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协议. 在传输层中有TCP协议与UDP协议. ...
- Django配置和初探
Django是python下的一款网络服务器框架. 1.安装 windos: pip install django linux: sudo pip install django 2.启动 ...
- [Java 基础]sun.misc.Unsafe
使用Unsafe可以干一些好事. Unsafe对象初始化 如果你的代码属于trusted的,可以直接使用下面的方式: public static Unsafe getUnsafe() { Class ...
- PAT A 1118. Birds in Forest (25)【并查集】
并查集合并 #include<iostream> using namespace std; const int MAX = 10010; int father[MAX],root[MAX] ...