传智播客学习之Jquery基础

 

一、jQuery对象

1. jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象，jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法。jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法约定
2. 如果获取的是 jQuery 对象, 那么要在变量前面加上 $.

 

二、jQuery对象和DOM对象的互相转化

1. jQuery对象转化为DOM对象

方法一：通过数组索引

 jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象. 

方法二：使用 jQuery 中的 get(index) 方法

2. DOM对象转化为jQuery对象

对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来(jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象), 就可以获得一个 jQuery 对象.

三、Jquery选择器

1.基本选择器

1 #id：根据给定的id匹配一个元素 例如：id 为 one 的元素$("#one")

2) .class：根据给定的class（类名）属性匹配元素例如：例如：class 为 mini 的元素$(".mini")

3) element：根据给定的元素名属性匹配元素  例如：$("div") 元素名为div

4) *：匹配所有元素  例如：$("*") 所有元素

5) selector1,selector2...,selectorN：将每个选择器匹配元素合并后一起返回

例如：所有的<span>元素和 id 为 two 的元素  $("span,#two")

 

2.层次选择器

1）$(“ancestor descendant”)：选取ancestor的所有descendant后代元素

eg：选择 body 内的所有 div 元素  $("body div")

2)$(“parent>child”)：选取parent元素下的child子元素

eg：在 body 内, 选择子元素是 div 的 $("body>div")

3)$(“prev+next”)：选取紧接在prev元素后的下一个next元素

eg：选择 id 为 one 的下一个 div 元素 $("#one+div")

4)$(“prev~siblings”):选取prev元素后的所有sibings元素

eg：选择 id 为 two 的元素后面的所有 div 兄弟元素 $("#two~div")

注意：此方法只能获取prev后面的同辈元素，e儿siblings（）方法是获取所有同辈节点

3.表单选择器

：input  匹配所有 input, textarea, select 和 button 元素

：text   匹配所有的单行文本框

：radio   匹配所有单选按钮

：password 匹配所有密码框

：checkbox匹配所有复选框

：submit匹配所有提交按钮

：image匹配所有图像域

：button匹配所有按钮

：file  匹配所有文件域

：hidden匹配所有不可见元素，或者type为hidden的元素