锋利的jQuery Day3

JavaScript jQuery

jQuery中的DOM操作

1 DOM操作分类

DOM操作分为3个方面，即DOM Core（核心）、HTML-DOM和CSS-DOM。

1.1 DOM Core

DOM Core不专属于JavaScript，任何支持DOM的程序设计语言都可以使用。用途并非仅限于处理网页，也可用来处理任意使用标记语言编写的文档，如XML。

getElementById()、getElementsByTagName()、getAttribute()和setAttribute()方法等都属于DOM Core组成部分。

document.getElementsByTagName("form");//DOM Core 获取表单对象
element.getAttribue("src");//获取某元素的src属性

1.2 HTML-DOM

HTML-DOM提供了一些简明的记号来描述各种HTML元素的属性。

document.forms;//获取表单对象
element.src;//获取某元素的src属性

获取某些对象、属性，即可以使用DOM Core来实现，也可以使用HTML-DOM实现，相交后者比较简短，但它只能用来处理Web文档。

1.3 CSS-DOM

CSS-DOM是针对CSS的操作，主要作用是获取和设置style对象的各种属性，使网页呈现各种不同效果。

element.style.color = "red";//设置某元素style对象字体颜色

2 jQuery中的DOM操作

2.1 查找节点

• 查找元素节点

$(document).ready(function() {
    var $li = $("ul li:eq(1)"); //获取<ul>里第2个<li>节点
    var li_txt = $li.text();    //获取第2个<li>元素节点的文本内容
    alert(li_txt);
})

• 查找属性节点

var $pare = $("p");                      //获取<p>节点
var p_txt = $pare.text();               //获取<p>节点的文本内容
var ptitle_txt = $pare.attr("title");   //获取<p>元素节点的属性title
alert(p_txt); 
alert(ptitle_txt);

2.2 创建节点

• 创建元素节点

        var $li_1 = $("<li></li>");
        var $li_2 = $("<li></li>");
        $("ul").append($li_1);         //添加到<ul>节点中
        $("ul").append($li_2)；         //可以采用链式写法：$("ul").append($li_1).append("li_2")

jQuery的工厂函数$()可以完成创建元素的任务，根据传入的HTML标记字符串，创建一个DOM对象， 并将这个DOM对象包装成一个jQuery对象后返回：

$(html);

• 创建文本节点

var $li_1 = $("<li>香蕉</li>");
var $li_2 = $("<li>香梨</li>");
$("ul").append($li_1);            
$("ul").append($li_2);

具体情况类似上面的创建元素节点。
注：无论$(html)的HTML代码多么复杂，都是使用同样方式来创建的。

• 创建属性节点

var $li_1 = $("<li title='香蕉'>香蕉</li>");
var $li_2 = $("<li title='香梨'>香梨</li>");
$("ul").append($li_1);
$("ul").append($li_2);

2.3 插入节点

将新创建的节点插入文档最简单的办法就是，让它成为这个文档的某个节点的子节点。

2.4 删除节点

删除文档中的某个多余节点，jQuery提供了三种删除节点的方法，remove()，detach()和empty()。

• remove()方法
  作用是从DOM方法中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。

$('ul li:eq(1)').remove();//获取第二个<li>元素节点后删除它

当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。该方法的返回值是一个指向已被删除的节点的引用。所以元素用remove()方法删除后，还可以继续使用

var $li =$('ul li:eq(1)').remove();
$li.appendTo("ul");

上述代码可以直接简化为：

$('ul li:eq(1)').appendTo('ul');//appendTo()方法也可以用来移动元素
//移动元素时，先从文档中删除此元素，然后在插入指定位置。

remove()方法同样可以传递参数来选择性地删除元素

$("ul li").remove("li[title=菠萝]");

• detach()方法

与remove()方法一样，也是从DOM中去掉所有匹配的元素。需要注意的是，这个方法不会把匹配的元素从jQuery对象中删除。与remove（)不同的是，detach()方法所有绑定的事件、附加的数据都会保留下来。

$("ul li").click(function(){
    alert($(this).html());
})
var $li = $("ul li:eq(1)").detach();//删除元素
$li.appendTo("ul");//重新追加元素，之前绑定的点击事件还在，如果使用remove()方法之前绑定的事件将会消失

• empty()方法

empty()方法的作用是清空节点，能清空元素中的所有后代节点。

$("ul li:eq(1)").empty();//获取第二个<li> ，清空此元素里的内容

2.5 复制节点

$("ul li").click(function() {
        $(this).clone().appendTo("ul");//复制当前点击的节点，然后追加到<ul>中

但复制出来的新元素不具备让任何行为，如果需要新元素具备行为：

$(this).clone(true).appendTo("body");//clone的参数为true

clone()方法中传递参数true，含义是复制元素的同时复制元素所绑定的时间。

2.6 替换节点

replaceWith()方法作用是将所有匹配的元素都替换成指定的HTML或DOM元素。

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

repalceAll()方法与repalceWith()方法，跟之前讲过的append与appendTo关系类似，都是颠倒原方法的操作。

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

注：如果在替换之前，已为元素绑定事件，替换后原来绑定的事件也会被取消，需要为新元素重新绑定事件。

2.7 包裹节点

• wrap()方法
  将某个节点用其他标记包裹起来，该方法对于需要在文档中插入额外的结构化标记非常有用，且不会破坏原始文档的语义。

$("strong").wrap("<b></b>");//用<b>标签把<strong>元素包裹起来

• wrapALl()方法
  该方法会将所有匹配的元素用一个元素来包裹。不同于wrap()方法是将所有的元素进行单独的包裹。

$("strong").wrap("<b></b>");

使用wrap()方法得到结果如下：

    <b><strong title="选择你喜欢的水果。">你喜欢的水果是？</strong></b>
    <b><strong title="选择你喜欢的水果。">你喜欢的水果是？</strong></b>

$("strong").wrapAll("<b></b>");

使用wrapAll()方法得到结果如下：

 <b><strong title="选择你喜欢的水果。">你喜欢的水果是？</strong>
    <strong title="选择你喜欢的水果。">你喜欢的水果是？</strong></b>

注：如果被包裹的多个元素之间有其他元素，其他元素会被放到包裹元素之后。

• wraplnner()方法

  该方法将每个匹配的元素的自内容（包括文本节点）用其他结构化的标记包裹起来。

  $("strong").wrapInner("<b></b>");

  运行结果为：

  <strong title="选择你喜欢的水果。"><b>你喜欢的水果是？</b></strong>
  <strong title="选择你喜欢的水果。"><b>你喜欢的水果是？</b></strong>

2.8 属性操作

• attr()方法

attr()方法可以用来获取和设置元素属性。获取元素属性，只需要传入一个参数，即属性名称。设置元素属性，需要传入两个参数，即属性名称和对象的值。也可以一次性为同一个元素设置多个属性：

$("p").attr("title","your title");
$("p").attr({"title":"your title","name":"test"});

• removeAttr()方法

该方法用来删除文档中某个元素的特定属性。

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

2.9 样式操作

获取和设置class也是使用attr()方法来完成的。使用attr()方法来设置class时，是覆盖原属性。
如果想要追加属性的话，使用addClass()方法。
删除class的某个值可以使用removeClass()方法来完成，其作用是从匹配的元素中删除全部或者指定class，带参数的话就是删除该class，不带参数即将class值全部删除。
toggle()方法作用是，交替执行两个代码块的函数，如果元素原来是显示的，则隐藏它；如果元素是隐藏的，则显示它。

$element.toggle(function(){
    //显示元素
}.function(){
    //隐藏元素
})

toggleClass()方法可控制样式上的重复切换。如果类名存在则删除它，雷鸣不存在则添加它。

hasClass()方法用来判断元素中是否含有某个class，如果有返回true，否则返回flase。在jQuery内部实际上是调用了is()方法来完成这个功能。

$("p").hasClass("another");
$("p").is(".another");

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

• html()方法

该方法类似JavaScript中的innerHTML属性，可以用来读取或设置某个元素中的HTML内容。

 var p_html = $("p").html();//输出的不止里面的文字还有标签

同理设置某元素的HTML代码，需要传递一个参数，参数为要设置的内容。

• text()方法

该方法类似JavaScript中的innerText属性，可以用来读取或设置某个元素中的文本内容。

var p_txt = $("p").text();//获取的是<p>元素里的文本内容

同理，设置某元素的文本内容，传递需要设置的文本内容。

• val()方法

此方法类似JavaScript中的value属性，可以用来读取或设置元素的值。无论元素是文本框，下拉列表还是单选框，都可以返回元素的值。如果元素为多选，则返回一个包含所有选择值的数组。
传递数组时要使用["X","Y"]这种形式

focus()方法相当于JavaScript中的onfocus()方法，作用是处理获得焦点时的事件。
blur()方法相当于JavaScript中的onblur()方法，作用是处理失去焦点时的事件。
defaultValue属性是默认值

2.11 遍历节点

• children()方法

该方法用来获取匹配元素的子元素集合。
注：childern()方法只考虑子元素而不考虑其他后代元素。

• next()方法

该方法用来取得匹配元素后面紧跟的同辈元素。

• prevent()方法

该方法用于取得匹配元素前面紧邻的同辈元素。

• siblings()方法

该方法用于去的匹配元素前后所有的同辈元素。

• closest()方法

该方法用于取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配直接返回元素本身，不匹配向上查到父元素，逐级向上知道找到匹配的元素，如果什么都没找到返回一个空的jQuery对象。

• parent(）方法

获取集合中每个匹配元素的父辈元素

• parents()方法

获取集合中每个匹配元素的祖先元素（祖先元素包括父元素）

2.12 CSS-DOM操作

CSS-DOM技术就是读取和设置style对象的各种属性。

可以利用css()方法获取元素的样式属性

$("p").css("color");

无论color属性是外部CSS导入，还是直接拼接在HTML元素里（内联），css()方法都能获取到属性style里的其他属性值。
同理，也可以用css()方法设置某个元素单个或多个样式。

$("p").css("color","red");//注意单个样式时用逗号链接
$("p").css({"color":"red","font-size":"30px"});

透明度设置直接使用opacity属性，例如设置为半透明：

$("p").css("opacity","0.5");//不能使用百分数

获取元素的height属性：

$("p").css("height");

还可以使用height()方法来获取和设置高度，其作用是获取匹配元素的当前计算的高度值（px）:

    alert($("p").css("height"));    //18px
    alert($("p").height());     //18
    $("p").height(100);         
    alert($("p").css("height"));    //100px
    alert($("p").height());         //100

注1：height()方法如果传递的值是一个数字，默认单位为px，如果要使用其他单位，则需要以字符串的形式传递。
注2：这两种方法区别在于css()获取的高度值与样式设置有关且带单位，height()方法获取的高度值是元素在页面中的实际高度，与样式无关，且不带单位。

width()方法同理。

CSS-DOM中元素定位的方法:

• offset()方法

作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，只对可见元素有效。

    var offset = $("ul :eq(0)").offset();
    var left = offset.left;//8，结果并不带单位
    var top = offset.top;
    alert("距离顶部 "+top+"px,距离左侧"+left+"px。");

• position()方法

作用是获取元素相对于最近的一个position样式属性设置为relative或absolute的祖父节点的相对偏移，返回对象同上，有两个属性，即top和left：

var position = $("p").position();
var left = position.left;
var top = position.top;

• scrollTop()方法与scrollLeft()方法

作用分别是获取元素的滚动条距离顶端的距离和据左侧的距离：

    var $p = $("p");
    var scrollTop = $p.scrollTop();
    var scrollLeft = $p.scrollLeft();

控制元素的滚动条滚动到指定位置，可传递一个参数。