4.前端基础之JS

简述

掌握了解
JavaScript(js)的基本使用，以及jquery常用操作，能够处理前端交互,使用ajax请求数据。

JS基础

js代码必须位于 <script> 与 </script> 标签之间
建议写在html页面最底部，因为浏览器加载顺序从上至下，代码最后运行
js有不同版本，es5,es6，有一些新特性，如果使用新特性，需考虑兼容性。就像php5 php7语言的不同版本

输出

两种基本输出方式，方便调试代码
打印在控制台，浏览器开发者工具console
console.log('xxxx');

建议选择该方式，因为可以显示更多内容更详细，数组等
每一条语句通常分号结尾

弹出对话框
alert('xxx');

数据类型

数字
字符串，可以使用单引号或双引号

数组

//方式1
var cars=new Array();
cars[0]="Saab";
//方式2
var cars=["Saab","Volvo","BMW"];
以上两种比较常用

//方式3
var cars=new Array("Saab","Volvo","BMW");

操作数组
cars[0]

二维数组

var xxx=[
    [1,2],
    [a,b]
]; 

对象

var person = {
firstName:"John", 
lastName:"Doe", 
age:50, 
eyeColor:"blue"
};

操作对象
var age = person.age;

变量声明var a = 5; 使用var声明创建变量

函数

function xxx(a,b){
 var c = a+b;
 return c;
}

常用语句

加减乘除
= + - * /

判断比较
!=不等于
等于==
大于>小于<

与或非
(a>1)&&(b>1) 只有两边都正确，返回true
(a>1)||(b>1) 任何一个正确，反正true
! 否定

条件
if else

if (condition){    
当条件为 true 时执行的代码
}else{    
当条件不为 true 时执行的代码
}

多种情况时，增加else if(condition1)
适用情况最多，一般情况判断用if else即可

switch(n){       
case 1:                n=1时执行代码块 1         break;
case 2:                执行代码块 2                break;
default:                与 case 1 和 case 2 不同时执行的代码
}

当情况很多，进行匹配，用switch
注意不要漏掉break
如根据返回结果值匹配，如订单处理，根据返回订单状态status，进行不同处理

三目运算符
var a =(age<18) ? "年龄太小":"年龄已达到";

如果变量 age 中的值小于 18，则向变量 a 赋值 "年龄太小"，否则赋值 "年龄已达到"。
很常用的判断用法，适合简单的判断不要都用if else

循环
1.for循环，最常用
for (var i=0;i<cars.length;i++)
执行代码
}

通常循环数组内容，当i<数组cars的长度，即为循环数组
配合数组.length 获取数组长度

2.For/In 循环
3.while
4.do while

语句部分，大多数编程语言写法很相似，基本上通用，个别地方不同

this
表示当前的引用
注意不同情况下this指代内容不同

Json
json是用来js和后端服务器交互的通用数据形式，API接口通常返回的数据也是json形式
json形式和js的对象相似

{"sites":[    {"name":"Runoob",     {"name":"Google",     {"name":"Taobao", 
]}

JSON.parse()，解析json，用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()用于将 JavaScript 值转换为 JSON 字符串。

正则表达式
适用于处理匹配字符串，通常用于匹配文本内容
如，判断用户发表内容是否有 wx号，手机号，检测广告
较多内容，此处不展开

常用函数

2.数组操作
x.length; 数组长度
x.indexOf("a"); 看a在数组中位置，常用来判断数组中是否存在a
x.push("a"); 数组末尾追加新元素
x.concat(a); 数组x合并数组a，返回合并后数组
x.sort(); 数组排序

3.字符串操作
x.length; 字符串长度
x.concat(a); 两个字符串x和a连接
x.indexOf("a"); 常用来判断字符串中是否存在a

replace() 方法用于在字符串中用一些字符替换另一些字符
substr() 方法可在字符串中抽取从指定下标开始的指定数目的字符
substring() 方法用于提取字符串中介于两个指定下标之间的字符。

4.计时器
setInterval()
不断执行，间隔指定的毫秒数不停地执行指定的代码。
setTimeout()
倒计时，在指定的毫秒数后执行指定代码。

这两个适用于写一些定时操作，如，定时刷新加载数据，时间限制倒计时

5.数据类型转换
parseInt(x) 转换为整数

parseFloat(x) 转换为小数

xx.toFixed(2) 保留两位小数

6.时间操作
new Date() // 当前日期和时间

var timestamp = new Date().getTime(); //当前时间戳

时间戳与日期格式转换

function timestampToTime(timestamp) {
var  date = new Date(timestamp * 1000);
//时间戳为10位需* 1000，时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
var D = date.getDate() + ' ';
var h = date.getHours() + ':';
var m = date.getMinutes() + ':';
var s = date.getSeconds();
return Y+M+D+h+m+s;
}

常用事件

事件在用户的操作后触发执行，如点击某个按钮后，执行click点击事件对应函数内容
事件操作通常配合jquery使用

onclick 鼠标点击某个对象
onchange用户改变域的内容，如改变input内容
onblur元素失去焦点
onkeydown某个键盘的键被按下
onsubmit提交按钮被点击

Ajax

ajax就是异步更新的技术，简单说不刷新页面的情况下，get或者post和后端服务器交互

最常用的交互方法，用来请求数据
通常传统页面，get或者post数据需要刷新网页，体验不好，使用ajax，不需要重新刷新页面，即可与后端交互数据
通常配合jquery，因为jq封装简化了ajax写法
虽然很方便，无需刷新，但是传统form表单方式使用也不可忽视

$.ajax({
url:   //请求的接口地址
data: {name: 'jenny'},  //发送的数据内容
type: "POST",  //形式get或者post
dataType: "json",   //数据json形式
success: function(data) {
        //成功后执行的代码
    }
});

form表单提交
serialize() 方法通过序列化表单值 ，获取表单form的内容，不需要一个一个获取表单中的值
$(".form").serialize();

此外有简写方法

//get方法

$.get(
"接口url",  
{key1:"value1",key2:"value2"}, //请求内容
function(data){
//成功后执行的代码
});

//post方法
$.post(
"接口url",  
{key1:"value1",key2:"value2"}, //请求内容
function(data){
//成功后执行的代码
});

注意ajax跨域情况，是一种安全策略，js只能操作自己域下的资源，其他域不能访问

常用方案1，后端允许跨域，并返回jsonp数据
方案2，后端做代理，写一个API接口，后端请求数据并返回，前端ajax请求该代理API，避免跨域

Jquery基础

jquery就是一个js的函数库，简化代码写法，更加方便
常用来操作html元素，事件处理，ajax

使用前，必须引入

<script src="jquery.min.js"></script>
src可以是网络地址如知名cdn库提供的地址，可以是本地地址

min.js 通常代表压缩过的js文件，如果下载其他js插件，有很多，选择min.js一般是压缩过的，文件更小，加载快

就绪事件

防止在网页没有加载完成之前运行，jq写在此处，表示加载完后运行jq代码

$(function(){   
// 开始写 jQuery 代码
});

选择器

用来选择某个元素，如某个按钮，选择后即可执行该元素的相关操作，如事件处理，修改元素内容

id选择
$("#test")

class选择
$(".test")

事件处理

点击事件

$(".test").click(function(){  
$(this).hide();
});

class为test的元素（如button按钮）点击后，执行的代码

此处hide隐藏该元素，对应的show显示元素
该写法为jq事件通用写法，其他事件修改事件名称即可，如click改成focus变为 focus事件
此处this代表当前元素，事件操作中常用this

键盘事件
keypress
keyup
keydown

鼠标悬停hover()

表单相关
change()内容改变，如input框内容改变
submit() 表单提交

元素获得焦点
focus()
失去焦点
blur()

操作元素内容

两种功能
1.设置，修改元素值
2.获取，获取当前值

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记），如设置某个div的内容

append() 方法，在元素结尾(通常如div，p)追加内容

val() - 设置或返回表单字段的值

$(".test2").html("<b>Hello world!</b>");

使用场景举例
ajax加载请求商品列表
1.ajax请求获取数据
2.因为获取的是数据不是html，因此将处理过的要展示的商品数据拼接html代码后
3.设置在某个div显示
追加append或者设置html

设置属性attr()
如来设置href，title等属性

操作class

hasClass()检查被选元素是否包含指定的 class 名称

addClass()
向被选元素添加一个或多个类

removeClass()
从被选元素删除一个或多个类

toggleClass() 方法，该方法对被选元素进行添加/删除类的切换操作

使用场景举例
操作css，通常用来改变显示效果，不同的类class有不同的css效果，给某元素添加了类class之后，该元素有了类的css效果