首页手记 jQuery基础教程（第四版）读书笔记“操...

jQuery基础教程（第四版）读书笔记“操作DOM“

标签：

JQuery

所谓Web体验，就是Web服务器与Web浏览器之间合作的结果。
利用DOM提供的接口修改文档； 在网页中根据需要创建元素和文本；
 移动或删除元素；
 通过添加、删除或修改它们的属性来实现文档内容的变换。

与.css()方法很相似，.attr()方法也接受一对参数，第一个是属性名，第二个是属性值。不过，更常用的方式还是传入一个包含键值对的对象

$(document).ready(function() {
　$('div.chapter a').attr({
　　rel: 'external',
　　title: 'Learn more at Wikipedia'
　});
});

值回调其实就是给参数传入一个函数，而不是传入具体的值。这个函数会针对匹配的元素集中的每个元素都调用一次，调用后的返回值将作为属性的值.

$(document).ready(function() {
　$('div.chapter a').attr({
　　rel: 'external',
　　title: 'Learn more at Wikipedia',
　　id: function(index, oldValue) {
　　　return 'wikilink-' + index;
　　}
　});
});

每次触发值回调，都会给它传入两个参数。第一个是一个整数，表示迭代次数，我们在此利用这个值为第一个链接生成的id是wikilink-0，为第二个链接生成的id是wikilink-1，以此类推

这个例子并没有用到第二个参数，这个参数中保存的是修改之前属性的值。

$(document).ready(function() {
　$('div.chapter a[href*="wikipedia"]').attr({
　　rel: 'external',
　　title: function() {
　　　return 'Learn more about ' + $(this).text( ) + ' at Wikipedia.';
　　},
　　id: function(index, oldValue) {
　　　return 'wikilink-' + index;
　　}
　});
});

这一次我们利用了值回调的上下文。
就像在事件处理程序中一样，在值回调函数中，this关键字指向每次调用回调时正在操作的那个DOM元素。
在此，我们把这个元素封装为jQuery对象，这样就可通过.text()方法（第4章介绍过）来取得链接的文档内容了。
结果，每个链接的title属性都给出了具体的提示信息，非常贴心。

HTML属性与DOM属性
HTML属性是指页面标记中放在引号中的值，而DOM属性则是指通过JavaScript能够存取的值
例

<p>元素有一个名为class的属性，值为square:<p class="square">

这个属性有一个对应的DOM属性，名为className，值也是square。
某些DOM属性，例如nodeName、nodeType、selectedIndex和childNodes，在HTML中没有对应的属性，因此通过.attr()方法就没有办法操作它们。

此外，数据类型方面也存在差异，比如HTML中的checked属性是一个字符串，而DOM中的checked属性则是一个布尔值。对于布尔值属性，最后是测试DOM属性而不是HTML属性，以确保跨浏览器的一致行为。

在jQuery中，可以通过.prop()方法取得和设置DOM属性：

   //取得"checked"属性的当前值
　var currentlyChecked = $('.my-checkbox').prop('checked');
　//设置"checked"属性的值
　$('.my-checkbox').prop('checked', false);

这个.prop()方法与.attr()方法没有什么不同，比如它们都可以一次性接受一个包含多个值的对象，也支持值回调函数。

表单控件的值
HTML属性与DOM属性差别最大的地方:表单控件的值。比如，文本输入框的value属性在DOM中的属性叫defaultValue，DOM中就没有value属性。而选项列表（select）元素，其选项的值在DOM中通常是通过selectedIndex属性，或者通过其选项元素的selected属性来取得。由于存在这些差异，在取得和设置表单控件的值时，最好不要使用.attr()方法。而对于选项列表呢，最连.prop()方法也不要使用。

建议使用jQuery提供的.val()方法

   //取得文本输入框的当前值
　var inputValue = $('#my-input').val();
　//取得选项列表的当前值
　var selectValue = $('#my-select').val();
　//设置单选列表的值
　$('#my-single-select').val('value3');
　//设置多选列表的值
　$('#my-multi-select').val(['value1', 'value2']);

与.attr()和.prop()一样，.val()方法也可以接受一个函数作为其setter参数

DOM 树操作
.attr()和.prop()方法都是在修改文档时的得力工具。要想操作DOM树本身，需要再深入了解一下jQuery库的核心函数。
$()函数
这个函数就像一个工厂，它能够生成一个jQuery对象，指向CSS选择符所描述的一组元素。然而，除了选择元素之外，$()函数的圆括号内还有另外一个玄机——这个强大的特性使得$()函数不仅能够改变页面的视觉外观，更能改变页面中实际的内容。只要在这对圆括号中放入一组HTML元素，就能轻而易举地改变整个DOM结构。
创建新元素

$(document).ready(function() {
　$('<a href="#top">back to top</a>');
　$('<a id="top"></a>');
});

创建了新的元素，但是还没有把它们添加页面中。为此，我们可以选择使用jQuery提供的众多插入方法中的一种。
插入新元素：
.insertBefore()在现有元素外部、之前添加内容；
 .prependTo()在现有元素内部、之前添加内容；
 .appendTo()在现有元素内部、之后添加内容；
 .insertAfter()在现有元素外部、之后添加内容。

$(document).ready(function() {
　$('<a href="#top">back to top</a>').insertAfter('div.chapter p');
　$('<a id="top"></a>');
});

包装元素

$(document).ready(function() {
　$('span.footnote')
　　.insertBefore('#footer')
　　.wrapAll('<ol id="notes"></ol>')
　　.wrap('<li></li>');
});

使用.wrapAll()把所有脚注都包含在一个<ol>中然后再使用.wrap()将每一个脚注分别包装在自己的<li>中

显式迭代
:.each()方法就是一个显式迭代器（与最近加入JavaScript语言中的数组迭代器forEach()非常相似）
这个方法接受一个回调函数，这个函数会针对匹配的元素集中的每个元素都调用一次

$(document).ready(function() {
　var $notes = $('<ol id="notes"></ol>').insertBefore('#footer');
　$('span.footnote').each(function(index) {
　　$('<sup>' + (index + 1) + '</sup>').insertBefore(this);
　　$(this).appendTo($notes).wrap('<li></li>');
　});
});

index这个参数表示迭代的次数，从0开始，每迭代一次就加1。

反向插入方法
反向插入方法：像.insertBefore()和.appendTo()这样的插入方法，一般都有一个对应的反向方法。反向方法也执行相同的操作，只不过“目标”和“内容”正好相反。

　$('<p>Hello</p>').appendTo('#container');

　与下面的代码结果一样：

$('#container').append('<p>Hello</p>');

下面我们就使用.before()代替.insertBefore()　

$(document).ready(function() {
　　　var $notes = $('<ol id="notes"></ol>')
　　　.insertBefore('#footer');
　　　$('span.footnote').each(function(index) {
　　　　$(this)
　　　　　.before('<sup>' + (index + 1) + '</sup>')
　　　　　.appendTo($notes)
　　　　　.wrap('<li></li>');
　　　});
　});

.join()方法

var str = 'a' + 'b' + 'c';
var str = ['a', 'b', 'c'].join('');

例：

$(document).ready(function() {
　　　var $notes = $('<ol id="notes"></ol>')
　　　.insertBefore('#footer');
　　　$('span.footnote').each(function(index) {
　　　　$(this)
　　　　　.before([
　　　　　　'<sup>',
　　　　　　index + 1,
　　　　　　'</sup>'
　　　　　].join(''))
　　　　　.appendTo($notes)
　　　　　.wrap('<li></li>');
　　　});
　});

在复制元素时，需要使用jQuery的.clone()方法，这个方法能够创建任何匹配的元素集合的副本以便将来使用。
$('div.chapter p:eq(0)').clone().insertBefore('div.chapter');
在默认情况下，.clone()方法不会复制匹配的元素或其后代元素中绑定的事件。不过，可以为这个方法传递一个布尔值参数，将这个参数设置为true，就可以连同事件一起复制，即.clone(true)。

内容setter 和getter 方法
实现替换的最简便方式，就是直接用新的HTML代替旧的内容。用.html()方法。在调用.html()而不传递参数的情况下，这个方法返回匹配的元素中的HTML标记。而传入参数后，元素的内容将被传入的HTML替换掉。在此要注意传入的HTML必须是有效的，而且要对特殊字符进行转义。

.text()也可以取得匹配元素的内容，或者用新字符串替换匹配元素的内容。但是，与.html()不同的是，.text()始终会取得或设置纯文本内容

在使用.text()取得内容时，所有HTML标签都将被忽略，而所有HTML实体也会被转换成对应的字符

Summary
(1) 要在HTML中创建新元素，使用$()函数。
(2) 要在每个匹配的元素中插入新元素，使用：
 .append()
 .appendTo()
 .prepend()
 .prependTo()
(3) 要在每个匹配的元素相邻的位置上插入新元素，使用：
 .after()
 .insertAfter()
 .before()
 .insertBefore()
(4) 要在每个匹配的元素外部插入新元素，使用：
 .wrap()
 .wrapAll()
 .wrapInner()
(5) 要用新元素或文本替换每个匹配的元素，使用：
 .html()
 .text()
 .replaceAll()
 .replaceWith()
(6) 要移除每个匹配的元素中的元素，使用：
 .empty()
(7) 要从文档中移除每个匹配的元素及其后代元素，但不实际删除它们，使用：
 .remove()
 .detach()