jQuery笔记（操作DOM）

普通地操作DOM，有的浏览器只支持innerHTML，有的支持innerText，有了jQuery对象，不需要考虑浏览器差异了，全部统一操作。

1 修改DOM

1.1 text() 与 html()

jquery对象的text() 与 html()方法对应的就是innerText以及innerHTML，分别获取节点的文本 和 原始HTML文本。
jQuery的API设计非常巧妙：无参数调用text()是获取文本，传入参数就变成设置文本，HTML文本也是类似操作。

var $a = $("#abc").text();//获取节点文本var $b = $("#abc").text("123");//修改节点文本 

一个jQuery对象可以包含0个或多个DOM节点对象，与那些包含多个节点对象的节点对象不同，jQuery对象的方法实际上是会应用到全部DOM节点对象，而正常的包含多个节点对象的节点对象就会发生错误了。
另外，使用jQuery对象的方法即使即使选择器没有返回任何DOM节点，调用jQuery对象的方法仍然不会报错，这个页面流程会继续下去，这意味着可以省略更多的if语句。

1.2 修改CSS

记住，与包含多个节点对象的节点对象不同，jQuery对象可以批量操作，修改CSS可以调用jQuery对象的css('name','value')方法，如：

/* 对一个jQuery对象创建多个css属性 */$(#abc).css("color","blue").css("backgroundColor","yellow");

注意，jQuery对象的所有方法都返回一个jQuery对象（可能是新的也可能是自身），这样我们可以像上面那样进行链式调用。为了与JavaScript保持一致，属性名可以使用驼峰命名或直接css命名

1.2.1 显示和隐藏DOM

要隐藏一个DOM，我们可以设置CSS的display属性为none，利用jQuery的css()方法就可以实现。不过，要显示这个DOM就需要恢复原有的display属性，这就得先记下来原有的display属性到底是block还是inline还是别的值。
因此jQuery直接提供show()和hide()方法，我们不用关心它是如何修改display属性的。

var $div = $("#abc");$div.hide();$div.show();

1.3 修改类属性

如果要修改class属性，可以用jQuery提供的下列方法：

var $div = $("#abc");$div.hasClass("classname1");//返回布尔值$div.addClass("classname2");//增加$div.removeClass("classname1");//减少

另外jQuery还提供一个toggleClass()方法控制类名，当类名存在就移除它，当类名不存在就添加它：

var $div = $("#abc");$div.toggleClass("classname1");

1.4 获取DOM信息

1.4.1 操作DOM高宽

利用jQuery对象的方法，可以获取DOM的高宽等信息，而无需针对不同浏览器编写特定代码

/* 服务器的可视窗口大小 */$(window).width();//宽$(window).height();//高var $div = $("#abc");$div.width();//读取宽$div.width('400px');//设置宽

1.4.2 操作节点属性

attr()，prop()和removeAttr()方法用于操作DOM节点的属性：

// <div id="test-div" name="Test" start="1">...</div>var div = $('#test-div');div.attr('data'); // undefined, 属性不存在div.attr('name'); // 'Test'div.attr('name', 'Hello'); // div的name属性变为'Hello',注意逗号隔开div.removeAttr('name'); // 删除name属性div.attr('name'); // undefined

attr() 和 prop()的区别在于查找没有值的属性，比如说表单上的checked属性，不过此时最好是使用is()方法判断更好

var radio = $('#test-radio');radio.attr('checked'); // 'checked'radio.prop('checked'); // true/* is()方法 */radio.is(":checked");//true,注意参数有冒号

注：类似的类似的属性还有selected，处理时最好用is(':selected')。
另外，还有一点要注意的情况还是当提取信息的jQuery对象包含多个dom对象时，使用prop()得出的checked值依据在这组节点对象的第一个checked属性是否为true，而使用is(":checked")方法得到的则是只要这组有一个节点对象的checked值为true，就返回true

1.4.3 操作表单

jQuery对象统一提供val()方法获取和设置对应的value属性，如

textarea.val(); // 'Hello'textarea.val('Hi'); // 文本区域已更新为'Hi'

---

2 修改DOM结构

2.1 添加DOM

2.1.1 append() 与 prepend()

append()把DOM添加到最后，prepend()则把DOM添加到最前。
使用append()方法，与appendChild()方法类似，都是需要先找到父节点，这里是要找到父节点对应的jQuery对象。

与此同时，append()方法还能接受多种参数，如字串符，原始的DOM对象，原始的DOM对象的数组，jQuery对象和函数对象

//添加DOM对象：var ps = document.createElement('li');ps.innerHTML = '<span>Pascal</span>';ul.append(ps);// 添加jQuery对象:ul.append($('#scheme'));// 添加函数对象:ul.append(function (index, html) {    return '<li><span>Language - ' + index + '</span></li>';});

注意，如果要添加的DOM节点已经存在于HTML文档中，它会首先从文档移除，然后再添加，也就是说，用append()，你可以移动一个DOM节点，这对于appendChild方法也是一样的，这样结合传入参数为DOM节点数组，再使用sort()方法，可以很直接地对DOM节点重新排序

2.1.2 after() 与 before()

等同于insertBefore()，同级节点可以用after()或者before()方法：

var js = $('#test-div>ul>li:first-child');js.after('<li><span>Lua</span></li>');

2.2 删除节点

2.2.1 remove()

要删除DOM节点，拿到jQuery对象后直接调用remove()方法就可以了，同样的调用合适jQuery对象会起到批量删除的效果。

注意：remove()返回值为一个指向被删除的节点的引用，因此以后也可以再使用这些元素。

var li = $('#test-div>ul>li');li.remove(); // 所有<li>全被删除

2.2.2 detach()

detach()方法也能删除DOM节点，与remove()不同的是，该方法不会使与之绑定的事件函数失效。

2.3 复制节点clone()

clone()的作用是复制节点，如：

$(this).clone(true).append("body");//注意clone当中的参数true，含义是同时复制元素的绑定事件，是一个可选参数。

2.4 包裹节点

如果要把某个节点使用其他节点元素包裹起来，可以使用wrap()方法、wrapAll()方法、wrapInner()方法

2.4.1 wrap()方法

wrap()方法是将所有的元素进行单独包裹

/*DOM节点文档<strong>我爱Python</strong><strong>我爱JavaScript</strong>*/$('strong').wrap("<b></b>");/* 结果 *///<b><strong>我爱Python</strong></b>//<b><strong>我爱JavaScript</strong></b>

2.4.2 wrapAll()方法

与wrap()方法不同，wrapAll()方法是将所有的元素一次性包裹

/*DOM节点文档<strong>我爱Python</strong><strong>我爱JavaScript</strong>*/$('strong').wrap("<b></b>");/* 结果<b><strong>我爱Python</strong><strong>我爱JavaScript</strong></b>*/

2.4.3 wrapInner()

wrapInner()方法的作用是包裹节点元素的子节点内容（包括文本节点）

/*DOM节点文档<strong>我爱Python</strong>*/$('strong').wrapInner("<b></b>");/* 结果<strong><b>我爱Python</b></strong>*/

2.4 题目理解append()

除了列出的3种语言外，请再添加Pascal、Lua和Ruby，然后按字母顺序排序节点：

<!-- HTML结构 --><div id="test-div">    <ul>        <li><span>JavaScript</span></li>        <li><span>Python</span></li>        <li><span>Swift</span></li>    </ul></div><script>var ul = $('#test-div ul');['Pascal','Lua','Ruby'].forEach(function(element){    ul.append('<li><span>'+element+'</span></li>');});//使用forEach,不使用mapvar li = ul.find('li').sort(function(x,y){    return x.innerText>y.innerText?1:-1;});//制作排好序的dom节点数组ul.append(li);//添加到jQuery对象中</script>