jQuery 学习之路(2):选择器与过滤器
一、基本选择器
标签选择器: $('button')
ID选择器: $('#id1')
类选择器: $('.class1')
多重选择器: $('#id1,.class1,button')
全体选择器: $('*')
基本选择器完全根据 CSS 选择器的规范而来,对于了解 CSS 的用户非常容易掌握。
二、层次选择器
子选择器: $('parent > child')
后代选择器: $('ancester descendant')
单一兄弟选择器: $('prev + next')
所有兄弟选择器: $('prev ~ siblings')
子选择器和后代选择器的区别:子选择器是后代选择器的子集,前者只筛选出符合条件的直接子元素,后者筛选出符合条件的所有子孙元素。
单一兄弟选择器与所有兄弟选择器类似,前者只筛选出符合条件的下一个同辈元素,后者筛选出符合条件的后面的所有的同辈元素。
简单例子如下:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$('body > div').each(function(index, element) {
alert($(this).html());
});
});
$("#btn2").click(function(){
$('body div').each(function(index, element) {
alert($(this).html());
});
});
$("#btn3").click(function(){
$('#btn1 + button').each(function(index, element) {
alert($(this).html());
});
});
$("#btn4").click(function(){
$('#btn1 ~ button').each(function(index, element) {
alert($(this).html());
});
});
});
</script>
</head>
<body>
<button id='btn1'>click1</button>
<button id='btn2'>click2</button>
<button id='btn3'>click3</button>
<button id='btn4'>click4</button>
<div>
<div id='div1'>div1</div>
<div id='div2'>div2</div>
</div>
</body>
</html>
三、属性选择器
属性选择器可以筛选出包含特定属性的元素,或者根据属性的值的格式来筛选出元素。
属性包含: [attr]
属性值为指定字符串: [attr = "value"]
属性值不为指定字符串: [attr != "value"]
属性值以指定字符串开始: [attr ^= "value"]
属性值以指定字符串结束: [attr $= "value"]
属性值包含指定字符串: [attr *= "value"]
多属性筛选: [attr1 *= "value1"][attr2 = "value2"]
其中,[name != "value"] 的实现效率较低,可以使用 :not([attr = 'value']) 的形式。
简单例子如下:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$("#btn1").click(function(){
$('[id]').each(function(index, element) {
alert($(this).html());
});
});
$("#btn2").click(function(){
$('button[id]').each(function(index, element) {
alert($(this).html());
});
});
$("#btn3").click(function(){
$('[id $= "1"]').each(function(index, element) {
alert($(this).html());
});
});
$("#btn4").click(function(){
$('button[id $= "1"]').each(function(index, element) {
alert($(this).html());
});
});
$("#btn5").click(function(){
$('button[id][name]').each(function(index, element) {
alert($(this).html());
});
});
});
</script>
</head>
<body>
<button id='btn1'>click1</button>
<button id='btn2'>click2</button>
<button id='btn3'>click3</button>
<button id='btn4'>click4</button>
<button id='btn5' name='name5'>click5</button>
<div>
<div id='div1'>div1</div>
<div id='div2'>div2</div>
</div>
</body>
</html>
四、基本过滤器
有些过滤器的实现并不高效,原因参见官网,对于这部分过滤器,建议使用 .filter(selector) 来调用,如 $('div').filter(':hidden') ,后面所有的这类过滤器都以红色特殊标出。
:animated 当前执行动画的元素
:eq(index) 取出指定索引的元素(jQuery 对象是集合,索引从0开始)
:gt(index) 取出索引大于指定值的元素
:lt(index) 取出索引小于指定值的元素
:first 取出第一个元素,即索引为0的元素
:last 取出最后一个元素,即索引为 size()-1 的元素
:even 取出索引为偶数的元素
:odd 取出索引为奇数的元素
:header 取出所有标题元素,如 h1,h2,h3 等
:root 取出根元素
:not(selector) 取出所有不匹配指定过滤器的元素
:focus 当前得到焦点的元素
五、子元素过滤器
:first-child 是其父元素的第一个子元素
:last-child 是其父元素的最后一个元素
:first-of-type 是同辈同类元素中的第一个元素
:last-of-type 是同辈同类元素中的最后一个元素
:only-child 是其父元素的唯一子元素
:only-of-type 在同辈元素中,没有同类元素的元素,即此元素是同辈元素中唯一的该类型元素
:nth-child(index) 其父元素的第 index 元素,该 index 从 1 开始
:nth-last-child(index) 其父元素的倒数第 index 元素,该 index 从 1 开始
:nth-of-type(index) 是同辈的同类元素中的第 index 元素,该 index 从 1 开始
:nth-last-of-type(index) 是同辈的同类元素中倒数第 index 元素,该 index 从 1 开始
六、内容过滤器
:contains(text) 包含指定字符串的元素
:empty 没有子元素的元素
:has(selector) 包含至少一个指定的选择器匹配的元素
:parent 包含至少一个子节点的(一个元素或文本)元素
七、表单过滤器
:input
:text
:password
:button
:reset
:submit
:radio
:checkbox
:checked
:selected
:file
:image
:focus
:enabled
:disabled
八、可见性过滤器
:hidden 当前隐藏的元素
:visible 当前显示的元素
jQuery 学习之路(2):选择器与过滤器的更多相关文章
- jQuery学习之路(1)-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- jquery学习笔记(一):选择器
内容来自[汇智网]jquery学习课程 1.1 基础选择器 选择器 功能 返回值 #id 根据给定的id匹配一个元素 单个元素 element 根据给定的元素名匹配所有元素 元素集合 .class 根 ...
- jQuery学习之旅 Item1 选择器【一】
点击"名称"会跳转到此方法的jQuery官方说明文档. 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择I ...
- jQuery学习之路(7)- 用原生JavaScript实现jQuery的某些简单功能
▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...
- jQuery 学习之路(1):引子
一.主流 javascript 库 除 jQuery 外,还有 Prototype.Dojo.YUI.ExtJS.MooTools ,其中 Prototype 较老,结构设计较为松散,ExtJS 界面 ...
- jquery学习(2)--选择器
jquery-李炎恢学习视频学习笔记.自己手写. 简单的选择器 css 写 法: #box{ color:#f00;} //id选择器 jquery获取:$('#box').css( ...
- jQuery学习之旅 Item2 选择器【二】
这里接着上一个Item1 把jQuery的选择器讲完.主要有:属性过滤器和子元素过滤器 点击"名称"会跳转到此方法的jQuery官方说明文档. 5. 属性过滤器 Attribute ...
- jQuery学习之路(8)- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- jQuery学习之路(2)-DOM操作
▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...
随机推荐
- 一次pthread_kill引发的HA切换
记录这个坑 程序设计是这样的 socket server主线程A接收新来的连接,然后新建一个线程B用于处理数据接收,由B线程启动一个线程C进行数据的发送处理. 当 B线程出现异常,在异常处理过程中,会 ...
- RNN 入门教程 Part 2 – 使用 numpy 和 theano 分别实现RNN模型
转载 - Recurrent Neural Networks Tutorial, Part 2 – Implementing a RNN with Python, Numpy and Theano 本 ...
- Python基本数据类型之tuple
一.创建元组: ages = (11, 22, 33, 44, 55) ages = tuple((11, 22, 33, 44, 55)) 元组和列表几乎一样 元组的元素不可修改,但是元组元素的元素 ...
- BZOJ1180: [CROATIAN2009]OTOCI
传送门 一遍AC,开心! $Link-Cut-Tree$最后一题 //BZOJ 1180 //by Cydiater //2016.9.18 #include <iostream> #in ...
- JS-流程控制汇集
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>流 ...
- Java Map 简介
AbstractMap, Attributes, AuthProvider, ConcurrentHashMap, ConcurrentSkipListMap, EnumMap, HashMap, H ...
- map遍历方法
java中遍历MAP的几种方法 Java代码 Map<String,String> map=new HashMap<String,String>(); map.put(& ...
- join的理解
thread.Join把指定的线程加入到当前线程,可以将两个交替执行的线程合并为顺序执行的线程.比如在线程B中调用了线程A的Join()方法,直到线程A执行完毕后,才会继续执行线程B. t.join( ...
- js009-客户端检测
js009-客户端检测 本章内容: 1.使用能力检测 2.用户代理检测的历史 3.选择检测方式 一般不使用客户端检测. 9.1 能力检测 也称特性检测.基本模式如下: if(object.proper ...
- AngularJs:String类型和JSON相互转换
最近一周做了一个页面,制作的过程中遇到各种问题,从中可以看出本人的js基础还不够扎实,angularjs也只是刚入门的水平,现在将制作过程中遇到的问题一一汇总,方便以后查阅. 一.String类型和J ...