聚焦：jquery选择器从认识到使用

今天刚刚学了jquery选择器，现在和大家分享一下：

1.   .class 选择器 ---一种通过元素类别属性查找元素

调用格式：
 $(".class") ----其中参数表示元素的css类别名称（类选择器）
-------$(".abc")

2.*选择器 （取走所有的元素）
调用格式: $("*") 可以与其他元素组合使用
$("div *")-------选取包含在div里面的所有元素；
例如

     

      
   
     

 
特别注意，由于使用*选择器获取的是全部元素，因此，有些浏览器将会比较缓慢，这个选择器也需要谨慎使用。

3.sele1,sele2,seleN选择器，也就是多选择器
调用格式 ：$(“sele1,sele2,seleN”)
          特别注意：中间是用逗号隔开的
例如上面我想选择div中的p元素那一行的话
就可以$(".a, span").html("我只想选你")；

4.层次选择器（父子选择器）：ance desc选择器
调用格式：$("ance desc")
其中ance desc是使用空格隔开的两个参数。ance参数（ancestor祖先的简写）表示父元素；desc参数（descendant后代的简写）表示后代元素，即包括子元素、孙元素等等。两个参数都可以通过选择器来获取比如家族姓氏“div”，家族几代人里，都有名字里带“span”的，就可以用这个ance desc选择器把这几个人给定位出来。

     

      
   
     

$("div span")------就是类似  div是父亲 ，span被他包裹 的所有小辈  在这里是可以取到两个span的元素的

5.parent > child选择器
调用格式：$(“parent > child”)

例如

     

     ---取的是这个元素
 

$("div>span").html("我是父亲的儿子不是他的孙子")
与ance desc选择器相比，parent > child选择器的范围要小些，它所选择的目标是子集元素，相当于一个家庭中的子辈们，但不包括孙辈

6.prev + next选择器 
调用格式：$(“prev + next”) 这就叫做远亲不如近邻了 就是调用你紧靠着你的下一家的元素

通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素

$("div+p").html("不管你又几个p 我只取你紧靠着你的第一个p元素")

7.prev ~ siblings选择器
调用格式
$(“prev ~ siblings”)
获取prev 元素后面全部相邻的元素
$("div~p").html("不管你又几个p 只要是同级别的p我都取到")

8.:has(selector)过滤选择器
过滤选择器的功能是获取选择器中包含指定元素名称的全部元素
在div元素中,包含了一个元素,通过has选择器获取

元素中的元素的语法是
$("div:has(span)");
 

改变包含"label"元素的背景色：

       

           

1. 我是P先生


           
2. L妹纸就是我
---------
           

3. 我也是P先生

                      这两行的样式发生改变了
           
4. 我也是L妹纸哦
------
           

5. P先生就是我哦


       

$("li:has('label')").css("background-color", "blue");-----注意了：冒号后面是没有空格的
注意 需要加单引号；
9.  :first过滤选择器
该类型的选择器是根据某过滤规则进行元素的匹配，书写时以“：”号开头,通常用于查找集合元素中的某一位置的单个元素。
在

元素中,添加了多个
• 元素,通过jquery选择器获取最后一个
• 元素的方法是:
  $("li:last")--------获取最后一个
• 元素
   $(“li:first”)------获取第一个元素
  
  10. :eq(index)过滤选择器--这个经常也会用到
  调用格式：:eq(index)
  --如果想从一组标签元素数组中，灵活选择任意的一个标签元素
  
  
   
  
   
  
   
  
   
  • 选我
  
  
  
  例如$("li:eq(3)").css("color","red");---选取 第四个li的元素
  
  11. :contains(text)过滤选择器---按照文本内容来查找一个或多个元素
  eq(index)选择器按索引查找元素相比，有时候我们可能希望按照文本内容来查找一个或多个元素，那么使用:contains(text)选择器会更加方便， 它的功能是选择包含指定字符串的全部元素，它通常与其他元素结合使用，获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。
  
  调用格式：:contains(text)
  
  改变包含"jQuery"字符内容的背景色：
  
           
• 强大的"jQuery"

           
• "javascript"也很实用

           
• "jQuery"前端必学

           
• "java"是一种开发语言

           
• 前端利器——"jQuery"

$("li:contains('jQuery')").css("background", "green");






12. :hidden过滤选择器
过滤选择器的功能是获取全部不可见的元素，这些不可见的元素中包括type属性值为hidden的元素


 

显示隐藏元素的内容


       


 var $strHTML = $("input:hidden").val();
        $("div").html($strHTML);

13. :visible过滤选择器  与hidden过滤器相反
:visible过滤选择器获取的是全部可见的元素，也就是说，只要不将元素的display属性值设置为“none”，那么，都可以通过该选择器获取。

14.[attribute=value]属性选择器----这个经常用到
[attribute=value]属性选择器的功能是获取与属性名和属性值完全相同的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示属性值。
 

改变"title"属性值为"蔬菜"的背景色


       

           
• 茄子

           
• 香蕉

           
• 芹菜

           
• 苹果

           
• 西瓜

       

        
       
注意：属性值中的‘’单引号可以不写，由于属性名与属性值是等号，因此，它们之间不是包含关系，而是完全相同。

[attribute!=value]属性选择器 这个就不介绍了

15. [attribute*=value]属性选择器
介绍一个功能更为强大的属性选择器[attribute*=value]，它可以获取属性值中包含指定内容的全部元素，其中[]是专用于属性选择器的括号符，参数attribute表示属性名称，value参数表示对应的属性值。


改变"title"属性值包含"果"的背景色


       

           
• 茄子

           
• 香蕉

           
• 芹菜

           
• 小西红柿

           
• 西瓜

       

        
       

16. :first-child子元素过滤选择器
:first过滤选择器可以获取指定父元素中的首个子元素，但该选择器返回的只有一个元素，并不是一个集合，而使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素，它是一个集合，常用多个集合数据的选择处理。
   

改变每个"蔬菜水果"中第一行的背景色


       

           
1. 芹菜

           
2. 茄子

           
3. 萝卜

           
4. 大白菜

           
5. 西红柿

       

       

           
1. 橘子

           
2. 香蕉

           
3. 葡萄

           
4. 苹果

           
5. 西瓜

       

        
       

17. :last-child子元素过滤选择器  这个就不介绍了
子元素过滤选择器的功能是获取每个父元素中返回的最后一个子元素，它也是一个集合，常用多个集合数据的选择处理。

18.  :input表单选择器
:input表单选择器可以实现，它的功能是返回全部的表单元素，不仅包括所有标记的表单元素，而且还包括、<select> 和 <button>标记的表单元素，因此，它选择的表单元素是最广的。<br /> <h3>修改全部表单元素的背景色</h3><br />         <form id="frmTest" action="#"><br />         <input type="button" value="Input Button" /><br /><br />         <select><br />             <option>Option</option><br />             <option>oooo</option><br />         </select><br /><br />         <textarea rows="3" cols="8">

       
            Button

       
        
       

22 :checkbox复选框选择器
表单中的复选框常用于多项数据的选择，使用:checkbox选择器可以快速定位并获取表单中的复选框元素。
     

将表单的全部复选框设为不可用


       

       

       
       
            西红柿

       
       
            茄子

       
       
            黄瓜

       
            Button

       

        
       
全部设为选中状态：$("#frmTest:checkbox").attr("checked","true")

23 :submit提交按钮选择器
通常情况下，一个表单中只允许有一个“type”属性值为“submit”的提交按钮，使用:submit选择器可获取表单中的这个提交按钮元素。    
 

修改表单中提交按钮的背景色


       

       

       

       
            Button

       

        
        这个时候就比较特殊了： 需要加上input:submit 否则无法定位 是否缺少“input”， 按钮通常也被认为是提交按钮，为更好区分，只要在:submit选择器之前添加“input”符号。




24 :image图像域选择器

当一个元素的“type”属性值设为“image”时，该元素就是一个图像域，使用:image选择器可以快速获取该类全部元素。例如，在表单中添加两种类型的图像元素，使用:image选择器获取其中的一种图像元素，并改变该元素的边框样式，
 

修改表单中图像元素的背景色


       

       

       

       

       

        
       

26:selected选中状态选择器

与:checked选择器相比，:selected选择器只能获取下拉列表框中全部处于选中状态的选项元素。
   

获取处于选中状态元素的内容


       

       

            苹果
            桔子
            荔枝
            葡萄
            香蕉
       


       

       
        
       

 如何获取列表框元素中被选中元素的的值,代码为
B$("select option:selected").text();

27.使用attr()方法控制元素的属性 --使用度最广的，一定要记住
attr()方法的作用是设置或者返回元素的属性，其中attr(属性名)格式是获取元素属性名的值，attr(属性名，属性值)格式则是设置元素属性名的值。
 
       

attr()方法设置元素属性


        点我就变
       
我改变后的地址是：

        
       

操作元素的内容
使用html()和text()方法操作元素的内容，当两个方法的参数为空时，表示获取该元素的内容，而如果方法中包含参数，则表示将参数值设置为元素内容。
区别：html()方法可以获取元素的HTML内容，包含HTML格式代码

　　　text()方法只是获取元素中的文本内容，并不包含HTML格式代码

操作元素的样式
通过addClass()和css()方法可以方便地操作元素中的样式，前者括号中的参数为增加元素的样式名称，后者直接将样式的属性内容写在括号中。
 $("#content").css({"color":"#fff","background-color":"red"});

移除属性和样式-----这个也不错，使用度还比较高
使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能，

$("#abc").removeAttr("href")   
 $("#content").removeClass();

使用append()方法向元素内追加内容-----这个就是在分页的时候或者是下拉菜单的时候运用广
append(content)方法的功能是向指定的元素中追加内容，被追加的content参数，可以是字符、HTML元素标记，还可以是一个返回字符串内容的函数。
 function rethtml() {
                var $html = "
我是调用函数创建的
"
                return $html;
            }
            $("body").append(rethtml());

使用appendTo()方法向被选元素内插入内容----这个格式可不要和append的格式搞混了；
appendTo()方法也可以向指定的元素内插入内容
$(content).appendTo(selector)
参数content表示需要插入的内容，参数selector表示被选的元素，即把content内容插入selector元素内，默认是在尾部
 

appendTo()方法插入内容


       

            小乌龟
       

        
       

使用before()和after()在元素前后插入内容
before()和after()方法可以在元素的前后插入内容，它们分别表示在整个元素的前面和后面插入指定的元素或内容
调用格式分别为
$(selector).before(content)和$(selector).after(content) 其中参数content表示插入的内容，该内容可以是元素或HTML字符串。
 

after()方法在元素之后插入内容


        我们交个朋友吧！
        
       

阅读(418) | 评论(0) | 转发(0) |