开发者学堂课程【jQuery 开发教程：jQuery_ 基础选择器】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/362/detail/4276

jQuery_ 基础选择器

 

内容介绍

一、课程概要

二、基础选择器

 

一、课程概要

1.基础选择器

⒉属性选择器

3.基础过滤

4.子元素过滤

5.内容过滤

6.表单

7.层级

8.jQuery扩展

9.可见性过滤

 

二、基础选择器

1.All Selector ("*")

描述:选择所有元素。

语法:$（"*")

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

举例：

首先创建一个 HTML 文件命名为 select，然后将 jQuery 文件复制到工程中，然后引入文件：

​<script src="jquery-2.2.1.min.js"></script> ​

Script  是一个闭合的标签，写入 div  标签，然后插入几个标签：

​<div>​

​<span>< / span>​

​<p></p>​

​<label>< / label>​

​< /div>​

写入：$( function(){  } 表示文档结构加载完成，不包含图片等非文字的媒体文件。

选择 <div>中所有标签，加上内容：

​$("div *" ).html("我们是一家人"); ​

执行，三个标签都添加上了内容。

2.Class Selector (".class")

描述︰选择给定样式类名的所有元素。

语法:$( ".class" )

举例：给 <span >标签加上 class：

​<span class="s">< /span>​

​然后加上内容：​

​$( function(){​

​$ (".s" ).html("我们是一家人");​

​})​

​执行，此时 <span> 标签被加​​上了内容。

3.Element Selector ("element")

描述∶根据给定( html)标记名称选择所有的元素。

语法∶$( "element")

举例：

​$ (".s" ).html("我们是一家人");​

​直接写入标签名：​

​$ ("span" ).html("我们是一家人");​

4.ID Selector ("#id")

描述︰选择一个具有给定id属性的单个元素。

语法∶$( "#id" )

比如：给 <p>标签加上 id 为p 然后选择 <p>标签的时候就可以：$("#p" ​​).html("我们是一家人");​

​5. ​Multiple Selector ​

​("selector1, selector2, selectorN")​

描述∶将每一个选择器匹配到的元素合并后一起返回。

语法:​​$( "selector1, selector2, selectorN" )​

举例：

在上述基础上添加<a><b>标签，分别附上内容，此时选择<span><p><label>标签就可以：

​$ ( function()i​

​$ (""#p,span,label" ).html("我们是一家人")﹔​

注意，用逗号分开。

此时执行结果如下：