jQuery对象转化为dom对象

注意：jQuery对象是一个类数组对象，而DOM对象就是一个单独的DOM元素。

1. 利用数组下标的方式读取jQuery中的dom对象

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



2.jQuery自带的get（）方法，通过他可以直接访问jquery对象DOM的节点

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

jquery对象与dom对象

dom对象：通过dom模型提供的方法获取的dom元素就是一个dom对象

jQuery对象：例：var $p=$('#imooc'); 通过此方法会得到一个$p的jQuery对象，$p是一个类数组对象，里面不光包含了dom对象的信息，还有很多操作方法，通过调用自己的方法HTML与css来实现效果。

jquery格式

例：$(document).ready(  );  等页面的文档（document）中的节点都加载完毕后，再执行后续的代码。

$符号为jQuery对象的缩写形式

通过$(   )函数来获取页面中的元素

jQuery选择器的子元素筛选选择器

1. $(":first-child")   选择所有父元素下的第一个子元素
   

2. $(":last-child")    选择所有父元素下的最后一个子元素

3. $(":only-child")   选择某个元素是其父元素的唯一子元素的元素。

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

5. $(":nth-last-child")  选择所有父元素的第n个子元素，计数从最后一个到第一个。
   

jQuery选择器的属性筛选选择器

常用1.$("[attribute='value']")  选择指定属性（attribute）是给定值（value）的元素

注意：attribute为属性名

           value为属性值

两个都指定了

例：$("div[name='p1']")在多个div中选择具有属性为name且属性值为p1的某些div

2.$("[attribute*='value']")    选择给定的属性（attribute）是以包含某些值（test）的元素

注意：选择同一种多个元素中具有attribute属性且属性值中包含有字符串test的元素

例：$("div[name='test']")在多个div元素中选择具有name属性，且属性值中有test字符串的某些div

jquery选择器的可见性筛选选择器

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

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

注意：1.隐藏一个元素的方法

css中设置了display的值的none

type=“hidden”的表单元素

宽度和高度设置为0

祖先元素是隐藏的，该元素整体包括子元素，孙子元素都不会在页面中显示

css中visibility的值为hidden

css中opacity的值为0

jQuery选择器的内容筛选选择器

1. $(":contains(text)")      选择包含指定文本text的元素（文本在元素的子元素中也符合）

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

   注意格式：$("标签:parent")   如：$("a:parent") 选择所有包含子元素或者文本的a元素

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

   注意格式：$("标签:empty")  如：$("a:empty")

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

jQuery选择器的筛选选择器

注意：选择器用    冒号：  开头

常用选择器

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

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

3. $(":not(selector)")  选择所有除selector的元素

4. $(":eq(index)")    在匹配集合中选择索引值为index的元素（即二次筛选）（jQuery合集从0开始索引）

5. $(":gt(index)")     在匹配集合中选择索引值大于index的元素（注意是大于，所以从下一个开始）

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

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

8. $(":It(index)")      在匹配集合中选择索引值小于index的元素。

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

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

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

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

子选择器（>）        $("parent>child")

后代选择器（空格）   $("ancestor descendant")

注意：祖先元素的所有后代元素，可能是孩子，孙子，曾孙

相邻兄弟选择器（+）  $("prev+next ")

注意：在prev之后（不是之前）遇到的第一个指定元素

           以上若为id名前加#号，类前加点号，元素前不用加.

一般兄弟选择器（~）    $("prev~siblings")

注意：在prev之后（不是之前）遇到的所有指定元素（同级）。

注意：1.===严格等于，表示数值和类型都相等

2.jQuery的变量名前加$符号是为了区分与JavaScript的变量，一般都要加，在定义变量名称合法时有说过变量名以字母，下划线，$开头。

jQuery选择器之全选选择器

$("*");

或者JavaScript中使用  document.getElementsByTagName("*")也可以全选。

兼容性问题

1. IE会将注释节点实现为元素，所以在IE中调用getElementsByTagName里面会包含注释节点，这个通常是不应该的

2. getElementById的参数在IE8及较低的版本不区分大小写

3. IE7及较低的版本中，表单元素中，如果表单A的name属性名用了另一个元素B的ID名并且A在B之前，那么getElementById会选中A

4. IE8及较低的版本，浏览器不支持getElementsByClassName

jQuery选择器的元素选择器（无）

$("element");

注意：element为标签名

注意：1.通过getElementsByClassName（）函数实现样式的编辑，会得到一个dom对象的数组，需要使用一个循环来为所有对象设计样式。

2.通过jQuery来设计样式，直接 名称.css("     样式");无需循环，此方法内部带了一个隐式的循环处理

jquery选择器之类选择器(点号)

$(".class");

注意：通过class样式类名

jquery的ID选择器（#号）

$("#id");

如果多个元素分配了相同的ID，将只匹配该ID选择集合的第一个dom元素。但这种行为不应该发生。