笔者好长时间没有更新过博客园的笔记了，一部分原因是去年刚刚开始工作一段时间忙碌的加班，体会了一种每天加班到凌晨的充实感，之后闲暇时间了也因为自己懒惰没有坚持记笔记的习惯，现在重新拾起来。

　　借用古人的一段话与诸君共勉：

　　人之为学,不日进则日退,独学无友,则孤陋而难成；久处一方,则习染而不自觉.不幸而在穷僻之域,无车马之资,犹当博学审问, 古人与稽,以求其是非之所在.庶几可得十之五六.若既不出户,又不读书,则是面墙之士,虽子羔、原宪之贤,终无济于天下.

　　翻译为：人们求学（或做学问）,不能天天上进,就要天天后退.孤独地学习,而不和朋友（互相交流启发）,就必然学识浅薄难以成功；长久住在一个地方, 就会不知不觉地沾染上某种习气.不幸住在穷乡僻壤,而又没有（雇用）车马的盘费,还应当广博地学习、详细地考究,与古人相合,来探求学习里边哪是对的哪是 不对的,这样差不多能得到十分之五六（的收获）.如果既不出门（拜师友）,又不读书,那就是不学无术的人,即使（你有）像子羔、原宪那样的贤能,也终究无 济于社会.

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

　　#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学习笔记系列（一）----选择器详解的更多相关文章

  1. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  2. IP2——IP地址和子网划分学习笔记之《子网掩码详解》

    2018-05-04 16:21:21   在学习掌握了前面的<进制计数><IP地址详解>这两部分知识后,要学习子网划分,首先就要必须知道子网掩码,只有掌握了子网掩码这部分内容 ...

  3. [读书笔记]C#学习笔记三: C#类型详解..

    前言 这次分享的主要内容有五个, 分别是值类型和引用类型, 装箱与拆箱,常量与变量,运算符重载,static字段和static构造函数. 后期的分享会针对于C#2.0 3.0 4.0 等新特性进行. ...

  4. C#学习笔记二: C#类型详解

    前言 这次分享的主要内容有五个, 分别是值类型和引用类型, 装箱与拆箱,常量与变量,运算符重载,static字段和static构造函数. 后期的分享会针对于C#2.0 3.0 4.0 等新特性进行. ...

  5. jquery学习笔记(一)：选择器

    内容来自[汇智网]jquery学习课程 1.1 基础选择器 选择器 功能 返回值 #id 根据给定的id匹配一个元素 单个元素 element 根据给定的元素名匹配所有元素 元素集合 .class 根 ...

  6. CDN学习笔记二（技术详解）

    一本好的入门书是带你进入陌生领域的明灯,<CDN技术详解>绝对是带你进入CDN行业的那盏最亮的明灯.因此,虽然只是纯粹的重点抄录,我也要把<CDN技术详解>的精华放上网.公诸同 ...

  7. 【Java学习笔记之三十三】详解Java中try，catch，finally的用法及分析

    这一篇我们将会介绍java中try,catch,finally的用法 以下先给出try,catch用法: try { //需要被检测的异常代码 } catch(Exception e) { //异常处 ...

  8. MyBatis学习笔记2--配置环境详解

    1.MyBatis-config.xml详解 一个完整的配置文件如下所示 <configuration> <!-- <properties resource="jdb ...

  9. [Spring学习笔记 5 ] Spring AOP 详解1

    知识点回顾:一.IOC容器---DI依赖注入:setter注入(属性注入)/构造子注入/字段注入(注解 )/接口注入 out Spring IOC容器的使用: A.完全使用XML文件来配置容器所要管理 ...

  10. CSS学习笔记（9）--详解CSS中:nth-child的用法

    详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...

随机推荐

  1. BZOJ 1146: [CTSC2008]网络管理Network 带修改主席树_树套树_DFS序

    Description M公司是一个非常庞大的跨国公司,在许多国家都设有它的下属分支机构或部门.为了让分布在世界各地的N个 部门之间协同工作,公司搭建了一个连接整个公司的通信网络.该网络的结构由N个路 ...

  2. lucene7.1.0实现搜索文件内容

    Lucene的使用主要体现在两个步骤: 1 创建索引,通过IndexWriter对不同的文件进行索引的创建,并将其保存在索引相关文件存储的位置中. 2 通过索引查寻关键字相关文档. 首先,我们需要定义 ...

  3. 自编码器----Autoencoder

    一.自编码器:降维[无监督学习] PCA简介:[线性]原矩阵乘以过渡矩阵W得到新的矩阵,原矩阵和新矩阵是同样的东西,只是通过W换基. 自编码: 自动编码器是一种无监督的神经网络模型,它可以学习到输入数 ...

  4. 为 Elasticsearch 添加中文分词，对比分词器效果

    转自:http://keenwon.com/1404.html 为 Elasticsearch 添加中文分词,对比分词器效果 Posted in 后端 By KeenWon On 2014年12月12 ...

  5. 绝对好用的浏览器json解析网址

    你们是否经常在浏览器输入请求地址解析遇到中文乱码的情况,今天我找到了一个好用的浏览器解析json网址,绝对好用. 1.直接输入网址 http://pro.jsonlint.com/ 2.输入要解析的j ...

  6. 如何解决windows docker共享目录不支持符号链接（do not support symlinks）？

    windows使用docker toolbox,搭建前端开发环境时,在共享目录使用npm安装前端依赖时,发现报错,无法使用符号连接. 这里有一个帖子专门讨论这个问题,感兴趣可以看一下: https:/ ...

  7. MySQL 复制 - 性能与扩展性的基石：概述及其原理

    原文:MySQL 复制 - 性能与扩展性的基石:概述及其原理 1. 复制概述 MySQL 内置的复制功能是构建基于 MySQL 的大规模.高性能应用的基础,复制解决的基本问题是让一台服务器的数据与其他 ...

  8. JUnit单元测试实践：测试工具类和方法(EmptyUtils)

    以前的时候(读大学时),我认为写单元测试太费事了.现在,我改变看法了. 工作中,为了提高Web开发的质量和效率,近期又为了保证自己的工具类等一系列可复用组件的质量,我煞费苦心地开始认真学习和撰写单元测 ...

  9. form提交表单中包含time类型数据

    当数据库和实体类中含有date类型的数据时 ,form提交的时间数据只是string类型的,所以不能直接写入到java实体类和数据库,经过百度找到了解决方法 ,特地挪过来: 在controller中增 ...

  10. 【习题 4-8 UVA - 12108】Extraordinarily Tired Students

    [链接] 我是链接,点我呀:) [题意] [题解] 一个单位时间.一个单位时间地模拟就好. 然后对于每个人. 记录它所处的周期下标idx 每个单位时间都会让每个人的idx++ 注意从醒着到睡着的分界线 ...