jquery DOM操作(一)
上一篇文章是记录了jquery中选择器的作用,这里只要记录下jquery中的DOM操作,还是按照上篇的格式来。
下面是测试用的html代码,接下来DOM的操作会在下面的代码下进行。
<body>
<p>你最喜欢的水果是?</p>
<ul>
<li>苹果</li>
<li>橘子</li>
<li>梨子</li>
<li>banana</li>
</ul>
</body>
<script>
$(function(){
var $newLi1 = $("<li>桃子</li>")//$(html),会根据传入的html创建一个DOM对象并且加工成jQuery对象后返回。;
var $newLi2 = $("<li>西瓜</li>");//上面这种方法传入的html格式是需要闭合的,并且标签是需要小写的。可以传入$("<li />")
var $newLi3 = $("<li title='猕猴桃'>猕猴桃</li>")//如果在在创建的html中包含属性或者特性也会体现在创建好的元素中
var $newLi4 = $("<li data-name='xwt'>葡萄</li>")
var $ul = $("ul");
$ul.append($newLi1);//append方法是向每个匹配的元素内部追加内容(在结束标签的前面添加内容,添加的内容被元素包围)
$newLi2.appendTo($ul);//appendTo是将所以匹配的元素追加到传入元素的内部。和上面的方法大致相同,只是两个元素的位置改变了。
$ul.prepend($newLi3);//prepend将匹配的元素头部追加元素。另外同append相同
$newLi4.prependTo($ul);//prependTo将匹配的元素追加到传入的元素中。其他同appendTo
$ul.after($("<button>测试</button>"));//after是在指定元素的后面(不是内部)添加相关的元素;insertAfter()方法颠倒了2个对象的位置。
$("button").before("<button>测试1</button>");//特别注意:以上的每个插入对象的方法(如append,prepend,after,before)参数可以是jquery对象,即$("XXX"),也可以是普通文本。
$("<p>123</p>").insertBefore("button:first");//如果文本符合html语法,则创建相应的element,否则以文本插入
$("li:first-child").after($("li:nth-child(2)"));//如果是操作已有的节点,这些方法也可以用于元素的移动。也可写成.after("li:nth-child(2)")
var $lastLi = $("ul > li:last").remove();//移除最后一个ul中的li节点。如果不传参数则删除全部匹配的元素集合。删除后返回引用remove之前的对象,包含删除的元素。
var $lastSecondLi = $("ul > li").detach(":last");//使用方法和remove基本相同。但是detach不会删除元素已经绑定的函数和附加数据
$lastSecondLi.appendTo($ul);//添加回去删除的倒数第二个元素
$ul.append($lastLi);//将已经删除掉的li元素重新添加回来。如果之前该元素绑定过函数或者附加数据,重新添加回去以后函数绑定失效,丢失附加数据
$("ul > li:first").appendTo($ul);//appendTo方法简化上面2部。原理相同,先删除指定元素在添加回去
$("button").empty();//empty()并不是删除节点,而是清除元素的所有后代节点
var $ul2 = $("ul").clone();//克隆当前的元素对象,但是该对象和克隆的对象是完全不同的2个对象。包括里面封装的DOM元素也是不用的。如果想复制其绑定事件,则用XX.clone(true);
$("button").replaceWith($("<input type='checkbox'>"));//用括号中的元素替换前面的元素。绑定的事件会失效。replaceAll作用相同,颠倒2个元素的位置而已
$("li").wrap("<strong></strong>");//会为每个匹配的元素在外层包裹一个strong标签
$("li").wrapAll($("<div></div>"));//会为匹配到的所有元素一起在外层包裹一个div。如果被包裹的多个元素之间有其他元素则会被放到包裹元素之后
$("li").wrapInner("<span></span");//会为每个匹配中的元素的子节点外边包裹一层标签
});
</script>
操作DOM元素的主要方法和功能都在注释中详细说明了。这里还没有介绍jquery操作属性和css等相关方法,下次有空再记录下。
jquery DOM操作(一)的更多相关文章
- jQuery DOM操作之结点转移复制
jQuery DOM操作之结点转移复制 $('div').append($('p'))这样即可把p标签移动到div标签里 $('div').append( $('p').html() )是把p标签里的 ...
- JQuery DOM操作(属性操作/样式操作/文档过滤)
jQuery——入门(三)JQuery DOM操作(属性操作/样式操作/文档过滤) 一.DOM属性操作 1.属性 (1).attr() 方法 语法:$(selector).attr(name|prop ...
- Jquery DOM 操作列表
jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). jQuery 属性操作方法 下面列出的这些方法获得或设置元素的 DOM 属性. 这些方法对于 ...
- JQuery DOM操作 、属性和CSS样式操作、其他函数
DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...
- 事件冒泡及事件委托的理解(JQuery Dom操作)
jQuery事件冒泡: click mouseenter 等事件没有绑定 也会触发,只是触发后没有任何结果 子元素触发事件后,会把触发事件传递给父元素,那么父元素也会被触发. 不管有没有绑定事件,都会 ...
- JQuery -- Dom操作, 示例代码
1.内部插入节点 * append(content) :向每个匹配的元素的内部的结尾处追加内容 * appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处 * ...
- JQuery dom 操作总结
DOM 操作之获取值 获得内容 - text():设置或返回所选元素的文本内容 $("#btn1").click(function(){ alert("Text: &qu ...
- Query节点操作,jQuery插入节点,jQuery删除节点,jQuery Dom操作
一.创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...
- jQuery DOM操作
对节点的操作 查找节点 查找节点可以直接利用jQuery选择器来完成,非常便利. 插入节点 jQuery提供了8种插入节点的方法. 序号 方法 描述 实例 1 append() 向每个匹配的元素内部追 ...
随机推荐
- Qt每次运行都是重新编译问题
按理说,Qt使用了makefile技术只会编译刚修改的源文件,但有时会遇到一运行项目就会重新编译的问题,严重浪费了时间. 问题就出在你的系统时间上,系统时间的不准确会影响makefile机制的判断过程 ...
- HTML+css零碎小知识
1.设置了float浮动的元素和绝对定位position:absolute的元素会脱离正常的文档流.但是设置absolute的元素不会占据空间,相当于隐形了. 2.相对定位position:rel ...
- Codeforces 221 A. Little Elephant and Function
A. Little Elephant and Function time limit per test 2 seconds memory limit per test 256 megabytes in ...
- PhotoSwipe 图片浏览插件使用方法
一.简介 PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产 ...
- Javascript的执行过程详细研究
下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥是因为它属于底层行为,那么JavaScript代码执行顺序就比较形象了,因为我 ...
- Try finally的一个实验和为什么避免重载 finalize()方法--例子
public class TryFinallTest { public TryFinallTest(){ } public void runSomething(String str){ System. ...
- 【Explain】mysql之explain详解(分析索引的最佳使用)
在日常工作中,我们会有时会开慢查询去记录一些执行时间比较久的SQL语句,找出这些SQL语句并不意味着完事了,些时我们常常用到explain 这个命令来查看一个这些SQL语句的执行计划,查看该SQL语句 ...
- iTextSharp之pdfRead(两个文件文本内容的比较,指定页数的pdf截取,水印的添加)
using iTextSharp.text; using iTextSharp.text.pdf; using iTextSharp.text.pdf.parser; using System; us ...
- caffe Python API 之SoftmaxWithLoss
net.loss = caffe.layers.SoftmaxWithLoss(net.fc3, net.label) 输出: layer { name: "loss" type: ...
- solr应用
Solr是apache的顶级开源项目,它是使用java开发 ,基于lucene的全文检索服务器.Solr比lucene提供了更多的查询语句,而且它可扩展.可配置,同时它对lucene的性能进行了优化. ...