位置: IT常识 - 正文

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

编辑：rootadmin

前言【内容】 jQuery菜鸟编程学习笔记具体详情看目录【目的】记录本人在jQuery学习中的笔记方便日后的工作与学习。【学习资料】 jQuery教程-菜鸟教程【温馨提示】笔记中有些个人理解后整理的笔记，可能有所偏差，也恳请读者帮忙指出，谢谢。 jQuery快速了解啥是jQuery ... 前言

推荐整理分享【笔记】【JavaScript】【jQuery】菜鸟编程学习笔记(javascrapt)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:javascipt,javasctipt,javascrip,javascript,java sc,javascripr,javascrip,javascipt,内容如对您有帮助，希望把文章链接给更多的朋友！

【内容】

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

【目的】

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

【学习资料】

jQuery教程-菜鸟教程

【温馨提示】

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

jQuery快速了解啥是jQuery？是一个 JavaScript 函数库是一个轻量级的"写的少，做的多"的 JavaScript 库

能干什么？HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities提供了大量的插件

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

方法一：本地引用

从jQuery官网下载jQuery库

下载版本（二选一）Production version - 用于实际的网站中，已被精简和压缩。Development version - 用于测试和开发（未压缩，是可读的代码）。

将下载的文件放在网页的同一目录下

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

方法二：通过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> 部分中

示例：

【好处】

jQuery 函数易于维护

jQuery事件啥是事件？

页面对不同访问者的响应

常见 DOM 事件：

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

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

如何设置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 HTMLjQuery 拥有可操作 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() 【笔记】【JavaScript】【jQuery】菜鸟编程学习笔记(javascrapt)

【拓展】啥是固有属性？

元素本身就带有的属性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 的区别GETPOST对指定的资源操作请求数据提交要处理的数据数据能否缓存可缓存无法缓存发送的数据数量只能发送有限数量的数据可以发送大量的数据数据发送位置在 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（请求成功后所执行的函数名）：可选

了解更多