jQuery 选择器

1.jQuery选择器的简介

（1）. Jquery中的选择器完全继承了CSS的风格，利用Jquery选择器，可以非常便捷和快速的找出特定的Dom元素，然后为他们添加相应的行为，而无需担心浏览器是否支持这一选择器，学会使用选择器是学习Jqeury的基础，Jquery的行为规则都必须在获取到元素后才能生效。

2.使用选择器的目的

(1).为了更好的或者是更快的从复杂的DOM树中找到我们需要的一类标签。

3.jQuery 选择器的优势

(1). 简洁的写法，$()函数

(2).支持CSS1到CSS3选择器

(3).完善的处理机制

4.选择器的分类

（1）.选择器：

三大类：基本选择器层次选择器属性选择器

基本选择器：

标签

类

并集

交集

全局

层次选择器：后代选择器(div p) 子选择器(div>p) 同辈选择器(div~p) 相邻选择器（div+p）

属性选择器：

单独属性名[href]

属性名和属性值配合[href=”http”] [href!=”http”] [href^=”http”] [href$=”http”] [href*=”http”]

(2).选择器详情

(1) 基本选择器：通过元素id,class和标签名等来查找Dom元素。

　　 1)$("#id") 根据给定的ID匹配一个元素，返回单个元素 $("#name")选取Id为test的元素。

2)$(".class") 根据给定的类名匹配元素返回集合元素 $(".class")选取所有class为class的元素。

3)$("element") 根据给定的元素名匹配元素，返回集合元素 $("input")选取所有的input元素。

4)$("*") 匹配所有的元素，返回集合元素，$("*")选取所有的元素。

5)$("selector1,selector2,...,selectorN") 将每一个选择器匹配到的元素合并后返回集合元素， $("div,span,p.myClass")选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素。

导入文件： jQuery1.11.1.js

eg:

<script type="text/javascript" src="jq/jQuery1.11.1.js"></script>

    <script type="text/javascript">

       $(function(){

         $("span").css("background","pink ");

       });

       $(function(){

          $("body span").css("background","#6FF");

          $("body>span").css("background","#F9F");

       });

       </script>

      </head>

  <body>

    <h2>千与千寻</h2>

    <p><span>别名：</span>神影少女</p>

    <p><span>导演：</span>宫崎骏</p>

    <p><span>简介</span></p>

    <p><span>千寻</span>和爸爸妈妈一同驱车前往新家，在郊外的小路上不慎进入了神秘的隧道--他们去了另一个诡秘世界...<span>  >>详细</span></p>

    <a href="#">立即播放</a><strong><a href="#">极速播放</a></strong> <span>下载观看</span>

    </body>

(2)层次选择器：如果想通过Dom元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素和同辈元素

1)$("ancestor descendant") 获得ancestor元素里面的所有descendant(后代)元素，$("div span")选取<div>里的所有的<span>元素

2)$("parent>child") 选取parent元素下的child(子)元素，返回集合元素 $("div span")选取<div>元素下元素名为<span>的子元素

注解：和$("ancestor descendant")有区别，$("ancestor descendant")选择的是后代元素

3)$("prev+next") 选取紧接在prev元素后的next元素，返回集合元素，$(".one+div")选取class为one的下一个<div>同辈元素

4)$("prev~siblings") 选取prev元素之后的所有siblings元素，$("#two~div")选取Id为two的元素后面的所有<div>同辈元素

　注解:可以使用next()方法来替代$('prev+next')选择器 $(".one").next("div");可以使用nextAll()方法来替代$("prev~siblings")选择器 $("#two").nextAll(div)

03.过滤选择器

(1).过滤选择器：主要通过特定的过滤规则来筛选出所需要的Dom元素，按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器

(2).基本过滤选择器

(1)$(":first") 选取第一个元素，$("div:first")选取所有<div>元素中第一个<div>元素。

(2)$(":last")选取最后一个元素，$("div:last")选取所有<div>元素中最后一个<div>元素。

(3)$(":not(selector)")去除所有与给定选择器匹配的元素，$("input:not(.myClass)")选取class不是myClass的<input>元素。

(4)$(":even")选取索引是偶数的所有元素，索引从0开始，$("input:even")选取索引是偶数的<input>元素

(5)$(":odd")选取索引是奇数的所有元素，索引从0开始，$("input:odd")选取索引是奇数的<input>元素

(6)$(":eq(index)")选取索引等于index的元素，(index从0开始)，$("input:eq(1)")选取索引等于1的<input>元素

(7)$(":gt(index)")选取索引大于index的元素，(index从0开始)，$("input:gt(1)")选取索引大于1的<input>元素(大于1，而不包括1)

(8)$(":lt(index)")选取索引小于index的元素，(index从0开始)，$("input:lt(1)")选取索引小于1的<input>元素(小于1，而不包括1)

(9)$(":header")选取所有的标题元素，例如：h1,h2,h3等等，$(":header")选取网页中的所有的<h1>,<h2>,<h3>...

(10)$(":animated")选取当前正在执行动画的所有元素，$("div:animated")选取正在执行动画的<div>元素。

(11)$(":focus")选取当前获取焦点的元素，$(":focus")选取当前获取焦点的元素

(3)内容过滤选择器：主要体现在它所包含的子元素或者文本内容上面

(1)$(":contains(text)")选取含有文本为"text"的元素，$("div:contains('我')")选取含有文本"我"的<div>元素

(2)$(":empty")选取不包含子元素或者文本的空元素，$("div:empty")选取不包含子元素(包括文本元素)的<div>空元素

(3)$(":has(selector)")选取含有选择器所匹配的元素的元素，$("div:has(p)")选取含有<p>元素的<div>元素

(4)$(":parent")选取含有子元素或者文本的元素,$("div:parent")选取拥有子元素(包括文本元素)的<div>元素

eg:过滤选择器：

<script type="text/javascript" src="jq/jQuery1.11.1.js"></script>

    <script type="text/javascript">

         $(function(){

            $("li:first").css("background-color","pink");

         });

    </script>

  </head>

  <body>

    <h2>网络小说</h2>

    <ul>

        <li>王姬不好当</li>

        <li>致命交易</li>

        <li class="three">伽蓝寺</li>

        <li>逆天之春</li>

        <li>交错时光的爱恋</li>

        <li>张震鬼故事</li>

        <li>第一次亲密接触</li>

    </ul>

  </body>

(3)可见性过滤选择器：根据元素的可见和不可见状态来选择相应的元素

(1)$(":hidden")选取所有不可见的元素，$(":hidden")选取所有不可见的元素，包括<input type="hidden" />，

<div style="display:none;">和<div style="visibility:hidden;">等元素。如果只想选取<input>元素，可以使用$("input:hidden")

(2)$(":visible")选取所有可见的元素，$("div:visible")选取所有可见的<div>元素

(4)属性过滤选择器：通过元素的属性来获取相应的元素

(1)$("[attribute]")选取拥有此属性的元素，$("div[id]")选取拥有属性Id的<idv>元素。

(2)$("[attribute=value]")选取属性的值为value的元素，$("div[title=test]")选取属性title为"test"的<div>元素

(3)$("[attribute!=value]")选取属性的值不等于value的元素，$("div[title!=test]")选取属性title不等于"test"的<div>元素(注意：没有属性title的<div>元素也会被选取)

(4)$("[attribute^=value]")选取属性的直以value开始的元素，$("div[title^=test]")选取属性title以"test"开始的<div>元素

(5)$("[attribute$=value]")选取属性的值以value结束的元素，$("div[title$=test]")选取属性title以"test"结束的<div>元素

(6)$("[attribute*=value]")选取属性的值含有value的元素，$("div[title*=test]")选取属性title含有"test"的<div>元素

(7)$("[attribute|=value]")选取属性等于给定字符串或以给字符串为前缀(该字符串后跟一个连字符"-")的元素,$("div[title|="en"]")选取属性title等于en或者以en为前缀(给字符串后跟一个"-")的元素

(8)$("[attribute~=value]")选取属性用空格分隔的值中包含一个给定值得元素，$("div[title~='uk']")选取属性title用空格分隔的值中包含字符uk的元素

(9)$("[attribute1][attribute2][attribute3]")用属性选择器合并成一个复合属性选择器，满足多个条件，每选择一次，缩小一次范围

$("div[id][title$='test']")选取拥有属性id，并且属性title以"test"结束的<div>元素

eg:属性选择器：

<script type="text/javascript" src="jq/jQuery1.11.1.js"></script>

    <script type="text/javascript">

         //改变表头颜色

          $(function(){

             $("h2[title]").css("background-color","#09F");

         });   

       //改变奇数颜色

           $(function(){

             $("[class=odds]").css("background-color","pink");

         });

       //改变id不为box的元素背景颜色

          $(function(){

             $("ul").css("background-color","yellow");

             $("h2").css("background-color","yellow");

         }); 

       //改变以h开头的元素颜色

          $(function(){

             $("[title^=h]").css("background-color","green");

         }); 

         //改变以jp结尾的元素颜色

         $(function(){

             $("[title$=jp]").css("background-color","gray");

         }); 

         //改变含有s的元素颜色

          $(function(){

             $("[title*=s]").css("background-color","red");

         });

         //改变含有class属性，且title属性的值中含有y的<li>的元素颜色

       $(function(){

             $("li[class][title*=y]").css("background-color","black");

         });

    </script>

    <style type="text/css">

    #box {background-color:#FFF;border:2px solid #000;height:230px;width:200px;padding:5px;}

    </style>

  </head>

  <body>

  <div id="box">

     <h2 class="odds" title="cartoonlist">动画列表</h2>

     <ul>

         <li class="odds" title="kn_jp">名侦探柯南</li>

         <li class="evens" title="hy_jp">火影忍者</li>

         <li class="odds" title="ki_jp">死神</li>

         <li class="enens" title="ko_jp">妖精的尾巴</li>

         <li class="odds" title="ht_jp">银魂</li>

         <li class="enens" title="yy_yy">黑猫警长</li>

         <li class="odds" title="ss_hu">仙履奇缘</li>

     </ul>

    </div>

  </body>

(5)表单选择器：方便的获取到表单的某个或者某类型的元素

(1)$(":input")选取所有的<input>,<textarea>,<select>,<button>元素

(2)$(":text")选取所有的单行文本框

(3)$(":password")选取所有的密码框

(4)$(":radio")选取所有的单选框

(5)$(":checkbox")选取所有的多选框

(6)$(":submit")选取所有的提交按钮

(7)$(":image")选取所有的图像按钮

(8)$(":reset")选取所有的重置按钮

(9)$(":button")选取所有的按钮

(10)$(":file")选取所有的上传域

(11)$(":hidden")选取所有的不可见元素

eg:英雄联盟：

<script type="text/javascript" src="jq/jQuery1.11.1.js"></script>

    <script type="text/javascript">

       $(document).ready(function(){

          $("p").click(function(){

               $(".yx").css("background-color","pink");

              $("span").css("background-color","pink");

              $("strong").css("font-size","20px");

              $("li").css("show");

              $("#show").css("background-color","pink");

           });

       });

    </script>

    <style type="text/css">

    li{

    text-decoration:underline;

    }

    </style>

  </head>

  <body>

    <h1 >英雄联盟</h1>

    <p class="yx"><<英雄联盟>>，简称LoL.</p>

    <p>

                 由<strong>Riot Games</strong>开发，为3D竞技场战游戏，其<span class="z">主创团队</br>由实力强劲的 <strong>   魔兽争霸 </strong>  系列游戏多人即时对战自定义</br>地图的开发团队

                </span>..<a href="#">更多详情</a>

    </p>

    <h2>目录</h2>

    <ul>

        <li id="show">开发团队</li>

        <li>游戏周边</li>

        <li>游戏介绍</li>

        <li>配置需求</li>

        <li>游戏背景</li>

    </ul>

  </body>

jQuery后续...的更多相关文章

jQuery后续和前端框架Bootstrap
目录一.jQuery后续 1. 动画效果 (1)自定义点赞动画实例 2. jQuery的自带方法 (1)each (类似for循环) (2)data() (存放隐形的数据) 二.前端框架之Boots ...
jquery()后续版本中，live()取消后使用on()实现功能写法
今天做项目想用live()功能,写完打开浏览器发现报错然后查了查发现自己用的是jquery是jquery-2.1.1.min.js,而jquery早就取消了live()方法,在后续版本里都已经没有使 ...
【深入浅出jQuery】源码浅析--整体架构
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
jQuery整体架构源码解析（转载）
jQuery整体架构源码解析最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性, ...
jquery中的clone()方法使用
clone([Even[,deepEven]]) 描述: 克隆匹配的DOM元素并且选中这些克隆的副本. 在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用. 1:一个布尔值(true 或者 ...
jQuery整体架构源码解析
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
【深入浅出jQuery】源码浅析--整体架构（转）
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
jQuery 最外面的那层皮
这次学习 jQuery 源码,基于当前最新的版本,3.2.1. IIFE (function() { 'use strict'; // })(); 定义一个匿名函数并立即执行,得益于 javascri ...
[总结]jQuery之常用函数方法参考手册
w3school参考地址:http://www.w3school.com.cn/jquery/index.asp runoob参考地址:http://www.runoob.com/jquery/jqu ...

随机推荐

Frameset使用教程
frame,是网页开发必须掌握的知识.例如后台架构.局部刷新,页面分割,都是frame的用途表现,尤其是后台页面制作,使用frame会给用户带来非常舒适的使用感受. frame知识点包括(frames ...
JSP EL表达式 param、paramValues的使用
JSP EL表达式 param.paramValues的使用: <%@ page language="java" import="java.util.*" ...
OpenCV 3.2正式发布啦
2016年12月23号OpenCV社区宣布了OpenCV3.2版本正式发布,这个是在OpenCV3.1版本发布一年以后再次升级.在3.2版本中有总数超过数千个的改进与修正,是OpenCV3.x系列中最 ...
Objective-c runtime方法替换引发的死循环
在OC中: API: class_addMethod往一个Class里添加method API: class_getInstanceMethod或class_getClassMethod可以判断某个S ...
双显卡笔记本安装CUDA+theano、tensorflow环境
原文出处:http://www.cnblogs.com/jacklu/p/6377820.html 个人知乎主页欢迎关注:https://www.zhihu.com/people/jack_lu,相信 ...
CoreCLR源码探索(三) GC内存分配器的内部实现
在前一篇中我讲解了new是怎么工作的, 但是却一笔跳过了内存分配相关的部分. 在这一篇中我将详细讲解GC内存分配器的内部实现. 在看这一篇之前请必须先看完微软BOTR文档中的"Garbage ...
setObject:forKey和setValue:forKey的区别
setObject:forKey: 是NSMutableDictionary类的方法 key参数类型可以是任意类型对象 ...
Swift 2.0 单例的用法
单例我们项目中是很常用的,今天刚学了在swift中怎么写单例和调用单例.下面我们简单的介绍一下.我们先看看Swift单例的写法: import UIKit class Shareinstance: N ...
JavaScript截取字符串的Slice、Substring、Substr函数简单比较还有indexof函数应用
//截取字符,一看就明白!!! var str = "0123456789"; alert(str.substring(5)); 弹出 //56789 alert(str.subs ...
四色GDOI&GDOI2015滚粗记
好吧自己太弱写不了什么四色NOI只能学学别人写个四色GDOI了...首先自己还是太弱所以就被学校卡了个名额就进不了省队了QAQ.自己GDOI觉得考得不错可是NOIP毕竟少了人家5分根本追不上去好不QA ...

jQuery后续...