一、jQuery选择器的优势

1、使用CSS选择器时,开发人员需要考虑主流浏览器是否支持某些选择器,而在jQuery中,开发人员则可以放心的使用jQuery选择器而无需考虑浏览器是否支持这些选择器。

2、使用getElementById()和getElementByTagName()函数获取页面中不存在的元素时会报错,但是使用jQuery获取网页中不存在的元素时不会报错。

注意:$("#tt")获取的是对象,即使网页中没有此元素。

所以当要用jQuery检测某个元素在网页中是否存在的时候使用如下代码:

   if($("#tt").lenght > 0){

     //do something

   }

或者(转换成DOM对象)

  if($("#tt")[0]){

    //do something

  }

而不是

   if($("#tt")){

     //do something

   }

二、jQuery选择器

 (一)、基本选择器

$("#test"):选取id为test的元素

$(".test"):选取所有class为test的元素

$("p"):选取所有<p>元素

$("*"):选取所有的元素

$("div,span,p.myClass"):选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素。

(二)、层次选择器

$("div span"):选取<div>里所有的后代<span>元素

$("div > span"):选取<div>元素下的<span>子元素

$(".one+div"):选取class为one的下一个<div>同辈元素

$("#two~div"):选取id为two的元素后面的所有<div>同辈元素

(三)、过滤选择器

1、基本过滤选择器

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

$("div:last"):选取所有div元素中的最有一个<div>

$("input:not(.myClass)"):选取class不是myClass的<input>元素

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

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

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

$("input:gt(index)"):选取索引大于index的<input>元素,index从0开始

$("input:lt(index)"):选取索引小于index的<input>元素,index从0开始

$(":header"):选取网页中所以的<h1>.....<h6>元素

$("div:animated"):选取正在执行动画的div元素

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

2、内容过滤选择器:

$("div:contains('我')"):选取包含文本"我"的<div>元素

$("div:empty"):选取不包含子元素的<div>元素

$("div:has(p)"):选取含有<p>元素的<div>元素

$("div:parent"):选取拥有子元素的<div>元素

3、可见性过滤选择器

$(":hidden"):选取所有不可见的元素。包括:<input type="hidden"/>,<div style="display:none;"><div style="visibility:hidden;">

$("div:hidden"):选取不可见的<input/>元素

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

4、属性过滤选择器

$("div[id]'):选取拥有属性id的选择器

$("div[title=test]"):选取title为"test"的<div>元素

$("div[tilte!=test]"):选取title不等于test的<div>元素,没有属性title的div元素也会被选取出来。

$("div[title^=test]"):选取title以test开始的<div>元素

$("div[title$=test]"):选取title以test结束的<div>元素

$("div[title*=test]"):选取title含有test的<div>元素

$("div[title|="en"]"):选取title等于en或者以en为前缀的元素

$("div[titlep~="ul"]"):选取属性title用空格分隔的值中包含字符uk的元素

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

5、子元素过滤选择器

:nth-child(index/even/odd/equation):选取每个父元素下的第index个子元素或者奇、偶元素。index从1算起

$("ul li:first-child"):选取每个<ul>中第1个<li>元素。

$("ul li:last-child"):选取每个<ul>中最后一个<li>元素。

$("ul li:only-child"):在<ul>中选取是以为子元素的<li>元素

6、表单对象属性过滤选择器

$("#form1:enabled"):选取id为form1的表单内的所有可用元素

$("#form2:disabled"):选取id为form2的表单内的所有不可用元素

$("input:checked"):选取所有被选中的input元素

$("select option:selected"):选取所有被选中的选项元素

6:表单选择器

$(":input"):选取所有<input><textarea><select>和<button>

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

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

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

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

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

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

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

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

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

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

小结

:first与:first-child的区别

前者是选取某一类元素的第一个元素,返回的是单个元素

后者是选取某一元素子元素的第一个元素,返回的是元素集合

:last与:last-child的区别

前者是选取某一类元素的最后一个元素,返回的是单个元素

后者是选取某一元素子元素的最后一个元素,返回的是元素集合

:eq(index)与:nth-child的区别

前者是选取索引等于index的元素,index从0开始

后者是选取索引等于index的子元素,index从1开始

$("#form1 :input")与$("#form1 input")

前者是选取id为form1的表单下的所有<input>、<textarea>、<select>、<button>元素

后者是选取id为form1的表单下的<input>元素

以上选择器中,:first,:last,:eq(index)返回单个元素,其他均返回集合元素。

 

jQuery选择器部分知识点总结的更多相关文章

  1. 我人生中的jQuery选择器

    Jquery选择器 一.Jquery选择器简介 JavaScript只是一种运行于客户端,可以被客户端浏览器解析的一段代码.它和java没有任何关系.JavaScript简称JS.jQuery是对JS ...

  2. Unit01: jQuery概述 、 jQuery选择器 、 jQuery操作DOM

    Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...

  3. jQuery学习和知识点总结归纳

    jQuery目前在Web前端开发所占的比重越来越高,在我们jQuery学习和开发的过程中都会去使用.jQuery帮我们解决了浏览器之间JS一些不兼容的地方和简化了原生JS对DOM的操作.下面把PHP程 ...

  4. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片

    知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...

  5. JQuery 选择器

    选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...

  6. jQuery的案例及必知重要的jQuery选择器

    Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...

  7. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  8. jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html

    我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...

  9. 《锋利的jQuery(第2版)》笔记-第2章-jQuery选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...

随机推荐

  1. Qt Creator Valgrind内存分析前端(分析Nginx内存)

    Linux上使用Qt Creator进行C/C++开发http://my.oschina.net/eechen/blog/166969Qt Creator GDB调试前端(调试Nginx):http: ...

  2. Java 8 中的 Streams API 详解

    为什么需要 Stream Stream 作为 Java 8 的一大亮点,它与 java.io 包里的 InputStream 和 OutputStream 是完全不同的概念.它也不同于 StAX 对 ...

  3. 【HDOJ】2444 The Accomodation of Students

    图论的题目.着色原理+二分图匹配. #include <cstdio> #include <cstring> #define MAXN 205 char map[MAXN][M ...

  4. France \'98(概率)

    题目描述 Today the first round of the Soccer World Championship in France is coming to an end. 16 countr ...

  5. A Simple problem

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2497 题意:给出顶点数,边数及节点s,判断s是 ...

  6. UVA 796 Critical Links(无向图求桥)

    题目大意:给你一个网络要求这里面的桥. 输入数据: n 个点 点的编号  (与这个点相连的点的个数m)  依次是m个点的   输入到文件结束. 桥输出的时候需要排序   知识汇总: 桥:   无向连通 ...

  7. 用数组实现栈demo

    package cn.aust.zyw.demo; import java.util.Iterator; /** * Created by zyw on 2016/2/19. * 用数组实现栈 */ ...

  8. JUnit basic annotation

    一个标准的Junit 4的运行流程,大致如下:测试类实例化 -> @BeforeClass -> @Before -> @Test -> @After -> @After ...

  9. lesson10:hashmap变慢原因分析

    下面的英文描述了String.hashCode()方法,在特定情况下,返回值为0的问题: Java offers the HashMap and Hashtable classes, which us ...

  10. Android Market 分析【安卓市场】

    安卓市场: 通过对表的分析,“下载任务”的数据来源于数据库[app_download],“已安装”的数据来源于数据库[software_installed]. 数据分析:----- bash-3.2# ...