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

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

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

image.png

image.png

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

image.png

image.png

查看源码

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

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

image.png

image.png

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

image.png

image.png

查看源码及演示

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

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

image.png

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

image.png

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

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

老朱说:“小白你把代码写到页面里面试试,看看控制台输出!”

image.png

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

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

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

image.png

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

image.png

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

image.png

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

image.png

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

“我试着改一改”

image.png

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

“好的,明天见!”

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值