1、jQuery介绍
jQuery是一个js框架(其实就是一个.js文件),它的特点是使用选择器查找要操作的节点,并且将这些节点封装成一个jQuery对象。封装的目的是为了更好地兼容不同的浏览器之间的差异,同时也会简化代码。
注:
选择器是jQuery借鉴css选择器的语法而创建的一种查找要操作的节点的语法格式。比如 $(’#id’);
2、jQuery基础
(1)jQuery编程的基本步骤
step1,引入jQuery.js文件
step2, 使用选择器查找要操作的节点
step3,调用jQuery对象的属性或者方法来操作相应的节点。
(2)jQuery对象与dom对象之间的转换
1)dom对象 — > jQuery对象
var $obj = $(dom对象);
eg:var $d = $(div);
2)jQuery对象 ---- > dom对象
第一种方式: var obj = $obj.get(0);
第二种方式: var obj = $obj.get()[0];
(3) jQuery与prototype如何同时使用?
因为jQuery与prototype都使用$函数,需要使用
var a = j Q u e r y . n o C o n f l i c t ( ) 将 a = jQuery.noConflict()将 a=jQuery.noConflict()将函数改名为"$a"。
3、jQuery选择器 selector
1)、基本选择器 selector/a1.html
- ——>匹配所有元素
#id ——> 根据给定的ID匹配一个元素。
.class ——> 根据给定的类匹配元素。
element ——>根据给定的元素名匹配所有元素
selector1,selector2…selectorn ——>将每一个选择器匹配到的元素合并 后一起返回。
2)、层次选择器 selector/a2.html
select1 select2——>匹配select1下的所有儿子元素(不包含孙子元素)
select1>select2——>匹配select1下的所有子元素(包含孙子元素)
select1+select2——>匹配紧跟在select1后的第一个兄弟元素(同辈元素)
select1~select2——>匹配select1后的所有兄弟元素(及找到所有的同 辈元素)
3)、过滤选择器
a.基本过滤选择器 selector/ a3.html
:first——>获取第一个元素
:last——>获取第一个元素
:not(selector)——>获取去除给定元素后的所有匹配元素
:even——>匹配所有索引值为偶数的元素,从 0 开始计数
:odd——>匹配所有索引值为奇数的元素,从 0 开始计数
:eq(index)——>匹配一个给定索引值的元素
:gt(index)——>匹配所有大于给定索引值的元素
:lt(index)——>匹配所有小于给定索引值的元素
b.内容过滤选择器 selector/ a4.html
:contains(text)——>匹配包含给定文本的元素
:empty ——>匹配没有子元素且文本为空的元素
:has(selector)——>匹配含有选择器所匹配的元素的元素
:parent ——> 跟empty相反,即有子节点,或者内容不为空的节点。
c.可见性过滤选择器 selector/ a5.html
:hidden——>匹配所有不可见元素,或者type为hidden的元素
:visible——>匹配所有的可见元素
d.属性过滤选择器 selector/ a6.html
[attribute]——>匹配包含给定属性的元素
[attribute=value]——>匹配给定的属性是某个特定值的元素
[attribute!=value]——>匹配属性不等于特定值的元素。
e.子元素过滤选择器 selector/ a7.html
:nth-child(index/even/odd)——>匹配其父元素下的第N个子或奇 偶元素(即同辈中第N个元素)
:first-child——>匹配其父元素下第一个子元素
:last-child——>匹配其父元素下最后一个子元素
f.表单对象属性过滤选择器