JQuery学习笔记系列（一）----选择器详解
笔者好长时间没有更新过博客园的笔记了，一部分原因是去年刚刚开始工作一段时间忙碌的加班，体会了一种每天加班到凌晨的充实感，之后闲暇时间了也因为自己懒惰没有坚持记笔记的习惯，现在重新拾起来。
借用古人的一段话与诸君共勉：
人之为学,不日进则日退,独学无友,则孤陋而难成；久处一方,则习染而不自觉.不幸而在穷僻之域,无车马之资,犹当博学审问, 古人与稽,以求其是非之所在.庶几可得十之五六.若既不出户,又不读书,则是面墙之士,虽子羔、原宪之贤,终无济于天下.
翻译为：人们求学（或做学问）,不能天天上进,就要天天后退.孤独地学习,而不和朋友（互相交流启发）,就必然学识浅薄难以成功；长久住在一个地方, 就会不知不觉地沾染上某种习气.不幸住在穷乡僻壤,而又没有（雇用）车马的盘费,还应当广博地学习、详细地考究,与古人相合,来探求学习里边哪是对的哪是 不对的,这样差不多能得到十分之五六（的收获）.如果既不出门（拜师友）,又不读书,那就是不学无术的人,即使（你有）像子羔、原宪那样的贤能,也终究无 济于社会.
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
#basic 基本选择器
$('code') 使用标签名，eg：$('div')
$('.class') 使用标签class属性的值，eg：<div class="test"> $('.test')使用的就是对应的div块
$('#id') 使用标签id属性的值，eg：<div class="test"> $('#test')使用的就是对应的div块
$('*') 包括所有的标签，包括body等等
$('code,.class,#id') 把上面三种选择器结合使用
#hierarchy 层级选择器
<body>
<div class ="ss">
<div class="test">
<div class="first">1</div>
<div id="even1">2</div>
<div id="test">3</div>
<div id="even3">4</div>
<div id="even4">5</div>
</div>
<div id="test">10</div>
</div>
<div class="test">No.2</div>
<div id="test">No.3</div>
<button>Click Me</button>
</body>
$('div code') 选择指定的父选择器下面的子选择器，包括间接继承,eg:$('.ss div')是选择class属性是ss下面的所有div标签
$('li > ui') 选择指定的父选择器下面的子选择器，不包括间接继承，eg:$('.ss > #id'),只会选择<div id="test">10</div>这个div
$('strong + em') 选择指定选择器的妹妹，只选择第一个匹配的，eg:$('#even1 + div'),会选择 <div id="test">3</div>这个div
$('strong ~ em') 选择指定选择器的所有妹妹，eg：$('#even1 + div'),会选择<div id="test">3</div><div id="even3">4</div><div id="even4">5</div>这三个div
#Filters 过滤器
<body>
<ul>
<li>No.1</li>
<li>No.2</li>
<li>No.3</li>
<li>No.4</li>
<li>No.5</li>
<li>No.6</li>
<li>No.7</li>
<li>No.8</li>
<li>No.9</li>
<li>No.10</li>
</ul>
<ol>
<li>not in ul</li>
</ol>
<button>Click Me</button>
</body>
$('li:first') 选择标签li的第一个，<li>No.1</li>，index=0
$('li:last') 选择标签li的最后一个，<li>not in ul</li>，index=10
$('li:not()') 选择标签li满足not方法的，eg:$('li:not(ul li)'),选择不是ul标签下面的li，实际选择的是<li>not in ul</li>
$('li:even') 选择标签li下标是偶数的，下标从0开始
$('li:odd') 选择标签li下标是奇数的，下标从0开始
$('li:eq(2)') 选择标签li下标等于2的，<li>No.3</li>
$('li:gt(2)') 选择标签li下标大于2的
$('li:lt(2)') 选择标签li下标小于2的
#content 内容
<body>
<table>
<tr><td>hello world!</td></tr>
<tr><td>This is a test of HTML</td></tr>
<tr><td><p></p></td></tr>
<tr><td></td></tr>
<tr><td>The world is beautiful</td></tr>
</table>
<input type="button" value="带有world单词的会变红色" id="btn1">
<input type="button" value="带有is单词的会变蓝色" id="btn2">
<input type="button" value="td里面为空的会变黑色" id="btn4">
<input type="button" value="td里面嵌套p的会变绿" id="btn5">
<input type="button" value="清除背景色" id="btn3">
</body> <script type="text/javascript">
jQuery(function(){
$('#btn1').click(function(){
$('td:contains("world")').css("background-color","red");
}); $('#btn2').click(function(){
$('td:contains("is")').css("background-color","blue");
}); $('#btn3').click(function(){
$('td').css("background-color","white");
}); $('#btn4').click(function(){
$("td:empty").css("background-color","black");
}); $('#btn5').click(function(){
$("td:has(p)").css("background-color","green");
}); });
</script>
内容里面有汉字的话也是可以识别出来的
$('td:contains("world")'): :contains的作用是查找到包含world的td标签
$("td:empty")： :empty的作用是查找到没有子元素或内容的td标签
$("td:has(p)")： :has(p)的作用是查找到里面嵌套标签p的td标签
JQuery还有其他一些选择器，像表单选择器这些的不是常用到的我就不介绍了，想要深入的研究的朋友可以看一下jquery的中文api
2016-06-21 10:10:01
JQuery学习笔记系列（一）----选择器详解的更多相关文章
- jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...
- IP2——IP地址和子网划分学习笔记之《子网掩码详解》
2018-05-04 16:21:21 在学习掌握了前面的<进制计数><IP地址详解>这两部分知识后,要学习子网划分,首先就要必须知道子网掩码,只有掌握了子网掩码这部分内容 ...
- [读书笔记]C#学习笔记三: C#类型详解..
前言 这次分享的主要内容有五个, 分别是值类型和引用类型, 装箱与拆箱,常量与变量,运算符重载,static字段和static构造函数. 后期的分享会针对于C#2.0 3.0 4.0 等新特性进行. ...
- C#学习笔记二: C#类型详解
前言 这次分享的主要内容有五个, 分别是值类型和引用类型, 装箱与拆箱,常量与变量,运算符重载,static字段和static构造函数. 后期的分享会针对于C#2.0 3.0 4.0 等新特性进行. ...
- jquery学习笔记(一)：选择器
内容来自[汇智网]jquery学习课程 1.1 基础选择器 选择器 功能 返回值 #id 根据给定的id匹配一个元素 单个元素 element 根据给定的元素名匹配所有元素 元素集合 .class 根 ...
- CDN学习笔记二（技术详解）
一本好的入门书是带你进入陌生领域的明灯,<CDN技术详解>绝对是带你进入CDN行业的那盏最亮的明灯.因此,虽然只是纯粹的重点抄录,我也要把<CDN技术详解>的精华放上网.公诸同 ...
- 【Java学习笔记之三十三】详解Java中try，catch，finally的用法及分析
这一篇我们将会介绍java中try,catch,finally的用法 以下先给出try,catch用法: try { //需要被检测的异常代码 } catch(Exception e) { //异常处 ...
- MyBatis学习笔记2--配置环境详解
1.MyBatis-config.xml详解 一个完整的配置文件如下所示 <configuration> <!-- <properties resource="jdb ...
- [Spring学习笔记 5 ] Spring AOP 详解1
知识点回顾:一.IOC容器---DI依赖注入:setter注入(属性注入)/构造子注入/字段注入(注解 )/接口注入 out Spring IOC容器的使用: A.完全使用XML文件来配置容器所要管理 ...
- CSS学习笔记（9）--详解CSS中:nth-child的用法
详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...
随机推荐
- Python数据分析----scipy稀疏矩阵
一.sparse模块: python中scipy模块中,有一个模块叫sparse模块,就是专门为了解决稀疏矩阵而生.本文的大部分内容,其实就是基于sparse模块而来的 导入模块:from scipy ...
- 51nod1079 中国剩余定理【数论】
一个正整数K,给出K Mod 一些质数的结果,求符合条件的最小的K.例如,K % 2 = 1, K % 3 = 2, K % 5 = 3.符合条件的最小的K = 23. Input 第1行:1个数N表 ...
- 解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...
- jupyter记事本的安装和简单应用
1.概述 jupyter记事本是一个基于Web的前端,被分成单个的代码块或单元.根据需要,单元可以单独运行,也可以一次全部运行.这使得我们可以运行某个场景,看到输出结果,然后回到代码,根据输出结果对代 ...
- 【3】Django创建第一个项目
天地所以能长且久者,以其不自生,故能长生. --老子<道德经> 写在前面:Django在学习的过程中,我们会参考官方文档,从两部分进行讲解,第一部分主要是一个入门项目的搭建开发,第二部分是 ...
- MySQL 复制 - 性能与扩展性的基石：概述及其原理
原文:MySQL 复制 - 性能与扩展性的基石:概述及其原理 1. 复制概述 MySQL 内置的复制功能是构建基于 MySQL 的大规模.高性能应用的基础,复制解决的基本问题是让一台服务器的数据与其他 ...
- Python SQLAlchemy ORM示例
SQLAlchemy的是Python的SQL工具包和对象关系映射,给应用程序开发者提供SQL的强大功能和灵活性. 安装 pip install mysql-python pip install sql ...
- DateTime日期格式转换，不受系统格式的影响
Application.Initialize; with FormatSettings do begin ShortDateFormat := 'yyyy-mm-dd'; LongDa ...
- 【hihocoder 1329】平衡树·Splay(Splay做法)
[题目链接]:http://hihocoder.com/problemset/problem/1329 [题意] [题解] 插入操作:-,记住每次插入之后都要把它放到根节点去就好; 询问操作:对于询问 ...
- Spring Cloud-Zuul(十)
个人理解 在微服务体系体系中 我们会有很多服务.在内部体系中 通过eureka实现服务的自动发现通过ribbon实现服务的调用.但是如果对外部体系提供接口 我们就会涉及到接口的安全性,我们不能可能对每 ...