JQuery的常用选择器

刚开始学JQuery写的如有错误欢迎批评指正

JQuery拥有的选择器可以让我们更快更方便找到想要的元素,然后对相应的元素进行操作

简单介绍一下一些常用的选择器:

1.基本选择器:

  1. 标签名选择器: $("div")  匹配所有的div
  2. id选择器: $("#id")  匹配id="id"的元素
  3. 类选择器: $(".class")  匹配所有class="class"的元素
  4. 分组选择器: $("#id,.class,div") 匹配id="id"的元素、所有class="class"的元素和所有的div

2.层级选择器:

  1. $("div span")  匹配div下所有的span子元素
  2. $("div>span")  匹配div下的span元素
  3. $("div+span")  匹配div后面相邻的span元素
  4. $("div~span")  匹配div后面所有的span元素

层级函数

  1. 获取某个元素的所有兄弟元素:$("#d1").siblings("div");参数可以不写,不写代表所有的兄弟元素
  2. 获取某个元素的哥哥元素:$("#d1").prev("div");参数不写是获取相邻的上一个元素,写的话指定上一个元素类型
  3. 获取某个元素的所有哥哥元素:$("#d1").prevAll("div");
  4. 获取某个元素的弟弟元素:$("#d1").next("div");参数不写是获取相邻的下一个元素,写的话指定上一个元素类型
  5. 获取某个元素的所有弟弟元素:$("#d1").nextAll("div");

3.过滤选择器:

  1. $("div:first")  匹配第一个div
  2. $("div:last")  匹配最后一个div
  3. $("div:even")  匹配所有索引值为偶数数div(第一个div的索引值为0)
  4. $("div:odd")  匹配所有索引值为奇数div
  5. $("div:eq(n)")  匹配索引值为n的div
  6. $("div:lt(n)")  匹配索引值小于n的div
  7. $("div:gt(n)")  匹配索引值大于n的div
  8. $("div:not(.one)")  匹配类名不为"one"的div

4.内容选择器:

  1. $("div:has(p)")  匹配包含p子元素的div元素
  2. $("div:empty")  匹配空元素div(既不包含文本也不包含子元素)
  3. $("div:parent")  匹配非空div元素
  4. $("div:contains('aa')")  匹配含有文本 'aa' 的 div 元素

5.属性选择器:

  1. $("div[id]") 匹配包含id属性的 div元素
  2. $("div[id='aa']")  匹配包含属性id='aa' 的div元素
  3. $("div[id!='aa']")  匹配id属性不等于aa的div元素

6.子元素选择器:

  1. $("div:first-child")  匹配div 第一个子元素
  2. $("div:last-child")  匹配div 最后一个子元素
  3. $("div:nth-child(n)")  匹配div 第n个子元素

7.表单选择器:

  1. $(":input") 匹配所有input
  2. $(":password")  匹配所有密码框
  3. $(":radio")  匹配所有单选
  4. $(":checkbox")  匹配所有多选框
  5. $(":check")  匹配所有单选,多选,下拉选
  6. $(":input:check")  匹配所有单选,多选
  7. $(":selected")  匹配所有下拉选

JQuery的常用选择器 转的更多相关文章

  1. JQuery的常用选择器

    刚开始学JQuery写的如有错误欢迎批评指正 JQuery拥有的选择器可以让我们更快更方便找到想要的元素,然后对相应的元素进行操作 简单介绍一下一些常用的选择器: 1.基本选择器: 标签名选择器: $ ...

  2. jQuery介绍 常用选择器

    jquery现在三个版本, 1.x  2.x  3.x  都在用,越小的版本兼容性越好,ie8以下浏览器也支持,新功能不多.我们通常使用1.x 在html中,css放Head中,js放body尾部 j ...

  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常用选择器总结: 我们都知道jQuery是JavaScript(JS)的框架,它的语法简单使用方便,被广大开发人员青睐.现在我就它常用的并且十分强大的选择器的方式,做一个总结.鉴于它的选择 ...

  5. js和jQuery常用选择器

    笔者觉得js是前台基础中的基础,而其选择器则是js基础中的基础,因长期使用框架导致js生疏,所有查资料,回顾一下js的常用选择器: 1.document.getElementById("id ...

  6. jquery 常用选择器和方法以及遍历(超详细)

    jQuery 常用选择器和和方法 学习总结 一.JQuery 介绍 1. 什么是 jQuery 2. jQuery 版本介绍 3. jQuery 文件介绍 二.jQuery 对象 1. jQuery ...

  7. 原生js实现jquery库中选择器的功能(jquery库封装一)

    今天是2017.1.1,新的一天,新的一年,新的一年里继续夯实基础知识,在工作中多些项目,多思考,多总结,前端是不断更新,在更新的过程中也是发现乐趣和挑战自我的过程,希望年轻的我和年轻的javascr ...

  8. JQuery:JQuery语法、选择器、事件处理

    JQuery语法:   通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...

  9. jquery】常用的jquery获取表单对象的属性与值

    [jquery]常用的jquery获取表单对象的属性与值 1.JQuery的概念 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的 ...

随机推荐

  1. vue知识总结

    vue: 渐进式JavaScript 框架 Vue项目构建 npm install -g vue vue init webpack-simple my-project cd my-project np ...

  2. .Net与 WebAssembly 随笔

    WebAssembly 是啥 - WebAssembly 是一种浏览器支持的字节码格式,WebAssembly 字节码和底层机器码很相似可快速装载运行,因此性能相对于 JS 解释执行大大提升,需要放到 ...

  3. IDEA建立Spring MVC Hello World 详细入门教程

    https://www.cnblogs.com/wormday/p/8435617.html

  4. 如何在Github创建repository

    第一步:登陆Github,点击new repository 第二步:输入相应内容创建 第三步,创建完成,如下.

  5. python list用法

    a = ['张三','李四','赵六','王五'] #打印列表 print(a) #增 a.apppend('徐七') print(a) a.insert(1,'张六') print(a) #删 a. ...

  6. knative

    office Doc Knative 简介 Install sevice example (knative) There is only one node in the cluster so we u ...

  7. jenkins 启动被杀死

    1.重设环境变量build_id 在execute shell输入框中加入BUILD_ID=DONTKILLME,即可防止jenkins杀死启动的tomcat进程 2.在启动jenkins 的时候禁止 ...

  8. Domain logic approachs

    1.transaction script(事务脚本) 概述: 很多企业应用可以看成一系列的事务,每一个事务可以通过使用一个Transaction Script来处理. 用法: 使用Transactio ...

  9. win10 WSL kali 下载源 --另外 恭喜马哥喜提博客

    第一篇也不知道写什么,就把昨晚安装kali时遇见的事写一下吧! 因为win10应用商店已经加入了kali,也省的我再去网上下载镜像,可下载后  wsl  未能设置为开发人员模式, 这算是失误吧!步骤如 ...

  10. oracle sql生成临时递增数据

    1.生成1至10记录 select rownum from dual connect 结果: 12345678910 2.生成最近12个月记录 ), 'yyyyMM') time from dual ...