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. wp手机 htc x310e

    入手htc x310e 手机不错,用着流畅 不习惯,已升到wp7.8,系统限制还是有些需要的功能没有,比如说短信拦截什么的 我需要的常用软件少 转手了 1 注销windows live? 设置--应用 ...

  2. MongoDB的基本使用（二）

    上一个文档说明了如何搭建一个Windows端MongoDB服务器,下面将简单介绍MongoDB的基本操作命令. 1. show dbs : 显示所有数据库 2. use bochao : 使用boch ...

  3. 解决Eclipse中文乱码

    http://hsj69106.blog.51cto.com/1017401/595598 使用Eclipse编辑文件经常出现中文乱码或者文件中有中文不能保存的问题,Eclipse提供了灵活的设置文件 ...

  4. [KOJ95603]全球奥运

    [COJ95603]全球奥运 试题描述 一个环形的图中有N个城市,奥运会重要项目就是传递圣火,每个城市有A[i]个圣火,每个城市可以向它相邻的城市传递圣火(其中1号城市可以传递圣火到N号城市或2号城市 ...

  5. Apache + Tomcat + mod_jk实现集群服务

    Tomcat中的集群原理是通过组播的方式进行节点的查找并使用TCP连接进行会话的复制. 实现效果:用apache 分发请求到tomcat中的对应的项目 环境说明: 操作系统:window xp Jav ...

  6. php处理数据库数据，每处理一个数据返回客户端显示当前状态的方法。

    php处理大量数据,每处理一个数据返回客户端显示当前状态的方法. 类似于dedecms生成静态页 想法: 客户端发送请求 服务器端接受请求,开始统计所需处理的数据量 将所需处理数据按一定规则排列,发送 ...

  7. BZOJ 4455: [Zjoi2016]小星星

    Sol 容斥原理+树形DP. 这道题用的容斥思想非常妙啊!主要的思路就是让所有点与S集合中的点对应,可以重复对应,并且可以不用对应完全(意思是是S的子集也可以).这样他有未对应完全的,那就减去,从全都 ...

  8. fzu2172 字符串dp

    F - 巡了南山我巡北山 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit ...

  9. django 实战 - eLeave Form

    需求: 实现请假单的电子审批 1. 支持国际化 2. 支持模型级别的访问记录 here we go: 这里会写一系列的文章,来记录我实战的过程,由于接触django没多久,难免有疏漏之处,望拍砖不要太 ...

  10. ffmpeg解码视频流

    //初始化.注册编解码器 avcodec_init(); av_register_all(); avformat_network_init(); //选取测试文件 char* FileName = & ...