珠峰培训javascript技术与前端技术论坛

 找回密码
 立即注册
查看: 3125|回复: 0

jQuery九大选择器的用法举例

[复制链接]

60

主题

90

帖子

704

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
704
发表于 2019-2-13 15:20:28 | 显示全部楼层 |阅读模式
jQuery选择器是jQuery语法中比较重要的,学好jQuery的前提就是要学会jQuery选择器的用法。珠峰培训特给大家总结了jQuery的选择器用法举例,希望能给大家带来帮助。

1:基本选择器


改变 id 为 one 的元素的背景色为 #0000FF"


$("#one").css("background","#0000FF");


改变元素名为 <div> 的所有元素的背景色为 #00FFFF"


$("div").css("background","#00FFFF");


改变 class 为 mini 的所有元素的背景色为 #FF0033"


$(".mini").css("background","#FF0033");


改变所有元素的背景色为 #00FF33"


$("*").css("background","#00FF33");


改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF",注意,多个选择器并列使用时中间用逗号隔开。


$("span,#two").css("background","#3399FF");


2:层次选择器


改变 <body> 内所有 <div> 的背景色为 #0000FF"


           //祖先元素和后代元素的关系
           $("body div").css("background","#0000FF");


改变 <body> 内子 <div> 的背景色为 #FF0033"


           //父元素和子元素的关系
           $("body>div").css("background","#FF0033");


改变 id 为 one 的下一个 <div> 的背景色为 #0000FF"


           $("#one+div").css("background","#0000FF");


改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF"


           //获取指定元素的后面所有兄弟元素
           $("#two~div").css("background","#0000FF");


改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF"


           //获取指定元素的所有兄弟元素
          $("#two").siblings("div").css("background","#0000FF");


3:基础过滤选择器


改变第一个 div 元素的背景色为 #0000FF"


             $("div:first").css("background","#0000FF");


改变最后一个 div 元素的背景色为 #0000FF"


             $("div:last").css("background","#0000FF");


改变class不为 one 的所有 div 元素的背景色为 #0000FF"


             $("div:not(.one)").css("background","#0000FF");


改变索引值为偶数的 div 元素的背景色为 #0000FF"


             $("div:even").css("background","#0000FF");


改变索引值为奇数的 div 元素的背景色为 #0000FF"


             $("div: o dd").css("background","#0000FF");


改变索引值为大于 3 的 div 元素的背景色为 #0000FF"


             $("div:gt(3)").css("background","#0000FF");


改变索引值为等于 3 的 div 元素的背景色为 #0000FF"


             $("div:eq(3)").css("background","#0000FF");


改变索引值为小于 3 的 div 元素的背景色为 #0000FF"


             $("div:lt(3)").css("background","#0000FF");


改变所有的标题元素的背景色为 #0000FF"


             $(":header").css("background","#0000FF");


改变当前正在执行动画的所有元素的背景色为 #0000FF"


function mover(){
   $("#mover").slideToggle("slow",mover);
  }
  mover();
  
  $("#b10").click(function(){
   $(":animated").css("background","#0000FF");
  };


4:内容选择器


改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF"


           $("div:contains('di')").css("background","#0000FF");


改变不包含子元素(或者文本元素) 的 div 空元素的背景色为"


           $("div:empty").css("background","#0000FF");


改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF"


           $("div:has(.mini)").css("background","#0000FF");


改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF"


           $("div:parent").css("background","#0000FF");


改变不含有文本 di 的 div 元素的背景色"


           $("div:not(:contains('di'))").css("background","#0000FF");


5:可见度过滤选择器


改变所有可见的div元素的背景色为 #0000FF"


$("div:visible").css("background","#0000FF");


选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF"


$("div:hidden").show().css("background","#0000FF");


选取所有的文本隐藏域, 并打印它们的值"


/*
   * <input type="hidden" value="hidden_1">
   <input type="hidden" value="hidden_2">
   <input type="hidden" value="hidden_3">
   <input type="hidden" value="hidden_4">
   */
  var $inputs = $("input:hidden");
  //javascript的变历方法
         //  for(var i=0;i<$inputs.length;i++){
         //   var input = $inputs;
         //   
         //   alert(input.value);
         //  }
  
  /*
   * each(function(index,domEle){})
   *   * jquery中的普通遍历方法,需要jquery对象来调用
   *   * 回调函数:function(index,domEle){}
   *    * index:获取到的标签的索引值
   *    * domEle:dom对象
   */


//js的变历方法示例
  $inputs.each(function(index,domEle){
   //alert(domEle.value);
   //alert($(domEle).val());
   //alert(this.value);  //this代表的是domEle对象
   alert($(this).val());
  });
  
});



/*
   * jquery.each(object,function(index,domEle){})
   *   * 全局遍历函数,不需要jquery对象来调用
   *   * object:要遍历的数组或对象
   *   * 回调函数:function(index,domEle){}
   *    * index:获取到的标签的索引值
   *    * domEle:dom对象
   */
  $.each($inputs,function(index,domEle){
   alert(domEle.value);
  });


6:属性过滤器


含有属性title 的div元素"


         $("div[title]").css("background","#0000FF");


属性title值等于test的div元素"


         $("div[title=test]").css("background","#0000FF");


属性title值不等于test的div元素(没有属性title的也将被选中)"


         $("div[title!=test]").css("background","#0000FF");


属性title值 以te开始 的div元素."


         $("div[title^=te]").css("background","#0000FF");


属性title值 以est结束 的div元素.."


          $("div[title$=est]").css("background","#0000FF");


属性title值 含有es的div元素."


          $("div[title*=es]").css("background","#0000FF");


选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素"


          //多个属性过滤选择器并列使用,就这样并列放置就OK
          $("div[id][title*=es]").css("background","#0000FF");


7:子元素过滤选择器


每个class为one的div父元素下的第2个子元素"


        :nth-child()子元素过滤选择器,使用时需在其前面增加空格
        :nth-child()子元素过滤选择器,其索引值是从"1"开始
        $("div[class=one] :nth-child(2)").css("background","#0000FF");


每个class为one的div父元素下的第一个子元素"


        $("div[class=one] :first-child").css("background","#0000FF");


每个class为one的div父元素下的最后一个子元素"


        $("div[class=one] :last-child").css("background","#0000FF");


如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素"


        $("div[class=one] : o nly-child").css("background","#0000FF");


8:表单对象属性过滤器


利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"


         <input type="text" value="不可用值1" disabled="disabled">
         <input type="text" value="可用值1" >
         <input type="text" value="不可用值2" disabled="disabled">
         <input type="text" value="可用值2" >
   
          $("input[type=text]:enabled").val("xxx");


利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"


          $("input[type=text]:disabled").val("xxx");


利用 jQuery 对象的 length 属性获取多选框选中的个数"

           <input type="checkbox" name="items" value="美容" >美容
           <input type="checkbox" name="items" value="IT" >IT
           <input type="checkbox" name="items" value="金融" >金融
           <input type="checkbox" name="items" value="管理" >管理
   
           alert($("input[type=checkbox]:checked").length);


利用 jQuery 对象的 text() 方法获取下拉框选中的内容"


       <select name="job" id="job" multiple="multiple" size=4>
             <option >程序员</option>
             <option>中级程序员</option>
             <option>高级程序员</option>
             <option>系统分析师</option>
       </select>
        
       <select name="edu" id="edu">
             <option>本科</option>
             <option>博士</option>
             <option>硕士</option>
             <option>大专</option>
      </select>
   
     $("select option:selected").each(function(index,domEle){
           alert($(domEle).text());
     };


9:表单选择器


$(":image")匹配所有的图像域


$(":reset")匹配所有重置按钮


$(":button")匹配所有按钮


$(":file")匹配所有文件域


$("input:hidden")匹配所有不可见元素,或type为hidden的元素,这个选择器不限于表单标签,那些style为hidden的元素也会被匹配。


$("input:enabled")匹配所有可用的input元素,即不带属性disabled="disabled"


$("input:disabled")和上面相反


$("input:checked")匹配所有选择的元素(包括,复选框,单选框,但不包括select的option)


$("select option:selected")匹配所有选择的option元素。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|珠峰培训--JavaScript培训

GMT+8, 2021-6-21 11:03 , Processed in 0.284004 second(s), 21 queries .

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表