慕课笔记：jQuery（一）——样式篇

1，jQuery对象和DOM对象之间的转换

把DOM对象转换为jQuery对象：

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

jQuery对象转化为DOM对象：

使用数组下标

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

使用jQuery的方法（其实方法的本质同上）

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

2，jQuery选择器

id选择器：根据id选择一个对象

$( "#id" )

类选择器：根据class类名选择一个数组

$( ".class" )

元素选择器：根据HTML标签选择一个数组

$( "element" )

全选择器：选择全部元素

$( "*" )

层级选择器：包括子选择器、后代选择器、相邻兄弟选择器、一般兄弟选择器；

子选择器：选择所有“parent”元素中指定的“child”的直接子元素

$("parent > child")

后代选择器：选择给定祖先元素的所有后代元素

$("ancestor descendant")

相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素(应该是只有一个)

$("prev + next")

一般选择器：匹配“prev”元素之后的所有兄弟元素。具有相同的父元素，并匹配过滤"siblings"选择器

$("prev ~ siblings")

筛选选择器_

筛选选择器是为了让我们更快捷的找到需要的DOM元素，其中很多都不是CSS的规范，而是jQuery自己为了开发者的便利延展出来的。

基本筛选器：

内容筛选器：

可见性筛选器：:hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等

属性筛选器：

子元素筛选选择器：

表单元素选择器：

表单对象元素筛选器：

特殊选择器this：

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

把this转换成jQuery的方法：

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