jQuery对象与DOM对象

var oDiv = document.getElementById('box'); // DOM对象
var $oDiv = $('#box'); // jQuery对象

// 将jQuery对象转化为DOM对象的两种方法
var oDiv = $oDiv[0]; // 利用数组下标的方式
var oDiv = $oDiv.get(0); // 利用jQuery自带的get方法

// 将DOM对象转化为jQuery对象的方法
var $oDiv = $(oDiv);

jQuery对象与DOM对象的区别

通过jQuery方法包装后的对象是一个类数组对象，这个对象里面包含了DOM对象的信息，封装了很多的操作方法，唯一相似的是他们都能操作DOM。

jQuery选择器

ID选择器： $( "#id" )
类选择器： $( ".class" )
元素选择器： $( "element" )
全选择器： $( "*" )

层级选择器

子选择器： $("parent > child") 选择指定父元素的指定的所有直接子元素
后代选择器： $("ancenstor descendant") 选择所有给定祖先元素的所有指定后代元素
相邻兄弟选择器： $("prev + next") 选择所有紧接在prev元素后的next元素
一般兄弟选择器： $("prev ~ next") 选择prev元素后的所有next兄弟元素

基本筛选选择器

$(":first") : 匹配第一个元素
```
  $(".div:first")
```
$(":last") : 匹配最后一个元素
```
  $(".div:last")
```
$(":even") : 选取索引值为偶数的元素(从0开始计数)
```
  $(".div:even")
```
$(":odd") : 选取索引值为奇数的元素(从0开始计数)
```
  $(".div:odd")
```
$(":eq(index)") : 在匹配的集合中选择索引值为index的元素
```
  $(".aaron:eq(2)")
```
$(":gt(index)") : 选择匹配集合中所有大于给定index(索引值)
```
  $(".aaron:gt(3)")
```
$(":lt(index)") : 选取匹配集合中所有索引值小于给定index参数的元素
```
  $(".aaron:lt(2)")
```
$(":not(selector)") : 一个用来过滤的的选择器，选择所有元素去除不匹配给定的选择器元素
```
  $("input:not(:checked) + p")
```

内容筛选选择器

$(":contains(text)") : 选择含有指定文本的元素

  $(".div:contains('beautiful')"); //查找所有class="div"元素中包含"beautiful"的元素节点

$(":has(selector)") : 选择包含指定元素的元素

  $(".div:has(span)");  //查找所有class="div"中DOM元素中包含"span"的元素节点

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

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

$(":empty") : 选择所有没有子元素的元素

  $("a:empty"); //选择没有子元素和文本的a元素

可见性筛选选择器

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

  $('#div1:visible'); //查找id="div1"且显示的元素节点

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

  $('#div1:hidden');  //查找id="div1"且隐藏的元素节点

display：none的元素是不可见的

width=0并且height=0的元素是不可见的

type=“hidden”的表单元素是不可见的

visibility：hidden或者opacity=0的元素是可见的

属性筛选选择器

$(“[attribute*=’value’]”) 选择指定属性包含一个指定的字符串的元素
$(“[attribute~=’value’]”) 选择指定属性用空格分隔的值中包含一个给定值的元素
$(“[attribute=’value’]”) 选择指定属性是给定值的元素
$(“[attribute^=’value’]”) 选择指定属性是以给定字符串开始的元素
$(“[attribute$=’value’]”) 选择指定属性是以给定字符串结尾的元素，这个是区分大小写的
$(“[attribute]”) 选择所有具有指定属性的元素
$(“[attribute|=’value’]”) 选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-”）的元素
$(“[attributeFilter1][attributeFilterN]”) 选择匹配所有指定的属性筛选器的元素
$(“[attribute!=’value’]”) 选择不存在指定属性，或者指定的属性值不等于给定值的元素

$('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)

:last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素

如果子元素只有一个的话，:first-child与:last-child是同一个 :only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配

jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的

表单元素选择器

$(“:input”)
$(“input:text”)匹配所有文本框
$(“input:password”)匹配所有密码档
$(“input:radio”)匹配所有单选按钮
$(“input:checkbox”)匹配所有复选框
$(“input:submit”)匹配所有提交按钮
$(“input:image”)匹配所有图像域
$(“input:reset”)匹配所有重置按钮
$(“input:button”)匹配所有按钮
$(“input:file”)匹配所有文件域

大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password')等价于$('[type=password]')

表单对象属性筛选选择器

$(":enabled") 选取可以使用的表单元素
$(":disabled")选取不可以使用的表单元素
$(":checked")选取被选择中的<input>
$(":selected")选取被选择中的<option>元素

在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素

特殊选择器this

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

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

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

jQuery的属性与样式

.attr()与.removeAttr()

attr()有4个表达式

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

removeAttr()删除方法

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

Attribute就是dom节点自带的属性
而Property是这个DOM元素作为对象，其附加的内容
获取Attribute就需要用attr，获取Property就需要用prop

html()及.text()

.html()方法体有3种用法

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

这个操作是针对整个HTML内容（不仅仅只是文本内容）

.text()方法体有3种用法

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

.text()结果返回一个字符串，包含所有匹配元素及其后代元素的合并文本
.text( textString ) 用于设置匹配元素内容的文本

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

  $(".left a:first").text(function(idnex,text){
      return '增加新的文本内容' + text
  })

.val()

.val()方法主要是用于处理表单元素的值，比如 input, select 和 textarea。

.val()方法

.val()无参数，获取匹配的元素集合中第一个元素的当前值
.val( value )，设置匹配的元素集合中每个元素的值
.val( function ) ，一个用来返回设置值的函数

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

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

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

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

.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的”value”值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的”value”值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。
.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

增加样式.addClass()

.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名

$("div").addClass(function(index,className) {
    //找到类名中包含了imooc的元素
    if(-1 !== className.indexOf('imooc')){
        //this指向匹配元素集合中的当前元素
        $(this).addClass('imoocClass')
    }
});

删除样式.removeClass()

.removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名
.removeClass( function(index, class) ) ：一个函数，返回一个或多个将要被移除的样式名

$('.right > div:first').removeClass(function(index,className){
    //className = aa bb imoocClass
    //把div的className赋给下一个兄弟元素div上作为它的class
    $(this).next().addClass(className);

    //删除自己本身的imoocClass
    return 'imoocClass';
})

切换样式.toggleClass()

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

.toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名
.toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除

第二个参数判断样式类是否应该被添加或删除
true，那么这个样式类将被添加;
false，那么这个样式类将被移除

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

//所有的奇数tr元素，应该都保留class="c"样式
$("#table tr:even").toggleClass("c", true);

样式操作.css()

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

获取：

.css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值
.css( propertyNames )：传递一组数组，返回一个对象结果

设置：

.css(propertyName, value )：设置CSS
```
  css("background-color","red")
```

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

  css("width",function(index,value){
      //value带单位，先分解
      value = value.split('px');
      //返回一个新的值，在原有的值上，增加50px
      return (Number(value[0]) + 50) + value[1];
  })

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

  css({
      'font-size'        :"15px",
      "background-color" :"#40E0D0",
      "border"           :"1px solid red"
  })

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

元素的数据存储

jQuery提供的存储接口

jQuery.data( element, key, value ) //静态接口,存数据
```
  $.data(ele, "a", "data test")
```
jQuery.data( element, key ) //静态接口,取数据
```
  $.data(ele, "a")
```
.data( key, value ) //实例接口,存数据
```
  ele.data("a", "data test")
```
.data( key ) //实例接口,取数据
```
  ele.data("a")
```

jQuery提供的删除接口

jQuery.removeData( element [, name ] )
.removeData( [name ] )

复习jQuery - 样式篇

jQuery对象与DOM对象