Loading

【笔记】【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="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 () {
    // 执行代码
}


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事件

啥是事件？

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


如何设置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 库中
  • 可使用相对值
    • 相对值（该值相对于元素的当前值）。需要在值的前面加上+=或 -=
  • 可使用预定义的值
    • 可以把属性的动画值设置为 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 和 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 方法


结语

【感谢】

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

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

posted @ 2022-05-11 21:23  lao-jiawei  阅读(245)  评论(1)  编辑  收藏  举报