廖雪峰老师的课堂（5）——操作DOM

互联网人学习成长社群

第五期Web全栈架构师火爆报名中~

jQuery的选择器很强大，用起来又简单又灵活，但是搞了这么久，我拿到了jQuery对象，到底要干什么？

答案当然是操作对应的DOM节点啦！

回顾一下修改DOM的CSS、文本、设置HTML有多么麻烦，而且有的浏览器只有innerHTML，有的浏览器支持innerText，有了jQuery对象，不需要考虑浏览器差异了，全部统一操作！

修改Text和HTML

jQuery对象的和方法分别获取节点的文本和原始HTML文本，例如，如下的HTML结构：

分别获取文本和HTML：

如何设置文本或HTML？jQuery的API设计非常巧妙：无参数调用是获取文本，传入参数就变成设置文本，HTML也是类似操作，自己动手试试：

一个jQuery对象可以包含0个或任意个DOM对象，它的方法实际上会作用在对应的每个DOM节点上。在上面的例子中试试：

所以jQuery对象的另一个好处是我们可以执行一个操作，作用在对应的一组DOM节点上。即使选择器没有返回任何DOM节点，调用jQuery对象的方法仍然不会报错：

这意味着jQuery帮你免去了许多语句。

修改CSS

jQuery对象有“批量操作”的特点，这用于修改CSS实在是太方便了。考虑下面的HTML结构：

要高亮显示动态语言，调用jQuery对象的方法，我们用一行语句实现：

注意：jQuery对象的所有方法都返回一个jQuery对象（可能是新的也可能是自身），这样我们可以进行链式调用，非常方便。

jQuery对象的方法可以这么用：

为了和JavaScript保持一致，CSS属性可以用和两种格式。

方法将作用于DOM节点的属性，具有最高优先级。如果要修改属性，可以用jQuery提供的下列方法：

练习：分别用方法和方法高亮显示JavaScript：

显示和隐藏DOM

要隐藏一个DOM，我们可以设置CSS的属性为，利用方法就可以实现。不过，要显示这个DOM就需要恢复原有的属性，这就得先记下来原有的属性到底是还是还是别的值。

考虑到显示和隐藏DOM元素使用非常普遍，jQuery直接提供和方法，我们不用关心它是如何修改属性的，总之它能正常工作：

注意：隐藏DOM节点并未改变DOM树的结构，它只影响DOM节点的显示。这和删除DOM节点是不同的。

获取DOM信息

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

和方法用于操作DOM节点的属性：

方法和类似，但是HTML5规定有一种属性在DOM节点中可以没有值，只有出现与不出现两种，例如：

等价于：

和对于属性处理有所不同：

返回值更合理一些。不过，用方法判断更好：

类似的属性还有，处理时最好用。

操作表单

对于表单元素，jQuery对象统一提供方法获取和设置对应的属性：

可见，一个就统一了各种输入框的取值和赋值的问题。

有你想看的精彩

感谢您的阅读，如果你觉得我的公众号还不错，请多帮我推荐给你的朋友，多谢了。

前端大牛爱好者：每天一篇前端技术文章，不定时前端干货发送