[计算机软件及应用]jquery_基础教程

jquery使⽤⽅法jQuery是⽬前使⽤最⼴泛的javascript函数库。

据统计，全世界排名前100万的⽹站，有46%使⽤jQuery，远远超过其他库。

微软公司甚⾄把jQuery作为他们的官⽅库。

对于⽹页开发者来说，学会jQuery是必要的。

因为它让你了解业界最通⽤的技术，为将来学习更⾼级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。

⼀、选择⽹页元素jQuery的基本设计和主要⽤法，就是"选择某个⽹页元素，然后对其进⾏某种操作"。

这是它区别于其他函数库的根本特点。

使⽤jQuery的第⼀步，往往就是将⼀个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。

选择表达式可以是CSS选择器：1 $(document)//选择整个⽂档对象2 $('#myId')//选择ID为myId的⽹页元素3 $('div.myClass')//选择class为myClass的div元素4 $('input[name=first]')//选择name属性等于first的input元素也可以是jQuery特有的表达式：1 $('a:first')//选择⽹页中第⼀个a元素2 $('tr:odd')//选择表格的奇数⾏3 $('#myForm :input')//选择表单中的input元素4 $('div:visible') //选择可见的div元素5 $('div:gt(2)')//选择所有的div元素，除了前三个6 $('div:animated')//选择当前处于动画状态的div元素⼆、改变结果集如果选中多个元素，jQuery提供过滤器，可以缩⼩结果集：1 $('div').has('p'); //选择包含p元素的div元素2 $('div').not('.myClass'); //选择class不等于myClass的div元素3 $('div').filter('.myClass'); //选择class等于myClass的div元素4 $('div').first(); //选择第1个div元素5 $('div').eq(5); //选择第6个div元素有⼀些时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动⽅法：1 $('div').next('p'); //选择div元素后⾯的第⼀个p元素2 $('div').parent(); //选择div元素的⽗元素3 $('div').closest('form'); //选择离div最近的那个form⽗元素4 $('div').children(); //选择div的所有⼦元素5 $('div').siblings(); //选择div的同级元素三、链式操作选中⽹页元素以后，就可以对它进⾏某种操作。

《jq》教案教学设计一、教学内容本节课的教学内容来自教材《jq》的第三章，主要内容包括：1. 介绍jq的基本概念和用法；2. 讲解如何使用jq选择元素、操作元素和事件处理；3. 演示如何利用jq实现动态效果和交互功能。

二、教学目标1. 让学生掌握jq的基本概念和用法；2. 培养学生使用jq选择元素、操作元素和事件处理的能力；3. 引导学生利用jq实现动态效果和交互功能。

三、教学难点与重点重点：1. jq的基本概念和用法；2. 使用jq选择元素、操作元素和事件处理；3. 利用jq实现动态效果和交互功能。

难点：1. jq的选择器和工作原理；2. 事件处理和事件冒泡；3. 动态效果和交互功能的实现。

四、教具与学具准备教具：1. 投影仪和显示屏；2. 计算机和投影软件；3. 教鞭和教学PPT。

学具：1. 计算机和网络连接；2. 《jq》教材和课堂笔记；3. 编程环境和代码编辑器。

五、教学过程1. 实践情景引入：利用投影仪展示一个简单的网页，并现场演示如何使用jq实现动态效果，如图片轮播、下拉菜单等。

2. 知识讲解：讲解jq的基本概念和用法，介绍jq的选择器和工作原理，以及如何使用jq选择元素、操作元素和事件处理。

3. 例题讲解：通过具体的例题，演示如何利用jq选择元素、操作元素和事件处理。

例如，编写一段代码实现按钮改变元素颜色、滑动图片等效果。

4. 随堂练习：让学生动手实践，尝试编写代码实现一些简单的动态效果。

如：利用jq实现一个简单的轮播图、下拉菜单等。

5. 课堂互动：邀请学生上台演示自己编写的代码，并为大家讲解代码的实现原理。

同时，教师针对学生的代码进行点评和指导。

六、板书设计板书内容主要包括：1. jq的基本概念和用法；2. jq的选择器和工作原理；3. 使用jq选择元素、操作元素和事件处理的方法；4. 利用jq实现动态效果和交互功能的示例。

七、作业设计1. 请用jq编写一个简单的轮播图，要求包含图片切换、自动播放等功能。

《jq》(完美精品课件一、教学内容本节课我们将深入学习《jq》教材的第3章“事件处理”和第4章“动画效果”。

具体内容包括：事件处理的基本概念、常用事件类型及其使用方法；动画效果的分类、实现原理以及常用动画函数的运用。

二、教学目标1. 理解并掌握事件处理的基本概念和常用事件类型。

2. 学会使用动画效果，能够实现页面元素的动态展示。

3. 培养学生的动手实践能力和问题解决能力。

三、教学难点与重点教学难点：事件处理机制的理解，动画效果的实现原理。

教学重点：常用事件类型的运用，动画函数的使用。

四、教具与学具准备1. 教具：计算机、投影仪、黑板。

2. 学具：教材、笔记本电脑、网络。

五、教学过程1. 导入：通过展示一个实践情景（如：一个动态变化的菜单），引发学生对事件处理和动画效果的兴趣。

2. 知识讲解：1) 事件处理：介绍事件处理的基本概念，讲解常用事件类型（如：click、mouseover、mouseout等）及其使用方法。

2) 动画效果：介绍动画效果的分类（如：淡入淡出、滑动、缩放等），讲解动画效果的实现原理以及常用动画函数（如：slideDown、slideUp、fadeIn、fadeOut等）的运用。

3. 例题讲解：结合实践情景，演示如何使用事件处理和动画效果制作一个动态菜单。

4. 随堂练习：让学生分组练习，每组制作一个具有不同动画效果的页面元素。

六、板书设计1. 事件处理：基本概念常用事件类型2. 动画效果：分类实现原理常用动画函数七、作业设计1. 作业题目：制作一个具有动画效果的轮播图。

2. 答案：1) HTML结构：<div class="carousel"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div>2) CSS样式：.carousel {width: 300px;height: 200px;overflow: hidden;}.carousel ul {position: relative;}.carousel li {position: absolute;left: 300px;width: 300px;height: 200px;backgroundcolor: f0f0f0; textalign: center;lineheight: 200px;}3) JavaScript代码：$(document).ready(function() { var index = 0;var timer;function playCarousel() {clearTimeout(timer);$('.carousel ulli').eq(index).stop().animate({'left': 0},500).siblings().stop().animate({'left': 300}, 500);index++;if (index >= 4) {index = 0;}timer = setTimeout(playCarousel, 2000);}playCarousel();$('.carousel').mouseover(function() {clearTimeout(timer);});$('.carousel').mouseout(function() {playCarousel();});});八、课后反思及拓展延伸1. 反思：本节课学生对事件处理和动画效果的理解程度，以及实践操作中遇到的问题。

jQuery的选择器非常强大,使你可以轻松选取页面中任何一个对象,下面我们就主要针对DOM操作来看一下jQuery中选择器的基础使用教程,需要的朋友可以参考下其实选择器就像开罐器一样，会用这个工具的人，自然吃的到甜头，但不会用这个工具的人，不管罐头里面的面筋土豆有多美味，吃不到就是吃不到，就如同jquery再怎么强大，也只能看着荧幕，而不知该如何下手，不过虽然选择器不难，也容易上手，但老实说，我用了一年多下来，还是觉得自己只有用皮毛而已，所以希望藉着这一系列的笔记，让自己能更长进一些DOM怎么吃DOM可以说是JavaScript与网页之间的联系管道，他提供了一个模型，让JavaScript 能藉由此模型来改变或操作整个网页，&lt;div class="one"&gt;&nbsp; &lt;p&gt;two_1&lt;/p&gt;&nbsp; &lt;p&gt;two_2&lt;/p&gt;&nbsp; &lt;p&gt;two_2&lt;/p&gt;&lt;/div&gt;我这边就简单介绍一下DOM模型，有个元素class名为one的是父元素，底下有三个儿子元素&lt;p&gt;，每个元素都视为一个节点，也可以看成一个树形图，因为我认为有些东西是Google会讲得比我好，所以还想知道更多纠结的父子关系...，可以去这，那边有很好的说明，这边就不多加解释，而当Jquery利用选择器抓取到DOM元素以后，就会将他包装成一个Jquery object，并且回传$('#MyDiv')&lt;-- 他是一个物件这里有个观念十分重要，因为许多初学者，甚至是一些从Jquery开始学起Javascript的开发者(包括我)，常常会把以下两个程序码搞混在一起//原生JavaScript取id为a的divvar result1 = document.getElementById('a');console.log(result1);//用jquery取id为a的divvar result2=$('#a');console.log(result2);如果你执行这段程序码出来，妳会发现console出来的结果，用JavaScript取出来的结果是DOM，可是一样的div用Jquery取出来的却是个包装过后的物件，换句话说，你不能直接对包装过后的Jquery物件增加DOM的事件，而是要用Jquery提供的事件，有人会说，那意思是不是说以后只能河水不犯井水，往后互不干涉，从此分道扬镳呢? 到也不是var b=$('#a')[0];只要跟上述程序码一样就可以取得DOM的元素了$()工厂不管是如何选择，我们都会用相同的函式$()，就如之前所讲的，他能接受CSS选择器的语法做为参数，而最主要的三个参数分别为tag name、ID与class，当然，这三个参数可以再与其他CSS语法做结合//tag name$('div')//ID$('#myId')//class$('.myClass')而上述函式都会如同第一章所介绍的，都有隐式迭代的特色，而为了做到跨览器的支援，Jquery的选择器包含了CSS1-3，所以不用担心一些比较特别的浏览器(对就是IE6)不能执行，除非addClass('color1');//替index为1的tr加上class$('tr:nth-child(1)').addClass('color2');这里很特别的是，为什么都是替index为1的tr加上class，却是不同的结果呢?，因为:eq()算是一个JavaScript阵列，index是0起始，所以才会选到第二个，而nth-child()是CSS选择器的一种，所以index是以1起始，选到的就是第一个，以下的范例意思相同/3PrJt///选择偶数的tr增加class$('tr:even').addClass('color1');//选择偶数的tr增加class$('tr:nth-child(even)').addClass('color2');就如同刚刚所讲的，index起始不同(JavaScript起始为0，CSS为1)，所以虽然都是取偶数，但却是不同列再来就一些FORM常用的选择器/qcXSy/3/$(':button').click(function(){&nbsp; &nbsp; alert('a');});这就代表说绑定所有的bitton一个click事件，其他还有像:input、:button、:enabled、:disabled都可以跟其他选择器一起组合成新的选择器更加强大的.filter()当有时候一般的选择器已经不能不能满足我们复杂的DOM时，例如要抓div的爸爸的哥哥的儿子的妹婿的二姑的大舅时...，这时候还可以用一个方法filter，这个方法特别的地方在于他可以带function进去/wGz3k/可以看到function里面限制return index == 1才可以增加CSS，这个好处就在于可以在里面做很多复杂的逻辑运算当然Jquery还有太多太多选择器可以使用，像还有.next()、.parent()、.children()一般常用的这几个，其实就很够用了我认为，再多的选择器有时候好像只是展示不同的写法，但其实只要能抓取到你想要的元素，解决问题你甚至想要这样写$('div').children().children().children().children().children()也不会有人说不行..实例一个网站中有10种的文章分类，我们设计一个类似WordPress显示各文章分类的名称及其文章数量的栏目，当用户进入一个页面时，默认显示前面5个分类的名称以及最后一个分类——其他分类，用户可以通过单击“显示全部分类”按钮来显示全部分类，同时一些推荐的分类会加下划线显示，按钮中的文字会改变为“显示部分分类”，再次单击“显示部分分类”后会回到之前的页面状态。

JQUERY教程JQUERY简介jquery库的新特性：jquery是一个javascript的函数库，它包含以下特性：html元素选取、html元素操作、css操作、html事件函数、javascript特效和动画、html dom遍历和修改、ajax、utilites 向页面中添加jquery库。

Jquery库位于一个javascript文件中，其中包含了所有的jquery 函数，可以通过以下标记把jquery添加到页面中：注意：<script>标签应该位于页面的<head>部分Jquery的实例：hide()函数，隐藏了html中所有的<p>标签效果：页面会出现三段字和一个按钮，当点击按钮时，<p>标签里边的字将自动隐藏库的代替：Google和Microsoft对jquery的支持都很好。

如果不从自己的计算机上加载jquery库，可以从Google和Microsoft加载CDNjquery的核心文件使用Google的CDN：使用Microsoft的CDN：Jquery语法通过jQuery，您可以选取（查询，query）HTML 元素，并对它们执行“操作”（actions）。

Jquery语法实例$(this).hide(); 演示jquery hide（）函数，隐藏当前的html元素$(“#this”).hide(); 演示jquery hide（）函数，隐藏id为test的元素$(“p”).hide(); 演示jquery hide（）函数，隐藏所有p标签元素$(“.this”).hide(); 演示jquery hide（）函数，隐藏class为test的元素Jquery语法基础语法是$(selector).action();美元符号定义jquery，选择符（selector）查询和查找html元素，jquery的action（）执行对元素的操作例如：$(“p”),hide(); 隐藏所有段落$(“p.test”).hide(); 隐藏所有class为test的段落等提示：jQuery使用的语法是XPath与CSS 选择器语法的组合。

以下部分为原文翻译:jQuery入门指南教程这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。

它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。

这个指南包括了很多代码，你可以copy它们，并试着修改它们，看看产生的效果。

内容提要Hello jQuery在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:$(document).ready(function(){//do stuff when DOM is ready});放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert.$(document).ready(function(){$("a").click(function(){alert("Hello world!");});});这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。

(译者Keel注:请照此代码修改custom.js并保存,然后用浏览器打开starterkit.html观察效果。

)让我们看一下这些修改是什么含义。

$("a")是一个jQuery选择器(selector),在这里，它选择所有的a标签（译者Keel注：即<a></a>），$号是jQuery“类”(jQuery"class")的一个别称，因此$()构造了一个新的jQuery对象(jQuery object)。

函数click()是这个jQuery对象的一个方法，它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法.这里有一个拟行相似功能的代码:<a href="#"onclick="alert('Hello world')">Link</a>不同之处很明显,用jQuery不需要在每个a标签上写onclick事件,所以我们拥有了一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的,就像我们使用CSS追求的一样.下面我们会更多地了解到选择器与事件.本章的相关链接:Find me:使用选择器和事件jQuery提供两种方式来选择html的elements，第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div>ul a")）；第二种是用jQuery对象的几个methods(方法)。

jQuery 教程Next PagejQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

每一章中用到的实例<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>If you click on me, I will disappear.</p></body></html>TIY通过点击 "TIY" 按钮来看看它是如何运行的。

您将学到什么在本教程中，您将通过文字以及许多在线实例，学到如何通过使用 jQuery 网页应用 JavaScript 效果。

jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。

基本上，您将学习到如何选取 HTML 元素，以及如何对它们执行类似隐藏、移动以及操作其内容等任务。

您需要具备的基础知识在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：∙HTML∙CSS∙JavaScript如果您需要首先学习这些科目，请在我们的首页查找这些教程。

jQuery 实例通过实例来学习！在 W3School，您将找到很多能够编辑并测试的 jQuery 实例。

jQuery 实例jQuery 参考手册在 W3School，您将找到包含所有 jQuery 对象和函数的完整参考手册。

jQuery简单学习手册由于现在各种浏览器越来越多，客户使用的浏览器也是五花八门，大家在开发时自己手工写的JS可能会存在各种兼容性问题，为了节省时间同时能有更人性化的操作体验(列如其中的ui插件就提供了非常多的功能)，所以推荐在开发时使用jQuery，根据官方文档上的说明它兼容IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+等浏览器，同时它将一些常用的操作都封装到了框架中，节省写代码时间并不用考虑兼容性。

目前CEMIS中集成的jQuery版本为1.7.2，jQuery UI版本为1.8jQuery可以用美元符$或jQuery来写，但由于CEMIS中有另一款类库prototype也是使用$，为了避免$对象冲突，所以在cemis中都使用jQuery（注意大小写）。

以下是我在开发中常用到的一些功能，分享给大家：◆jQuery框架⏹选择器◆根据ID匹配一个元素：<div id=”test”></div>jQuery(“#test”);◆根据类匹配元素：<div class=”test”>1</div>,<div class=”test”>3</div>jQuery(“.test”);◆匹配所有不可见元素：<div style=”display:none”>1</div>,<div>2</div>jQuery("div:hidden");将匹配<div style=”display:none”>1</div>◆匹配所有可见元素：<div style=”display:none”>1</div>,<div>2</div>jQuery("div:visible");将匹配<div>2</div>◆匹配给定的属性是某个特定值的元素：<input type=”checkbox”name=”test1”value=”1”/>,<input type=”checkbox”name=”test1” value=”2” />,<input type=”checkbox” name=”test2” value=”1” />jQuery ("input[name=' test2']").attr("checked", true);即能选中第3个复选框⏹属性◆取得一个匹配元素的属性值：<img id=”test” src=”1.jpg” />jQuery(“#test”).attr(“src”);或jQuery(“img”).attr(“src”);最后获取的值为1.jpg◆为匹配元素设置一个属性值：<img id=”test” />jQuery(“#test”).arrt(“src”, “1.jpg”);结果为<img id=”test” src=”1.jpg” />◆为匹配元素设置多个属性值：<img id=”test” />jQuery("#test").attr({ src: "1.jpg", alt: "测试" });结果为<img id=”test” src=”1.jpg” alt=”测试” />◆从匹配元素删除属性：<img id=”test” src=”1.jpg” alt=”测试” />jQuery("#test").removeAttr("alt");结果为<img id=”test” src=”1.jpg” />◆为每个匹配的元素添加指定的类名：<div id=”test”>1</div>jQuery(“#test”). addClass("myclass");结果为<div id=”test” class=” myclass”>1</div>◆从所有匹配的元素中删除全部或者指定的类：<div id=”test” class=” myclass”>1</div>jQuery(“#test”). removeClass(“myclass”)或jQuery(“#test”). removeClass();结果为<div id=”test”>1</div>◆取得第一个匹配元素的html内容:<div id="test"><span>div1</span></div>,<div id="test">div2</div>jQuery(“#test”).html();结果为<span> div1</span>◆设置第一个匹配元素的html内容:<div id="test"><span>div1</span></div>,<div id="test">div2</div>jQuery(“#test”).html(“a”);结果为<div id="test">a</div>,<div id="test">div2</div>◆设置所有匹配元素的html内容：<div id="test"><span>div1</span></div>,<div id="test">div2</div>jQuery(“div”).html(“aa”);结果为<div id="test">aa</div>,<div id="test">aa</div>◆取得一个或所有匹配元素的文本内容：<div id="test"><span>div1</span></div>,<div id="test">div2</div>jQuery(“#test”).text();或jQuery(“div”).text();结果为div1或div1div2设置文本内容与前面的设置html类似，使用text(“xx”)的方式。

浅谈JQUREY（摘自/softwave/article/details/2070815）JQUERY手册（第七页，附教程）Jquery是继prototype之后又一个优秀的Javascript框架。

对prototype我使用不多，简单了解过。

但使用上jquery 之后，马上被她的优雅吸引住了。

有人使用这样的一比喻来比较prototype和jquery：prototype就像Java，而jquery 就像ruby.实际上我比较喜欢java（少接触Ruby罢了）但是jquery的简单的实用的确有相当大的吸引力啊！在项目里我把jquery作为自已唯一的框架类包。

使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。

一，找到你了！还记得$()这个东西吧？prototype还是DWR都使用了这个函数代替document.getElementById()。

没错，jquery也跟风了。

为达到document.getElementById()的目的，jquery是这样写的：Java代码1.var someElement = $("#myId");[java]view plaincopyprint?1.var someElement = $("#myId");看起来比其他两个框架的要多了一个#，好，看看下面的用法：Java代码1.$("div p");(1)2.$("div.container")(2)3.$("div #msg");(3)4.$("table a",context);(4)[java]view plaincopyprint?1.$("div p");(1) $("div.container")(2) $("div #msg");(3) $("table a",context);(4)在prototype里看过这样的写法吗？第一行代码得到所有<div>标签下的<p>元素。

jQuery基础教程jQuery是什么？jQuery是⼀个JavaScript常⽤的⼯具函数库。

jQuery是⼀个轻量级的"写的少，做的多"的JavaScript库。

jQuery当中包含有以下⼀些常⽤功能：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities下⾯的内容当中，我们会逐⼀的介绍jQuery的常⽤内容。

学习jQuery的⼼态以练为主，多看多练以js为基础，更好的理解jQueryjQuery只是js的⼀个函数库，不能忘记jsjQuery的版本问题⽬前jQuery有三个⼤版本，1.xx 、 2.xx 和 3.xx ，三个版本当中，1版本兼容性最⾼，可以有效的兼容ie浏览器，6，7，8，9都能得到⼀个很好的兼容，2版本则最低只能兼容到ie9，⽽3版本则彻底放弃了ie9以下的浏览器。

但是却新增加了很多的使⽤的⽅法，并且代码的安全性也增加很多，例如可以很好的防⽌xss攻击等。

jQuery的使⽤⾸先，我们可以根据需要下载⼀个指定版本的jquery⽂件，当然也可以选择使⽤cdn⽂件。

js 官⽅⽹址: /常⽤CDN:<script src="/jquery/1.10.2/jquery.min.js"></script> 百度CDN中的jQuery<script src="/libs/jquery/jquery-2.0.2.min.js"> </script> 右拍云<script src="/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> 新浪jQuery 中的核⼼语法在jQuery当中，jQuery是⼀个核⼼⽅法，⽤来查找元素从⽽⽅便对元素的操作，可以简写为$。

学习要学会总结JQuery 学习大全JQuery 介绍...................................................................................................................................... 2 JQuery 事件...................................................................................................................................... 2 选择器（隐藏元素）....................................................................................................................... 4 使用 JQuery 元素选择器： ..................................................................................................... 5 属性选择器：........................................................................................................................... 5 CSS 选择器：............................................................................................................................ 5 文档就绪函数................................................................................................................................... 6 JQuery 效果...................................................................................................................................... 6 隐藏和显示............................................................................................................................... 6 切换........................................................................................................................................... 8 jQuery 滑动函数 - slideDown, slideUp, slideToggle ................................................. 8 JQuery 自定义动画（还是这个最合人心） ........................................................................ 10 JQuery HTML 操作.......................................................................................................................... 11 改变 HTML 内容....................................................................................................................... 11 添加 HTML 内容....................................................................................................................... 11 JQuery CSS 操作.......................................................................................................................... 11 JQuery Size 操作.......................................................................................................................... 12 JQuery 和 AJAX............................................................................................................................... 13学习要学会总结JQuery 介绍JQuery 是一个 JavaScript 库，但是它极大的简化了 JS 编程，说的再具体一点，就是： JQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 函数库 下面就开始我们的学习旅程吧！看如何通过使用 JQuery 应用 JS 效果。