jQuery入门笔记之（二）文档对象模型

摘要：删除指定的属性，这个方法就不可以使用匿名函数，传递和均无效。遍历对象数组索引，鍵，属性名属性值，值相当于遍历原生对象数组时，为元素。在使用使用时，可以使用传入匿名函数的方法，实现由默认到几个之间的切换。

转自个人博客

我们通过前面所学习的各种选择器、过滤器来得到我们想要操作的元素。这个时候，我们就可以对这些元素进行 DOM 的操作。
那么，最常用的操作就是对元素内容的获取和修改。html()和 text()方法:

注意：当我们使用 html()或 text()设置元素里的内容时，会清空原来的数据。而我们期望能够追加数据的话，需要先获取原本的数据。

$("#box").html($("#box").html() + "guowenfh.github.io"); //追加数据
//当然它还支持使用函数来进行更复杂的追加

val()的特殊用法：
如果想设置多个选项的选定状态，比如下拉列表、单选复选框等等，可以通过数组传递操作。

$("input").val(["check1","check2", "radio1"]); //value 值是这些的将被选定

除了对元素内容进行设置和获取，通过jQuery也可以对元素本身的属性进行操作，包括获取属性的属性值、设置属性的属性值，并且可以删除掉属性。
attr()和removeAttr()：

注意：

jQuery中很多方法都可以使用 function() {}来返回出字符串，比如 html()、text()、val()和上一章刚学过的 is()、filter()方法。
这些方法里的function() {}，可以不传参数。可以只传一个参数 index，表示当前元素的索引(从0开始)。也可以传递两个参数 index、value，第二个参数表示属性原本的值。

(当然并不是所有方法都适合，有兴趣可以自己逐个尝试)。

删除指定的属性，这个方法就不可以使用匿名函数，传递index和value均无效。$("div").removeAttr("title"); //删除指定的属性

当然因为id和class也是元素的属性，自然也可以使用attr进行设置，但是建议不这样使用，因为会导致整个页面结构的混乱，有专门的属性对它们进行设置。

元素样式操作包括了直接设置 CSS 样式、增加 CSS 类别、类别切换、删除类别这几种操作方法。使用频率极高！

理解：

在获取多个 CSS 样式时，获取到的是一个对象数组，如果用原生JS进行解析需要使用for in遍历。

var box = $("div").css(["color", "height", "width"]); //得到多个 CSS 样式的数组对象
for (var i in box) { //逐个遍历出来
    alert(i + ":" + box[i]);
}

在jQuery显然不需要那么麻烦，因为它提供了一个遍历工具专门来处理这种对象数组，$.each()方法，这个方法可以轻松的遍历对象数组。

/**
 * 遍历对象数组
 * @param  {String} index 索引，鍵，属性名
 * @param  {String} value  属性值，值（相当于arr[i]）
 */
//遍历原生JS对象数组时，value为元素DOM。
$.each(box, function(index, value) {
    alert(index+":"+value);//效果和上面的一样
});

如果想设置某个元素的 CSS 样式的值，但这个值需要计算我们可以传递一个匿名函数。

$("div").css("width", function (index, value) {
return (parseInt(value) - 50) + "px";//局部操作，不影响全局，避免冲突。
});

在使用.toggleClass()使用时，可以使用传入匿名函数的方法，实现由默认到几个class之间的切换。例如：

//注意这里必须要先删除原有的样式，不然只是被覆盖了，而不是替换。
$("div").click(function() {
    $(this).toggleClass(function() {
        if ($(this).hasClass("red")) {
            $(this).removeClass("red");
            return "blue";
        } else {
            $(this).removeClass("blue");
            return "red";
        }
    });
});

对于.toggleClass()传入匿名函数的方法，还可以可以传递 index索引、class类两个参数以及频率布尔值，可以得到当前的索引、class类名和频率布尔值。

虽然可以不加单位，但是建议加上，使代码更加清晰。
index 是索引，value 是原本值。

上述两个方法不包括内外边距和边框

注意：
前两个方法，获取得到的是一个对象，如：{left:12,top:32}，所以需要获取其中的一个值的时候，还需要进行选取，例如：$(div).offset.left。获取相对与视口的偏移。

在获取滚动条的值时需要注意的是，对象为window且需要用$包装转化成jQ对象

$(window).scrollTop(); //获取当前滚动条的位置
$(window).scrollTop(300); //设置当前滚动条的位置

DOM中有一个非常重要的功能，就是节点模型，也就是DOM中的“M”。页面中的元素结构就是通过这种节点模型来互相对应着的，我们只需要通过这些节点关系，可以创建、插入、替换、克隆、删除等等一些列的元素操作。

为了使页面更加智能化，有时我们想动态的在 html 结构页面添加一个元素标签，那么在插入之前首先要做的动作就是：创建节点。
在jQuery中创建节点异常简单。

var box = $("
节点
"); //创建一个节点
$("body").append(box); //将节点插入到元素内部

在创建节点的过程中，其实我们已经演示怎么通过.append()方法来插入一个节点。但仅仅这个功能远远不能满足我们的需求，除了这个方法，jQuery提供了其他几个方法来插入节点。

需要注意的是appendTo(content)与prependTo(content)在使用方法上与其他两个略微有些不同，$("new").appendTo("div");，它代表的是创建的节点传入div内部。

匿名函数方式：

$("div").append(function (index, html) {
 //使用匿名函数插入节点index是获取到的div的索引，html 是原节点
    if(index==1){
        return "节点";//在获取到的第二个div内部添加节点
    }
});

与上面相同insertAfter(content) 与insertBefore(content)也与其它两个是相反的。

jQuery 提供了一系列方法用于包裹节点，那包裹节点是什么意思呢？其实就是使用字符串代码将指定元素的代码包含着的意思。

wrap的多种用法：

$("div").wrap(""); //在 div 外层包裹一层 strong
$("div").wrap("123"); //包裹的元素可以带内容
$("div").wrap(""); //包裹多个元素
$("div").wrap($("strong").get(0)); //也可以包裹一个原生 DOM
$("div").wrap(document.createElement("strong")); //临时的原生 DOM
$("div").wrap(function (index) { //匿名函数
    return "";
});

注意： .wrap()和.wrapAll()的区别在前者把每个元素当成一个独立体，分别包含一层外层；后者将所有元素作为一个整体作为一个独立体，只包含一层外层。这两种都是在外层包含，而.wrapInner()在内层包含。

注意：

.remove()和.detach()都是删除节点，而删除后本身方法可以返回当前被删除的节点对象，但区别在于前者在恢复时不保留事件行为，后者则保留。

节点被替换后，所包含的事件行为就全部消失了。