基本选择器

  基本选择器是最常用的选择器,也是最简单的选择器.

$("#test")     //选取id为test的元素
$(".test") //选取class为test的元素
$("div.test") //选取class为test的div元素
$("div") //选取所有的div元素
$("*") //选取所有元素
$("div,p") //选取所有div元素和p元素

一般使用基本选择器就可以完成大部分工作

层次选择器

  如果希望通过元素之间的层次关系来获取特定元素,比如后代元素,子元素,相邻元素等,那就需要使用层次选择器

$("div p")  //选取div里所有的p元素
$("div>p") //选取div的子元素中所有的p元素
//上面这两个是有区别的,前者选择的div下的后代元素,后者选择的是div下一级的子元素
$(".test + div") //选取class为test的下一个div同辈元素
$(".test ~ div")//选取class为test的元素后面所有的div同辈元素

  层次选择器中,前两个比较常用,后两个不常用,一般会使用next()和nextAll()代替

过滤选择器

  过滤选择器通过特定的规则开筛选出所需的DOM元素,这个稍微复杂些,又可分为以下几种

  基本过滤选择器

$("div:first")      //选取所有div元素中的第一个div元素
$("div:last") //选取所有div元素中的最后一个div元素
$("div:not(.test)") //选取所有div元素中class不为test的div元素
$("input:focus") //选取当前获取焦点的input元素
$("div:eq(1)") //选取所有div元素中索引是1的div元素
$("div:gt(1)") //选取所有div元素中索引大于1的div元素
$("div:lt(1)") //选取所有div元素中索引小于1的div元素
$("div:even") //选取所有div元素中索引是偶数的div元素
$("div:odd") //选取所有div元素中索引是奇数的div元素

  内容过滤选择器

  内容过滤器主要是通过它所包含的子元素或者文本内容来定位某些元素

$("div:contains("test")") //选取所有div元素中含有文本test的div元素
$("div:has(p)") //获取含有p元素的div元素
$("div:empty") //选取不包含子元素或者文本元素的div元素
$("div:parent") //选取包含子元素或者文本元素的div元素

  可见性过滤选择器

 根据元素的可见和不可见状态来选择相应的元素

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

  属性过滤选择器

 属性过滤器的规则是通过元素的属性来获取响应的元素.

$("div[id=test]")                //选取属性id为test的div元素
$("div[class!=test]") //选取属性class不为test的div元素
$("div[class^=test]") //选取属性class以test开始的div元素
$("div[class$=test]") //选取属性class以test结束的div元素
$("div[class*=test]") //选取属性class类名中包含test的div元素
$("input[class=test][name=a]") //选取属性class类名为test并且name为a的的input元素

  表单对象属性过滤选择器

  对所选择的表单元素进行筛选,比如下拉框,多选框等

$("#form1:enabled")         //选取id为form1的表单内的所有可用元素
$("#form1:disabled") //选取id为form1的表单内的所有不可用元素
$("input:checked") //选取所有被选中的input元素,适用于单选框,多选框
$("select option:selected") //选取所有被选中的option元素,适用于下拉框

前端备忘录--JQuery选择器的更多相关文章

  1. 【前端】jQuery选择器$()的实现原理

    今天三七互娱技术面试的时候面试官问了我这个问题,当时一脸懵逼,于是好好总结一下. 当我们使用jquery选择器的时候,$(s).回默认去执行jquery内部封装好的一个init的构造函数每次申明一个j ...

  2. 前端基础-jQuery的内容之选择器

    阅读目录 ID选择器 类选择器 元素选择器 通配符选择器 层级选择器 基本筛选器 内容筛选器 可见性筛选器 属性筛选器 子元素筛选器 表单元素筛选器 表单对象筛选器 this和$(this) 一.jQ ...

  3. JQuery选择器大全 前端面试送命题:面试题篇 对IOC和DI的通俗理解 c#中关于协变性和逆变性(又叫抗变)帮助理解

    JQuery选择器大全   jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement")    选择id值等于myElement的元素 ...

  4. 【前端学习】【jQuery选择器】

    jQuery选择器     jQuery选择器 本文内容引自于单东林<锋利的jQuery>,未经原作者准许,禁止以商业目的转载发布! 选择器是jQuery的根基,在jQuery中,对事件处 ...

  5. Web前端学习笔记之jQuery选择器

    JQuery过滤器 经过一晚上的查找整理,终于整理出一套应该算最全面的JQuery选择过滤器的方法了.所有代码均经过测试.首先HTML代码 HTML Code <html><head ...

  6. 前端之jquery

    前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的 ...

  7. 二、jquery选择器

    在jquery库中,可以通过选择器实现DOM元素快捷选择这一重要的核心功能. 1.选择器的优势 (1)代码更简单 由于在jquery库中,封装了大量可以通过选择器直接调用的方法或函数,使编写代码更加简 ...

  8. 在.NET中使用JQuery 选择器精确提取网页内容

    1. 前言 相信很多人做开发时都有过这样的需求:从网页中准确提取所需的内容.思前想后,方法无非是以下几种:(本人经验尚浅,有更好的方法还请大家指点) 1. 使用正则表达式匹配所需元素.(缺点:同类型的 ...

  9. JavaWeb前端:JQuery

    Jquery基本概念 什么是Jquery Jquery是一个开源的,集成了Javascript,CSS,DOM,AJAX的前端框架:它诞生于2006年,最初是为了简化JavaScript开发而产生的, ...

随机推荐

  1. IdentityServer4实现Token认证登录以及权限控制

    相关知识点 不再对IdentityServer4做相关介绍,博客园上已经有人出了相关的系列文章,不了解的可以看一下: 蟋蟀大神的:小菜学习编程-IdentityServer4 晓晨Master:Ide ...

  2. Fiddler系列教程3:使用Fiddler录制Jmeter性能测试脚本

    今天继续给大家带来Fiddler工具的教程3:使用Fiddler录制Jmter性能测试脚本. 我们知道Jmeter本身可以录制脚本,也可以通过BadBoy,BlazeMeter等工具进行录制,其实Fi ...

  3. ASP.NET Core 应用程序Startup类介绍

    Startup类配置服务和应用程序的请求管道. Startup 类 ASP.NET Core应用程序需要一个启动类,按照惯例命名为Startup.在主程序的Web Host生成器(WebHostBui ...

  4. C#链接数据库增删改查的例子

    以users表为例,有三个字段,自增长的编号id,int类型:名称name,nvarchar类型,密码pwd,nvarchar类型首先在vs2005中引入using System.Data.SqlCl ...

  5. Python概述与安装

    Python 一门面向对象的解释性语言. Python优点 开发效率高(有丰富的各种类库,不需要重复造轮子):可移植性:解释性:免费开源:交互式(IDLE,代码写一行执行一行) Python缺点 相对 ...

  6. [转载] 使用HTML5的十大原因

    转载自http://www.williamlong.info/archives/3024.html 你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因:它现在还没有被广泛的支持,在IE中不 ...

  7. [转载] Cassandra入门 框架模型 总结

    转载自http://asyty.iteye.com/blog/1202072 一.Cassandra框架二.Cassandra数据模型 Colum / Colum Family, SuperColum ...

  8. KICKSTART无人值守安装 - (字符界面操作)

    kickstart 部署 1.1 kickstart简介说明 1.1.1 pxe工作过程(图) 1.1.2 kickstart具体过程(图) 1.2 kickstart无人值守部署 1.2.1 系统环 ...

  9. python调用c代码

    Linux环境下使用python调用C的printf例子: #!/usr/bin/env python2.7 #-*- coding:utf-8 -*- from ctypes import * de ...

  10. oracle一些基本命令

    Oracle安装配置 设置四个账户及对应的密码 No. 用户名 口令 1 sys change_on_install 2 system manager 3 scott tiget 4 sh sh 上面 ...