JavaScript 是 Web 的编程语言。
所有现代的 HTML 页面都使用 JavaScript。
JavaScript web 开发人员必须学习的 3 门语言中的一门：
- HTML 定义了网页的内容
- CSS 描述了网页的布局
- JavaScript 网页的行为
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 用法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
样例：
<script>
alert("我的第一个 JavaScript");
</script>
JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
JavaScript教程：
JavaScrip 语法、数据类型、对象、函数、作用域、事件等详细内容,参考JavaScript教程。
参考链接：https://www.runoob.com/js/js-tutorial.html
参考链接：https://www.runoob.com/js/js-examples.html
JavaScript 对象、浏览器对象、HTML DOM 对象参考手册，以下手册包含了每个对象、属性、方法的实例。
参考链接：https://www.runoob.com/jsref/jsref-tutorial.html
HTML DOM 教程：
https://www.runoob.com/htmldom/htmldom-tutorial.html
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
样例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>如果你点我，我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
</body>
</html>
什么是 jQuery ？
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
提示： 除此之外，Jquery还提供了大量的插件。
jQuery 语法
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。
基础语法： $(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
- $(this).hide() - 隐藏当前元素
- $("p").hide() - 隐藏所有 <p> 元素
- $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
- $("#test").hide() - 隐藏所有 id="test" 的元素
jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
元素选择器 ：
$("p")
#id 选择器：
$("#test")
.class 选择器：
$(".test")
jQuery 事件
jQuery 是为事件处理特别设计的。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
样例：
$("p").click(function(){
// 动作触发后执行的代码!!
$(this).hide();
});
jQuery - AJAX 简介
jQuery load() 方法：
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法:
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
样例：
$("#div1").load("demo_test.txt");
jQuery - AJAX get() 和 post() 方法
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
HTTP 请求：GET vs. POST：
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
语法:
$.get(URL,callback);
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
jQuery其他：
jQuery 效果、jQuery Html、jQuery遍历、jQuery Ajax、jQuery JSONP、jQuery插件等详细信息参考jQuery教程
参考地址：https://www.runoob.com/jquery/jquery-tutorial.html
样例：
参考地址：https://www.runoob.com/jquery/jquery-examples.html
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
样例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
Vue教程: 模板语法、监听、样式绑定、表单、组件、路由等
参考地址：
https://www.runoob.com/vue2/vue-tutorial.html
参考文档：
https://cn.vuejs.org/v2/guide/syntax.html
建立项目：(相关命令参考node.js)
全局安装 vue-cli
cnpm install --global vue-cli
创建一个基于 webpack 模板的新项目
vue init webpack my-project
cd my-project
cnpm install
cnpm run dev
目录结构: 可以使用VSCode打开文件目录：
jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。
开始使用 jQuery EasyUI
下载库，并在您的页面中引用 EasyUI CSS 和 JavaScript 文件。
主要用于后台管理系统。
主要功能有菜单按钮、布局、数据网格、窗口、树型菜单、表单等
参考链接:
https://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html
下载及安装：node-v10.16.0-x64.msi
验证版本：node –version
cnpm 安装（国内地址速度快推荐使用）淘宝镜像地址
npm install -g cnpm --registry=https://registry.npm.taobao.org
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
样例1：
https://www.runoob.com/try/try.php?filename=tryajax_first
教程参考地址：
https://www.runoob.com/ajax/ajax-tutorial.html
JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快，更易解析。
样例：
{
"sites": [
{ "name":"菜鸟教程" , "url":"www.runoob.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
]
}
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。
JSON 具有自我描述性，更易理解。
JSON - 转换为 JavaScript 对象
JSON 文本格式在语法上与创建 JavaScript 对象的代码相同。
由于这种相似性，无需解析器，JavaScript 程序能够使用内建的 eval() 函数，用 JSON 数据来生成原生的 JavaScript 对象。
JSON.parse()
JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
语法：JSON.parse(text[, reviver])
JSON.stringify()
JSON 通常用于与服务端交换数据。
在向服务器发送数据时一般是字符串。
我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
语法：JSON.stringify(value[, replacer[, space]])
教程参考地址：
https://www.runoob.com/json/json-tutorial.html
图表插件：
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。
教程参考地址：
https://www.runoob.com/echarts/echarts-tutorial.html
教程:
https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
官网地址:
https://www.echartsjs.com/zh/index.html
扫一扫
2366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
