《小白H5成长之路9》学会使用jQuery常用的选择器

“小白，上午我们学会引入了jQuery，然后用jQuery改变了一个div的html内容，现在我们说一下jQuery常用的选择器，如果你用好jQuery选择器，你会发现改变一个或一组容器的html内容是如此的简单。”

“在jQuery里面最常用到的是id选择器，今天上午我们刚用过那个方法，$('#main')就是找到id为main的容器并将它转换为jquery对象，id选择器需要在id名前面加上#。之前我们也说过这里的选择器跟css选择器很像，所以我们还可以通过别的方式进行选择。比如有这样一个html页面”

“我现在希望让所有class为redline的内容变为：我的内容改变了。可以这样来写$('.redline').html('我的内容改变了')，可以看到这里通过类名进行选择的时候会在类名前面加个点，这跟我们写css代码的时候类的写法是一样的。”

“如果我们希望所有的p标签的内容变成：‘我是p标签’，可以这样来写$('p').html('我是p标签')，怎么样跟css中对p标签设定样式的时候也是一样的吧！”

“页面中id为main的div容器中包含了四个子div容器和一个p容器，假如我希望让main中的所有div内容发生改变可以通过$('#main div').html('我是main里面的div哦！')进行选择更改。注意在#main和div中间会有一个空格，空格就代表了父子关系。”

“还有一种情况，那就是所有class为redline的div容器内容发生改变！这跟刚才的父子关系又不一样，我们可以通过$('div.redline').html('我是div，而且我的class名字是redline哦！')，这里的div和.redline中间没有空格。”

“怎么样jquery选择器很神奇吧！除了我刚说的那几个选择的方式，jquery还有一种属性选择器，比如我们要找href属性值为#好的元素，可以这样来写：$("[href='#']") 。属性选择器你有时间自己做点练习，我就不多说了！”

“最后给你说一点，我们通过选择器选择到的对象很多情况下是一个数组，如果你不懂什么是数组可以去自学一下js的数组类型，比如$('.redline')就包含了三个容器。”

“在jQuery里面获取某个容器的html内容，跟修改html内容用的是同一个方法，只不过不用传参数。比如我们要获取main的html内容，可以用下面的代码实现：”

“如果获取类名为redline的html内容怎么拿呢？”

小白激动的答道：“$('.redline').html()呗！”

老朱说：“小白你把代码写到页面里面试试，看看控制台输出！”

小白失望的说：“怎么只输出了第一行？”

“小白，我刚跟你说了，如果同时选择的是多个容器，他们就是一个对象数组，你刚输出的只是第一个容器的html内容。你再想想办法！”

“朱哥，我觉得通过选择器获取到的那个对象数组后面通过索引就可以取到，这样就可以了吧！”

小白输出以后发现居然报错了！

“小白，你的$('.redline')是jquery对象可以使用html方法，但是$('.redline')[0]不是，你需要再次使用$传入$('.redline')[0]才能转换成jquery对象。你试试看”

“成功了！输出第二个和第三个类名为redline的html内容我也知道怎么写了！”

“小白，假如你不知道总共有多少个id为redline的容器，怎么办？既然$('.redline')是一个数组，我们是不是可以通过length拿到数组的长度？那通过for循环是不是可以进行输出？”

“我试着改一改”

“好了，成功了！感觉今天很有心得啊！for循环我只是之前看js基础知识的时候了解了一下，我再巩固巩固！”

“好的，明天见！”