JQuery学习笔记（3）——节点操作 节点查找

插入节点

内部插入

所谓的内部插入，就是指在节点里面的插入，而外部插入，则是在节点外面插入。

append()prepend()appendTo()prependTo()

append和prepend是相反的 后面以To结尾的，参数为被插入内容的节点

append可以理解为尾部插入，prepend为头部插入

复制//在div里面的内容，末尾再追加一个p标签，插入的p标签在div所有子元素的末尾 $("#mydiv").append($("<p>末尾插入</p>")); //在div里面的内容，头部追加一个p标签，插入的p标签位于div的所有子元素的首位 $("#mydiv").prepend($("<p>头部插入</p>")); //下面两种鱼上面的效果是一样的，只是调用的对象和参数这两者换了位置 $("<p>末尾插入</p>").appendTo($("#mydiv")); $("<p>头部插入</p>").prependTo($("#mydiv"));

外部插入

after()before()insertAfter()insertBefore()

这里，使用方法与之前的内部插入类似

复制//div之后插入一个p标签，p标签和div是同级关系 $("#mydiv").after($("<p>末尾插入</p>")); //div之前插入一个p标签，p标签和div是同级关系 $("#mydiv").before($("<p>头部插入</p>")); //把p标签插入到div之后，同级 $("<p>末尾插入</p>").insertAfter($("#mydiv")); //把p标签插入到div之前，同级 $("<p>末尾插入</p>").insertBefore($("#mydiv"));

替换节点

下面的两个方法，效果一样，只是调用对象和目标相反

replaceWith(content|fn) 复制$('div.second').replaceWith('<h2>New heading</h2>'); replaceAll(selector) 复制$('<h2>New heading</h2>').replaceAll('.inner');

删除节点 克隆节点

删除节点

empty() 删除节点下面的所有元素，只保留节点remove([selector]) 删除节点，包括节点本身，可以添加选择器进行过滤detach([selector]) 删除节点，但保留节点属性，可以添加选择器进行过滤

克隆节点

clone()

复制var btn = $('#mybutton').clone(); //在添加到某个节点之前可以修改属性 btn.css({background:red}); btn.appendTo($('#mydiv'));

查找节点

我们获得一个节点，想要获取它的子节点或者父节点，都是属于查找节点

下列的方法，未标明返回类型的，都是返回一个JQuery对象

过滤

first() 获得第一个节点last() 获得最后一个节点boolean hasClass() 获得包含有某个样式的节点 复制<div id="mydiv" class="foo bar"></div>

上面的div有两个样式，使用hasClass，参数为两个的样式中的一个，都会返回true

复制$('#mydiv').hasClass('foo') 返回true $('#mydiv').hasClass('bar') 返回true has(selector) 获得包含某个元素的节点 复制<ul> <li></li> </ul> <ul></ul> $('ul').has('li').css(); ul中包含有li的ul的css会被修改

查找

find(selector) 查找后代元素children(selector) 只查找子元素eq(index) 获得节点里指定索引的子元素（调用的jQuery对象包含多个元素） 复制$('tbody').eq(2) //0开始，索引为 $('tbody').eq(-1) //倒数第一个

转载于:https://www.cnblogs.com/chaoyang123/p/11549770.html

相关资源：JAVA上百实例源码以及开源项目