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

  • 【笔记】【JavaScript】【jQuery】菜鸟编程学习笔记已关闭评论
  • 189 次浏览
  • A+
所属分类:Web前端
摘要

【内容】【目的】【学习资料】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 () {     // 执行代码 } 

【笔记】【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事件

啥是事件?

了解更多(无须深究可暂时跳过,用到时再具体了解)

如何设置jQuery事件?

【格式】

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

selecter选择器

action:事件

function:函数

jQuery 效果

隐藏/显示

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

【格式】

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

speed(隐藏/显示的速度):可选

  • 值:slowfast毫秒

callback(隐藏/显示后执行的函数):可选

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

【格式】

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

淡入/淡出

注意

  • 大小写不能变

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

【格式】

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

speed(隐藏/显示的速度):可选

  • 值:slowfast毫秒

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(效果的时长):可选

  • 值:slowfast毫秒

callback(滑动后执行的函数):可选

slideToggle()【已向下滑动的元素,向上滑动;已向上滑动的元素,向下滑动】

【格式】

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

动画

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

【格式】

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

params(形成动画的 CSS 属性):必需

  • 可操作多个属性
    • 可以同时使用多个属性
    • 可以操作所有 CSS 属性
      • 必须使用驼峰标记法书写所有的属性名
        • 例如必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
      • 色彩动画并不包含在核心 jQuery 库中
  • 可使用相对值
    • 相对值(该值相对于元素的当前值)。需要在值的前面加上+=-=
  • 可使用预定义的值
    • 可以把属性的动画值设置为 showhidetoggle
  • 可使用对列功能
    • 编写多个 animate() 调用,逐一运行这些 animate 调用。

speed(效果的时长):可选

  • 值:slowfast毫秒

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", }); 

尺寸

【笔记】【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 方法

结语

【感谢】

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

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