jQuery 选择器简介

      jQuery 选择器允许对 HTML 元素组或单个元素进行操作。

    jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。

    jQuery 中所有选择器都以美元符号开头:$()。

1 .基本选择器

    $("#test")                    选择id值为test的元素,id值是唯一的所以返回单个元素。 $("div")                      选择所有的div标签元素,返回div元素数组  $(".myclass")      选择使用myclass类的css的所有元素     $("*")      选取所有元素。     $("#test,div,.myclass")    选取多个元素。 

2.层次选择器

    $("div span")             选取<div>里的所有<span>元素$("div >span")             选取<div>元素下元素名是<span>的子元素$("#one +div")             选取id为one的元素的下一个<div>同辈元素        等同于$("#one").next("div")     $("#one~div")          选取id为one的元素的元素后面的所有<div>同辈元素 等同于$("#one").nextAll("div")        $("#one").siblings("div")    获取id为one的元素的所有<div>同辈元素(不管前后)     $("#one").prev("div")        获取id为one的元素的前面紧邻的同辈<div>元素     所以 获取元素范围大小顺序依次为:     $("#one").siblings("div")>$("#one~div")>$("#one +div") 或是     $("#one").siblings("div")>$("#one").nextAll("div")>$("#one").next("div")

3.基本过滤选择器

    $("div:first")                 选取所有<div>元素中第1个<div>元素 $("div:last")                   选取所有<div>元素中最后一个<div>元素 $("input:not(.myClass)")        选取class不是myClass的<input>元素     $("input:even") 选取索引是偶数的<input>元素(索引从0开始)     $("input:odd") 选取索引是基数的<input>元素(索引从0开始)     $("input:eq(2)") 选取索引等于2的<input>元素     $("input:gt(4)") 选取索引大于4的<input>元素     $("input:lt(4)") 选取索引小于4的<input>元素     $(":header") 过滤掉所有标题元素,例如:h1、h2、h3等     $("div:animated") 选取正在执行动画的<div>元素     $(":focus") 选取当前获取焦点的元素

4.内容过滤选择器

    $("div:contains('Name')")       选取所有<div>中含有'Name'文本的元素 $("div:empty")                  选取不包含子元素(包括文本元素)的<div>空元素 $("div:has(p)") 选取所有含有<p>元素的<div>元素     $("div:parent") 选取拥有子元素的(包括文本元素)<div>元素 

5.可见性过滤选择器

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

6.属性过滤选择器

    $("div[id]")                  选取所有拥有属性id的元素 $("input[name='test']")        选取所有的name属性等于'test'的<input>元素 $("input[name!='test']")     选取所有的name属性不等于'test'的<input>元素     $("input[name^='news']") 选取所有的name属性以'news'开头的<input>元素     $("input[name$='news']") 选取所有的name属性以'news'结尾的<input>元素     $("input[name*='news']") 选取所有的name属性包含'news'的<input>元素     $("div[title|='en']") 选取属性title等于'en'或以'en'为前缀(该字符串后跟一个连字符'-')的<div>元素     $("div[title~='en']") 选取属性title用空格分隔的值中包含字符en的<div>元素     $("div[id][title$='test']") 选取拥有属性id,并且属性title以'test'结束的<div>元素 

7.子元素过滤选择器

    $("div .one:nth-child(2)")       选取class为'one'的<div>父元素下的第2个子元素$("div span:first-child")        选取每个<div>中的第1个<span>元素 $("div span:last-child") 选取每个<div>中的最后一个<span>元素     $("div button:only-child") 在<div>中选取是唯一子元素的<button>元素

8.表单对象属性过滤选择器

    $("#form1 :enabled")             选取id为'form1'的表单内所有可用元素 $("#form2 :disabled")            选取id为'form2'的表单内所有不可用元素     $("input :checked") 选取所有被选中的<input>元素        $("select option:selected") 选取所有的select 的子元素中被选中的元素 

9.表单选择器

    $(":input")                      选取所有<input>,<textarea>,<select> 和 <button>元素  $(":text")                      选取所有的单行文本框 $(":password") 选取所有的密码框     $(":radio") 选取所有单的选框     $(":checkbox") 选取所有的多选框     $(":submit") 选取所有的提交按钮     $(":image") 选取所有的图像按钮     $(":reset") 选取所有的重置按钮     $(":button") 选取所有的按钮     $(":file") 选取所有的上传域     $(":hidden") 选取所有不可见元素
转载:http://www.cnblogs.com/swjian/p/6363614.html

转载于:https://www.cnblogs.com/wang1593840378/p/6368832.html

jQuery 选择器简介相关推荐

  1. jquery选择器连续选择_jQuery选择器简介

    您可能已经知道, CSS3引入了一组新的选择器,使我们能够在添加HTML类较少的情况下选择文档中的元素 . 但是,新CSS选择器依赖于浏览器的功能,因此在某些情况下不适用. jQuery有一组选择器, ...

  2. 推荐JQuery学习简介

    "从零学习jQuery"系列教程收到了很多人喜欢, 也完成了一本介绍jQuery的书: "jQuery风暴" 在这里向大家郑重推荐这本书. 写书的时候jQuer ...

  3. Java程序员从笨鸟到菜鸟之(八十六)跟我学jquery(二)大话jquery选择器

    本篇博客我将带大家来学习一下jQuery的第一个比较重要的知识点,这个知识点对学习jquery的同学来说是必须掌握的,因为他是所有操作的基础,这个知识点就是jquery的对象选择器,我们利用jquer ...

  4. 6JS库-前端框架(库)-jQuery选择器

    #jQuery选择器 请列举出在CSS中学习过的选择器的类型 jQuery选择器的优势有哪些? jQuery选择器包括哪几大类? 通过位置选取元素的jQuery选择器有哪些? 课件 1jQuery选择 ...

  5. JQuery——选择器作业

    一.省市级连 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title ...

  6. 常用CSS与Jquery选择器

    1.常用CSS选择器 在介绍CSS选择器之前先介绍CSS各个选择器的权重,权重用于解决CSS样式的冲突问题. a.选择器权重 选择器 权重 继承 * 0,0,0,0 伪元素,元素选择器 0,0,0,1 ...

  7. jQuery框架简介

    jQuery框架简介 1.jQuery框架是JS代码写出来的,本身就算一个JS文件 2.由第三方厂商做出来的,免费开源 3.提供大量的方法,以前需要编写多行代码的功能,现在一行代码就可以实现 4.程序 ...

  8. xpath选择器简介及如何使用

    xpath选择器简介及如何使用 一.总结 一句话总结:XPath 的全称是 XML Path Language,即 XML 路径语言,它是一种在结构化文档(比如 XML 和 HTML 文档)中定位信息 ...

  9. 【jquery】jquery选择器

    知识点 1.jquery选择器的作用是选择jquery页面中的html元素. 2.常用的选择器有:基本选择器.层级选择器.过滤选择器.属性选择器. 基本选择器 1. id 选择器 代码实现: elem ...

  10. JQuery——选择器分类

    JQuery选择器 1    什么是JQuery选择器 快速高效的找到指定节点,支持css语法设置页面 2   JQuery选择器分类 2.1   基本选择器 CSS选择器 层级选择器 表单域选择器 ...

最新文章

  1. linux——Shell脚本说明、创建、执行、调试
  2. Net设计模式实例之单例模式( Singleton Pattern)
  3. C/C++学习之路: 模板和异常
  4. use SAP web IDE to commit change to git
  5. 后端技术:Java中Spring 和 Spring Boot 有哪些区别,看完你就明白了!
  6. 【连载】如何掌握openGauss数据库核心技术?秘诀四:拿捏事务机制(3)
  7. 华为手机改定位怎么改变_华为推送HMS服务,依靠鸿蒙OS,或将改变手机行业格局...
  8. python 长度queue_Python基础知识梳理
  9. Coolite中的ComboBox控件示例
  10. 张果老能是鸿蒙时期一蝙蝠,张果老(中国古代神话传说八仙之一)_百度百科...
  11. 多媒体技术及应用:概述、多媒体技术的特征、多媒体硬件系统、多媒体存储技术
  12. Please refer to dump files (if any exist) [date].dump, [date]-jvmRun[N].dump and [date].dumpstream.
  13. sz方法从服务器下载超过4g文件方法
  14. 超详细Gulp打包seajs模块压缩合并,绝对对你项目有帮助 ~
  15. 单片空间后方交会 python实现
  16. 程序员为什么不写注释
  17. 文件的打开方式怎么用计算机,电脑怎样修改文件默认打开方式
  18. 360锁屏壁纸在哪个文件夹
  19. Tableau筛选器:仪表板中运用地图做筛选器
  20. iphone ios 视频采集AVCaptureSessionPresetHigh/Medium/Low分辨率等参数

热门文章

  1. 如何找出 Mac 上两个文档之间的差异?
  2. Mac硬件温度管理软件TG Pro
  3. Sketch 80 for mac(矢量绘图设计软件)
  4. 如何在Mac上使用听写进行语音到文本的键入
  5. restframe_work1
  6. Part2--排序算法类模板
  7. sonarqube插件开发(二) 开发插件
  8. 多进程和线程的区别【转】
  9. 忆2015,迎2016(致敬自己)
  10. 每天一个linux命令(13):tail 命令