jQuery节点操作创建节点元素删除节点 替换节点复制节点等基本本操作

节点操作

jQuery中节点操作

查找节点（前面章节已讲）

创建节点

插入节点

删除节点

替换节点

复制节点

创建节点元素

工厂函数$()用于获取或创建节点

$(selector)：通过选择器获取节点

$(element)：把DOM节点转化成jQuery节点

$(html)：使用HTML字符串创建jQuery节点

var $newNode=$("<li></li>");

var $newNode1=$("<li>你喜欢哪些项目？</li>");

var $newNode2=$("<li title='last'>游泳是再合适不过了！</li>");

元素内部插入子节点

元素外部插入同辈节点

删除节点

jQuery提供了三种删除节点的方法

remove()：删除整个节点

empty()：清空节点内容

detach()：删除整个节点，保留元素的绑定事件

替换节点

replaceWith()和replaceAll()用于替换某个节点

var $newNode1=$("<li>你喜欢哪些运动项目？</li>");

$(".gameList li:eq(2)").replaceWith($newNode1);

($newNode1).replaceAll(".gameList li:eq(2)");

复制节点

clone()用于复制某个节点

参数ture或flase, true复制事件处理，flase时反之

// clone里面写false或者不写，只能克隆元素及内容，不能克隆绑定的事件，只有写了true才能克隆绑定的事件，也就是点击了克隆的元素也会有点击事件

$(selector).clone([includeEvents]) ;

$(".gameList li:eq(1)").click(function(){

$(this).clone(true).appendTo(".gameList");

})

$(".gameList li:eq(2)").click(function(){

$(this).clone(false).appendTo(".gameList");

})

属性操作

获取与设置元素属性

删除元素属性

获取与设置元素属性

attr()用来获取与设置元素属性

获取属性值

$(selector).attr([name]) ;

或

设置多个属性的值

$(selector).attr({[name1:value1]…[nameN:valueN]}) ;

示例：$(".contain img").attr({width:"200",height:"80"});

删除元素属性

removeAttr()用来删除元素的属性

$(selector).removeAttr(name) ;

删除元素的alt属性

$(".contain img").removeAttr("alt");

节点遍历

遍历子元素

遍历同辈元素

遍历前辈元素

其他遍历方法

遍历子元素

children()方法可以用来获取元素的所有子元素

$(selector).children([expr]);

获取<section>的子元素，但不包含子元素的子元素

var $section =$("section").children();

alert($section.length);

遍历同辈元素

jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素

语法 功能

next([expr]) 用于获取紧邻匹配元素之后的元素

$("li:eq(1)").next().addClass("orange");

prev([expr]) 用于获取紧邻匹配元素之前的元素

$("li:eq(1)").prev().addClass("orange");

siblings([expr]) 用于获取位于匹配元素前面和后面的所有同辈元素

$("li:eq(1)").siblings().addClass("orange");

遍历前辈元素

jQuery中可以遍历前辈元素

parent()：获取元素的父级元素

parents()：元素元素的祖先元素

closest()：返回被选元素的第一个祖先元素。就是我们从这个元素开始，进行向上遍历，直到找到我们要找的元素，遍历停止，也就是说寻找第一个祖先元素。

$(“span”).closest(“ul”).css({“color”:“red”,“border”:“2px solid red”});

这行代码意思就是从“span”元素开始进行遍历，寻找“ul”元素，当找到第一个“ul”元素，遍历停止，给当前ul元素设置css属性

$("li:eq(1)").parent().addClass("orange");

$("li:eq(1)").parents().addClass("orange");

其他遍历方法

each( )：规定为每个匹配元素规定运行的函数

Index 选择器的位置 从0开始

Element当前的元素

$(selector).each(function(index,element)) ;

$("img").click(function(){

$("li").each(function(){

var str=$(this).text()+"<br>";

$("section").append(str);

})

});

find()方法返回被选元素的后代元素，一路向下直到最后一个后代。

下面的例子返回属于 <div> 后代的所有 <span> 元素：

实例

$(document).ready(function(){

$("div").find("span");

});

CSS-DOM操作

除css()外，还有获取和设置元素高度、宽度等的样式操作

width和height是本身jq中的方法：

：offset（）：返回以像素为单位的letf和top坐标，只对可见元素有效，设置display：none就会i无效；

如果设置了绝对定位，那么会获取绝对定位距离父元素的值left值和top值；

：offseparent（）：返回最近的已定位的祖先元素