Jquery选择器分类:基本选择器,层次选择器,过滤选择器,表单选择器。
基本选择器
说明:通过元素id、class和标签名等来查找DOM元素
1.id选择器:$("#test");//选取id为test的元素
2.类选择器:$(".test");//选取所有class为test的元素,其他:$('div.mini')
3.标签选择器:$("div");//选取所有的<div>元素
4.群组选择器:$("p,div,.test");//选取所有<P>,<div>和拥有class为test的一组元素
5.通配选择器:$("*"); // 通配选择器,匹配页面中所有元素
层次选择器
说明:通过DOM元素之间的层次关系获取特定元素,如后代元素、子元素、相邻元素、兄弟元素
1.$(“div span”);//选取<div>里所有的<span>元素
2.$(“div>span”);//选取<div>下元素名为<span>的子元素
3.$(‘.one+div');//选取class为one的下一个<div>元素(相邻元素)
4.$(‘#two~div') ;//选取id为two的元素后面所有<div>兄弟元素
注意:
$(‘prev+next')选择器与next()方法的等价关系
$(‘.one+div') 等价于 $(“.one”).next(“div”)
$(‘prev~siblings')选择器与nextAll()方法的等价关系
$(‘.one~div') 等价于 $(“.one”).nextAll(“div”)
表单选择器
1.表单对象属性过滤选择器
1.1:$(“#form1:enabled”) ;//选取id为”form1”的表单内的所有可用元素
1.2:$(“#form1:disabled”) ;//选取id为”form1”的表单内的所有不可用元素
1.3:$(“input:checked”);//选取所有被选中的<input>元素
1.4:$(“select:selected”);//选取所有被选中的选项元素
2.表单对象属性过滤示例
2.1:$(“:input”);// 选取所有<input>、<textarea>、<select>和<button>元素
2.2:$(“:text”);//选取所有的单行文本
2.3:$(“: password”);//选取所有的密码框
2.4:$(“:radio”);//选取所有的单选框
2.5:$(“:checkbox”);//选取所有的多选框
2.6:$(“:submit”);//选取所有的提交按钮
2.7:$(“:image”);//选取所有的图像按钮
2.8:$(“:reset”);//选取所有的重置按钮
2.9:$(“:button”);//选取所有按钮
2.10:$(:file);//选取所有的上传域
2.11:$(“:hidden”);//选取所有不可见元素
过滤选择器
说明:主要是通过特定的过滤选择器规则来筛选出所需的DOM元素,选择器都以一个冒号(:)开头
1.基本过滤选择器:
1.1:$(“div:first”);//选取所有<div>元素中第一个<div>元素
1.2: $(“div:last”);//选取所有<div>元素中最后一个<div>元素
1.3: $(“input:not(.myClass)”);// 选取class为不是myClass的<input>元素
1.4: $(“input:even”);//选取索引是偶数的<input>元素
1.5: $(“input:odd”);//选取索引是奇数的<input>元素
1.6: $(“input:eq(1)”;//选取索引为1的<input>元素
1.7: $(“input:gt(1)”);//选取索引大于1的<input>元素(注:大于1,而不包括1)
1.8: $(“input:lt(1)”);//选取索引小于1的<input>元素(注:小于1,而不包括1)
1.9: $(“:header”);//选取网页中所有的<h1>,<h2>,<h3>……
1.10: $(“div:animated”); //选取正在执行动画的<div>元素
2. 内容过滤选择器:
2.1:$(“div:contains(‘我')”);//选取含有文本“我”的<div>元素
2.2:$(“div:empty”);//选取不包含子元素(包括文本元素)的<div>空元素
2.3:$(“div:has(p)”);// 选取含有<p>元素的<div>元素
2.4:$(“div:parent”);// 选取拥有子元素(包括文本元素)的<div>元素
3.可见性过滤选择器:
3.1:$(“:hidden”);//选取所有不可见的元素。
包括<input type=”hidden”>,<div style=”disply:none;>和<div style=”visibility:hidden;”>等元素。如果只想选取<input>元素,可以使用$(“input:hidden”)
3.2:$(“div:visible”);//选取所有可见的<div>元素
4.属性过滤选择器
4.1:$(“div[id]”);//选取拥有属性id的元素
4.2:$(“div[title=test]”);//选取属性title为”test”的<div>元素
4.3:$(“div[title!=test]”);//选取属性title不等于”test”的<div>元素(注意:没有属性的title的<div>元素也会被选取)
4.4:$(“div[title^=test]”);//选取属性title以”test”开始的<div>元素
4.5:$(“div[title$=test]”);//选取属性title以”test”结束的<div>元素
4.6:$(“div[title*=test]”);//选取属性title含有”test”的<div>元素
4.7:$(“div[id][title$='tets']”);//选取拥有属性id,并且属性title以”test”结束的<div>元素
5.子元素过滤选择器
5.1---:eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始的,而:eq(index)是从0算起
5.2---:first只返回单个元素,而:first-child选择符将为每个父元素匹配第一个子元素
5.3---:last只返回单个元素,而:last-child选择符将为每个父元素匹配最后一个子元素
Jquery选择器分类:基本选择器,层次选择器,过滤选择器,表单选择器。的更多相关文章
- JQ表单选择器和CSS3表单选择器
JQ表单选择器和CSS3表单选择器 JQ表单选择器 为了使用户能够更加灵活地操作表单,jQuery中加入了表单选择器,利用这个选择器能极其方便的获取到表单的某个或者某类型的元素.表单选择器的介绍如图: ...
- jQuery选择器介绍:基本选择器、层次选择器、过滤选择器、表单选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.jQuery选择器完全继承了 ...
- JQuery -- 介绍,选择器及其示例, 基本选择器,层次选择器,过滤选择器,表单选择器
1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...
- jQuery学习笔记(一)——基础选择器、过滤选择器、表单选择器
$()就是jQuery中的函数,它的功能是获得()中指定的标签元素.如演示样例中$("p")会得到一组P标签元素,当中"p"表示CSS中的标签选择器.$()中的 ...
- jQuery事件篇---过滤选择器 & 表单选择器
内容提纲: 过滤选择器 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 表单选择器 6.常规选择器 7.表单选择器 8.表单过滤器 发文不易,转载请注明出处! 过滤选 ...
- 009 jquery过滤选择器-----------(表单对象属性过滤选择器 与 表单选择器)
1.表单对象属性选择器 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
- jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)
属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...
- 深入学习jQuery选择器系列第七篇——表单选择器
× 目录 [1]表单元素 [2]对象属性 前面的话 无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的.jQuery专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素 表单 ...
- 第一百六十八节,jQuery,表单选择器
jQuery,表单选择器 学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以 使用之前的常规选择器或过滤器,也 ...
随机推荐
- 在Xsheel Linux上安装nodejs和npm
最近window系统转向linux系统开发,linux系统的确适合程序员的开发. 作为前端安装了nodejs和npm,遇到了一些坑,赶紧记录下来 第一种安装方法:安装nodejs : sudo a ...
- Struts2接受请求参数三种常用方法
一 接受请求参数主要有三种:属性驱动 对象驱动 模型驱动<model Driven> 方式1:在Action中接收请求参数不需要使用request对象,在Action中定义与请求参数相同名 ...
- linux为内核新增系统调用
1.编写hello.c文件,实现系统调用执行函数,如: asmlinkage long sys_helloworld(void){ printk( "helloworld!"); ...
- PKUWC&SC 2018 刷题记录
PKUWC&SC 2018 刷题记录 minimax 线段树合并的题,似乎并不依赖于二叉树. 之前写的草率的题解在这里:PKUWC2018 minimax Slay the Spire 注意到 ...
- Django项目:CRM(客户关系管理系统)--74--64PerfectCRM实现CRM课程排名详情
#urls.py """PerfectCRM URL Configuration The `urlpatterns` list routes URLs to views. ...
- [转]模块化——Common规范及Node模块实现(二)
模块的循环加载 如果发生模块的循环加载,即A加载B,B又加载A,则B将加载A的不完整版本. // a.js exports.x = 'a1'; console.log('a.js ', require ...
- 深入浅出 Java Concurrency (2): 原子操作 part 1[转]
从相对简单的Atomic入手(java.util.concurrent是基于Queue的并发包,而Queue,很多情况下使用到了Atomic操作,因此首先从这里开始).很多情况下我们只是需要一个简单的 ...
- linux查看磁盘大小,使用量等等信息
第一:统一磁盘整体情况 1.查看当前目录命令 df -h 结果: 统一每个目录下磁盘的整体情况 2.查看指定目录在命令后直接放目录名,比如查看“usr”目录使用情况: df -h /usr/结果: 统 ...
- linux命令行操作mysql数据库明细
连接数据库==> mysql -uroot -p 输入root密码 进入mysql操作后 下面的命令不要忘了最后结尾的; 1.选择数据库命令: use <数据库名> 2.查看表的引擎 ...
- 转:Linux 2.4.x内核软中断机制
源地址:http://www.ibm.com/developerworks/cn/linux/kernel/interrupt/ Linux 2.4.x内核软中断机制 杨沙洲 (pubb@163.ne ...