【笔记】【JavaScript】【jQuery】菜鸟编程学习笔记已关闭评论
193 次浏览

A+

所属分类：Web前端

摘要

【内容】【目的】【学习资料】jQuery教程-菜鸟教程【温馨提示】方法一：本地引用

便宜好用的国外VPS推荐

前言

【内容】

jQuery菜鸟编程学习笔记
具体详情看目录

【目的】

记录本人在jQuery学习中的笔记
方便日后的工作与学习。

【学习资料】

jQuery教程-菜鸟教程

【温馨提示】

笔记中有些个人理解后整理的笔记，可能有所偏差，也恳请读者帮忙指出，谢谢。

jQuery快速了解

啥是jQuery？

是一个 JavaScript 函数库
是一个轻量级的"写的少，做的多"的 JavaScript 库

能干什么？

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
提供了大量的插件

如何在网页文件中引入jQuery？

方法一：本地引用

从jQuery官网下载jQuery库
- 下载版本（二选一）
  - Production version - 用于实际的网站中，已被精简和压缩。
  - Development version - 用于测试和开发（未压缩，是可读的代码）。
将下载的文件放在网页的同一目录下

在html文件中用<script>标签引用

<head> 	<script src="jquery-对应版本.js"></script> </head>

方法二：通过CDN（内容分发网络）引用

直接选一个复制到html中用<script>标签引用

/*Staticfile CDN*/ <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>  /*百度 CDN:*/ <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script>  /*又拍云 CDN*/ <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"> </script>  /*新浪 CDN*/ <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>  /*Microsoft CDN*/ <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

【PS】推荐使用方法二引入jQuery

减少加载时间。
- 【解释】 许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所以结果是，当他们访问您的站点时，会从缓存中加载 jQuery
提高加载速度。
- 【解释】 大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应

如何查看jQuery使用版本？

按F12打开 Console（控制台）窗口
输入$.fn.jquery 命令查看当前 jQuery 使用的版本

如何使用jQuery？

jQuery语法

基础语法

通过选取 HTML 元素，并对选取的元素执行某些操作

【格式】

$(selector).action()

$：定义jQuery

selector（选择符）："查询"和"查找" HTML 元素（具体详情）

action()：执行对元素的操作

文档就绪事件

所有 jQuery 函数位于一个 document ready 函数中
- 【原因】 为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

【格式】

格式一：

$(document).ready(function(){    // 开始写 jQuery 代码... });

格式二：简洁写法（与以上写法效果相同）

$(function(){    // 开始写 jQuery 代码... });

【拓展】JavaScript文档就绪事件

格式:

window.onload = function () {     // 执行代码 }

【笔记】【JavaScript】【jQuery】菜鸟编程学习笔记

jQuery选择器

允许对 HTML 元素组或单个元素进行操作。
更css中的选择器相同。
所有选择器都以美元符号开头：$()。

常用选择器	格式
元素选择器	$("元素名")
id 选择器	$("#id名")
class 选择器	$(".类名")

了解更多（无须深究可暂时跳过，用到时再具体了解）

如何在独立文件中使用jQuery函数？

将jQuery 函数放到独立的 .js 文件中。

将函数直接添加到 <head> 部分中

示例：

<head> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script src="my_jquery_functions.js"></script> </head>

【好处】

jQuery 函数易于维护

jQuery事件

啥是事件？

页面对不同访问者的响应
常见 DOM 事件：

鼠标事件键盘事件表单事件文档/窗口事件

click keypress submit load

dblclick keydown change resize

mouseenter keyup focus scroll

mouseleave blur unload

hover

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

了解更多（无须深究可暂时跳过，用到时再具体了解）

如何设置jQuery事件?

【格式】

$("selecter").action（function(){     //动作触发后执行的代码！！！ }）;

selecter：选择器

action：事件

function：函数

jQuery 效果

隐藏/显示

hide()【隐藏】和 show()【显示】

【格式】

$("selecter").hide(speed,callback); $("selecter").hide(speed,callback);

speed（隐藏/显示的速度）：可选

值：slow、fast、毫秒

callback（隐藏/显示后执行的函数）：可选

toggle()【将显示的隐藏，将隐藏的显示】

【格式】

$("selecter").toggle(speed,callback);

淡入/淡出

【注意】

大小写不能变

fadeln()【淡入已已隐藏的元素】和 fadeOut() 【淡出可见元素】

【格式】

$("selector").fadeIn(speed,callback); $("selector").fadeOut(speed,callback);

speed（隐藏/显示的速度）：可选

值：slow、fast、毫秒

callback（淡入后执行的函数）：可选

fadeToggle() 【元素已淡出，添加淡入效果；元素已淡入，添加淡出效果】

【格式】

$("selector").fadeToggle(speed,callback);

fadeTo() 【渐变淡入淡出】

【格式】

$("selector").fadeTo(speed,opacity,callback);

opacity(不透明度)：将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）

【注意】

没有默认参数，必须加上 slow/fast/Time

滑动

slideDown() 【向下滑动元素】和 slideUp()【向上滑动元素】

【格式】

$("selector").slideDown(speed,callback); $("selector").slideUp(speed,callback);

speed（效果的时长）：可选

值：slow、fast、毫秒

callback（滑动后执行的函数）：可选

slideToggle()【已向下滑动的元素，向上滑动；已向上滑动的元素，向下滑动】

【格式】

$("selector").slideToggle(speed,callback);

动画

animate()【创建自定义动画】

【格式】

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

params（形成动画的 CSS 属性）：必需

可操作多个属性
- 可以同时使用多个属性
- 可以操作所有 CSS 属性
  - 必须使用驼峰标记法书写所有的属性名
    - 例如必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
  - 色彩动画并不包含在核心 jQuery 库中
    - 如果需要生成颜色动画，您需要从 jquery.com 下载
      颜色动画插件。
可使用相对值
- 相对值（该值相对于元素的当前值）。需要在值的前面加上+=或 -=
可使用预定义的值
- 可以把属性的动画值设置为 show、hide 或 toggle
可使用对列功能
- 编写多个 animate() 调用，逐一运行这些 animate 调用。

speed（效果的时长）：可选

值：slow、fast、毫秒

callback（动画完成后执行的函数）：可选

【注意】

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute
- 【原因】默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。

停止动画

stop() 【在它们完成之前，停止动画或效果】

适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画

【格式】

 $("selector").stop(stopAll,goToEnd);

stopAll(是否应该清除动画队列)：

false:默认
- 仅停止活动的动画，允许任何排入队列的动画向后执行。
true:所有动画都不执行

goToEnd（是否立即完成当前动画）：

false:默认
- 会清除在被选元素上指定的当前动画
true
- 执行完当前动画再停止后续动画

Callback方法（回调）

在当前动画 100% 完成之后执行
有Callback和无Calback的区别
- 有Callback：执行完动画在执行回调函数
- 无Callback：直接执行后续函数

链（Chaining）

可以把动作/方法链接在一起
允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）
依次执行

【格式】

$("selecter").action1().action2().action3()....actionN();

【缩进格式】

$("selecter").action1()     .action2()     .action3()     ...     .actionN();

【注意】

无须担心缩进格式中的空格
- 【原因】jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行。

jQuery HTML

jQuery 拥有可操作 HTML 元素和属性的强大方法。
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

【拓展】什么是DOM？

DOM = Document Object Model（文档对象模型）
DOM 定义访问 HTML 和 XML 文档的标准

获取内容和属性

获取内容方法

方法名	设置或返回内容
text()	所选元素的文本内容
html()	所选元素的内容（包括 HTML 标记）
val()	表单字段的值

获取属性

attr() 【获取自定义属性值】

【格式】

$("selecter").attr("想要获取值的属性")

prop()【获取固有属性值】

【格式】

$("selecter").prop("想要获取值的属性")

【PS】

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

【拓展】啥是固有属性？

元素本身就带有的属性
W3C 标准里就包含有的属性
IDE 里能够智能提示出的属性

attr()和prop()的区别

	attr()	prop()
用途	获取自定义属性值	获取固有属性值
如果没有相应的属性，返回值	`undefined`	`空字符串`

设置内容和属性

设置内容方法

方法名	设置或返回内容
text("文本内容")	所选元素的文本内容
html("带标签的内容")	所选元素的内容（包括 HTML 标记）
val("值")	表单字段的值

text()、html() 以及 val() 的回调函数

【格式】

$("selecter").text(function(index,origText){     //方法代码 }); $("selecter").html(function(index,origText){     //方法代码 }); $("selecter").val(function(index,origText){     //方法代码 });

index：被选元素列表中当前元素的下标

origText：原始（旧的）值。

设置属性

attr()方法设置属性值

【格式】

//设置单个属性 $("selecter").attr("属性","想要设置的值");  //设置多个属性 $("selecter").attr({     "属性1":"属性1的值",     "属性2":"属性2的值",     ....     "属性N":"属性N的值", });

attr() 的回调函数

【格式】

$("selecter").attr("属性",function(index,orgValue){     //方法代码 });

index：被选元素列表中当前元素的下标

orgValue：原始（旧的）值

添加元素/内容

append()【在被选元素的结尾插入内容（仍然在该元素的内部）】

【格式】

$("selecter").append("追加文本");

prepend() 【在被选元素的开头插入内容（仍然在该元素的内部）】

【格式】

$("selecter").prepend("在开头追加文本");

通过 append() 和 prepend() 方法添加若干新元素、

【思路】

创建若干个新元素
- 这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建
然后通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）

【格式】

var txt1="<p>文本-1。</p>";              // 使用 HTML 标签创建文本 var txt2=$("<p></p>").text("文本-2。");  // 使用 jQuery 创建文本 var txt3=document.createElement("p");     txt3.innerHTML="文本-3。";               // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3);        // 追加新元素

after() 【在被选元素之后插入内容】和 before()【在被选元素之前插入内容】

【格式】

$("selecter"").after("在元素后面添加文本");  $("selecter").before("在元素前面添加文本");

通过 after() 和 before() 方法添加若干新元素

【思路】

创建若干新元素
- 这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建
然后通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）

【格式】

var txt1="<b>I </b>";                    // 使用 HTML 创建元素 var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素 var txt3=document.createElement("big");  // 使用 DOM 创建元素     txt3.innerHTML="jQuery!"; $("selecter").after(txt1,txt2,txt3);          // 在图片后添加文本

【append/prepend】和【after/before】有什么区别?

【append/prepend】是在选择元素内部嵌入。
【after/before】是在元素外面追加。

删除元素/内容

remove()方法

删除被选元素和子元素

【格式】

$("selecter").remove();

过滤被删除的元素

【格式】

$("selecter").remove("selecter");

empty()方法

删除被选元素的子元素

【格式】

$("selecter").empty();

获取并设置CSS类

方法名	功能
`addClass()`	向不同的元素添加 class 属性
`removeClass()`	在不同的元素中删除指定的 class 属性
`toggleClass()`	对被选元素进行添加/删除类的切换操作

【格式】

$("元素1,元素2,元素3,...,元素N").addClass("类名1 类名2 类名N");  $("元素1,元素2,元素3,...,元素N").removeClass("类名1 类名2 类名N");  $("元素1,元素2,元素3,...,元素N").toggleClass("类名1 类名2 类名N");

【注意】

指定多个元素用,隔开
添加多个类用空格隔开

CSS()方法

返回指定的 CSS 属性的值

【格式】

$("selecter").css("propertyname");

propertyname：想要获取值的CSS属性

设置指定的 CSS 属性

【格式】

$("selecter").css("propertyname","value");

propertyname：想要设置值的CSS属性

value：该属性的值

设置多个 CSS 属性

【格式】

$("selecter").css({     "属性1":"值1",     "属性2":"值2",     ...     "属性N":"值N", });

尺寸

【笔记】【JavaScript】【jQuery】菜鸟编程学习笔记

【设置或返回元素的宽度】

方法名	描述
`width()`	不包括内边距、边框或外边距
`innerWidth()`	包括内边距
`outerWidth()`	包括内边距和边框

【格式】

$("selecter").width();  $("selecter").innerWidth();  $("selecter").outerWidth();

【设置或返回元素的高度】

方法名	描述
`height()`	不包括内边距、边框或外边距
`innerWidth()`	包括内边距
`outerWidth()`	包括内边距和边框

【格式】

$("selecter").height();  $("selecter").innerHeight();  $("selecter").outerHeight();

了解更多

jQuery HTML / CSS 方法

jQuery 遍历

什么是遍历？

就是移动
- 【解释】用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

对DOM 进行遍历

从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）

【笔记】【JavaScript】【jQuery】菜鸟编程学习笔记

祖先【向上遍历 DOM 树】

方法名	功能描述	方法返回
`parent()`	只会向上一级对 DOM 树进行遍历	被选元素的直接父元素
`parents()`	一路向上直到文档的根元素 (`<html>`)	被选元素的所有祖先元素
`parentsUntil()`		介于两个给定元素之间的所有祖先元素

【格式】

/* parent方法 */ //返回"selecter"的直接父元素 $("selecter").parent();  /* parents方法 */ //返回"selecter"的所有祖先元素 $("selecter").parents(); //返回"selecter"的所有祖先元素中的被选中元素 $("selecter").parents("selecterChosen");  /* parentsUntill方法 */ //返回"selecterStart"到"selecterEnd"中所有祖先元素 $("selecterStart").parentsUntill("selecterEnd");

后代【向下遍历 DOM 树】

方法名	功能描述	方法返回
`children()`	只会向下一级对 DOM 树进行遍历	被选元素的所有直接子元素
`find()`	一路向下直到最后一个后代	被选元素的后代元素

【格式】

/* children方法 */ //返回被选元素的所有直接子元素  $("selecter").children(); //使用可选参数来过滤对子元素的搜索  $("selecter").children("selecterChosen");  /* find方法 */ //返回属于"selecter"后代的所有"selecterChosen"元素 $("selecter").find("selecterChosen"); //返回"selecter"的所有后代 $("selecter").find("*");

同胞【在 DOM 树中水平遍历】

方法名	方法返回	方向相反方法
`siblings()`	被选元素的所有同胞元素
`next()`	只返回一个元素，被选元素的下一个同胞元素	`prev()`
`nextAll()`	被选元素的所有跟随的同胞元素	`prevAll()`
`nextUntil()`	介于两个给定参数之间的所有跟随的同胞元素	`prevUntil()`

【格式】

/* siblings() 方法 */ //返回 "selecter" 的所有同胞元素 $("selecter").siblings(); //返回属于 "selecter" 的同胞元素中的所有 "selecterChosen" 元素 $("selecter").siblings("selecterChosen");  /* next() 方法 */ //返回 "selecter" 的下一个同胞元素 $("selecter").next();  /* nextAll() 方法 */ //返回 "selecter" 的所有跟随的同胞元素 $("selecter").nextAll();  /* nextUntil() 方法 */ //返回介于 "selecterStart" 与 "selecterEnd" 元素之间的所有同胞元素 $("selecterStart").nextUntil("selecterEnd");

过滤【缩小搜索元素的范围】

基本过滤方法

允许您基于其在一组元素中的位置来选择一个特定的元素。

方法名	方法返回
`first()`	被选元素的首个元素
`last()`	被选元素的最后一个元素
`eq()`	被选元素中带有指定索引号的元素

【格式】

/* first() 方法 */ //选取首个 "selecterFather" 元素内部的第一个 "selecterSon" 元素 $("selecterFather selecterSon").first();  /* last() 方法 */ //选择最后一个 "selecterFather" 元素中的最后一个 "selecterSon" 元素 $("selecterFather selecterSon").last();  /* eq() 方法 */ //选取第 index+1 个 "selecter" 元素    (索引号从 0 开始) $("selecter").eq(index);

其他过滤方法

允许您选取匹配或不匹配某项指定标准的元素。

filter() 方法

允许您规定一个标准。
- 匹配这个标准的元素：会被从集合中删除
- 匹配的元素：会被返回

【格式】

//返回带有 "selecterChosen" 的所有 "selecter" 元素 $("selecter").filter("selecterChosen");

not() 方法

not() 方法与 filter() 相反
允许您规定一个标准。
- 匹配这个标准的元素：会被返回
- 匹配的元素：会被从集合中删除

【格式】

//返回不带有 "selecterChosen" 的所有 "selecter" 元素 $("selecter").not("selecterChosen");

了解更多

jQuery 遍历方法

jQuery AJAX

啥是AJAX？

与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
AJAX = 异步 JavaScript 和 XML

jQuery与AJAX有啥关系？

jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

AJAX load()方法

从服务器加载数据，并把返回的数据放入被选元素中。

【格式】

$(selector).load(URL,data,callback);

URL（希望加载的 URL）：必需

data（与请求一同发送的查询字符串键/值对集合）：可选

callback（ load() 方法完成后所执行的函数名称）：可选

可以设置不同的参数：
- responseTxt ：包含调用成功时的结果内容
- statusTXT ：包含调用的状态
- xhr ：包含 XMLHttpRequest 对象

AJAX get()/post()方法

通过 HTTP GET 或 POST 请求从服务器请求数据。

HTTP 请求：GET 与 POST 的区别

	GET	POST
对指定的资源操作	请求数据	提交要处理的数据
数据能否缓存	可缓存	无法缓存
发送的数据数量	只能发送有限数量的数据	可以发送大量的数据
数据发送位置	在 URL 中发送	在正文主体中发送
安全性	发送的数据不受保护	发送的数据是安全的
数据在 URL 栏中是否公开	公开	不公开
可变大小	2000 个字符	最多允许 8 Mb
主要作用	获取信息	更新数据
表单提交时编码	只接受 ASCII 字符	不绑定表单数据类型，并允许二进制和 ASCII 字符

jQuery $.get() 方法

通过 HTTP GET 请求从服务器上请求数据。

【格式】

$.get(URL,callback);

URL（希望请求的 URL）：必需

callback（请求成功后所执行的函数名）：可选

jQuery $.post() 方法

通过 HTTP POST 请求向服务器提交数据。

【格式】

$.post(URL,data,callback);

URL（希望请求的 URL）：必需

data（连同请求发送的数据）：可选

callback（请求成功后所执行的函数名）：可选

了解更多

jQuery AJAX 方法

结语

【感谢】

感谢菜鸟编程提供学习的平台!!!

感谢各位读者能看到最后!!!

便宜好用的国外VPS推荐

前言

jQuery快速了解

啥是jQuery？

能干什么？

如何在网页文件中引入jQuery？

如何查看jQuery使用版本？

如何使用jQuery？

jQuery语法

基础语法

文档就绪事件

jQuery选择器

如何在独立文件中使用jQuery函数？

jQuery事件

啥是事件？

如何设置jQuery事件?

jQuery 效果

隐藏/显示

淡入/淡出

滑动

动画

停止动画

Callback方法（回调）

链（Chaining）

更多方法【了解即可】

jQuery HTML

获取内容和属性

获取内容方法

获取属性

attr()和prop()的区别

设置内容和属性

设置内容方法

text()、html() 以及 val() 的回调函数

设置属性

attr() 的回调函数

添加元素/内容

【append/prepend】和【after/before】有什么区别?

删除元素/内容

remove()方法

empty()方法

获取并设置CSS类

CSS()方法

尺寸

【设置或返回元素的宽度】

【设置或返回元素的高度】

了解更多

jQuery 遍历

什么是遍历？

对DOM 进行遍历

祖先【向上遍历 DOM 树】

后代【向下遍历 DOM 树】

同胞【在 DOM 树中水平遍历】

过滤【缩小搜索元素的范围】

基本过滤方法

其他过滤方法

了解更多

jQuery AJAX

啥是AJAX？

jQuery与AJAX有啥关系？

AJAX load()方法

AJAX get()/post()方法

HTTP 请求：GET 与 POST 的区别

jQuery $.get() 方法

jQuery $.post() 方法

了解更多

结语