jQuery基础知识点
文章目录
1. jQuery简介
为了简化JavaScript开发而产生的JS库,JS库封装了很多预定义的对象和使用函数,可以帮助开发者建立有高难度交互的Web2.0 特性的富客户端页面,并且兼容各大浏览器。
- 理念:写得少,做得多(write less,do more)。
2. jQuery对象
通过
jQuery($())
包装DOM对象后产生的对象。jQuery对象是jQuery所独有的,它无法使用DOM对象的任何方法,同样,DOM对象也无法使用jQuery里的任何方法。
-
约定:如果获取的是jQuery对象,那么要在变量前面加上
$
如:
var $variable = jQuery对象;
var variable = DOM对象;
3. jQuery对象与DOM对象的相互转换
jQuery对象是一个数组对象。
-
jQuery对象—>DOM对象:
- 通过数组下标得到对应DOM对象
如:var $cr = $("#cr");
var cr = $cr[0];
- 通过jQuery里的get(index)方法得到相应的DOM对象
如:var $cr = $("#cr");
var cr = $cr.get(0);
- 通过数组下标得到对应DOM对象
-
DOM对象—>jQuery对象:
-
将DOM对象使用$()包装起来即可
如:
var cr = document.getElementById("cr");
var $cr = $(cr);
-
4. jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件的处理、遍历DOM和Ajax操作都依赖于选择器。
优点: 1):简洁的写法
2):完善的事件处理机制:使用jQuery获取网页中的元素即使不存在也不会报错。
4.1 基本选择器:
基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id,class和标签名来查找DOM元素(在网页中id只能使用一次,class允许重复使用)。
选择器 | 描述 | 返回 |
---|---|---|
#id | 根据给定的id匹配一个元素 | 单个元素组成的集合 |
.class | 根据给定的类名匹配元素 | 集合元素 |
element | 根据给定的元素名匹配元素 | 集合元素 |
* | 匹配所有元素 | 集合元素 |
selector1,selector2,… ,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 |
**用法:**使用$("")
包装住选择器即可选择相应元素,如:$("input")
即会选择所有名为input的元素。
**注:**可以用基本选择器合并成一个复合基本选择器,满足多个条件,每选择一次,缩小一次范围。
如:$("div.one")
将选取每个class为one的div元素,同理,其他的选择器也可以如此复合。
4.2 层级选择器:
如果想通过DOM元素之间的层次关系来获取特点元素,例如:后代元素、子元素、相邻元素、兄弟元素等,则需要使用层级选择器。
选择器 | 描述 | 返回 |
---|---|---|
ancestor descendant | 选取ancestor下的所有名为descendant的后代元素 | 集合元素 |
parent > child | 选取parent下的所有名为child的子元素(不包括子元素的后代元素) | 集合元素 |
prev + next | 选取紧接在prev元素后的名为next的元素 | 集合元素 |
prev ~ siblings | 选取prev元素后的所有名为siblings的兄弟元素 | 集合元素 |
注意:
- 其中的ancestor、parent以及prev并不一定是单个元素,也可以是多个元素,即可以是基本选择器中的任何一个(不包括选择器集合)。
$("prev + next")
选择器要求“prev”元素与名为next的元素相邻,若不相邻该选择器失效。$("prev ~ div")
选择器只能选择“prev”元素后的兄弟元素,而jQuery中的方法siblings()
与前后位置无关,只要是兄弟元素都可以选取。
4.3 过滤选择器:
主要是通过特定的过滤规则来筛选出所需的DOM元素,该选择器基本都以:
开头。
**注:**相同的过滤选择器支持组合使用,不同的过滤选择器同样也支持组合使用,即可以
(:基本过选择器:内容过滤选择器:可见性选择器:...)
,如:$("div:visible:last")
即会选择所有可见的div元素中的最后一个。
-
基本过滤选择器:
选择器 描述 返回 :first 选取第一个元素 单个元素组成的集合 :last 选取最后一个元素 单个元素组成的集合 :not(selector) 去除所有与给定选择器匹配的元素 集合元素 :even 选取索引是偶数的所有元素,索引从0开始 集合元素 :odd 选取索引是奇数的所有元素,索引从0开始 集合元素 :eq(index) 选取索引等于index的元素,索引从0开始 单个元素组成的集合 :gt(index) 选取索引大于index的元素,索引从0开始 集合元素 :animated 选取当前正在执行动画的所有元素 集合元素 注意: 基本过滤选择器与别的选择器写法之间不可存在空格,否则会产生问题,因为空格代表选取后代元素。如:
$("div:first")
该写法正确,但$("div :first")
或者$("div: first")
以及别的写法都会产生问题,其他带**:
**的过滤选择器同样如此。 -
内容过滤选择器:
选择器 描述 返回 :contains(text) 选取含有文本内容为text的元素 集合元素 :empty 选取不包含子元素或者文本的元素(即元素为空) 集合元素 :parent 选取含有子元素或者文本的元素(即非空元素) 集合元素 :has(selector) 选取含有选择器所匹配的元素的元素 集合元素 注意:
$(":parent")
与$(":not(:empty)")
两者效果是等价的,都是选择非空元素。 -
可见性过滤器:
选择器 描述 返回 :hidden 选取所有不可见的元素 集合元素 :visible 选取所有可见的元素 集合元素 **注意:**hidden不仅包含样式属性display为none的元素,也包含文本隐藏域(
<input type = "hidden">
)和visible:hidden之类的元素。 -
属性过滤选择器:
选择器 描述 返回 [attribute] 选取拥有此属性的元素 集合元素 [attribute = value] 选取指定属性的值为value的元素 集合元素 [attribute != value] 选取指定属性的值不为value的元素 集合元素 [attribute ^= value] 选取指定属性的值以value开始的元素 集合元素 [attribute $= value] 选取指定属性的值以value结束的元素 集合元素 [attribute *= value] 选取指定属性的值含有value元素 集合元素 [selector1][selector2]…[selectorN] 用属性选择器合并成一个复合属性选择器,满足多个条件,每选择一次,缩小一次范围 集合元素 注意:属性过滤选择器前面不带
:
,它与其他的选择器进行组合时,也不可加**:
**。 -
子元素过滤选择器:
选择器 描述 返回 :nth-child(index/even/odd/equation) 选取每个父元素下第index个子元素或者奇偶元素(index从1开始) 集合元素 :first-child 选取每个父元素的第一个子元素 集合元素 :last-child 选取每个父元素的最后一个子元素 集合元素 :only-child 如果某个元素是它父元素中唯一的子元素,那么将被匹配 集合元素 注意:
- 使用子元素过滤选择器时,必须要在选择器前添加一个空格。如:
$("div.one :only-child)
这种写法才可以选取到子元素。 - nth-child()选择器详解:
nth-child(even/odd)
:能选取每个父元素下索引值为偶(奇)数的子元素。nth-child(2)
:能选取每个父元素下索引值为2的子元素。nth-child(3n+1)
:能选取每个父元素下索引值是3n+1的元素(n为自然数)。
-
表单对象属性过滤选择器:
选择器 描述 返回 :enabled 选取所有可用元素 集合元素 :disabled 选取所有不可用元素 集合元素 :checked 选取所有被选中的元素(单选框,复选框) 集合元素 :selected 选取所有被选中的选项元素(下拉列表) 集合元素
- 使用子元素过滤选择器时,必须要在选择器前添加一个空格。如:
4.4 表单选择器:
选择器 | 描述 | 返回 |
---|---|---|
:input | 选取所有<input> 、<textarea> 、<select> 和<button> 元素 | 集合元素 |
:text | 选取所有的单行文本框 | 集合元素 |
:password | 选取所有的密码框 | 集合元素 |
:radio | 选取所有的单选按钮 | 集合元素 |
:checkbox | 选取所有的复选框 | 集合元素 |
:submit | 选取所有的提交按钮 | 集合元素 |
:image | 选取所有的图像域 | 集合元素 |
:reset | 选取所有的重置按钮 | 集合元素 |
:button | 选取所有的按钮 | 集合元素 |
:file | 选取所有的文件域 | 集合元素 |
:hidden | 选取所有的不可见元素,或者type为hidden的元素 | 集合元素 |
注意: 选取被选中的select的option需要使用选取子节点的方式,如:
$("select[name = 'test'] :selected").each(fuction(){
alert(this.value);
});
5. jQuery对象的几个方法
jQuery 的很多方法支持方法的连缀, 即一个方法的返回值是调用该方法的 jQuery 对象,因此可以继续调用该对象的其他方法.如:show()、hide()、parent()、append()…
-
val()
:获取或设置表单元素的value值
val():获取元素的value值;val(str):设置元素的value值。
-
attr()
:和val()方法类似
attr(name):获取name属性值;
attr(name, val):设置name属性值为val。 -
each()
:jQuery中的显式迭代,对jQuery对象进行遍历,其参数为function,函数内部的this是正在遍历的DOM对象。如:$("select :selected").each(fuction(){ alert(this.value); //$(this)是一个jQuery对象 //alert($(this).val()); });
-
text()
:和val方法类似
text():获取元素节点的文本子节点的值;
text(str):设置元素节点的文本子节点的值。 -
is()
:检测匹配元素集合,如果其中至少有一个元素符合给定的表达式就返回true,参数可为选择器、DOM元素或 jQuery 对象。如:$("#content").is(":visible")
可以判断元素是否可见。
6. jQuery中DOM操作
6.1 查找节点:
-
查找元素节点:通过jQuery选择器完成
-
操作属性节点:查找到所需的元素后,jQuery对象的
attr()
方法可以获取和设置它的各种属性值。 -
操作文本节点:查找到所需的元素后,jQuery对象的
text()
方法可以获取和设置文本节点的文本值。
6.2 创建节点:
使用jQuery的工厂函数$()
,根据传入的html标记字符串创建一个DOM对象,并把这个DOM对象包装成一个jQuery对象返回。
注意:
-
动态创建的新元素节点不会被自动添加到文档中,而是需要使用其它方法将其插入到文档中。
-
当创建单个元素时,需注意闭合标签和使用标准的XHTML格式。如:创建一个
<p>
元素,可以使用$("<p />
")或者$("<p></P>
"),但不能使用$("<p>
")或者$("<P>
")。 -
创建文本节点就是在创建元素节点时,直接将文本内容写出来;创建属性节点也是在创建元素节点时一起创建。
6.3 插入节点:
将动态创建的html元素插入到文档中,即成为文档中某个节点的子节点。
内部插入:
方法 | 描述 |
---|---|
append() | 向每个匹配的元素内部结尾处追加子元素 |
appendTo() | 把所有匹配的元素追加到指定元素的内部结尾处 |
prepend() | 向每个匹配的元素内部开始处添加子元素 |
prependTo() | 把所有匹配的元素添加到指定元素的内部开始处 |
外部插入:
方法 | 描述 |
---|---|
after() | 向每个匹配的元素之后添加新元素 |
insertAfter() | 把所有匹配的元素插入到指定元素之后 |
before() | 向每个匹配的元素之前添加新元素 |
insertBefore() | 把所有匹配的元素插入到指定元素之前 |
**注意:**以上八个方法不仅能将新创建的DOM元素插入到文档中,也能对原有的DOM元素进行移动。
6.4 删除节点:
-
remove()
:从DOM中删除所有匹配的元素,参数为筛选元素的jQuery表达式。当某个节点被remove()
删除后,它所包括的后代节点都将被同时删除。这个方法的返回值是指向已被删除节点的引用。 -
empty()
:清空节点——清空元素中的所有后代节点(不包含属性节点)。
6.5 克隆节点:
-
clone()
:克隆匹配的DOM元素,返回值为克隆后的副本,但此时复制的新节点不具有任何行为。 -
clone(true)
:复制元素的同时也复制元素包含的事件。
注意: clone节点时需要注意克隆后的节点的id属性,若原节点有id属性,则克隆后会出现有两个id相同的节点的情况。
6.6 替换节点:
-
replaceWith()
:将所有匹配的元素都替换为指定的HTML或DOM元素。返回值为被替换的节点的引用。 -
replaceAll()
:把指定的HTML或DOM元素都替换为匹配的元素。
**注意:**若在替换之前,已经在元素上绑定了事件,替换后原先绑定的事件会与原先的元素一起消失。如:有节点1与节点2,将节点1替换为节点2则节点1会消失,同时它绑定的所有事件也会消失,但节点2绑定的事件仍然存在。
6.7 包裹节点:
-
wrap()
:将指定节点用其他标记包裹起来,该方法对于需要在文档中插入额外的结构化标记非常有用,而且不会破坏原始文档的语义。 -
wrapAll()
:将所有匹配的元素用一个标记来包裹,而wrap()
方法是将所有匹配的元素本身单独用一个标记来包裹。 -
wrapInner()
:将每一个匹配元素的子内容(包括文本节点)用其它结构化标记包裹起来。
7. jQuery中属性操作
jQuery中有很多方法都是一个函数实现获取和设置。如:attr()、html()、text()、val()、height()、width()、css()等。
-
attr()
:获取属性和设置属性。注意: 以下情况应该使用prop()访问元素的属性:
- 只添加属性名称就可以使属性生效的就应该使用
prop()
,如checked属性和disable属性; - 只存在true/false的属性(即值为布尔型的属性)应该使用
prop()
。
- 只添加属性名称就可以使属性生效的就应该使用
-
removeAttr()
:删除指定元素的指定属性。 -
html()
:读取和设置某个元素中HTML内容,相当于JS中的innerHTML属性,该方法可用于XHTML,但不能用于XML文档。 -
text()
:读取和设置某个元素中的文本内容,该方法既可用于XHTML,也可用于XML文档。 -
val()
:读取和设置某个元素中的值,类似于JS中的value属性,对于文本框(<input type = "text">
)、下拉列表框(<select>
)和单选框(<input type = "radio">
),该方法可返回元素的值(多选框<input type = "checkbox">
只能返回第一个值),如果为多选下拉列表框(<select multiple="multiple">
),则返回一个包含所有选择值的数组。注意:
- 为一组 radio 赋值,
val()
参数应该使用数组, 使用一个值不起作用。如:$(":radio[name='r']").val(["radio2"]);
val()
不能直接获取checkbox 被选择的值,因为$(":checkbox:checked")
得到的是一个数组. 直接使用val()
方法只能获取数组元素的第一个值,可以使用 each 遍历所有值.- 若匹配到的元素唯一时可以直接使用
val()
获取它的value属性值,设置value值传入单一参数即可;若匹配到的元素为一个数组,则需要使用each()
才能遍历获取每一元素的值,同样在设置value值时参数也需要传入一个数组。
- 为一组 radio 赋值,
8. jQuery中样式操作
-
获取和设置class:class是元素的一个属性,所以可以通过
attr()
方法获取和设置class。 -
addClass()
:追加样式——为每个匹配的元素添加指定的class。 -
removeClass()
:移除样式——从匹配的元素中删除全部或指定的class。 -
toggleClass()
:切换样式——控制样式上的重复切换,如果匹配的元素存在指定的class则删除它,如果不存在则添加它。 -
hasClass()
:判断是否含有某个样式——判断匹配的元素中是否含有某个class,如果有则返回true,否则返回false。
9. jQuery中CSS—DOM操作
-
css()
:获取和设置元素的样式属性。 -
opacity()
:获取和设置元素透明度,值在[0,1]之间。 -
height()
、width()
:获取和设置元素的高度、宽度。在设置值时,若只传递数字,则默认单位是px。若使用其他单位则需传递一个字符串,如:$("p:first").height("2em")
; -
offset()
:获取元素在当前视窗中的相对位移,其返回值包含了两个属性:top,left。该方法只对可见元素有效。
10. jQuery中的事件
10.1 加载DOM:
在页面加载完成后,浏览器会通过JavaScript为DOM元素添加事件。
方法 | window.onload | $(document).ready |
---|---|---|
执行时机 | 必须等待网页中的所有内容加载完毕后(包括图片)才能执行 | 网页中的所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完 |
编写个数 | 不能同时编写多个 | 能同时编写多个 |
简化写法 | 无 | $() |
10.2 事件绑定:
bind()
:对匹配的元素进行特定事件的绑定。如:
$(".head").bind("click", function(){
//使用is()方法,来判断某个给定的 jQuery对象是否符合指定的选择器.
var flag = $(".content").is(":hidden");
if(flag){
//show() 方法: 使隐藏的变为显示
$(".content").show();
}else{
$(".content").hide();
}
});
10.3 合成事件:
-
hover()
:模拟光标悬停事件。当光标移到元素上时,会触发指定的第一个函数,当光标移出这个元素时,会触发指定的第二个函数。注:
mouseover()
:鼠标移上去触发;mouseout()
:鼠标移出触发。 -
toggle()
:用于模拟鼠标连续单击事件。第一次单击元素,触发指定的第一个函数,当再次单击同一个元素时,则触发指定的第二个函数,如果有更多个的函数则依次触发直到最后一个。然后再单击则会循环执行。**注:**toggle()的另一个作用:切换元素的可见状态。
10.4 事件冒泡:
事件会按照DOM层次结构像水泡一样不断向上直至顶端。
**解决:**在事件处理函数中返回false,会对事件停止冒泡,还可以停止元素的默认行为。
10.5 事件对象的属性:
事件对象:当触发事件时,事件对象就被创建了。为事件响应函数添加一个参数,该参数就代表了事件对象,它只有事件响应函数中才能访问到,事件执行完毕后就被销毁。
**event.pageX , event.pageY:**事件对象的两个属性,获取到光标相对于页面的X,Y坐标。
10.6 移除事件:
-
unbind()
:移除匹配元素上的所有指定事件,若无参数则移除所有事件。 -
one()
:为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数,即函数执行完毕后该元素的特定事件就会被移除。
11. jQuery中动画的隐藏和显示
11.1 既改变高度,又改变透明度:
hide()
:在HTML文档中,为一个元素调用hide()
方法会将该元素的display
样式改为none
,代码功能同css("display", "none")
一样。show()
:将元素的display样式改为先前的显示状态。
**注:**这两个方法若不带参数可使元素立即隐藏或者显示,参数为完全隐藏或者显示的时间,单位:ms。而且这两个方法也会同时减少(增大)内容的高度、宽度和不透明度。
11.2 只改变透明度:
-
fadeIn()
:在指定的时间内降低元素的透明度,直至元素完全显示。 -
fadeOut()
:在指定的时间内降低元素的不透明度,直至元素完全消失。
11.3 只改变高度:
-
slideDown()
:如果某一元素隐藏时,调用此方法元素将在指定时间内由上至下延伸显示。 -
slideup()
:如果某一元素显示时,调用此方法元素将在指定时间内由下至上缩短隐藏。
11.4 其他方法:
toggle()
:切换匹配元素的可见状态。如果元素是可见的,切换为隐藏;如果元素是隐藏的,切换为可见。slideToggle()
:通过高度变化来切换匹配元素的可见性。fadeToggle()
:通过透明度变化来切换匹配元素的可见性。fadeTo()
:把匹配元素的不透明度以渐进的方式调整到指定的值(0~1之间)。