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:odd").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[i];
         //   
         //   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] :only-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元素。

jquery九大选择器的用法举例的更多相关文章

  1. jQuery九大选择器和jQuery对ajax的支持

    一.jQuery九大选择器 1)基本选择器: <body> <div id="div1ID">div1</div> <div id=&qu ...

  2. JQuery九大选择器

    九大选择器都是用来查找元素节点的.JQuery给我提供了九中类型的选择器. 1. 基本选择器  基本选择器是JQuery最常用的选择器,也是最简单的选择器,它通过元素id.class和标签名来查找DO ...

  3. 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API

      1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...

  4. JQuery_九大选择器

    JQuery_九大选择器-----https://blog.csdn.net/pseudonym_/article/details/76093261

  5. jQuery九类选择器详解

    (1)基本选择器 <body> <div id="div1ID">div1</div> <div id="div2ID" ...

  6. jQuery九类选择器

    目的:通过选择器,能定位web页面(HTML/JSP/XML)中的任何标签, 注意:项目中,通常是多种选择器一起使用 基本选择器 <html> <head> <meta ...

  7. webform（九）——JQuery基础（选择器、事件、DOM操作）

    JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选 ...

  8. jQuery简单介绍及基本用法(选择器&DOM操作)

    简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“write Le ...

  9. Jquery 选择器的用法

    用js 动态生成<ul>标签的<li>条目,因为在动态的创建过程中li的点击事件是不太方便的,因此采用JQuery 的类选择器来实现. html代码: <div id=& ...

随机推荐

  1. [QTree6]Query on a tree VI

    Description: 给你一棵n个点的树,编号1~n.每个点可以是黑色,可以是白色.初始时所有点都是黑色.下面有两种操作请你操作给我们看: 0 u:询问有多少个节点v满足路径u到v上所有节点(包括 ...

  2. 2017.07.14【NOIP提高组】模拟赛B组

    Summary 这次比赛因为迟到了,少了很多时间,也受到了相应的惩罚,这是好的,是个标记牌,警醒着我.这次比赛的题目很难,也就是说,大家的得分都很低,总的来说,收获还是很大的,因为有非常多的技巧被掌握 ...

  3. PAT基础6-8

    6-8 简单阶乘计算 (10 分) 本题要求实现一个计算非负整数阶乘的简单函数. 函数接口定义: int Factorial( const int N ); 其中N是用户传入的参数,其值不超过12.如 ...

  4. 学习Struts--Chap05:值栈和OGNL

    1.值栈的介绍 1.1 值栈的介绍: 值栈是对应每一个请求对象的数据存储中心,struts2会给每一个请求对象创建一个值栈,我们大多数情况下不需要考虑值栈在哪里,里面有什么,只需要去获取自己需要的数据 ...

  5. jQuery 学习03——HTML：捕获、设置、添加元素、删除元素、CSS类、CSS()方法、尺寸

    jQuery - 获取内容text().html() 以及 val()和属性attr() jQuery 中非常重要的部分,就是操作 DOM 的能力. DOM = Document Object Mod ...

  6. flask之基于DBUtils实现数据库连接池、本地线程、上下文

    本篇导航: 数据库连接池 本地线程 上下文管理 面向对象部分知识点解析 1.子类继承父类__init__的三种方式 class Dog(Animal): #子类 派生类 def __init__(se ...

  7. 安装istio v1.0 详细过程和步骤

      创建 istio 目录 [root@centos-110 ~]# mkdir istio [root@centos-110 ~]# cd istio   方案一: # 去下面的地址下载压缩包  # ...

  8. 做了一个动态代理IP池项目，邀请大家免费测试~

    现在出来创业了,目前公司在深圳. 做了啥呢, 做了一个动态代理 IP 池项目 现在邀请大家免费测试体验! 免费激活码:关注微信公众号:2808proxy (每人每天限领一次噢~) 网站:https:/ ...

  9. 【Java】maven多项目资源共享

    方案一: <resources> <resource> <!-- <directory>${project.parent.relativePath}/../. ...

  10. Android必学之数据适配器BaseAdapter

    什么是数据适配器? 下图展示了数据源.适配器.ListView等数据展示控件之间的关系.我们知道,数据源是各种各样的,而ListView所展示数据的格式则是有一定的要求的.数据适配器正是建立了数据源与 ...