JavaScript 基础

简介

JavaScript 是运行在浏览器端的脚本语言, 是由浏览器解释执行的, 简称 JS。

JavaScript 文件名以 .js 做为后缀。

同为解释型的脚本语言 Python，两者的语法形式上，有很多相似之处。

JS 引入方式

与 CSS 相似，根据 JS 代码编写位置的不同，使用时的方式也不同。

行内式：直接在标签上编写 JS 代码，一般用于事件处理。
内嵌式：通过 <script></script> 来编写 JS 代码，可在页面的任意位置编写，一般在 head 标签中出现。
外链式：通过 <script src="js文件路径"></script> 引入 JS 文件中的代码，当使用 script 标签引入 JS 文件时，不可以在代码块中再编写 JS 代码。

JS 语法

注释

单行注释：以 // 开头
多行注释：以 /* */ 包裹的内容

定义变量

使用 var 或 let 关键字定义变量

var n = 100;
var s = "hello";
let x = 10;
let y = 200;

定义函数

使用 function 关键字定义函数，函数体使用 {} 包裹。

function show() {
  consolg.log("Show Run");
}

运算符

JavaScript 与其它语言一样，提供了丰富的运算符，且大多数运算符都是通用的，这里只介绍一些常用且特殊的运算符。

关系运算符： == 等于，只比较数值，不比较类型； === 全等于，即比较数值，也比较类型。
逻辑运算符： && 逻辑与， || 逻辑或， ! 逻辑非

条件语句

方式一

if (条件) {
}

方式二

if (条件) {
} else {
}

方式三

if(条件1){

}else if(条件2){

}else if(条件3){

}
...
else{

}

循环语句

for 循环

for (var i = 0; i < 10; i++) {}

while 循环

var i = 0;
while (i < 10) {
  i++;
}

do-while 循环

var i = 0;
do {
  i++;
} while (n < 10);

for ... of 循环

var data = [1, 2, 3, 4, 5];
for (let i of data) {
  console.log(i);
}

for ... in 循环

var data = [1, 2, 3, 4, 5];
for (let i in data) {
  console.log(i);
}

字符串及操作

字符串定义

字符串字面量可以使用 单引号 或者 双引号 指定，它们的处理方式相同。

const string1 = "A string primitive";
const string2 = "Also a string primitive";

模板字符串

使用 反引号 字符形式定义模板字符串，可以在其中通过 {} 插入 变量 或 表达式。

const name = "Tom";
const tempString = `My Name is ${name}`;

字符串操作

JavaScript 中提供了非常丰富的字符串操作方法，详细可参考手册使用。

字符串和数字类型或字符串类型的数据，直接可以使用 + 进行连接。
字符串.length ：获取字符串长度。
字符串.substring(): 提取字符串中介于两个指定下标之间的字符。
字符串.indexOf(): 搜索字符串，并从起始位置（0）开始计算返回字符串出现的位置。

数组与操作

数组定义

数组可以使用中括号包含若干元素数据，元素之间使用逗号分隔。

var nums = [1, 2, 3, 4, 5];

数组操作

JavaScript 中的数组同样提供了非常多的实用操作方法，详细可参考手册使用。

数组.length 可获取数组元素个数
数组.push(值) 可向数组中添加数据
数组.pop() 从数组中删除最后一个元素
数组.splice(start,num, ele1,...,eleN) 向数组中插入，删除，替换数据。

对象

JavaScript 中的对象 Object，可以简单理解成 名称 - 值 对（而不是 键值对：现在，ES 2015 的映射表（Map），比对象更接近键值对），JavaScript 中的对象与下面这些概念类似：

Python 中的字典（Dictionary）
Perl 和 Ruby 中的散列/哈希（Hash）
C/C++ 中的散列表（Hash table）
Java 中的散列映射表（HashMap）

PHP 中的关联数组（Associative array）

var oObj = {
  name: "Tom",
  age: 88,
};

JQuery 介绍

jQuery 是一个 JavaScript 库，jQuery 极大地简化了 JavaScript 编程。

引用方式

在线引用

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

本地引用可直接通过浏览器访问在线引用地址，将请求的内容复制保存到本地的 js 文件中进行引用。

基本语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号 $ 为 jQuery 对象
选择符 (selector) 查询和查找` HTML 元素
jQuery 的 action() 执行对元素的操作

文档就绪事件

ready 事件当页面加载完成后执行该事件，相当于 window.onload 事件，但 ready 事件比 onload 事件执行更快。

//  默认事件
window.onload = function () {
  alert("onload");
};
//  jquery ready 事件
$(document).ready(function () {
  alert("ready");
});
//  jquery ready 事件简化形式
$(function () {
  alert("ready简化形式");
});

获取元素

JQuery 使用 选择器 获取目标元素，选择器语法同 CSS 中选择器完全一致。

$(".box");

操作元素

JQuery 提供两个方法用来操作元素中的内容

html(): 设置，获取元素中的内容，如果内容文本包含 HTML 代码会渲染。
text(): 设置，获取元素中的内容，如果内容文本包含 HTML 代码不会渲染，直接以文本形式显示。
append(): 向元素中追加 HTML 内容

$(function(){
    $(".box1").html("<h1>BBB</h1>")
    $(".box2").text("<h1>BBB</h1>")
    $(".box3").append("<span style='color:red'>你好</span>");

})

<div class="box1">A</div>
<div class="box2">A</div>
<div class="box3">A</div>

删除元素

-remove(): 删除被选元素（及其子元素） -empty(): 从被选元素中删除子元素

操作属性

JQuery 提供两个方法用来操作元素的属性

prop(): 设置，获取属性值。
val(): 设置，获取 input 标签中的 value 属性中的值。

// 获取属性值
$(".box1").prop("class")
// 设置属性值
$(".box1").prop({id:"box"})
// 设置 input 中的值
$("input").val("设置值")
// 获取 input 中的值
$("input").val()

<div class="box1">A</div>
<input type="text" name="" id="">

AJAX

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简单地说，在不重载整个网页的情况下，AJAX 通过向后台发送请求加载数据，并在网页上进行显示，实现页面局部刷新。

发送 GET 方式的请求

格式：$.get( URL [, data ] [, callback ] [, dataType ] )

URL：发送请求的 URL 字符串。
data：可选的，发送给服务器的 字符串 或 key/value 键值对。
callback：可选的，请求成功后执行的回调函数。
dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是 xml, json, script, 或 html）。

$.get(
  "/login",
  { username: "Tom", passwd: "123" },
  function (data) {
    console.log(data);
  },
  json
);

发送 POST 方式的请求

格式：$.post( URL [, data ] [, callback ] [, dataType ] )

URL：发送请求的 URL 字符串。
data：可选的，发送给服务器的 字符串 或 key/value 键值对。
callback：可选的，请求成功后执行的回调函数。
dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是 xml, json, script, 或 html）。

$.post(
  "/login",
  { username: "Tom", passwd: "123" },
  function (data) {
    console.log(data);
  },
  json
);

总结

JS 引入方式
JS 语法
JQuery
AJAX 发起网络请求