【笔记】【JavaScript】【jQuery】菜鸟编程学习笔记
前言
【内容】
- jQuery菜鸟编程学习笔记
- 具体详情看目录
【目的】
- 记录本人在jQuery学习中的笔记
- 方便日后的工作与学习。
【学习资料】
jQuery教程-菜鸟教程
【温馨提示】
- 笔记中有些个人理解后整理的笔记，可能有所偏差，也恳请读者帮忙指出，谢谢。
jQuery快速了解
啥是jQuery？
- 是一个 JavaScript 函数库
- 是一个轻量级的"写的少，做的多"的 JavaScript 库
能干什么？
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
- 提供了大量的插件
如何在网页文件中引入jQuery？
方法一：本地引用
-
从jQuery官网下载jQuery库
- 下载版本（二选一）
- Production version - 用于实际的网站中，已被精简和压缩。
- Development version - 用于测试和开发（未压缩，是可读的代码）。
- 下载版本（二选一）
-
将下载的文件放在网页的同一目录下
-
在html文件中用
方法二：通过CDN（内容分发网络） 引用
- 直接选一个复制到html中用
/*百度 CDN:*/ /*又拍云 CDN*/ /*新浪 CDN*/ /*Microsoft CDN*/【PS】推荐使用方法二引入jQuery
- 减少加载时间。
- 【解释】 许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所以结果是，当他们访问您的站点时，会从缓存中加载 jQuery
- 提高加载速度。
- 【解释】 大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应
如何查看jQuery使用版本？
- 按
F12打开 Console（控制台） 窗口 - 输入
$.fn.jquery命令查看当前 jQuery 使用的版本
如何使用jQuery？
jQuery语法
基础语法
- 通过选取 HTML 元素，并对选取的元素执行某些操作
【格式】
$(selector).action()$：定义jQueryselector（选择符）："查询"和"查找" HTML 元素（具体详情）action()：执行对元素的操作
文档就绪事件
- 所有 jQuery 函数位于一个 document ready 函数中
- 【原因】 为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
【格式】
格式一：
$(document).ready(function(){ // 开始写 jQuery 代码... });格式二：简洁写法（与以上写法效果相同）
$(function(){ // 开始写 jQuery 代码... });【拓展】JavaScript文档就绪事件
格式:
window.onload = function () { // 执行代码 }
jQuery选择器
- 允许对 HTML 元素组或单个元素进行操作。
- 更css中的选择器相同。
- 所有选择器都以美元符号开头：
$()。
常用选择器 格式 元素选择器 $("元素名") id 选择器 $("#id名") class 选择器 $(".类名") 了解更多（无须深究可暂时跳过，用到时再具体了解）
如何在独立文件中使用jQuery函数？
-
将jQuery 函数放到独立的 .js 文件中。
-
将函数直接添加到
部分中示例：
【好处】
- jQuery 函数易于维护
jQuery事件
啥是事件？
-
页面对不同访问者的响应
-
常见 DOM 事件：
鼠标事件 键盘事件 表单事件 文档/窗口事件 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 下载
颜色动画 插件。
- 如果需要生成颜色动画，您需要从 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 效果方法
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="文本-1。
"; // 使用 HTML 标签创建文本 var txt2=$("").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="I "; // 使用 HTML 创建元素 var txt2=$("").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", });
尺寸
【设置或返回元素的宽度】
方法名 描述 width()不包括内边距、边框或外边距 innerWidth()包括内边距 outerWidth()包括内边距和边框 【格式】
$("selecter").width(); $("selecter").innerWidth(); $("selecter").outerWidth();
【设置或返回元素的高度】
方法名 描述 height()不包括内边距、边框或外边距 innerWidth()包括内边距 outerWidth()包括内边距和边框 【格式】
$("selecter").height(); $("selecter").innerHeight(); $("selecter").outerHeight();
了解更多
jQuery HTML / CSS 方法
jQuery 遍历
什么是遍历？
- 就是移动
- 【解释】用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
对DOM 进行遍历
- 从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）
祖先【向上遍历 DOM 树】
方法名 功能描述 方法返回 parent()只会向上一级对 DOM 树进行遍历 被选元素的直接父元素 parents()一路向上直到文档的根元素 ( )被选元素的所有祖先元素 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 方法
结语
【感谢】
感谢菜鸟编程提供学习的平台!!!
感谢各位读者能看到最后!!!
- 减少加载时间。