1、#id选择器

　　jquery能使用CSS选择器来操作网页中的标签元素。如果你想要通过一个id号去查找一个元素，就可以使用如下格式的选择器：$("#my_id")

　　其中#my_id表示根据id选择器获取页面中指定的标签元素，且返回唯一一个元素。

　　例如：

　　

　　在浏览器中显示的效果：

　　

　　从图中可以看出，通过#id选择器的方式获取元素，并在元素中调用html()方法为id="divtest"的<div>元素设置了文字显示在页面中。

2、element选择器

　　在文具盒中，有铅笔、钢笔和水彩笔，类似于页面中的<div>、<span>各个元素，虽然同属于一个容器，但有各自的功能，jQuery中可以根据元素名查找元素，格式如下：$(“element”)

　　其中element就是元素的名称，也就是工具盒中的笔的名称，找到水彩笔，我们就可画画了，通过元素名找到元素就可以对它进行操作了。

　　如下图所示：在页面中，根据元素名找到了一个元素，并将它显示的字体加粗。

　　

　　在浏览器中显示的效果：

　　

　　从上面图中可以看出，根据元素的名称可以查找到该元素，并调用css()方法将设置该元素内容中文字显示的样式。

3、.class选择器

　　我们在上一小节介绍了通过使用元素名称查询元素的方法，其实，还可以通过元素的类别属性查找元素，就好比在文具盒中要找一个“红色”铅笔一样，根据元素的某个特征进行查找，它的调用格式如下：$(“.class”)

　　其中.class参数表示元素的CSS类别(类选择器)名称。

　　例如，在页面中，通过class选择器获取某个元素，并显示该元素的class类别名称，如下图所示：

　　

　　在浏览器中显示的效果：

　　

　　从图中可以看出，通过class选择器的方式获取元素，并调用元素的attr()方法获取元素的类别名称，并将名称显示在页面中。

4、*选择器

　　有一个非常“牛”的选择器，“*”号选择器，它的功能是获取页面中的全部元素，“全部”啊!包括<head>、<body>、<script>这些元素，相当于可以取走你文具盒中的所有铅笔,格式为：$(“*”)

　　选择器中的参数就一个“*”，既没有“#”号，也没有“.”号。 由于该选择器的特殊性，它常与其他元素组合使用，表示获取其他元素中的全部子元素。

　　如下图所示： 使用*选择器，获取div中的所有子元素并设置三个子元素显示相同的内容。

　　

　　在浏览器中显示的效果：

　　

　　由于三个元素都包含在<div>元素中，因此，它们都是<div>元素的子元素，那么，就可以使用$(“div *”)的方式获取<div>元素中的这三个子元素，并使用html()方法来设置它们显示的内容。

　　实践证明，由于使用*选择器获取的是全部元素，因此，有些浏览器将会比较缓慢，这个选择器也需要谨慎使用。

5、sele1,sele2,seleN选择器

　　有时需要精确的选择任意多个指定的元素，类似于从文具盒中挑选出多根自已喜欢的笔，就需要调用sele1,sele2,seleN选择器，它的调用格式如下：$(“sele1,sele2,seleN”)

　　其中参数sele1、sele2到seleN为有效选择器，每个选择器之间用“，”号隔开，它们可以是之前提及的各种类型选择器，如$(“#id”)、$(“.class”)、$(“selector”)选择器等。

　　例如，通过选择器获取其中的任意两个元素，并将它们显示的内容设为相同，如图所示：

　　

　　在浏览器中显示的效果：

　　

　　虽然页面中添加了三个元素，但是通过使用$(“div,p”)选择器方式获取了其中的<div>和<p>元素，并设置它们显示的内容。

6、ance desc选择器

　　本节开始，我们将介绍层次性选择器。

　　在实际应用开发中，常常是多个元素嵌套在一起，形成复杂的层次关系，通过层次选择器，可以快速定位某一层次的一个或多个元素，ance desc选择器就是其中之一，它的调用格式如下：$("ance desc")

　　其中ance desc是使用空格隔开的两个参数。ance参数（ancestor祖先的简写）表示父元素；desc参数（descendant后代的简写）表示后代元 素，即包括子元素、孙元素等等。两个参数都可以通过选择器来获取。比如家族姓氏“div”，家族几代人里，都有名字里带“span”的，就可以用这个 ance desc选择器把这几个人给定位出来。

　　例如，使用层次选择器，获取<div>元素中的全部<span>元素，并设置它们显示的内容，在如下图所示：

　　

　　在浏览器中显示的效果：

　　

　　从图中可以看出，使用层次选择器$("div span")获取了在<div>元素中的两个元素，一个是<p>元素中的子元素，另一个是<p>元素外的同级元素，但它们都是在一个<div>元素下，也就是说在一个“家族”下。

7、parent>child选择器

　　与上一节介绍的ance desc选择器相比，parent > child选择器的范围要小些，它所选择的目标是子集元素，相当于一个家庭中的子辈们，但不包括孙辈，它的调用格式如下：$(“parent > child”)

　　child参数获取的元素都是parent选择器的子元素，它们之间通过“>”符号来表示一种层次关系。

　　如图所示：

　　

　　在浏览器中显示的效果：

　　

　　从图中可以看出，使用$("div>span")选择器代码，获取的是<div>“家庭中”全部“子辈”<span>元素，不包括“孙辈”<span>元素和“家庭外”的<span>元素。

8、prev+next选择器

　　俗话说“远亲不如近邻”，而通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素，格式如下：$(“prev + next”)

　　其中参数prev为任何有效的选择器，参数“next”为另外一个有效选择器，它们之间的“+”表示一种上下的层次关系，也就是说，“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素。

　　例如，使用prev + next选择器，获取<p>元素最近邻的下一个元素，如下图所示：

　　

　　在浏览器中显示的效果：

　　

9、prev~siblings选择器

　　与上一节中介绍的prev + next层次选择器相同，prev ~ siblings选择器也是查找prev 元素之后的相邻元素，但前者只获取第一个相邻的元素，而后者则获取prev 元素后面全部相邻的元素，它的调用格式如下：$(“prev ~ siblings”)

　　其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系，表明siblings选择器获取的元素都是prev元素之后的同辈元素。

　　例如，使用prev ~ next选择器，获取<p>元素后面相邻的全部元素，并设置它们在页面中显示的内容，如下图所示：

　　

　　在浏览器中显示的效果：

　　

　　可以看出，调用$("p~span")选择器代码，获取了<p>元素下面两个(全部)的<span>元素，该元素不包含<p>元素上面的元素和不属于同辈范围的元素。

三、jQuery--jQuery基础--jQuery基础课程--第2章 jQuery 基础选择器的更多相关文章

  1. 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效

    1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...

  2. 三、jQuery--jQuery基础--jQuery基础课程--第12章 jQuery在线聊天室

    在线聊天室案例 一.功能简介: 1.用户需要登录后才能进入聊天室交流 2.已无刷新的方式,动态展示交流后的内容和在线人员的基本信息 3.登录后的用户可以提交文字和表情图标 技术重点:利用ajax的无刷 ...

  3. 三、jQuery--jQuery基础--jQuery基础课程--第10章 jQuery UI型插件

    1.拖曳插件——draggable 拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格 ...

  4. 三、jQuery--jQuery基础--jQuery基础课程--第11章 jQuery 工具类函数

    1.获取浏览器的名称与版本信息 在jQuery中,通过$.browser对象可以获取浏览器的名称和版本信息,如$.browser.chrome为true,表示当前为Chrome浏览器,$.browse ...

  5. 三、jQuery--jQuery基础--jQuery基础课程--第9章 jQuery 常用插件

    1.表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:$(form).validate({option ...

  6. 三、jQuery--jQuery基础--jQuery基础课程--第8章 jQuery 实现Ajax应用

    1.使用load()方法异步请求数据 使用load()方法通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为:load(url,[data],[callback]) ...

  7. 三、jQuery--jQuery基础--jQuery基础课程--第6章 jQuery 事件与应用

    1.页面加载时触发ready()事件 ready()事件类似于onLoad()事件,但前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发,ready()可以写多个,按顺序执行 ...

  8. 三、jQuery--jQuery基础--jQuery基础课程--第3章 jQuery过滤性选择器

    1.:first过滤选择器 本章我们介绍过滤选择器,该类型的选择器是根据某过滤规则进行元素的匹配,书写时以“:”号开头,通常用于查找集合元素中的某一位置的单个元素. 在jQuery中,如果想得到一组相 ...

  9. 三、jQuery--jQuery基础--jQuery基础课程--第4章 jQuery表单选择器

    1.:input表单选择器 如何获取表单全部元素?:input表单选择器可以实现,它的功能是返回全部的表单元素,不仅包括所有<input>标记的表单元素,而且还包括<textarea ...

随机推荐

  1. linux下用Apache一个IP多个域名建虚拟主机

    如有两个域名,分别是hello.abc.com和play.abc.com,需把这两个域名都绑定到 IP是219.13.34.32的服务器上 1.首先需在域名供应商管理页面指定域名和IP的对应关系 2. ...

  2. BZOJ3277——串

    0.题意:给定你n个字符串,询问每个字符串有多少子串(不包括空串)是所有n个字符串中至少k个字符串的子串(注意包括本身). 1.分析:这个题我问了吴大爷做法 首先建立后缀自动机,然后利用离线搞出每一个 ...

  3. BZOJ1012——[JSOI2008]最大数maxnumber

    1.题目大意:求末尾L个数的最大值,强制在线 2.分析:这个拿线段树可以直接水过,然后我写了一个 维护单调栈, 二分求最大值的短代码,手懒.... #include <cstdio> #i ...

  4. Oracle 分区表的新增、修改、删除、合并。普通表转分区表方法

    一. 分区表理论知识 Oracle提供了分区技术以支持VLDB(Very Large DataBase).分区表通过对分区列的判断,把分区列不同的记录,放到不同的分区中.分区完全对应用透明. Orac ...

  5. Sqli-LABS通关笔录-12

    通过这个关卡我学习到了: 1.双引号千万别忘记,就是因为忘了弄了好一会儿.一直不报错. 2. 00x1万能密码构造二 报错的内容为: You have an error in your SQL syn ...

  6. hiho #1361 Playfair密码表

    题目1 : Playfair密码表 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho经常用Playfair密码表加密自己的代码. 密码表是按以下步骤生成的. ...

  7. ReLU 和sigmoid 函数对比以及droupout

    参考知乎的讨论:https://www.zhihu.com/question/29021768 1.计算简单,反向传播时涉及除法,sigmod求导要比Relu复杂: 2.对于深层网络,sigmod反向 ...

  8. NOI2005 聪聪和可可

    Sol 记忆化搜索. \(f[u][v]\) 表示聪聪在 \(u\) ,可可在 \(v\) ,聪聪抓到可可的期望. 预处理出 \(u\) 到 \(v\) 最短路径编号最小的点,记为 \(g[u][v] ...

  9. 用批处理启动MySQL命令行工具

    最近在看MySQL,安装好之后,每次在开始菜单去启动MySQL命令行工具的时候,都是直接用root用户连接我本地的数据库 输入密码开始工作,但是要连接服务器上的MySQL的话,就要去CMD下运行 : ...

  10. Iterator中hasNext(), next() 和ResultSet结果集的next方法的区别

    接口 Iterator专门的迭代输出接口,将元素一个个进行判断,用hasNext() 判断是否有值,用next()方法把元素取出.hasNext() 如果仍有元素可以迭代,则返回 true.next( ...