jq学习

$( ".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基本筛选器

1. $("div:first")匹配div下的第一个元素

2. $("div:last")匹配div下的最后一个元素

3. $("div:not(p)")过滤选择器，选择所有元素但不包括括号中的

4. $("div:eq(index)")在匹配的集合中选择索引值index的元素
   eq就是equal等于的意思

5. $("div:gt(index)")选择匹配集合中所有大于给定index（索引值）的元素
   gt是gather than 大于的意思

6. $("div:lt(index)")选择匹配集合中所有小于给定index（索引值）的元素
   lt是litter than 小于的意思

7. $("div:even")选择索引值为偶数的元素，从0开始计数

8. $("div:odd")选择索引值为奇数的元素，从0开始计数

9. $("div:animated")选择所有执行动画效果的元素

10. $("div:root")选择该文档的根元素

11. $("div:header")选择所有标题元素

jq可见性筛选选择器?

• $(":visible") 选择所有显示的元素；
• $(":hidden") 选择所有隐藏的元素；
  :hidden 选择器，不仅仅包含样式 display="none"的元素，还包括隐藏表单、visibility等等
• 我们有几种方式可以隐藏一个元素：

1. CSS display的值是 none
2. type="hidden"的表单元素
3. 宽度和高度都显式设置为 0
4. 一个祖先元素是隐藏的，该元素是不会在页面上显示
5. CSS visibility的值是 hidden
6. CSS opacity的指是 0
7. 如果元素中占据文档中一定的空间,元素被认为是可见的。
   可见元素的宽度或高度，是大于零。
   元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。
8. 不在文档中的元素是被认为是不可见的，如果当他们被插入到文档中，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个元素

• 注意：

1. :first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1）
2. jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的

表单元素选择器

1. $(":input") 选择所有input,testarea,select和button元素；
2. $(":text") 匹配所有文本框；
3. $(":password") 匹配所有密码框；
4. $(":radio") 匹配所有单选按钮；
5. $(":checkbox") 匹配所有复选框；
6. $(":submit") 匹配所有提交按钮；
7. $(":image") 匹配所有图像域；
8. $(":reset") 匹配所有重置按钮；
9. $("button") 匹配所有按钮；
10. $("file") 匹配所有文件域；

表单对象属性筛选选择器

• $(":enabled") 选取可以使用的表单元素
• $(":disabled")选取不可以使用的表单元素
• $(":checked")选取被选择中的
• $(":selected")选取被选择中的元素
• 注意： 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
  在某些浏览器中，选择器:checked可能会错误选取到元素，所以保险起见换用选择器input:checked，确保只会选取元素

特殊选择器this

$('p').click(function(){
    //把p元素转化成jQuery的对象
    var $this= $(this) 
    $this.css('color','red')
})

attr()与.removeAttr()

• attr()有4个表达式：

1. attr(传入属性名)：获取属性的值
2. attr(属性名, 属性值)：设置属性的值
3. attr(属性名,函数值)：设置属性的函数值
4. attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

• removeAttr()删除方法：
  .removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）
• 注意：Property是这个DOM元素作为对象，其附加的内容，例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法进行取值或赋值等，获取Attribute就需要用attr，获取Property就需要用prop

html()及.text()

• .html()方法 ：获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法：

1. .html() 不传入值，就是获取集合中第一个匹配元素的HTML内容
2. .html( htmlString ) 设置每一个匹配元素的html内容
3. .html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数

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

1. .text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代
2. .text( textString ) 用于设置匹配元素内容的文本
3. .text( function(index, text) ) 用来返回设置文本内容的一个函数

.val()

• .val()方法主要是用于处理表单元素的value值，比如 input, select 和 textarea。具体有3种用法：

1. .val()无参数，获取匹配的元素集合中第一个元素的当前值
   2 .val( value )，设置匹配的元素集合中每个元素的值
2. .val( function ) ，一个用来返回设置值的函数
3. 通过.val()处理select元素， 当没有选择项被选中，它返回null
4. .val()方法多用来设置表单的字段的值
   如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值