菜鸟教程js教程（【笔记】【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文件中用<script>标签引用
<head> <script src="https://www.cnblogs.com/lao-jiaweijarvee/p/jquery-%E5%AF%B9%E5%BA%94%E7%89%88%E6%9C%AC.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 () { // 执行代码 }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="https://www.cnblogs.com/lao-jiaweijarvee/p/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了解更多（无须深究可暂时跳过 ，用到时再具体了解）
如何设置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 效果方法
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", });尺寸
【设置或返回元素的宽度】
方法名 描述 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() 一路向上直到文档的根元素 (<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 和 XMLjQuery与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 方法
结语
【感谢】
感谢菜鸟编程提供学习的平台!!!
感谢各位读者能看到最后!!!
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！