jQuery——操作DOM

所谓Web体验，就是Web服务器与Web浏览器之间的合作。过去，都是由服务器生成HTML文档，然后浏览器负责解释并显示该文档。后来，我们可以用CSS技术来动态修改页面的外观。

###操作属性

jQuery实际上是在操作DOM中的className属性。

####非类属性

jQuery提供了.attr()和.removeAttr(）方法，这些方法可以修改属性。

通过jQuery还可以一次修改多个属性。

.attr()方法也接受一对参数，第一个参数是属性名，第二个是属性值。更常用的是传入一个包含键值对的对象。

如果我们想让每个匹配的元素都具有相同的一个或多个属性值，那么只要给.arrt()传入一个静态的对象即可。更常见的是，为每个元素添加或修改的属性都必须具有不同的值。

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

####DOM元素属性

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

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

//取得"checked"属性的当前值

var currentlyChecked = $('.my-checkbox').prop('checked');

//设置"checked"属性的值

$('.my-checkbox').prop('checked',false);

####表单控件的值

在取得和设置表单控件的值时，建议使用jQuery提供的.val()方法：

//取得文本输入框的当前值

var inputValue = $('#my-input').val();

//取得选项列表的当前值

var selectValue = $('#my-select').val();

//设置单选列表的值

$('#my-single-select').val('value3');

//设置多选列表的值

$('#my-multi-select').val(['value1','value2']);

###DOM树操作

####重新认识$()函数

$()函数就像一个工厂，它能够生成一个jQuery对象，指向CSS选择符所描述的一组元素。

$()函数不仅能够改变页面的视觉外观，更能改变页面中实际的内容。只要在这对圆括号中放入一组HTML元素，就能轻而易举地改变整个DOM结构。

####创建新元素

在FAQ页面中，一个常见的功能是出现在每一对“问题-答案”后面的back to top(返回页面顶部)链接。

####插入新元素

若想把back to top链接插入到每个段落后面，因此就可以使用.inserAfter()方法。

.insertBefore()在现有元素外部、之前添加内容

.prependTo()在现有元素内部、之前添加内容

.appendTo()在现有元素内部、之后添加内容

.insertAfter()在现有元素外部、之后添加内容

移动元素

动态地放置并格式化脚注，就是插入操作在实际中的一种应用。

脚注方案：

为每个标注编号

为正文中标出提取脚注的位置，使用脚注的编号

在文本中的位置上创建一个指向对应脚注的链接，在脚注中创建返回文本位置的链接。

###复制元素

在复制元素时，需要使用jQuery的.clone()方法，这个方法能够创建任何匹配的元素集合的副本以便将来使用。

连同事件一起复制

在默认情况下，.clone()方法不会复制匹配的元素或其后代元素中绑定的事件。不过，可以为这个方法传递一个布尔值参数，将这个参数设置为true，就可以连同事件一起复制，即.clone(true)。

###内容setter和getter方法

.html()方法，.text()方法，取得匹配元素的内容，或者用新字符串替换匹配元素的内容。

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

###DOM操作方法的简单归纳

（1）要在HTML中创建新元素，使用$()函数。

（2）要在每个匹配的元素中插入新元素，使用

.append() .appendTo() .perpend() .prependTo()

（3）要在每个匹配的元素相邻的位置上插入新元素，使用

.after()、inserAfter()、.before()、.inserBefore()

（4）要在每个匹配的元素外部插入新元素，使用：

.wrap()、.wrapAll()、.wrapInner()

（5）要用新元素或文本替换每个匹配的元素，使用：

.html()、.text()、.replaceAll()、.replaceWith()

（6）要移除每个匹配的元素中的元素，使用：

.empty()

（7）要从文档中移除每个匹配的元素及其后代元素，但不实际删除它们，使用：

.remove()、.detach()

巴特西

jQuery——操作DOM

移动元素

最新文章

热门文章