jQuery学习手记--样式片

一 jQuery对象与DOM对象
通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。

1. jQuery对象转化成DOM对象
   利用数组下标的方式读取到jQuery中的DOM对象
   var $div = $('div') //jQuery对象
   var div = $div[0] //转化成DOM对象

通过jQuery自带的get()方法
var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象

1. DOM对象转化成jQuery对象
   var div = document.getElementsByTagName('div'); //dom对象
   var $div = $(div); //jQuery对象

二 jQuery选择器

1. id选择器
   $( "#id" ) // #加id名称即可选择到该id

2. 类选择器
   $( ".class" ) // .加class名称即可选择到该类元素

3. 元素选择器
   $( "div" ) // 直接输入元素名称即可选中所有该元素

4. 全选择器
   $( "*" ) // 选择页面中所有的元素

5. 层级选择器
   $("parent>child")
   // 子选择器：选择所有指定parent元素中指定的child的直接子元素

$("ancestor descendant")
//后代选择器：选择给定的祖先元素的所有后代元素，孩子，孙子，曾孙元素

$("prev+next")
// 相邻兄弟选择器：选择所有紧接在prev元素后的next元素
$("prev~siblings")
//一般兄弟选择器：选择prev元素后的所有siblings元素，具有相同的父元素

1. 基本筛选选择器
   $(":first") // 匹配第一个元素

$(":last") // 匹配最后一个元素

$(":not(selector)") // 选择所有元素，除去不匹配给定的选择器

$(":eq(index)") // 选择索引值为index的元素，index为2，即为选择第三个

$(":gt(index)") // 选择索引值大于给定index(索引值）的元素

$(":it(index)") // 选择索引值小于给定index(索引值）的元素

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

$(":odd") // 选择索引值为奇数的元素，从1开始计数

$(":header") // 选择所有标题元素，如h1，h2，h3

$(":lang(language)") // 选择指定语言的所有元素

$(":root") // 选择该文档的根元素

$(":animated") // 选择所有正在执行动画效果的元素

1. 内容筛选选择器
   $(":contains(text)") // 选择所有包含指定文本的元素

$(":parent") // 选择所有含有子元素或者文本的元素

$(":empty") // 选择所有没有子元素的元素（包含文本节点）

$(":has(selector)") // 选择元素中至少包含指定选择器的元素

1. 可见性筛选选择器
   $(":visible ") // 选择所有显示的元素
   $(":hidden ") // 选择所有隐藏的元素
   我们有几种方式可以隐藏一个元素：
2. CSS display的值是none。
3. type="hidden"的表单元素。
4. 宽度和高度都显式设置为0。
5. 一个祖先元素是隐藏的，该元素是不会在页面上显示
6. CSS visibility的值是hidden

7. CSS opacity的指是0
   如果元素中占据文档中一定的空间,元素被认为是可见的。元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。

8. 属性筛选选择器
   $("[attribute='value'] ") // 选择指定属性是给定值的元素

$("[attribute|='value'] ") // 选择指定属性值等于给定字符串或以该文字串为前缀（该字符串后跟一个连字符"-"）的元素

$("[attribute*='value'] ") // 选择指定属性有包含一个给定的子字符串的元素（选择给定的属性是以包含某些值的元素）

$("[attribute~='value'] ") // 选择指定属性用空格分隔的值中包含一个给定值的元素

$("[attribute!='value'] ") // 选择不存在指定属性，或者指定的属性值不等于给定值的元素

$("[attribute^='value'] ") // 选择指定属性是以给定字符串开始的元素
$("[attribute$='value'] ") // 选择指定属性是以给定元素结尾的元素

$("[attribute'] ") // 选择所有具有指定属性的元素，钙元素可以是任何值

$("[attributeFilter][attributeFilterN] ") // 选择匹配所有指定的属性筛选器的元素

1. 子元素筛选选择器
   $(":first-child'] ") // 选择所有父级元素下的第一个子元素

$(":last-child'] ") // 选择所有父级元素下的最后一个子元素

$(":only-child'] ") // 如果某个元素是其父元素的唯一子元素，那么就会被选中

$(":nth-child'] ") // 选择所有父元素的第n个子元素

$(":nth-last-child'] ") // 选择所有父级元素下的倒数第n个子元素

1. 表单元素选择器
   $(":input") // 选择所有input,textarea,select和button元素

$(":text") // 选择所有文本框

$(":password") // 选择所有密码框

$(":checkbox") // 选择所有复选框

$(":button") // 选择所有按钮

$(":radio") // 选择所有单选按钮

$(":submit") // 选择所有提交按钮

$(":reset") // 选择所有重置按钮

$(":image") // 选择所有图像域

$(":file") // 选择所有文件域

1. 表单对象属性筛选选择器
   $(":enabled") // 选择可用的表单元素

$(":disabled") // 选择不可用的表单元素

$(":checked") // 选择被选中的<input>元素

$(":selected") // 选择被选中的<option>元素

1. 特殊选择器this
   $(this) // 将js中的this转变成jQuery元素，从而可以用jQuery方法操作元素

三 jQuery属性与样式

1. 获取及设置元素属性.attr()与.removeAttr()
   attr()有4个表达式：
   attr(传入属性名)：获取属性的值 .attr('name')
   attr(属性名, 属性值)：设置属性的值 .attr('name','abc')
   attr(属性名,函数值)：设置属性的函数值
   attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

2. 获取修改内容 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) ) 用来返回设置文本内容的一个函数

1. 处理表单元素的值 .val方法
   .val()方法
   .val()无参数，获取匹配的元素集合中第一个元素的当前值

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

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

注意事项：
1) 通过.val()处理select元素， 当没有选择项被选中，它返回null
2) .val()方法多用来设置表单的字段的值
3) 如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值

1. 增加样式.addClass() ， 删除样式.removeClass()
   .addClass( className )方法
   .addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名

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

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

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

1. 切换样式.toggleClass()
   通过toggleClass方法动态添加删除Class，一次执行相当于addClass，再次执行相当于removeClass
   .toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名

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

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

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

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

.css( propertyNames )：传递一组数组，返回一个对象结果
设置：
.css(propertyName, value )：设置CSS

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

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

1. 元素的数据存储
   jQuery提供的存储接口
   jQuery.data( element, key, value ) //静态接口,存数据
   jQuery.data( element, key ) //静态接口,取数据
   .data( key, value ) //实例接口,存数据
   data( key ) //实例接口,存数据
   2个方法在使用上存取都是通一个接口，传递元素，键值数据。在jQuery的官方文档中，建议用.data()方法来代替。
   删除接口
   jQuery.removeData( element [, name ] )
   .removeData( [name ] )