jQuery选择器之全选择器（*选择器

$( "*" )

jQuery选择器之元素选择器

<p class="s"></p>

$( "p" )

jQuery选择器之类选择器

$( ".class" )

jQuery选择器之id选择器

$( "#id" )

DOM对象转化成jQuery对象

var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

jQuery对象转化成DOM对象

JavaScript代码

var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

通过jQuery自带的get()方法

var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

jQuery对象与DOM对象是不一样的

普通处理，通过标准JavaScript处理：

var p = document.getElementById('imooc');
p.innerHTML = '您好！通过慕课网学习jQuery才是最佳的途径';
p.style.color = 'red';

jQuery的处理：

var $p = $('#imooc');
$p.html('您好！通过慕课网学习jQuery才是最佳的途径').css('color','red');

$('#id').siblings() 当前元素所有的兄弟节点

$('#id').prev() 当前元素前一个兄弟节点

$('#id').prevaAll() 当前元素之前所有的兄弟节点

$('#id').next() 当前元素之后第一个兄弟节点

$('#id').nextAll() 当前元素之后所有的兄弟节点

$("#id~div")当前元素后面的所有div兄弟节点

$("div>p")选择所有div元素里面的子元素p

$("div p")选择所有div元素里面的p元素

jQuery的属性与样式

• .attr()的四种方法：

1）.attr(传入属性名)：获取属性的值

2）.attr(属性名, 属性值)：设置属性的值

3）.attr(属性名,函数值)：设置属性的函数值

4）.attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

• .removeAttr()删除方法：

1）.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）

• .html()方法 ：

//获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配

元素的html内容，具体有3种用法：

1）.html() 不传入值，就是获取集合中第一个匹配元素的HTML内容

2）.html( htmlString )  设置每一个匹配元素的html内容

3）.html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数

注意事项：

.html()方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）

• .text()方法：

//得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，具体有3种用法：

1）.text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代

2）.text( textString ) 用于设置匹配元素内容的文本

3）.text( function(index, text) ) 用来返回设置文本内容的一个函数

注意事项：

.text()结果返回一个字符串，包含所有匹配元素的合并文本

• .html()与.text()的异同:

1）.html与.text的方法操作是一样，只是在具体针对处理对象不同

2）.html处理的是元素内容，.text处理的是文本内容

3）.html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用

4）如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的

5）.text()方法可以兼容所有浏览器

• .val()方法：//只处理表单元素的值

1）.val()无参数，获取匹配的元素集合中第一个元素的当前值

3）.val( value )，设置匹配的元素集合中每个元素的值

3）.val( function ) ，一个用来返回设置值的函数

注意事项：

1）通过.val()处理select元素， 当没有选择项被选中，它返回null

2）.val()方法多用来设置表单的字段的值

3）如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值

• .html(),.text()和.val()的差异总结： 

1）.html(),.text(),.val()三种方法都是用来读取选定元素的内容

2）.html()是用来读取元素的html内容（包括html标签）

3）.text()用来读取元素的纯文本内容，包括其后代元素的纯文本内容

4）.val()是用来读取表单元素的"value"值

5）.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上

6）.html()方法使用在多个元素上时，只读取第一个元素

7）.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值

8）.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容

9）.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容

10）.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

• 增加样式.addClass()方法：

1）.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名

2）.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名

注意事项：

.addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上

• 删除样式.removeClass()方法：

1）.removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名

2）.removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名

注意事项：

如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除。如果没有样式名作为参数，那么所有的样式类将被移除

• 切换样式.toggleClass()方法：//隔行切换class

1）.toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名

2）.toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除

注意事项：

1）toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加

2）toggleClass会保留原有的Class名后新增，通过空格隔开

• 样式操作.css()方法：

获取处理：

1）.css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值

2）.css( propertyNames )：传递一组数组，返回一个对象结果

设置处理：

1）.css(propertyName, value )：设置CSS

2）.css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理

3）.css( properties )：可以传一个对象，同时设置多个样式

注意事项：

1）浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px

2）.css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理

3）当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，例如 .css("width",50}) 与 .css("width","50px"})一样

• .css()与.addClass()设置样式的区别：

可维护性：

1）.addClass()的本质是通过定义个class类的样式规则，给元素添加一个或多个类。css方法是通过JavaScript大量代码进行改变元素的样式

2）通过.addClass()我们可以批量的给相同的元素设置统一规则，变动起来比较方便，可以统一修改删除。如果通过.css()方法就需要指定每一个元素是一一的修改，日后维护也要一一的修改，比较麻烦

灵活性：

通过.css()方式可以很容易动态的去改变一个样式的属性，不需要在去繁琐的定义个class类的规则。一般来说在不确定开始布局规则，通过动态生成的HTML代码结构中，都是通过.css()方法处理的

样式值：

.addClass()本质只是针对class的类的增加删除，不能获取到指定样式的属性的值，.css()可以获取到指定的样式值。

样式的优先级：

1）css的样式是有优先级的，当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候，优先级如下

外部样式 < 内部样式 < 内联样式

2）.addClass()方法是通过增加class名的方式，那么这个样式是在外部文件或者内部样式中先定义好的，等到需要的时候在附加到元素上

3）通过.css()方法处理的是内联样式，直接通过元素的style属性附加到元素上的

4）通过.css方法设置的样式属性优先级要高于.addClass方法

总结：

1）.addClass与.css方法各有利弊，一般是静态的结构，都确定了布局的规则，可以用addClass的方法，增加统一的类规则

2）如果是动态的HTML结构，在不确定规则，或者经常变化的情况下，一般多考虑.css()方式

jQuery选择器：

• id选择器 ( <div id="a">...</div> )：

$( "#a" )；<=> document.getElementById("a");

• 类选择器 ( <div class="a">...</div> )：

$( ".a" )；<=> document.getElementByClassName("a");

• 元素选择器 ( <p>...</p> )：

$( "p" )；<=> document.getElementByTagName("p");

• 全选择器： 

$( "*" )；

• 层级选择器 ：

$("div > p")；//选择所有div元素里面的子元素p

子元素：p元素必须紧跟在div的下一节点

$("div p")；//选择所有div元素里面的p元素

里面的元素：在div元素中的全部p元素

$(".prev + div")；//选取class="prev"后面的第一个的div兄弟节点

$(".prev ~ div")；//选取class="prev"后面的所有的div兄弟节点

• 基本筛选选择器：

$(".div:first")；//找到第一个class为div的元素(唯一)

$(".div:last")；//找到最后一个class为div的元素(唯一)

$(".div:odd")；//选择class为div且所引值为奇数的元素，索引值：从 0 开始计数

$(".div:even")；//选择class为div且所引值为偶数的元素，索引值：从 0 开始计数

$(".div:eq(2)")；//选择class为div且所引值为2的元素，索引值：从 0 开始计数

$(".div:gt(3)")；//选择class为div且所引值>3的元素，索引值：从 0 开始计数

$(".div:lt(2)")；//选择class为div且所引值<2的元素，索引值：从 0 开始计数

$("input:not(:checked) + p")；//元素选择器input去除checked属性后的第一个p元素兄弟节点

• 内容筛选选择器：

$(".div:contains('a')")；//选择class为div且其中包含value="a"的元素节点

$(".div:has(span)")；//选择class为div且其中包含<span></span>的元素节点

$(".div:parent")；//选择所有包含子元素或者value不为空的class为div的元素节点

包含：需要有子元素或者value不为空才可以被选中

$(".div:empty")；//选择所有无子元素且value为空的class为div的元素节点

• 可见性选择器：

$(":visible")；//选择所有显示的元素

$(":hidden")；//选择所有隐藏的元素

• 属性筛选选择器：

$('div[name="test"]')；//属性为name的div元素,name值等于"test"的元素

(即匹配 name="test")

$('div[test]')；//有属性为test的div元素

(即匹配<div class="div" test="">)

$('div[name|="test"]')；//属性为name的div元素,name值等于"test"、或者以name值"test"为连接符的元素

(即匹配 name="test" 或者 name="test-xxx")

$('div[name~="test"]')；//属性为name的div元素,name值等于"test"、或者以name值"test"为连接符的元素

(即匹配 name="test" 或者 name="test xxx")

$('div[name^="test"]')；//属性为name的div元素,name值等于"test"、或者以name值"test"为连接符的元素

(即匹配 name="test")

$('div[name$="test"]')；//属性为name的div元素,name值以"test"结尾的元素

(即匹配 name="...test")

$('div[name*="test"]')；//属性为name的div元素,name值包含"test"的元素

(即匹配 name="...test...")

$('div[name!="test"]')；//属性为name的div元素,name值中不包含"test"的元素

• 子元素筛选选择器：

$('.first-div a:first-child')； //查找class="first-div"的元素,其中存在父类且本元素为<a></a>并且为第一个的元素

(class="first-div"中相对于父类第一个为<a></a>的元素)

$('.first-div a:last-child')；//查找class="first-div"的元素,其中存在父类且本元素为<a></a>并且为最后一个的元素

(class="first-div"中相对于父类最后一个为<a></a>的元素)

$('.first-div a:only-child')；//查找class="first-div"的元素,其中存在父类只有一个子元素且本值为<a></a>的元素

(class="first-div"中相对于只有一个子元素的父类寻找值为<a></a>的元素)

$('.first-div a:nth-child(2)')；<!-- :nth-child(index)从1开始-->

//查找class="first-div"的元素,其中存在父类且本元素为<a></a>并且为第二个的元素

(class="first-div"中相对于父类第二个为<a></a>的元素，即使第一个不为<a></a>也可以选择到)

$('.last-div a:nth-last-child(2)')；<!-- :nth-last-child(index)从1开始-->

查找class="first-div"的元素,其中存在父类且本元素为<a></a>并且为倒数第二个的元素

(class="first-div"中相对于父类倒数第二个为<a></a>的元素，即使最后一个不为<a></a>也可以选择到)

• 表单元素选择器：

$(':input')；//查找所有 input, textarea, select 和 button 元素

$('input:text')；//匹配所有input元素中类型为text的input元素

$('input:password')；//匹配所有input元素中类型password的input元素

$('input:radio')；//匹配所有input元素中的单选按钮,并选中

$('input:checkbox')；//匹配所有input元素中的复选按钮,并选中

$('input:submit')；//匹配所有input元素中的提交的按钮

$('input:image')；//匹配所有input元素中的图像类型的元素

$('input:button')；//匹配所有input元素中类型为按钮的元素

$('input:file')； //匹配所有input元素中类型为file的元素

• 表单对象属性筛选选择器：

$('input:enabled')； //查找所有input所有可用的（未被禁用的元素）input元素

$('input:disabled')；//查找所有input所有不可用的（被禁用的元素）input元素

$('input:checked')；//查找所有input所有勾选的元素(单选框,复选框)

$('option:selected')；//查找所有option元素中,有selected属性被选中的选项

• 特殊选择器this：

this：表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。

->对应DOM对象

$(this)：代表上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。

->对应jQuery对象

jQuery的环境搭建：

1）首先登陆jQuery的官方下载地址：http://jquery.com/download/ 下载最新的jQuery。

2）下载类型分为两种：

压缩版(compressed，production) ：项目上线发布使用压缩版（因为压缩版本体积更小，效率更快）。

开发版(uncompressed，development)：我们在开发过程中使用开发版（开发版本便于代码修改及调试）。

3）点击所需的下载方式后，此时可以得到一个关于js文件的链接，链接地址为：https://code.jquery.com/jquery-3.3.1.js  。

4）引入jQuery文件库，有两种方式（都是在页面的<head></head>中加上下列代码）：

<!-- 外部链接方式： -->

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

<!-- 内部链接方式，代表的为引入在站点根目录下的文件夹下的文件库 -->

(其实就是将：https://code.jquery.com/jquery-3.3.1.js 地址下的内容copy到本地自建的.jquery.js文件中后再进行引用。)

<script type="text/javascript" src="../jquery/jquery.js" ></script>

可维护性：

.addClass()的本质是通过定义个class类的样式规则，给元素添加一个或多个类。css方法是通过JavaScript大量代码进行改变元素的样式

通过.addClass()我们可以批量的给相同的元素设置统一规则，变动起来比较方便，可以统一修改删除。如果通过.css()方法就需要指定每一个元素是一一的修改，日后维护也要一一的修改，比较麻烦

灵活性：

通过.css()方式可以很容易动态的去改变一个样式的属性，不需要在去繁琐的定义个class类的规则。一般来说在不确定开始布局规则，通过动态生成的HTML代码结构中，都是通过.css()方法处理的

样式值：

.addClass()本质只是针对class的类的增加删除，不能获取到指定样式的属性的值，.css()可以获取到指定的样式值。

样式的优先级：

css的样式是有优先级的，当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候，优先级如下

外部样式 < 内部样式 < 内联样式

1. .addClass()方法是通过增加class名的方式，那么这个样式是在外部文件或者内部样式中先定义好的，等到需要的时候在附加到元素上

2. 通过.css()方法处理的是内联样式，直接通过元素的style属性附加到元素上的

通过.css方法设置的样式属性优先级要高于.addClass方法

总结：

.addClass与.css方法各有利弊，一般是静态的结构，都确定了布局的规则，可以用addClass的方法，增加统一的类规则
如果是动态的HTML结构，在不确定规则，或者经常变化的情况下，一般多考虑.css()方式

.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性

获取：

1. .css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值

2. .css( propertyNames )：传递一组数组，返回一个对象结果

设置：

1.  .css(propertyName, value )：设置CSS

2. .css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理

3. .css( properties )：可以传一个对象，同时设置多个样式

注意事项：

1. 浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px

2. .css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理

3. 当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，例如 .css("width",50}) 与 .css("width","50px"})一样

.toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类

1. .toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名

2. .toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除

3. .toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值

4. .toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

注意事项：

1. toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加

2. toggleClass会保留原有的Class名后新增，通过空格隔开

.removeClass( )方法

1. .removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名

2. .removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名

注意事项

如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数，那么所有的样式类将被移除