$( ".class" )，$( "element" )
- 原生：样式是可以多选的，所以得到的是一个合集，需要通过循环给合集中每一个元素修改样式
- jQuery：class选择器可以选择多个元素，不需要循环
var divs = document.getElementsByClassName('aaron');
for (var i = 0; i < divs.length; i++) {
divs[i].style.border = "3px solid blue";
}
$(.aaron).css("border", "3px solid red");
$( "*" )
- IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的
jQuery选择器之层级选择器
- 子选择器：$('div > p') 选择所有div元素里面的子元素P
- 后代选择器：$('div p') 选择所有div元素里面的p元素
- 相邻兄弟选择器：$('pre+next')
选择紧邻在pre元素后的next元素
jq基本筛选器
$("div:first")匹配div下的第一个元素
$("div:last")匹配div下的最后一个元素
$("div:not(p)")过滤选择器，选择所有元素但不包括括号中的
$("div:eq(index)")在匹配的集合中选择索引值index的元素
eq就是equal等于的意思$("div:gt(index)")选择匹配集合中所有大于给定index（索引值）的元素
gt是gather than 大于的意思$("div:lt(index)")选择匹配集合中所有小于给定index（索引值）的元素
lt是litter than 小于的意思$("div:even")选择索引值为偶数的元素，从0开始计数
$("div:odd")选择索引值为奇数的元素，从0开始计数
$("div:animated")选择所有执行动画效果的元素
$("div:root")选择该文档的根元素
$("div:header")选择所有标题元素
jq可见性筛选选择器?
- $(":visible") 选择所有显示的元素；
- $(":hidden") 选择所有隐藏的元素；
:hidden 选择器，不仅仅包含样式 display="none"的元素，还包括隐藏表单、visibility等等 - 我们有几种方式可以隐藏一个元素：
- CSS display的值是 none
- type="hidden"的表单元素
- 宽度和高度都显式设置为 0
- 一个祖先元素是隐藏的，该元素是不会在页面上显示
- CSS visibility的值是 hidden
- CSS opacity的指是 0
- 如果元素中占据文档中一定的空间,元素被认为是可见的。
可见元素的宽度或高度，是大于零。
元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。 - 不在文档中的元素是被认为是不可见的，如果当他们被插入到文档中，jQuery没有办法知道他们是否是可见的，因为元素可见性依赖于适用的样式
属性筛选选择器
- $('div[name=p1]')： //查找所有div中，属性name=p1的div元素
- $('div[p2]')： //查找所有div中，有属性p2的div元素
- $('div[name|="-"]')//查找所有div中，有属性name中的值只包含一个连字符“-”的div元素，或以连字符‘-’相连的前缀为字符“-”的div
- $('div[name~="a"]') //查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素，以空格风格的属性中有属性值a
- $('div[name^=imooc]') //查找所有div中，属性name的值是用imooc开头的
- $('div[name$=imooc]') //查找所有div中，属性name的值是用imooc结尾的
- $('div[name*="test"]')
//查找所有div中，有属性name中的值包含一个test字符串的div元素 - $('div[testattr!="true"]')//查找所有div中，有属性testattr中的值没有包含"true"的div
子元素筛选选择器
$
(':first-child'):针对所有父元素下的第一个子元素
$(':last-child'):针对所有父元素下的最后一个子元素
$(':only-child'):针对所有父元素下的只有一个子元素（只有唯一一个子元素）
$(':nth-child(n)')针对所有父元素下的弟n个元素（这里的n是从1开始计数）
$(':nth-last-child(n)')针对所有父元素下的倒数弟n个元素
- 注意：
- :first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1）
- jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的
表单元素选择器
- $(":input") 选择所有input,testarea,select和button元素；
- $(":text") 匹配所有文本框；
- $(":password") 匹配所有密码框；
- $(":radio") 匹配所有单选按钮；
- $(":checkbox") 匹配所有复选框；
- $(":submit") 匹配所有提交按钮；
- $(":image") 匹配所有图像域；
- $(":reset") 匹配所有重置按钮；
- $("button") 匹配所有按钮；
- $("file") 匹配所有文件域；
表单对象属性筛选选择器
- $(":enabled") 选取可以使用的表单元素
- $(":disabled")选取不可以使用的表单元素
- $(":checked")选取被选择中的<input>
- $(":selected")选取被选择中的<option>元素
- 注意： 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素
特殊选择器this
$('p').click(function(){
//把p元素转化成jQuery的对象
var $this= $(this)
$this.css('color','red')
})
attr()与.removeAttr()
- attr()有4个表达式：
- attr(传入属性名)：获取属性的值
- attr(属性名, 属性值)：设置属性的值
- attr(属性名,函数值)：设置属性的函数值
- attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
- removeAttr()删除方法：
.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute） - 注意：Property是这个DOM元素作为对象，其附加的内容，例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法进行取值或赋值等，获取Attribute就需要用attr，获取Property就需要用prop
html()及.text()
- .html()方法 ：获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法：
- .html() 不传入值，就是获取集合中第一个匹配元素的HTML内容
- .html( htmlString ) 设置每一个匹配元素的html内容
- .html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数
- .text()方法：得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，具体有3种用法：
- .text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代
- .text( textString ) 用于设置匹配元素内容的文本
- .text( function(index, text) ) 用来返回设置文本内容的一个函数
.val()
- .val()方法主要是用于处理表单元素的value值，比如 input, select 和 textarea。具体有3种用法：
- .val()无参数，获取匹配的元素集合中第一个元素的当前值
2 .val( value )，设置匹配的元素集合中每个元素的值 - .val( function ) ，一个用来返回设置值的函数
- 通过.val()处理select元素， 当没有选择项被选中，它返回null
- .val()方法多用来设置表单的字段的值
如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值
