jQuery是干什么的「JQuery引用及基本用法」

康尼 • 2022年 12月 24日上午8:53 • 软件百科 • 阅读 128

　　什么是 jQuery ?

jQuery是一个JavaScript函数库。

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

　　jQuery库包含以下功能：

　　HTML 元素选取
　　HTML 元素操作
　　CSS 操作
　　HTML 事件函数
　　JavaScript 特效和动画
　　HTML DOM 遍历和修改
　　AJAX
　　Utilities

提示：除此之外，Jquery还提供了大量的插件。

　　为什么使用 jQuery ?

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

很多大公司都在使用 jQuery，例如:

　　Google
　　Microsoft
　　IBM
　　Netflix

jQuery就是一个js库，它里面就提供了很多的属性和方法供我们使用，

比如想操作样式，jQuery就提供了css等方法。比如想要制作一个动画，jQuery就提供了show()/slideDown()/animate()等方法。

例如：下面就相当于封装了一个简易的js库,当封装的方法一多就成了另外版本的jQuery

//数组转为字符串

function changStr(arr){

let str = arr.join(”)

return str

}

//查找路径中的后缀名

function queryExtName(path){

let index = path.lastIndexOf(‘.’)

let extname = path.substr( index + 1 )

return extname

}

2. 库和框架的区别

库和框架都是别人编写的可复用代码, 都可以帮助我们快速的解决开发过程中出现的常见问题。但是两者之间还是存在着区别

3.1 框架和库的概念

库：library,简称lib。它是由一系列函数组成的集合,开发中想要什么功能就去调用库中提供的对应方法

框架：framework , 它是库的升级版，框架是为了解决同一类问题而制定的完整解决方案，只需按照它的规则去编写代码，框架会在适当的时机执行

3.2库和框架区别：

库和框架最大区别就是在于控制权，开发中谁站主导位置( you call Library Framework call you )

库：开发人员起来主导权力

库是没有主导权力，控制权在使用者手中，开发时库只是起了一个辅助作用，由开发人员说了算。开发人员起主导作用

框架：框架起了主导权力

使用框架开发时，有框架说了算，开发人员只能按照框架的语法进行编写，框架占有主导权力，开发人员会受到很多限制

jquery是干什么的

库就相当于一个工具箱，里面有需要的各种工具，我们可以用这些工具给家里小孩制造出各种创意玩具。

框架就相当于我们在京东上买的乐高模型车，只需要按照图纸拼装好，喷上自己喜欢的颜色，贴上自己喜欢的贴纸就行。但是每个人拿在手里的乐高模型车都是一个样式，我们很难去改变它的结构样式

4.常见的库与框架

常见的库：

jQuery：是一个高效、精简并且功能丰富的 JavaScript 工具库

ramda：一款实用的 JavaScript 函数式编程库

lodash:是一个一致性，模块化，高性能的JavaScrip使用工具库

Moment:一个Javascript时间日期处理类库

DayJS:一个轻量级的Javascript时间日期处理类库

常见的框架：

Vue ：是一套用于构建用户界面的渐进式框架。

angular：完全使用JavaScript编写的客户端技术。使Web应用开发比以往更简单、更快捷

Flutter:是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。

Taro:一套遵循React规范的多端统一开发框架（京东的凹凸实验室开发）

Chameleon：多端统一开发框架，一端所见即多端所见，你只需开发一次就能跑所有端（滴滴开发）

UIkit:是 YOOtheme 团队开发的一款轻量级、模块化的前端框架，可快速构建强大的web前端界面

layUI:是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式

Amaze UI:是一个轻量级Mobile first 的前端框架，基于开源社区流行前端框架编写

JQuery引用及基本用法

在JQuery文件中下载，并将其引入html文件。在使用jQuery之前，我们需要到jQuery的官方网站：“
https://jquery.com/download/”

把下载好的文件放到工程根目录下，然后在这个根目录下创建index.html文件。最后，将下载的JQuery文件引入index.html文件，其代码如下：

<!DOCTYPE html>

<html lang="en">



<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="jquery-3.5.1.min.js"></script>

</head>



<body>

</body>



</html>

1234567891011121314151617181920212223242526272829复制代码类型：[html]

通过引入script标签，JQuery被引入到subject的subject中，subject是：

接下来，我们将研究JQuery的基本语法，并对其进行一些介绍。

示例1:$(“div”).hide()；此行表示隐藏div元素；

例子2:$(“.box1”).hide()；这行代码意味着class属性隐藏在box1的元素中；

示例3:$(“#wrap”).hide()；这行代码表示隐藏元素id的值为wrap；

示例4:$(“hide.box1”).hide()；这一行代码意味着，隐藏带有box1的cycle属性的hv元素；

从上面的例子中可以看出，JQuery语法非常简单，只需要一个美元符号$，后面跟着一个html的元素选择符(与我们之前学到的css选择符高度一致)，然后在后面加上JQuery的方法，例如hide(show等等)。

无论显示或隐藏元素时，都需要一个事件来触发该动作，我们常用的触发方式是鼠标点击，比如你用鼠标点击一个按钮，然后页面上就会弹出一个提示框，通过点击来触发效果，我们称之为“事件”。点击JQuery中事件的书写方式为：$(“div”).click(function(){…})，此代码意味着在div标签被点击之后触发事件，具体事件内容以函数形式写入。除单击事件外，JQuery还可以通过鼠标移动事件、双击事件、元素获取焦点事件等方式进行学习，后面我们将一一介绍，并查看JQuery如何使用。

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="jquery-3.5.1.min.js"></script>

</head>

<style>

.box1 {

width: 100px;

height: 100px;

background-color: red;

}

</style>



<body>

<button id="btn1">点我隐藏元素</button>

<div class="box1"></div>

</body>

<script>

$(document).ready(function(){

$("#btn1").click(function(){

$(".box1").hide();

})

})

</script>

</html>

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253复制代码类型：[html]

在以上代码中，我们定义了一个button元素，一个div元素，然后点击按钮button，这个div元素就会被隐藏起来，各位同学可以尝试一下。在代码的最后一部分，包含了一段script标签，这段是JavaScript代码，所有的JavaScript代码都将被放置在script标签中以执行。

接下来是代码的第一句话：$(document).ready(function){…}，这是JQuery的固定写法，意思是页面加载后立即执行，执行代码被写入function函数的方法中(即{}内)。我们已经看到了这一方法。

$(“#btn1”).click(函数){

$(“.box1”).hide()；

})

这个代码就是我们前面提到的click事件，当单击id值为btn1的按钮时，会引发一个click元素的隐藏事件，click元素的名字叫做box1。

文章标题：jQuery是干什么的「JQuery引用及基本用法」

文章链接：https://www.linkedcc.com/rjbk/13805

jQuery是干什么的「JQuery引用及基本用法」

什么是 jQuery ?