JQuery利用find查找子元素并修改其样式和属性

最近做项目遇到一个根据ajax结果自动更新form表单内元素的需求，涉及到JQuery关于子元素的一些操作，特意记录一下。

测试环境

html如下

<div id="container">
    <div id="box1"><span id="span1"></span></div>
    <div id="box2"><span id="span2"></span></div>
    <span id="span3"></span>
</div>

子元素查找

既然涉及到子元素的查找，首先要找到父元素，将上述的div做为父元素

let $container=$('#container');

对于如何用JQ去查找元素，可以参照另一篇博客《JQuery的选择器和过滤器汇总》

之后就可以开始子元素的查找了。

JQ元素有两个方法可以用于子元素查找，分别是children()和find()。其中带的参数也都是和查找元素一样的选择器和过滤器。

children方法

console.log($container.children('span'));

这时候打印的结果为

jQuery.fn.init [span#span3, prevObject: jQuery.fn.init(1)]
0: span#span3
length: 1
prevObject: jQuery.fn.init [div#container]
__proto__: Object(0)

只找到了id为span3的那个span，这说明children方法只能找到下一级的子元素，更深层次的无法查找。这就有一点类似css中的>符号。

find方法

console.log($container.find('span'));

结果如下

jQuery.fn.init(3) [span#span1, span#span2, span#span3, prevObject: jQuery.fn.init(1)]
0: span#span1
1: span#span2
2: span#span3
length: 3
prevObject: jQuery.fn.init [div#container]
__proto__: Object(0)

将三个元素都找到了，这说明find方法能找到所有的子元素，不管层级多深。

下面就以find为例来说明下对元素的操作。

修改元素样式和属性

之前在文章《JQuery中元素操作和事件响应汇总》中对元素的操作有了笼统的介绍，这里详细说一下修改样式和属性的操作。

首先找到这三个span标签

let $span = $container.find('span');

此时如果是获取值只是对第一个元素，而如果修改或者赋值是对3个元素同时操作。

例如修改文字内容，用html()或者text()方法

$span.html('我被找到了！')

之后的显示效果如下

这里要注意的是还有一个val()方法，专门用于对表单元素，例如input，去获取和设置文字内容，这里就不演示了。例如想获取登陆页用户名，ajax传递到后台进行判断就需要用到这个方法。

如果是修改css样式可以直接用css()方法，修改单个样式就传入两个参数，分别是样式名称和值

$span.html('我被找到了！').css('color','red');

没错，属性和样式可以进行级联操作。之后的效果如下

如果想同时修改多个css样式可以传入一个字典，key为样式名，value为样式的值

$span.html('我被找到了！').css({'color':'red','font-size':'30px'});

之后的效果如下

如果是修改属性，需要用到的是attr()方法，和css()一样也是可以修改单个属性或者是传入字典修改多个属性。当然因为修改class用的比较多，JQ中专门有addClass，removeClass和toggleClass来快速进行class的增删。

我是T型人小付，一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我，如果有问题欢迎在底下的评论区交流，谢谢。