【学习 JavaScript】 JavaScript 教程 JavaScript 简介 JavaScript 用法 JavaScript Chrome 中运行 JavaScript 输出 JavaScript 语法 JavaScript 语句 JavaScript 注释 JavaScript 变量 JavaScript 数据类型 JavaScript 对象 JavaScript 函数 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 字符串模板 JavaScript 运算符 JavaScript 比较 JavaScript 条件语句 JavaScript switch 语句 JavaScript for 循环 JavaScript while 循环 JavaScript break 和 continue 语句 JavaScript typeof JavaScript 类型转换 JavaScript 正则表达式 JavaScript 错误 JavaScript 调试 JavaScript 变量提升 JavaScript 严格模式 JavaScript 使用误区 JavaScript 表单 JavaScript 表单验证 JavaScript 验证 API JavaScript 保留关键字 JavaScript this JavaScript let 和 const JavaScript JSON JavaScript void JavaScript 异步编程 JavaScript Promise JavaScript 代码规范 JS 函数 JavaScript 函数定义 JavaScript 函数参数 JavaScript 函数调用 JavaScript 闭包 JS 类 JavaScript 类 JavaScript 类继承 JavaScript 静态方法 JS HTML DOM DOM 简介 DOM HTML DOM CSS DOM 事件 DOM EventListener DOM 元素 HTMLCollection 对象 NodeList 对象 JS 高级教程 JavaScript prototype JavaScript Number 对象 JavaScript String JavaScript Date(日期) JavaScript Array(数组) JavaScript Boolean(布尔) JavaScript Math(算数) JavaScript RegExp 对象 JS 浏览器BOM JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript 弹窗 JavaScript 计时事件 JavaScript Cookie JS 库 JavaScript 库 JavaScript 测试 jQuery JavaScript 测试 Prototype JS 实例 JavaScript 实例 JavaScript 对象实例 JavaScript 浏览器对象实例 JavaScript HTML DOM 实例 JavaScript 总结 JS 参考手册

好的,我可以为您生成一本 Markdown 格式的学习笔记,主题是 JS 库学习笔记。在本篇学习笔记中,我将会向您介绍两个非常有用的 JavaScript 库:jQuery 和 D3.js。

JS 库学习笔记

jQuery

什么是 jQuery?

jQuery 是一个快速、简洁的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画效果和 Ajax 操作等操作。使用 jQuery,您可以更轻松地开发交互性强、用户体验优秀的 Web 应用程序,而且代码量远远少于原生 JavaScript。

jQuery 的常用语法

选择器语法

使用 jQuery,您可以使用 CSS 样式的选择器来获取页面上的元素。例如,要选择所有 div 元素,可以使用以下代码:

javascriptCopy Code
$("div")

还可以根据 ID、类名或属性来选择元素。例如,要选择 ID 为 myDiv 的元素,可以使用以下代码:

javascriptCopy Code
$("#myDiv")

事件绑定语法

使用 jQuery,您可以更轻松地绑定事件处理程序。例如,要在单击按钮时执行某个函数,可以使用以下代码:

javascriptCopy Code
$("button").click(function(){ // 执行某个函数 });

动画语法

jQuery 提供了许多内置的动画效果,例如淡入淡出、滑动等。要在 1 秒钟内将元素淡入,可以使用以下代码:

javascriptCopy Code
$("div").fadeIn(1000);

jQuery 的实例

实例 1:动态添加元素

以下代码演示了如何使用 jQuery 动态添加一个带有文本的 div 元素:

htmlCopy Code
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").append("<p>Hello world!</p>"); }); }); </script> </head> <body> <div id="div1"> <h2>在这里开始添加元素:</h2> </div> <button>添加</button> </body> </html>

实例 2:表单验证

以下代码演示了如何使用 jQuery 对表单进行验证:

htmlCopy Code
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $("form").submit(function(){ if ($("input:first").val() == "") { alert("请输入用户名"); return false; } if ($("input:last").val() == "") { alert("请输入密码"); return false; } }); }); </script> </head> <body> <form> <label for="username">用户名:</label> <input type="text" id="username"><br> <label for="password">密码:</label> <input type="password" id="password"><br><br> <input type="submit" value="提交"> </form> </body> </html>

D3.js

什么是 D3.js?

D3.js (Data-Driven Documents) 是一个基于数据的 JavaScript 库,它可以帮助您更轻松地操作 HTML、SVG 和 CSS,从而创建各种数据可视化效果。使用 D3.js,您可以创建交互性强、美观实用的数据可视化,例如折线图、散点图、地图等等。

D3.js 的常用语法

创建可视化元素

要在页面上创建可视化元素,您需要使用 D3.js 提供的选择器语法。例如,要选择所有 div 元素,可以使用以下代码:

javascriptCopy Code
d3.selectAll("div");

然后,您可以使用 D3.js 提供的方法来设置元素的属性和样式,例如:

javascriptCopy Code
d3.selectAll("div") .style("background-color", "blue") .attr("class", "highlight");

加载数据

使用 D3.js,您可以轻松地从外部数据源加载数据。例如,以下代码演示了如何从 CSV 文件中加载数据:

javascriptCopy Code
d3.csv("data.csv", function(error, data) { if (error) throw error; console.log(data); });

绑定数据

使用 D3.js,您可以将数据绑定到可视化元素上,并动态生成元素。例如,以下代码演示了如何从数组中绑定数据,创建一组矩形:

javascriptCopy Code
var dataset = [ 5, 10, 15, 20, 25 ]; d3.select("body") .selectAll("div") .data(dataset) .enter() .append("div") .style("height", function(d) { return d + "px"; });

D3.js 的实例

以下是一个使用 D3.js 创建的简单折线图:

htmlCopy Code
<!DOCTYPE html> <html> <head> <script src="https://d3js.org/d3.v7.min.js"></script> <style> .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .line { fill: none; stroke: steelblue; stroke-width: 2px; } </style> </head> <body> <script> // 外部数据源 var data = [ {date: "2022-01-01", value: 10}, {date: "2022-02-01", value: 20}, {date: "2022-03-01", value: 30}, {date: "2022-04-01", value: 40}, {date: "2022-05-01", value: 50}, {date: "2022-06-01", value: 60}, {date: "2022-07-01", value: 70}, {date: "2022-08-01", value: 80}, {date: "2022-09-01", value: 90}, {date: "2022-10-01", value: 100}, {date: "2022-11-01", value: 90}, {date: "2022-12-01", value: 80} ]; // 定义画布大小 var margin = {top: 20, right: 20, bottom: 30, left: 50}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; // 定义比例尺 var x = d3.scaleUtc() .domain(d3.extent(data, function(d) { return new Date(d.date); })) .range([margin.left, width - margin.right]); var y = d3.scaleLinear() .domain([0, d3.max(data, function(d) { return d.value; })]).nice() .range([height - margin.bottom, margin.top]); // 定义 X 和 Y 轴 var xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)); var yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - margin.left - margin.right) .attr("stroke-opacity", 0.1)); // 定义折线图 var line = d3.line() .x(d => x(new Date(d.date))) .y(d => y(d.value)); // 创建 SVG 元素并添加折线图和轴 var svg = d3.select("body").append("svg") .attr("viewBox", [0, 0, width, height]) .call(zoom); svg.append("path") .datum(data) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("d", line); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); // 添加缩放功能 function zoom(svg) { const extent = [[margin.left, margin.top], [width - margin.right, height - margin.top]]; svg.call(d3.zoom() .scaleExtent([1, 8]) .translateExtent(extent) .extent(extent) .on("zoom", zoomed)); function zoomed(event) { x.range([margin.left, width - margin.right].map(d => event.transform.applyX(d))); svg.select(".line").attr("d", line); svg.select(".x.axis").call(xAxis); } } </script> </body> </html>

以上是本篇学习笔记的全部内容,希望能对您有所帮助。