锋利的jQuery学习笔记（4）-DOM操作

1. DOM操作的分类：

DOM Core:JavaScript中的getElementByID，getElementByTagName，getAttribute，setAttribute等方法都是其的组成部分。

HTML_DOM：如document.forms //HTML-DOM提供了一个forms对象；element.src //获取某元素的属性。

CSS_DOM:获取和设置style对象的各种属性，如element.style.color="red"。

2. jQuery中的DOM操作：

1.查找节点：

var $li=$('ul li:eq(1)'); //获取<ul>中第二个<li>节点

var li_txt=$li.text();

alert(li_txt);

2.创建节点属性：

var $para=$('p');

var p_txt=$para.attr("title");

alert(p_txt);

3. 创建节点：

3.1 创建元素节点：

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

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

$("ul").append($li_1);

$("ul").append($li_2);

3.2 创建文本节点：

var $li_1=$("<li>香蕉</li>");

var $li_2=$("<li>雪梨</li>");

$('ul').append($li_1);

$('ul').append($li_2);//链式操作：$('ul').append($li_1).append($li_2)

3.3 创建节点属性：

4. 插入节点

append():向每个匹配的元素内部追加内容；

appendTo():将匹配的元素追加到指定的元素中例如：$('a').appendto('b')是将a追加到b中

prepend():向每个匹配的元素内部前置内容；

prependTo():将所有匹配的元素前置到指定的元素中。

after():在每个匹配的元素之后插入内容。

insertAfter():将所有匹配的元素插入到指定的元素后面。

before():在每个匹配的元素之前插入内容

insertBefore():将所有匹配的元素插入到指定的元素的前面。

5. 删除节点

5.1 remove()方法

$('ul li:eq(2)').remove(); //获取元素<ul>中第二个<li>后，从网页中将其删除

$('ul li:eq(2)').remove("li[title!=菠萝]"); //支持通过传递参数选择性地删除某些元素。

5.2 empty()方法：清空节点内容，不是删除。

6. 复制节点

$('ul li').click(function(){

$(this).clone().appendTo("ul"); //复制当前节点，并追加到<ul>中

})

clone(true):表示复制元素的同时复制改元素所绑定的事件。

7. 替换节点

7.1 replaceWith()方法

将所有匹配的元素都替换成HTML或者DOM元素

$('p').replaceWith("<strong>你最不喜欢的水果</strong>");

7.2 replaceAll()方法

改方法颠倒了replaceWith的操作

$("<strong>你最不喜欢的水果</strong>").replaceAll("p");

8. 包裹节点

wrap()方法：将所有的元素用其他标记单独包裹起来。

$("<strong>").wrap("<b></b>"); //用b标签将strong标签包裹起来。

warpAll()方法：将所有的元素用其他标记全部包裹起来。

warpInner()方法：将每一个匹配元素的子内容用其他标记包裹起来。

9. 属性操作

9.1 获取属性和设置属性：

var $para=$('p');

var p_txt=$para.attr("title");//获取<p>元素的title属性

$('p').attr("title","your title"); //设置单个属性；

$('p').attr({"title":"your title","name":"your name"}); //将一个”名/值”形式的对象设置为匹配元素的属性

9.2 删除属性：removeAttr()方法

$('p').removeAttr("title"); //删除<p>元素的属性title;

10 样式操作

10.1 获取样式和设置样式：

var $p_class=$('p').attr("class"); //获取<p>元素的Class;

$("p").attr("class","high"); //设置<p>元素的样式为"high"，即替换已有的样式。

10.2 追加样式

$("p").addClass("high"); //给<p>元素追加样式"high”；

10.3 移除样式

$("p").removeClass("high"); //移除<p>元素的样式"high";

10.4 切换样式，交替执行代码

$("toggleBtn").toggle(function(){

//code 显示元素

},fucntion(){

//code 隐藏元素

})

10.5 判断是否含有样式

$("p").hasClass("high"); //判断<p>元素是否含有样式"high";

这个方式是为了增强代码可读性而产生的，在jquery内部实际上是调用了is()方法来完成这个功能的。改方法等价于如下代码：

$("p").is(".high"); //is(.+class)

11 设置和获取HTML、文本和值

1. html()方法：读取或设置某个元素的HTML内容

$("p").html(); //获取<p>元素的html代码

$("p").html("<strong>你最喜欢的水果是？</strong>"); //设置<p>元素的html代码。

2. text()方法：该方法类似与javascript中的innerText属性，用来设置或读取某个元素中的文本内容。

$("p").text(); //获取<p>元素的文本内容；

$("p).text("你最喜欢的水果是？"); //设置<p>元素的文本内容为“你最喜欢的水果是？”

3. val()方法：该方法类似与javascript中的value属性，用于获取或设置某个元素的值。

<input type="text" id="address" value="请输入邮箱地址">/

$("#address").val(); //获取id=address文本框的值。

12. 遍历节点：

1. children()方法：该方法用于取得匹配元素的子元素集合，只考虑子元素，不考虑其他任何后代元素。

2. next()方法：用于取得匹配元素后面紧邻的同辈元素。

3. prev()方法：用于取得匹配元素前面紧邻的同辈元素。

4. siblings()方法：用于取得匹配元素前后的同辈元素。

5. closet()方法：用于取得最近的匹配元素

13. CSS-DOM操作

1. css()方法。

$("p").css({"color":"red","width":"12px"}); //设置多个样式。

$("p").css("color":"red"); //设置单个样式。

2. offset()方法：获取当前元素在当前视窗的相对偏移，其中返回的对象包括两个属性，即top和left，它只对可见元素有效。

var offset=$("p").offset();

var left=offset.left;

var top=offset.top;

3. position()方法：获取元素相对于最近一个position样式属性设置为relative或者absolute的祖父节点的相对偏移量，也返回top和left属性。

4. scrollTop()方法和scrollLeft()方法:这两个方法分别是获取元素的滚动条距顶端的距离和距左侧的距离