[关闭]
@SovietPower 2021-10-27T14:58:03.000000Z 字数 7221 阅读 882

jQuery 笔记

学习笔记

作业部落链接：https://zybuluo.com/SovietPower/note/1826585
参考：
https://www.runoob.com/jquery/jquery-tutorial.html
https://www.w3school.com.cn/jquery/index.asp
jQuery API：https://api.jquery.com/fadein/

目前：https://www.runoob.com/jquery/jquery-dom-get.html

jQuery 简介

jQuery是一个JavaScript函数库，为一个.js文件，包含了许多插件和功能：HTML元素选取及操作，CSS操作，HTML事件函数，JS特效及动画，DOM遍历和修改，AJAX，Utilities。

jQuery 1.x版本最常用。一般使用该版本即可。
jQuery 2.0及以上版本不再支持IE 6/7/8。很少会使用。
jQuery 3.0及以上版本只支持最新的浏览器和jQuery插件。若非特殊需求不会使用。

通过HTML条件注释可实现：在使用IE 6/7/8时使用jQuery 1.9，否则使用jQuery 2.0：

  1. <!--[if lt IE 9]>
  2.     <script src="jquery-1.9.0.js"></script>
  3. <![endif]-->
  4. <!--[if gte IE 9]><!-->
  5.     <script src="jquery-2.0.0.js"></script>
  6. <!--<![endif]-->

使用jQuery

下载jQuery库到本地

在 https://jquery.com/download/ 中可下载两个版本的jQuery库：

将该文件放在当前网页的目录中，在HTML中使用<script>即可使用该文件：

  1. <head>
  2. <script src="jquery-3.6.0.min.js"></script>
  3. </head>

使用CDN

通过内容分发网络（CDN），可以不需本地下载就使用jQuery。
Staticfile CDN、百度、新浪、又拍云、谷歌、微软的服务器都存有jQuery以供引用。
注：
jQuery 2.0及以上版本不再支持IE 6/7/8。
jQuery 3.0及以上版本要使用官网链接，其他平台暂未同步。
如3.3.1版本要使用：<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

用户在访问其他站点时，通常已经从百度、又拍云等以上服务器中加载过jQuery。若你也使用这些服务器，当用户访问你的站点时，可从缓存中加载jQuery，以减少加载时间。此外，大多数CDN都可确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，以提高加载速度。

例：
从百度引用jQuery：

  1. <head>
  2. <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> <!-- or 1.11.3 -->
  3. </script>
  4. </head>

若引用失败，使用本地引用：

  1. <script src="//apps.bdimg.com/libs/jquery/3.6.0/jquery.min.js"></script>
  2. <script type="text/javascript">
  3.     if (typeof jQuery == 'undefined') {
  4.         // window.alert("Load jQuery failed.");
  5.         document.write(unescape("%3Cscript src='/skin/mobile/js/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
  6.     }
  7. </script>

jQuery 语法

通过jQuery，可以选取HTML元素，并对其进行操作。
基本语法：$(selector).action()

使用$定义jQuery，选择器（selector）查找并选取HTML元素，action()执行对元素的操作。
若选择器选取了多个元素，则它们会依次全部执行action()。

所有要立刻执行的jQuery函数应放在函数$(document).ready()中，以避免网页在完全加载之前运行jQuery代码，或在DOM加载完成之前对DOM进行操作，导致操作失败。
如：

  1. $(document).ready(function(){
  2.     // write your jQuery codes...
  3. });
  4. // 上面函数的简洁写法：
  5. $(function(){
  6.     // write your jQuery codes...
  7. });

函数$(document).ready()称为jQuery的入口函数。
JS的入口函数为window.onload()：

  1. window.onload = function() {
  2.     // write your JavaScript codes...
  3. }

两函数的区别：
$(document).ready()：等待HTML的所有标签（DOM结构）加载完毕后，就执行。可执行多次，后续的执行不会覆盖之前的执行。
window.onload()：等待网页全部加载完毕后（包括外部图片等），才执行。只可执行一次，若多次执行会导致前面的执行被覆盖。

jQuery 选择器

jQuery选择器基于CSS，也包含：id选择器、类选择器、元素选择器等。与CSS相比，选择器使用格式$("selector")。
$(this)选取this对象。
此外还有一些高级选择器。

以下为几类简单的选择器，根据id、类或元素名称选择元素：

选择器 例 例子描述
$("#id") $("#para") 选取所有id="para"的元素
$(".class") $(".para") 选取所有class="para"的元素
$("*") $("*") 选取页面所有元素
$("element") $("p") 选取页面所有<p>元素
$("element1, element2, ...") $("h1, h2") 选取页面所有<h1>, <h2>元素

更多选择器例子见：https://www.runoob.com/jquery/jquery-selectors.html

注意：
选择的是所有符合条件的元素，为一个list。选择元素需加索引。
输出该list，可查看该列表的详细信息。

jQuery 方法

https://www.runoob.com/jquery/jquery-dom-get.html

val()：获取或设置元素的value值。如：$("selector").val()。
text()：获取或设置元素的文本内容。如：$("p.para").text()。
html()：获取或设置元素的所有内容（包括HTML标签）。如：$("#qwq").html()。
以上三个方法，若调用时包含参数，则可设置对应值为参数值，否则只返回对应值。
分别对应value, innerText, innerHTML属性。见HTML笔记。
如：$("p.para").text("123")设置"p.para"之间的内容为文本123。

attr("attr_name")：获取元素的指定属性的值。如：$("#baidu").attr("href")。

jQuery 事件

大多数DOM事件都有一个等效的jQuery方法。
常用事件：https://www.runoob.com/jquery/jquery-events.html

jQuery 效果

在 https://api.jquery.com/ 查看更详细的函数说明，如：https://api.jquery.com/hide/。

隐藏 显示

使用hide()和show()方法可隐藏/显示一个已显示/隐藏的HTML元素。
使用toggle()可根据元素状态切换使用hide()或show()。

语法：

  1. $(selector).hide([duration] [,easing] [,complete]);
  2. $(selector).show([duration] [,easing] [,complete]);
  3. $(selector).toggle([duration] [,easing] [,complete]);

参数：
duration：可选。规定隐藏/显示的所需时间（决定速度），取值为毫秒数（数值）、"slow"、"normal"或"fast"。设置时间后，元素会逐渐进行改变。默认为400。
easing：可选。规定元素在变化时使用哪种缓动函数（easing function）。jQuery自身提供"linear"和"swing"两种取值，使用插件可获得更多选择。默认为swing。
complete：可选。隐藏或显示完成后要执行的函数名称。需设置duration后才能设置。

判断一个元素是隐藏还是显示：

  1. // 使用CSS
  2. var display = $('#id').css('display') //获取display属性值
  3. if (display=='block') {alert('已显示');}
  4. if (display=='none') {alert('已隐藏');}
  6. // 使用jQuery
  7. var x = $("#id");
  8. if ( x.is(":visible") ) {alert('已显示');}
  9. if ( $("#id").is(":hidden") ) {alert('已隐藏');}

淡入 淡出

使用fadeOut()和fadeIn()方法可淡出/淡入一个已显示/隐藏的HTML元素。
使用fadeToggle()可根据元素状态切换使用fadeOut()或fadeIn()。
与hide(), show()基本相同。

语法：

  1. $(selector).fadeIn([duration] [,easing] [,complete]);
  2. $(selector).fadeOut([duration] [,easing] [,complete]);
  3. $(selector).fadeToggle([duration] [,easing] [,complete]);

参数：
duration：可选。规定隐藏/显示的所需时间（决定速度），取值为毫秒数（数值）、"slow"、"normal"或"fast"。设置时间后，元素会逐渐进行改变。默认为400。
easing：可选。规定元素在变化时使用哪种缓动函数（easing function）。jQuery自身提供"linear"和"swing"两种取值，使用插件可获得更多选择。默认为swing。
complete：可选。隐藏或显示完成后要执行的函数名称。需设置duration后才能设置。

fadeTo()可将元素渐变为给定的不透明度。

语法：
$(selector).fadeTo(duration, opacity [,complete]);

参数基本同fadeIn()。不同：
duration：必填。
opacity：必填，为要设置的透明度（取值为0~1，即完全透明~完全不透明）。

滑动

使用slideUp()和slideDown()方法可向上/向下滑动一个HTML元素（滑动会使元素隐藏，反向滑动会使元素显示）。
使用slideToggle()可根据元素状态切换使用slideUp()或slideDown()。
与hide(), show()基本相同。

语法：

  1. $(selector).slideUp([duration] [,easing] [,complete]);
  2. $(selector).slideDown([duration] [,easing] [,complete]);
  3. $(selector).slideToggle([duration] [,easing] [,complete]);

参数：
duration：可选。规定滑动动画的所需时间（决定速度），取值为毫秒数（数值）、"slow"、"normal"或"fast"。设置时间后，元素会逐渐进行改变。默认为400。
easing：可选。规定元素在变化时使用哪种缓动函数（easing function）。jQuery自身提供"linear"和"swing"两种取值，使用插件可获得更多选择。默认为swing。
complete：可选。滑动动画完成后要执行的函数名称。

自定义动画

使用animate()创建自定义动画。

语法：

  1. $(selector).animate(properties [,duration] [,easing] [,complete])

参数：
properties：必须。为若干{}包含的属性:值对，表示动画会将元素变成什么样。
duration：可选。规定动画的所需时间（决定速度），取值为毫秒数（数值）、"slow"、"normal"或"fast"。设置时间后，元素会逐渐进行改变。默认为400。
easing：可选。规定元素在变化时使用哪种缓动函数（easing function）。jQuery自身提供"linear"和"swing"两种取值，使用插件可获得更多选择。默认为swing。
complete：可选。动画完成后要执行的函数名称。

注：
默认情况下，所有HTML元素都有一个静态位置，无法移动。如需对位置进行操作，需把该元素的CSS position属性设置为relative、fixed或absolute。
animate()几乎可以操作所有CSS属性。但注意，在书写属性:值对时，需使用Camel标记法书写属性名，而不是原属性名称。如padding-left应写作paddingLeft。
色彩动画并不包含在核心jQuery库中。要使用色彩动画，需在 https://plugins.jquery.com/ 下载color颜色动画插件。

例：
在动画中改变一个或多个属性

  1. $("button").click(function(){
  2.   $("div").animate({
  3.     left:'250px',
  4.     opacity:'0.5',
  5.     height:'150px',
  6.     width:'150px'
  7.   });
  8. });

定义相对当前值的修改
在属性值前使用+=或-=。

  1. $("button").click(function(){
  2.   $("div").animate({
  3.     left:'250px',
  4.     height:'+=150px',
  5.     width:'+=150px'
  6.   });
  7. });

定义特定值
动画属性值还可设为show, hide或toggle，可显示/隐藏元素。

  1. $("button").click(function(){
  2.   $("div").animate({
  3.     height:'toggle'
  4.   });
  5. });

动画队列
可以在同一处定义多个animate()调用。这些调用会被创建为一个动画队列，并被依次执行（前一个动画执行完毕后才执行下一个）。
jQuery自带一个Queue，是内部专门为动画服务的。

  1. $("button").click(function(){
  2.   var div=$("div");
  3.   div.animate({height:'300px',opacity:'0.4'},"slow");
  4.   div.animate({width:'300px',opacity:'0.8'},"slow");
  5.   div.animate({height:'100px',opacity:'0.4'},"slow");
  6.   div.animate({width:'100px',opacity:'0.8'},"slow");
  7. });

停止动画

使用stop()可在动画效果完成前停止该元素的动画。可用于停止所有jQuery效果函数。

语法：

  1. $(selector).stop([clearQueue] [,jumpToEnd])
  2. $(selector).stop([queue] [,clearQueue] [,jumpToEnd])

参数：
queue：可选。可停止指定动画队列的动画。
clearQueue：可选。是否清除当前的整个动画队列（即同时停止之后的所有动作）。默认为false，即只停止当前动画，队列中的后续动画继续执行。
jumpToEnd：可选。是否立即完成当前动画（即直接跳到动画结束时的状态）。默认为false，即会在当前状态停止。

例：

  1. $(document).ready(function(){
  2.   $("#flip").click(function(){
  3.     $("#panel").slideDown(5000);
  4.   });
  5.   $("#stop").click(function(){
  6.     $("#panel").stop();
  7.   });
  8. });

jQuery链

通过链接（chaining），可以在一行内对一个选择器依次运行多条jQuery命令，而无需分多行写。
此外，浏览器还不需多次重复查找该元素。

语法：

  1. $(selector).action1().action2().action3()...

例：

  1. $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  2. // 可以在代码中添加换行、缩进，以提高可读性（多余空白会被JS忽略）
  3. $("#p1").css("color","red")
  4.     .slideUp(2000)
  5.     .slideDown(2000);
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注