Web前端入门——jQuery基础总结

参考资料

http://www.lvyestudy.com/jquery/jq_list.aspx

内容整理至多方面材料，与书籍不一致

知识梳理：

1、dom

获取对象——操作元素——操作样式——DOM操作——遍历DOM

2、补充

过滤方法——事件——动画

第一章——认识jQuery

1、js与js库

js是一种脚本语言，现在主流的技术是Ajax（Asynchronous Javascript And XML，异步 JavaScript 和 XML）

• 缺点

a、复杂的文档对象模型（DOM）

b、不一致的浏览器存在兼容性问题

c、缺乏便捷的开发、调试工具

• js库

js库封装了很多预定义的对象和实用函数，如jQuery

2、jQuery

• 优点

• （1）代码简洁
• （2）完美兼容
• （3）强大的选择器
• （4）轻量级
• （5）完善的Ajax
• （6）丰富的插件

……等

• 下载与安装

jQuery2种库文件比较

类型	说明
jquery.js（开发版）	完整无压缩，用于测试与学习
jquery.min.js（发布版）	高度压缩，用于实际开发

---

---

---

---

---

---

第二章——jQuery基础选择器

$(){

}

jQuery的选择器完全继承了css的风格，支持CSS1、CSS2、的全部和CSS3的部分选择器

1、基本选择器

• 元素选择器

$("元素名")

• id选择器

$("#id名")

• class选择器

$(".类名")

• 群组选择器

$("选择器1 , 选择器2 ,……,选择器n")

2、 层次选择器

（1）$("M~N")可以使用“$(M元素).nextAll(选择器)”代替；

（2）$("M+N")可以使用“$(M元素).next(选择器)”代替；

jQuery层次选择器

选择器	说明
$("M N")	后代选择器，选择M元素内部后代N元素（所有N元素）
$("M>N")	子代选择器，选择M元素内部子代N元素（所有第1级N元素）
$("M~N")	兄弟选择器，选择M元素后所有的同级N元素
$("M＋N")	相邻选择器，选择M元素相邻的下一个同级元素

3、 属性选择器

selector指的是选择器，attr指的是属性（attribute），value指的是属性值。

jQuery属性选择器

选择器	说明
$("selector[attr]")	选择包含给定属性的元素
$("selector[attr='value']")	选择给定的属性是某个特定值的元素
$("selector[attr != 'value']")	选择所有含有指定的属性，但属性不等于特定值的元素
$("selector[attr *= 'value']")	选择给定的属性是以包含某些值的元素
$("selector[attr ^= 'value']")	选择给定的属性是以某些值开始的元素（比较少用）
$("selector[attr $= 'value']")	选择给定的属性是以某些值结尾的元素（比较少用）
$("selector[selector1][selector2]…[selectorN]")	复合属性选择器，需要同时满足多个条件时使用

---

---

---

---

---

---

第三章—— jQuery伪类选择器

$("selecter:伪类"){

}

1、简单伪类选择器

jQuery简单伪类选择器

伪类选择器	说明
:not(selector)	选择除了某个选择器之外的所有元素
:first或first()	选择第一次出现的该元素
:last或last()	选择最后一次出现的该元素
:odd	选择索引值为奇数的该元素
:even	选择索引值为偶数的该元素
:eq(index)	选择给定索引值的元素，索引值index是一个整数，从0开始
:lt(index)	选择所有小于索引值的元素，索引值index是一个整数，从0开始
:gt(index)	选择所有大于索引值的元素，索引值index是一个整数，从0开始
:header	选择h1~h6的标题元素
:animated	选择所有正在执行动画效果的元素
:root	选择页面的根元素
:target	选择当前活动的目标元素（锚点）

2、子元素伪类选择器

子元素伪类选择器（1）

选择器	说明
:first-child	若排在第一位的是该子元素，那么选择该子元素
:last-child	若排在第一位的是该子元素，那么选择该子元素
:nth-child(n)	n的值为“整数|odd|even”
:only-child	若该父元素只有一个子元素，那么选择该子元素

子元素伪类选择器（2）

选择器	说明
:first-of-type	选择第一次出现的该子元素
:last-of-type	选择最后一次出现的子该元素
:nth-of-type(n)	n的值可以是“整数|odd|even”
:only-of-type	匹配父元素中特定类型的唯一子元素（但是父元素可以不同的元素类型）

3、可见性伪类选择器

jQuery可见性伪类选择器

选择器	说明
:hidden	选取所有不可见元素
:visible	选取所有可见元素，与:hidden相反

4、内容

jQuery内容伪类选择器

选择器	说明
:contains(text)	选择文本节点中包含给定文本内容的元素
:has(selector)	选择含有选择器所匹配元素的元素
:empty	选择所有不包含子元素或者不包含文本的元素
:parent	选择含有子元素或者文本的元素（跟:empty相反）

5、表单

jQuery表单伪类选择器

选择器	说明
:input	选择所有input元素
:button	选择所有普通按钮，即type="button"的input元素
:submit	选择所有提交按钮，即type="submit"的input元素
:reset	选择所有重置按钮，即type="reset"的input元素
:text	选择所有单行文本框
:textarea	选择所有多行文本框
:password	选择所有密码文本框
:radio	选择所有单选按钮
:checkbox	选择所有复选框
:image	选择所有图像域
:hidden	选择所有隐藏域
:file	选择所有文件域

6、表单属性

jQuery表单属性伪类选择器

选择器	说明
:checked	选择所有被选中的表单元素，一般用于radio和checkbox
option:selected	选择所有被选中的option元素
:enabled	选择所有可用元素，一般用于input、select和textarea
:disabled	选择所有不可用元素，一般用于input、select和textarea
:read-only	选择所有只读元素，一般用于input和textarea
:focus	选择获得焦点的元素，常用于input和textarea

---

---

---

---

---

---

第四章——操作元素

1、属性操作

• 获取

$().attr("属性名")

• 设置

$().attr("属性","属性值")

 

• 删除

$().removeAttr("属性")

2、内容操作

• html()方法

$().html()              //获取HTML内容 $().html("HTML内容");   //设置HTML内容

• text()方法

$().text()             //获取文本内容 $().text("文本内容")   //设置文本内容

html()和text()属性返回值的区别

HTML代码	html()返回值	text()返回值
绿叶学习网	"绿叶学习网"	"绿叶学习网"
绿叶学习网	"绿叶学习网"	"绿叶学习网"
	""	""（空字符串）

• val()

$().val()                  //获取表单元素 $().val("表单元素的值")    //设置表单元素

 

---

---

---

---

---

---

第五章——操作样式

1、CSS属性操作

• 获取

$().css("属性")

• 设置

$().css("属性","属性值")

$().css({"属性1":"属性值1","属性2":"属性值2",……}) $().css("属性":"属性值")

2、CSS类名操作

一个元素可以有多个类名，用空格隔开

class="name1 name2"

• 添加

$().addClass("类名")

• 删除

$().removeClass("类名")

• 切换

$().toggleClass("类名")

3、元素的宽度高度

既能设置也能获取

• 宽度

width()、innerWidth()、outerWidth()三种方法区别

方法	宽度范围
width()	width
innerWidth()	width + padding
outerWidth()	width + padding + border

• 高度

height()、innerHeight()、outerHeight()三种方法区别

方法	高度范围
height()	height
innerHeight ()	height + padding
outerHeight ()	height + padding + border

4、元素的位置

• offset

“获取”或“设置”元素相对于“当前文档”（也就是浏览器窗口）的偏移距离。

$().offset()返回的是一个坐标对象，该对象有2个属性：top和left。

$().offset().top表示获取元素相对于当前文档“顶部”的距离。

$().offset().left表示获取元素相对于当前文档“左部”的距离。

这两种方法返回的都是一个数字（不带单位）。

• position

获取”或“设置”当前元素相对于“其被定位的祖辈元素”的偏移距离。

$().position()返回的是一个坐标对象，该对象有2个属性：top和left。

$().position().top表示元素相对于被定位的祖辈元素的顶部的垂直距离。

$().position().left表示元素相对于被定位的祖辈元素的左部的水平距离。

这两种方法返回的都是一个数字（不带单位）。

5、滚动条位置

$().scrollTop()       //获取滚动距离 $().scrollTop(value)  //设置滚动距离

说明：

scrollLeft()方法的用法跟scrollTop()方法一样。

scrollTop()和scrollLeft()获取的值是一个数字（不带单位），这个跟height()、width()是一样的

---

---

---

---

---

---

第六章——DOM操作

• jq→dom

var domObj = $("$obj")[0];

• dom→jq

var domObj = document.getElementById("div");
var $obj = $(domObj);

 

1、创建节点

$(html)中的html指的是“HTML标签字符串”，根据传入的HTML标记字符串，创建一个DOM对象

var $e = $(html); $().append($e);

2、插入节点

内末：append()和appendTo()；内始：prepend()和prependTo()；

外末：after()和insertAfter()；外始：before()和insertBefore()；

• append

$(A).append(B)

说明：

$(A).append(B)表示在A内部的“末尾”插入B。

• appendTo

$(A).appendTo(B)

说明：

$(A).appendTo(B)表示将A插入B内部的“末尾”。

• prepend

$(A).prepend(B)

说明：

$(A).prepend(B)表示在A内部的“开始”插入B。

• prependTo

$(A).prependTo(B)

说明：

$(A).prependTo(B)表示将A插入B内部的“开始”。

 

 

 

• before

$(A).before(B)

说明：

$(A).before(B)表示在A外部“之前”插入B。

• insertBefore

 

$(A).insertBefore(B)

说明：

$(A).insertBefore(B)表示将A插入B外部“之前”。

 

 

• after

$(A).after(B)

说明：

$(A).after(B)表示在A外部“之后”插入B。

• insertAfter

$(A).insertAfter(B)

说明：

$(A).insertAfter(B)表示在A外部“之后”插入B。

 

 

3、删除节点

• 删除

使用remove()方法，不仅元素会被删除，所绑定的事件都会被删除。

使用detach()方法，只有元素被删除，所绑定的事件并不会删除。

 

$(A).remove()

$(A).detach()

• 清空

清空元素内部的所有节点。

$(A).empty()

4、复制节点

$(A).clone()

说明：

其中clone()方法有一个布尔参数，默认值为false。

$(A).clone()表示仅仅将A节点复制，但不复制A节点所绑定的事件。

$(A).clone(true)表示将A节点复制，并且复制A节点所绑定的事件。

5、替换节点

• replaceWith

$(A).replaceWith(B)

$(A).replaceWith(B)表示用B来替换A。

• replaceAll

$(A).replaceAll(B)

$(A).replaceAll(B)表示用A来替换B。

6、包裹节点

• 逐一包裹

$(A).wrap(B)

$(A).wrap(B)表示b包裹a。

• 整体包裹

$(A).wrapAll(B)

$(A).wrapAll(B)表示b包裹a。

$(A).wrapWith(B)

$(A).wrapAll(B)表示a包裹b。

• 内部包裹

$(A).wrapInner(B)

$(A).wrapInner(B)表示将A元素“所有内部子元素”使用B元素包裹起来（不包括A本身）。

7、遍历方法$().each()

jquery对象的遍历

index表示当前循环到第几个索引

element - 当前的元素（也可使用 "this" 选择器）

$(selector).each(function(index,element))

注意：

$.each()函数不同于对象的$().each()方法，它是一个全局函数，可以遍历任意集合，但不操作jQuery对象

$.each(data,function(index,comment))

函数指代码片段，当函数由对象调用时叫“方法”，当函数由$调用时叫全局函数

---

---

---

---

---

---

第七章——事件

1、载入

1 2 3

$(document).ready(functin(){     //代码部分 })

1 2 3

$(function(){     //代码部分 })

 

• $(document).ready()

页面所有DOM元素（不包括图片等外部文件）加载完成就可以执行，此时我们就可以操作DOM。

• window.onload

在页面所有DOM元素（包括图片等外部文件）加载完成之后才执行，此时我们才可以操作DOM

window.onload方法只能调用1次，如果多次调用，则执行最后一个window.onload方法中的代码

2、鼠标

jQuery鼠标事件

鼠标事件	说明
click	鼠标单击事件
dbclick	双击事件
mouseover	移入事件
mouseout	移出事件
mousemove	移动事件
mousedown	按下事件
mouseup	松开事件

3、键盘

顺序：keydown→keypress→keyup

• keypress事件

某个键被按下到松开“整个过程”中触发的事件

• keydown事件

keypress事件只在按下键盘的任一“字符键”（如A~Z、数字键）时触发

• keyup事件

某个键被按下之后松开的一瞬间触发的事件

4、表单

• 聚焦

onfocus表示获取焦点触发的事件，onblur表示失去焦点触发的事件。

具有获得焦点和失去焦点事件的元素有3个：

• （1）单行文本框text；
• （2）多行文本框textarea；
• （3）下拉列表select；

• change

具有获得onchange事件的元素有3个：

• （1）单行文本框text；
• （2）多行文本框textarea；
• （3）下拉列表select；

• select()

从鼠标按键被按下，到鼠标开始移动并选中内容的过程。这个过程并不包括鼠标键的放开

具有获得onselect事件的元素有3个：

• （1）单行文本框text；
• （2）多行文本框textarea；

• submit()

通过submit() 方法触发 submit 事件，即提交表单

$(selector).submit()

当表单提交时触发函数

$(selector).submit(function)

5、滚动

当滚动条位置发生改变时触发的事件

$().scroll(fn)

6、绑定

为元素绑定某个事件来完成某些操作

$().on(type , fn)

7、解绑

解除绑定的某一指定的事件或者所有事件

$().off(type)

8、合成事件

参数fn1表示“鼠标移入”时触发的事件处理函数，参数fn2表示“鼠标移出”时触发的事件处理函数。

$().hover(fn1,fn2)

 

9、一次事件

“只触发一次”的处理函数，type表示事件类型，fn表示事件的处理函数

$().one(type , fn)

10、模拟事件

trigger() 触发事件和默认行为（比如表单提交）。

triggerHandler()触发事件但不触发默认行为（例如模拟focus时会执行方法，但浏览器不会获取焦点）

11、语法

$(selector).trigger(event,eventObj,param1,param2,...)

 

参数	描述
event	必需。规定指定元素上要触发的事件。 可以是自定义事件，或者任何标准事件。
param1,param2,...	可选。传递到事件处理程序的额外参数。 额外的参数对自定义事件特别有用。

---

---

---

---

---

---

第八章——jQuery动画

1、显示和隐藏

• show()和hide()

通过改变height、width、opacity来实现动画的显示与隐藏

使用hide()方法来实现元素的隐藏效果，使用show()方法来实现元素的显示效果

$().hide() $().show()

说明：

hide()方法就是把所选元素的display属性设置为none。

show()方法就是把所选元素的display属性还原为隐藏之前的显示状态（block、inline或者inline-block等）。

 

$().hide(speed,callback) $(),show(speed,callback)

说明：

参数speed为必选参数，表示动画执行的速度，单位是毫秒；

参数callback为可选参数（可以省略）

• 切换

$().toggle()                     //简单的toggle() $().toggle(speed , callback);    //动画的toggle()

说明：

参数speed表示动画执行的速度，单位是毫秒；

参数callback为可选参数（可以省略），表示动画执行完成之后的“回调函数”。

 

 

2、淡入和淡出

• fadeIn()和fadeOut()

通过opacity来实现动画的显示与隐藏

使用fadeIn()方法来实现元素的淡入效果，使用fadeOut()方法来实现元素的淡出效果

$().fadeIn(speed , callback) $().fadeOut(speed , callback)

说明：

speed为可选参数，表示动画执行的速度，单位为毫秒，默认为200毫秒。如果speed参数省略，则采用默认速度。

callback为可选参数，表示动画执行完成之后的回调函数。

 

 

• fadeToggle()

通过不透明度变化来切换匹配元素的“显示状态”

• fadeTo()

$().fadeTo(speed , opacity , callback)

说明：

speed为可选参数，表示动画执行的速度，单位为毫秒，默认为500毫秒。如果speed参数省略，则采用默认速度。

opacity为必选参数，表示元素指定的透明度，取值范围为0.0~1.0。

callback为可选参数，表示动画执行完成之后的回调函数。

 

 

3、滑上与滑下

• slideUp()和slideDown()

$().slideDown(speed , callback) $().slideUp(speed , callback)

说明：

speed为可选参数，表示动画执行的速度，单位为毫秒，默认值为200毫秒。如果参数省略，则采用默认速度。

callback为可选参数，表示动画执行完成之后的回调函数。

 

• 切换

slideToggle(speed , callback)

说明：

speed为可选参数，表示动画执行的速度，单位为毫秒，默认值为200毫秒。如果参数省略，则采用默认速度。

callback为可选参数，表示动画执行完成之后的回调函数。

 

4、自定义动画

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

5、队列动画

$().animate().animte()…….animte()

说明：

队列动画，就是按照animate()方法调用的先后顺序来实现的

6、动画停止

$().stop(clearQueue,gotoEnd)

参数clearQueue表示是否要清空“未执行”的“动画队列”

参数gotoEnd，表示是否直接将正在执行的动画跳转到末状态

jQuery stop()方法

参数取值	说明
stop()	等价于stop(false,false)，仅仅停止“当前执行”这段动画，后面的动画还可以继续执行
stop(true)	等价于stop(true,false)，停止所有动画，包括当前执行的动画
stop(true,true)	停止所有动画，但是允许执行当前动画
stop(false,true)	停止“当前执行”这段动画，然后调到最后一个动画，并且执行最后一个动画

7、动画延迟

$().delay(speed)

说明：

参数speed，表示动画的速度，单位为毫秒。

8、判断

如果元素不处于动画状态，则添加新的动画；如果元素处于动画状态，则不添加新的动画

if(!$().is(":animated")) {     //如果当前没有进行动画，则添加新动画 }

---

---

---

---

---

---

 

第九章——过滤方法

$().过滤方法(){

}

jQuery过滤方法

方法	说明
hasClass()	判断所选元素是否含有某个类，返回值为true或false
eq(n)	选择元素集合中指定下标元素，下标从0开始（选择器作用）
is()	判断所选元素是否有符合某个条件的元素，返回值为true或false
not()	选择元素集合中不符合条件的元素（选择器作用）
filter()	使用“自定义表达式”来选择符合条件的元素（功能多）
has()	使用“自定义表达式”来选择符合条件的元素（功能少）

---

---

---

---

---

---

第十章——查找方法(遍历DOM)

1、查找祖先元素

• parent()

查找当前元素的“父元素”，元素只有一个父元素

• parents()

查找当前元素的“祖先元素”，祖先元素可能是多个

2、查找后代元素

• children()

查找当前元素的子元素

• find()

查找所有后代元素

3、向前查找兄弟元素

• prev()

查找某个元素的前一个“相邻”的兄弟元素

• prevAll()

查找所选元素前面“所有”同级的兄弟元素

• prevUntil()

查找所选元素之前和参数之后的兄弟元素

4、向后查找兄弟元素

• next()

查找某个元素的后一个“相邻”的兄弟元素

• nextAll()

查找所选元素后面“所有”同级的兄弟元素

• nextUntil()

查找所选元素之后和参数之前的兄弟元素

5、查找所有的兄弟元素

选择满足select要求的兄弟元素
$(" ").siblings("select")