码迷,mamicode.com
首页 > 其他好文 > 详细

选择器

时间:2017-02-10 22:06:10      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:text   hid   not   lin   open   last   header   pen   gif   

1、基本选择器

技术分享
//1)查找ID为"div1ID"的元素个数
           alert( $("#div1ID").size() );
           
      //2)查找DIV元素的个数
          alert( $("div").size() );
          
      //3)查找所有样式是"myClass"的元素的个数
          alert( $(".myClass").size() );
      
      //4)查找所有DIV,SPAN,P元素的个数
          alert( $("div,span,p").size() );
          
      //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
          alert( $(‘#div1ID,.myClass,p‘).size() );
View Code

2、层次选择器

技术分享
//1)找到表单form里所有的input元素的个数
            alert( $("form input").size() );
        
          //2)找到表单form里所有的子级input元素个数
              alert( $("form > input").size() );
          
          //3)找到表单form同级第一个input元素的value属性值
              alert( $("form + input").val() );
          
          //4)找到所有与表单form同级的input元素个数
              alert( $("form ~ input").size() );
View Code

3、增强基本选择器

技术分享
//1)查找UL中第一个元素的内容
            alert( $("ul li:first").text() );

          //2)查找UL中最后个元素的内容
            alert( $("ul li:last").text() );

          //4)查找表格的索引号为1、3、5...奇数行个数,索引号从0开始
            alert( $("table tr:odd").size() );

          //5)查找表格的索引号为2、4、6...偶数行个数,索引号从0开始
            alert( $("table tr:even").size() );

          //6)查找表格中第二行的内容,从索引号0开始,这是一种祖先 后代 的变化形式
              alert( $("table tr td:eq(1)").text() );

          //7)查找表格中第二第三行的个数,即索引值是1和2,也就是比0大
            alert( $("table tr:gt(0)").size() );

          //8)查找表格中第一第二行的个数,即索引值是0和1,也就是比2小
            alert( $("table tr:lt(2)").size() );

          //9)给页面内所有标题<h1><h2><h3>加上红色背景色,且文字加蓝色
            $(":header").css("background-color","red").css("color","blue");
            
          //3)查找所有未选中的input为checkbox的元素个数
            alert( $(":checkbox:NOT(:checked)").size() );
View Code

4、内容选择器

技术分享
//1)查找所有包含文本"John"的div元素的个数
            alert( $("div:contains(‘John‘)").size() );
            
          //2)查找所有p元素为空的元素个数
              alert( $("p:empty").size() );
          
          //3)给所有包含p元素的div元素添加一个myClass样式
              $("div:has(p)").addClass("myClass");
          
          //4)查找所有含有子元素或者文本的p元素个数,即p为父元素
              alert( $("p:parent").size() );
View Code

 

选择器

标签:text   hid   not   lin   open   last   header   pen   gif   

原文地址:http://www.cnblogs.com/h-g-f-s123/p/6387799.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!