JavaScript 学习笔记 - 14 工具包、框架和库

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量97 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24951479/article/details/128320914
版权

目录

14.1 添加 jQuery

为了在网站中使用 JavaScript 框架，你需要对网站的页面代码作出一些修改。使用 jQuery 时，代码仅需少量修改。

<!DOCTYPE html>
<html>
<head>
<title>Welcome to jQuery!</title>
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="script01.js"></script>
</head>
<body>
<h1 id="welcome"> </h1>
</body>
</html>

$(document).ready(function() {
alert("Welcome to jQuery!");
});

在这里插入图片描述

 <script src="http://code.jquery.com/jquery-2.1.0.js"></script>

这句用于引入 jQuery 库的 HTML 代码。

$(document).ready(function() {
alert("Welcome to jQuery!");
});

上面这段代码和下面这段代码没啥区别：

window.addEventListener("load",
function(){
alert("Welcome to jQuery!");
},
false
);

$ ()在基于 jQuery 的 JavaScript 代码中，人们首先注意到的通常是美元符号 。 一 方 面 是 由 于 在 普 通 J a v a S c r i p t 代 码 中 。一方面是由于在普通JavaScript 代码中 。一方面是由于在普通JavaScript代码中符号并不常见，另一方面则是因为$ 符号在 jQuery 中无处不在。大多数用到 jQuery 的代码行都会以$ 符号作为开始，这行代码也不例外。 $ 符号仅仅表示一个合法但不常见的函数名， jQuery 通过它来获取所需的一切。
document
因为我们无论做什么都需要通过$ ，那么，毫无疑问应该首先获取 document 对象（一般是最顶层的元素）。
ready()
以前，我们通过检查 onload 事件来判断页面是否完全加载，现在则依赖于 jQuery 的 ready()函数。二者唯一的区别在于 onload 是事件处理程序（所以必须赋给函数），而ready()是有一个参数的函数。

14.2 使用 jQuery 更新页面

当然，用 jQuery 也能做到。虽然接下来的示例与前面的示例类似，但我们将会更新页面本身，而不是仅弹出警告框，

$(document).ready(function() {
$("#welcome").append("Welcome to jQuery!");
});

$("#welcome").append("Welcome to jQuery!");

类似于获取 document 对象，使用$ 从页面上获取元素。现在获取到了#welcome 元素。然后，我们使用 jQuery 的 append()函数来设置元素的 innerHTML 属性

14.3 使用 jQuery 交互

<!DOCTYPE html>
<html>
<head>
<title>Welcome to jQuery #3!</title>
<link rel="stylesheet" href="script03.css">
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="script03.js"></script>
</head>
<body>
<h1 id="colorMe">Pick a color</h1>
<p>
<a id="red">Red</a>
<a id="green">Green</a>
<a id="blue">Blue</a>
</p>
</body>
</html>

a {
display: block;
float: left;
padding: 10px;
margin: 10px;
font-weight: bold;
color: white;
background-color: gray;
}
a:hover {
color: black;
background-color: silver;
}

$(document).ready(function() {
$("a").click(function(evt) {
$("#colorMe").css({
"color": $(this).attr("id")
});
evt.preventDefault();
});
});
  1. $(“a”).click(function(evt) {
    此行使用了 jQuery 来实现交互行为，即当用户单击文档上任意链接（即锚点元素）时，会执行相应的操作。
  2. $(“#colorMe”).css({
    如你所愿，获取页面上 id 值为 colorMe 的元素。由于我们想改变的属性是 CSS 相关的，因而可以使用 css()函数。它需要一个对象字面量列表：包含在花括号（ {}）中的一串名值对，不同的名值对用逗号分隔，名值对的名称和值之间用冒号分隔。
  3. “color”: $(this).attr(“id”)
    $(this)元素类似于常见的 this 元素，它的值取决于其所处的上下文环境。此时的上下文环境是click 事件处理程序，因此，我们能够获得用户刚刚单击过的那个链接。我们真正想要获取的是元素的 id 值，即 red、 green 或 blue。将值作为参数传给在第 3 步中仅设置了一个参数（属性名）的 attr()函数。随后，值会被存储为标题的 class 属性的新值， CSS 会接收新值，进而自动更新标题颜色。

14.4 交互与更新

a {
display: block;
float: left;
padding: 10px;
margin: 10px;
font-weight: bold;
color: white;
background-color: gray;
}

$(document).ready(function() {
$("a").hover(function() {
$(this).css({
"color": $(this).attr("id"),
"background-color": "silver"
});
});
$("a").mouseout(function() {
$(this).css({
"color": "white",
"background-color": "gray"
});
});
$("a").click(function(evt) {
$("#colorMe").css({
"color": $(this).attr("id")
});
evt.preventDefault();
});
});

14.5 条纹表格

如果你的网站有大量表格数据，就应该在表格中添加条纹——如果没有条纹，就很难阅读和理解这些信息。遗憾的是，还没有适用于所有常用浏览器的实现条纹表格行的 CSS 方法。在过去，使用JavaScript 实现条纹表格行非常困难，大多数人不愿意自找麻烦。

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<title>Striped Tables</title>
<link rel="stylesheet" href="script05.css">
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="script05.js"></script>
</head>
<body>
<h1>Beatles Discography</h1>
<table>
<thead>
<tr>
<th>Album</th>
<th>Year</th>
<th>Label</th>
</tr>
</thead>
<tr>
<td>Please Please Me</td>
<td>1963</td>
<td>Parlophone</td>
</tr>
<tr>
<td>With The Beatles</td>
<td>1963</td>
<td>Parlophone</td>
</tr>
<tr>
<td>A Hard Day's Night</td>
<td>1964</td>
<td>Parlophone</td>
</tr>
<tr>
<td>Beatles for Sale</td>
<td>1964</td>
<td>Parlophone</td>
</tr>
<tr>
<td>Help!</td>
<td>1965</td>
<td>Parlophone</td>
</tr>
<tr>
<td>Rubber Soul</td>
<td>1965</td>
<td>Parlophone</td>
</tr>
<tr>
<td>Revolver</td>
<td>1966</td>
<td>Parlophone</td>
</tr>
<tr>
<td>Sgt. Pepper's Lonely Hearts Club Band</td>
<td>1967</td>
<td>Parlophone</td>
</tr>
<tr>
<td>Magical Mystery Tour</td>
<td>1967</td>
<td>Capitol</td>
</tr>
<tr>
<td>The Beatles</td>
<td>1968</td>
<td>Apple</td>
</tr>
<tr>
<td>Yellow Submarine</td>
<td>1969</td>
<td>Apple</td>
</tr>
<tr>
<td>Abbey Road</td>
<td>1969</td>
<td>Apple</td>
</tr>
<tr>
<td>Let It Be</td>
<td>1970</td>
<td>Apple</td>
</tr>
</table>
</body>
</html>

table {
border-collapse: collapse;
}
tr.even {
background-color: #C2C8D4;
}
tr.over {
background-color: #8797B7;
}
td {
border-bottom: 1px solid #C2C8D4;
padding: 5px;
}
th {
border-right: 2px solid #FFF;
color: #FFF;
padding-right: 40px;
padding-left: 20px;
background-color: #626975;
}
th.sortUp {
background: #626975 url(jquery/images/asc.png) no-repeat right center;
}
th.sortDown {
background: #626975 url(jquery/images/desc.png) no-repeat right center;
}

$(document).ready(function() {
$("tr").mouseover(function() {
$(this).addClass("over");
});
$("tr").mouseout(function() {
$(this).removeClass("over");
});
$("tr:even").addClass("even");
});

14.6 表格排序

具有条纹效果的表格已经很不错了，但是有时候你希望站点支持用户交互。用户可能希望按照不同的次序对列进行排序——不是按照年份升序，而是按照降序排序。

<!DOCTYPE html>
<html>
<head>
<title>Sorted Tables</title>
<link rel="stylesheet" href="script05.css">
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="jquery/jquery.tablesorter.js"></script>
<script src="script06.js"></script>
</head>
<body>
<h1>Beatles Discography</h1>
<table id="theTable">
<thead>
<tr>
<th>Album</th>
<th>Year</th>
<th>Label</th>
</tr>
</thead>
<tr>
<td>Please Please Me</td>
<td>1963</td>
<td>Parlophone</td>
</tr>
<tr>
<td>With The Beatles</td>
<td>1963</td>
<td>Parlophone</td>
</tr>
<tr>
<td>A Hard Day's Night</td>
<td>1964</td>
<td>Parlophone</td>
</tr>
<tr>
<td>Beatles for Sale</td>
<td>1964</td>
<td>Parlophone</td>
</tr>
<tr>
<td>Help!</td>
<td>1965</td>
<td>Parlophone</td>
</tr>
<tr>
<td>Rubber Soul</td>
<td>1965</td>
<td>Parlophone</td>
</tr>
<tr>
<td>Revolver</td>
<td>1966</td>
<td>Parlophone</td>
</tr>
<tr>
<td>Sgt. Pepper's Lonely Hearts Club Band</td>
<td>1967</td>
<td>Parlophone</td>
</tr>
<tr>
<td>Magical Mystery Tour</td>
<td>1967</td>
<td>Capitol</td>
</tr>
<tr>
<td>The Beatles</td>
<td>1968</td>
<td>Apple</td>
</tr>
<tr>
<td>Yellow Submarine</td>
<td>1969</td>
<td>Apple</td>
</tr>
<tr>
<td>Abbey Road</td>
<td>1969</td>
<td>Apple</td>
</tr>
<tr>
<td>Let It Be</td>
<td>1970</td>
<td>Apple</td>
</tr>
</table>
</body>
</html>

$(document).ready(function() {
$("tr").mouseover(function() {
$(this).addClass("over");
});
$("tr").mouseout(function() {
$(this).removeClass("over");
});
$("#theTable").tablesorter({
sortList:[[1,0]],
cssAsc: "sortUp",
cssDesc: "sortDown",
widgets: ["zebra"]
});
});

 sortList:[[1,0]],
cssAsc: "sortUp",
cssDesc: "sortDown",
widgets: ["zebra"]

这里使用 jQuery，所以有几个控制表格显示方式的选项。我们在这里使用的选项如下所示。 sortList:[[1,0]]：在最初加载页面时，我们希望表格以某种方式排序，就在这里定义这种排序方式。所需排序的列是第一个参数，列的编号从零开始。在这里，我们希望表格按照第二列排序，所以传递 1（请记住， JavaScript 的编号是从零开始的）。第二个参数是希望的排序方向： 0 是升序， 1 是降序。
在这里插入图片描述
 cssAsc: “sortUp”：当用户选择升序排序时，我们要对这个 th 单元格应用一个新的 CSS 规则。这个选项会在用户选择升序时自动分配"sortUp"类，因此会在标签的右边显示向上箭头。
 cssDesc: “sortDown”：如果用户希望采用降序排序，可以再次单击这个 th 单元格，这时类会改为"sortDown"，因此在标签的右边显示向上箭头。因为希望能够按照任何列排序而不只是按照 Web 开发人员决定的列排序，所以用户只需单击另一个 th 单元格，结果会立即改变，不需要添加任何代码。
 widgets: [“zebra”]：在使用 tablesorter()时，斑马纹效果是一个“免费赠送的”部件。只需指出希望添加 zebra 部件，就能够产生条纹效果。

Helloworld188888
关注
专栏目录
JavaScript 学习笔记集和代码库
02-21
这个“JavaScript学习笔记集和代码库”涵盖了该语言的基础知识、进阶技巧以及实用示例，对于想要深入理解和掌握JavaScript的初学者或有经验的开发者来说，都是一个宝贵的资源。 首先，让我们来讨论JavaScript的基础...
框架与工具包与库[重复]
xfxf996的博客
07-13 384
This question already has an answer here: 这个问题在这里已有答案： What is the difference between a fra
工具是什么？框架是什么？彻底讲清楚工具和框架的区别！
天程十八的博客
07-02 2481
一句话讲清楚： 工具好比是搓衣板  框架好比是洗衣机 搓衣板只能搓衣服 洗衣机除了洗衣服还能脱水 甩干 加香 定时 定次.....工具其实只干了框架一部分的活框架整体解决你的问题...
深度学习的一些基础工具包(框架）介绍（随时更新）
小鸡快跑的博客
11-19 3100
1.Pandas：pip install pandas Pandas是python的一个数据分析包，是基于Numpy的一种工具，纳入了大量库和一些标准的数据模型。提供了高效操作大型数据集所需的工具，提供了大量能使我们快速便捷地处理数据的函数和方法。Pandas最初被作为金融数据分析工具而开发出来，因此，pandas为时间序列分析提供了很好的支持。它是使Python成为强大而高效的数据分析环境的重要...
【go】常用工具包&框架
opi
05-28 950
1.数据库dao 几乎所有的系统都需要数据库操作，在Java中数据库操作的类库和框架包含驱动包driver、连接池包如druid、ORM框架如Mybatis，那go里对标的有哪些呢？ Java go包 功能 java.sql.* database/sql 内置 标准接口Driver 具体功能委托各个驱动实现 mysql-connector-java github.com/go-sql-driver/mysql 各个数据库驱动 .
JavaScript高级程序设计2，学习笔记---第一篇
03-20
这篇学习笔记将带你探索JavaScript的核心概念，包括变量、数据类型、控制流、函数、对象和类等，这些都是构建复杂应用程序的基础。 首先，我们要了解JavaScript的基础语法。在JavaScript中，变量是存储数据的容器，...
JavaScript学习笔记
06-23
本资源“JavaScript学习笔记”是为初学者精心准备的一份教程，旨在帮助你快速掌握JavaScript的基础知识，并解决在学习过程中可能遇到的问题。 1. **变量与数据类型**： JavaScript支持多种数据类型，包括基本类型...
JavaScript 入门 新手学习笔记
11-17
10. **JavaScript框架和库**：如jQuery简化了DOM操作，React、Vue、Angular等现代框架则帮助构建大型单页应用。 这些笔记可能还包含了练习题和解析，帮助读者通过实践来巩固所学。在学习过程中，不断练习和理解每个...
JavaScript_StudyNote:JavaScript学习笔记
03-29
6. **JavaScript框架和库** - React：Facebook推出的用于构建用户界面的库，使用JSX语法。 - Vue.js：轻量级的MVVM框架，以声明式渲染和组件化著称。 - Angular：Google开发的全面的前端框架，包含路由、依赖注入...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 865
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 509
【代码】【JavaScript】LeetCode：707设计链表。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 456
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 885
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
JavaScript基础
zhangh040629的博客
09-10 1317
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
jEasyUI 创建带复选框的树形菜单
wjs2024的博客
09-10 373
jEasyUI 是一个基于 jQuery 的框架，它为用户提供了一套完整的用户界面组件，包括菜单、窗口、表格等。在本文中，我们将重点介绍如何使用 jEasyUI 创建一个带复选框的树形菜单。
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 266
动态在本地引入图片
JS的输出语句
J3259392566的博客
09-13 215
js中严格区分大小写。
八十多种证件识别接口-JavaScript身份证识别API示例-护照识别-户口页识别
weixin_41711744的博客
09-12 616
证件识别API包含了身份证识别、护照识别、户口页识别、港澳台来往通行证识别等八十多种证件识别类型，提供了快速、精准的证件信息提取功能，广泛应用于实名认证 、机场出入口等场景。身份证识别API常用于在线支付、金融服务、酒店入住等需要进行实名认证和提取身份信息的场景。在这些场景中，通过快速识别和验证身份证信息，可以有效提高处理速度，减少人为错误，增强安全性。八十多种证件识别接口提供了一种高效、精准的识别方式来读取各类证件信息，通过合理应用这些技术，可以大幅提升用户体验和企业运营效率。
《实现 HTML 图片轮播效果》
qq_69304031的博客
09-11 721
在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。
Spring学习笔记：Bootstrap框架详解
1. **Bootstrap简介**：Bootstrap框架提供了一套完整的UI工具包，包括布局、字体、表单、按钮、导航及其他组件，使得网页设计更加高效和一致。 2. **Bootstrap使用**：在项目中引入Bootstrap，需要添加相应的CSS和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值