廖雪峰老师的课堂(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对象统一提供方法获取和设置对应的属性:

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

有你想看的精彩

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

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180625B1ANK300?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励