- jQuery
简介：一个快速、小型且功能丰富的库。它简化了HTML文档遍历、事件处理、动画和Ajax交互。
官网地址：https://jquery.com
基础示例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="myButton">点击我</button>
<p id="demo">Hello, world!</p>
<script>
$(document).ready(function(){
$("#myButton").click(function(){
$("#demo").text("你点击了按钮！");
});
});
</script>
</body>
</html>
- React
简介：由Facebook开发的用于构建用户界面的JavaScript库，主要用于构建单页应用（SPA）中的组件。
官网地址：https://reactjs.org
基础示例：
<!DOCTYPE html>
<html>
<head>
<title>React Demo</title>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
- Vue.js
简介：渐进式JavaScript框架，易于学习并适用于各种规模的Web项目，专注于视图层。
官网地址：https://vuejs.org
基础示例：
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
- Angular
简介：由Google支持的完整前端框架，提供了全面的解决方案来创建复杂的Web应用程序。
官网地址：https://angular.io
Angular 的入门相对复杂一些，因为它通常需要使用CLI工具来生成项目结构。这里提供的是一个非常简单的直接在HTML中使用的例子，但请注意这并不是推荐的用法。
<!DOCTYPE html>
<html>
<head>
<title>Angular Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
</head>
<body ng-app="">
<div>
<input type="text" ng-model="name">
<h1>Hello, {{name}}!</h1>
</div>
</body>
</html>
- Bootstrap
简介：最流行的CSS框架，用于更快、更简单地进行Web开发。它包括预定义的样式和布局选项。
官网地址：https://getbootstrap.com
基础示例：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Demo</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Hello, Bootstrap!</h1>
<button type="button" class="btn btn-primary">Primary Button</button>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>
</html>
- D3.js
简介：用于基于数据操作文档的JavaScript库，使用户能够使用HTML、SVG和CSS生成复杂的图表。
官网地址：https://d3js.org
基础示例：
<!DOCTYPE html>
<html>
<head>
<title>D3.js Demo</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<script>
var svg = d3.select("body")
.append("svg")
.attr("width", 50)
.attr("height", 50);
svg.append("circle")
.attr("cx", 25)
.attr("cy", 25)
.attr("r", 20)
.style("fill", "blue");
</script>
</body>
</html>
- Lodash
简介：提供一致性、模块化、高性能的辅助函数，以简化常见的JavaScript任务。
官网地址：https://lodash.com
基础示例：
<!DOCTYPE html>
<html>
<head>
<title>Lodash Demo</title>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
</head>
<body>
<script>
console.log(_.chunk(['a', 'b', 'c', 'd'], 2));
// 输出: [["a", "b"], ["c", "d"]]
</script>
</body>
</html>
- Axios
简介：基于Promise的HTTP客户端，可以用于浏览器和Node.js。
官网地址：https://axios-http.com
基础示例：
<!DOCTYPE html>
<html>
<head>
<title>Axios Demo</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<script>
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.error(error);
});
</script>
</body>
</html>
扫一扫
2607
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
