jQuery(2)选择器总结

2 篇文章 0 订阅
2 篇文章 0 订阅

1.什么是jQuery选择器

        (1)jQuery选择器类似于CSS选择器(定位元素,施加样式),能够实现定位元素,施加行为

        (2)使用jQuery选择器能够将内容与行为分离

        (3)学会使用选择器是学习jQuery的基础

2.jQuery选择器的种类

        (1)简洁的写法:$()工厂函数在很多JavaScript类库中都被作为一个选择器函数使用

        (2)支持css1到css3

          ------jQuery选择器支持css1,css2,css3选择器,同时拥有少量独有的选择器用法

         ------使用jQuery选择器时,无需考虑浏览器是否支持这些选择器

        (3)完善的处理机制

3.jQuery选择器

        (1)ID选择器:<1>特点:最快,尽量使用id选择器

         <2>作用:返回匹配id属性值的元素

         <3>用法:$('#d1');

         <4>说明:返回html页面中id为d1的元素

         $('#d1').click(function(){

         $('#d1').css('background','#f00');

         })//选择id为d1的元素

        (2)类选择器:<1>作用:返回匹配class属性值的所有元素

         <2>用法:$('.className');

         <3>说明:返回html页面中class为className的所有元素

         $('#d1').click(function(){

         $('.li1').css('background','#f00');

         })//选择class为li1的所有元素

        (3)元素选择器:<1>作用:返回匹配元素名的所有元素

         <2>用法:$('elementName');

         <3>说明:返回html页面中元素名为elementName的所有元素

         $('#d1').click(function(){

        $('div').css('background','#f00');

        }) //选择元素名是div的所有元素

        (4)通配符选择器:<1>作用:返回当前html页面中的所有元素

         <2>用法:$('*');

         <3>说明:返回html页面中的所有元素

         $('#d1').click(function(){

         $('*').css('background','#f00');

         })//选择所有元素

        (5)复合选择器:<1>复合选择器,即所有选择器的集合

         <2>作用:将每个选择器匹配到的元素合并后一起返回

         $('#d1').click(function(){

         $('#two,span').css('background','#f00');

         })//选择元素名是span的所有元素和id为two的元素

        (6)后代选择器:<1>用法:$('select1 select2');

         <2>说明:根据select1找到节点后,再去寻找子节点中符合select2的所有节点

         $('#d1').click(function(){

         $('body div').css('background','#f00');

         })//选择body内的所有div元素

        (7)子代选择器:<1>用法:$('select1>select2');

         <2>说明:只查找直接子节点,不查找间接子节点,与$('select1 select2')选择器有区别,$('select1>select2')选择器是查找子代元素

         $('#d1').click(function(){

         $('body div').css('background','#f00');

         })//选择body内的所有div元素

等……
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值