4.前端基礎(chǔ)之JS
簡述
掌握了解
JavaScript(js)的基本使用，以及jquery常用操作，能夠處理前端交互,使用ajax請求數(shù)據(jù)微驶。
JS基礎(chǔ)
js代碼必須位于 <script> 與 </script> 標(biāo)簽之間
建議寫在html頁面最底部沈撞，因為瀏覽器加載順序從上至下，代碼最后運行
js有不同版本害驹，es5,es6移国，有一些新特性，如果使用新特性荷逞，需考慮兼容性媒咳。就像php5 php7語言的不同版本
輸出
兩種基本輸出方式，方便調(diào)試代碼
打印在控制臺种远，瀏覽器開發(fā)者工具console
console.log('xxxx');
建議選擇該方式涩澡，因為可以顯示更多內(nèi)容更詳細，數(shù)組等
每一條語句通常分號結(jié)尾
彈出對話框
alert('xxx');
數(shù)據(jù)類型
數(shù)字
字符串坠敷，可以使用單引號或雙引號
數(shù)組
//方式1
var cars=new Array();
cars[0]="Saab";
//方式2
var cars=["Saab","Volvo","BMW"];
以上兩種比較常用
//方式3
var cars=new Array("Saab","Volvo","BMW");
操作數(shù)組
cars[0]
二維數(shù)組
var xxx=[
[1,2],
[a,b]
];
對象
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
操作對象
var age = person.age;
變量聲明var a = 5; 使用var聲明創(chuàng)建變量
函數(shù)
function xxx(a,b){
var c = a+b;
return c;
}
常用語句
加減乘除
= + - * /
判斷比較
!=不等于
等于==
大于>小于<
與或非
(a>1)&&(b>1) 只有兩邊都正確妙同，返回true
(a>1)||(b>1) 任何一個正確，反正true
! 否定
條件
if else
if (condition){
當(dāng)條件為 true 時執(zhí)行的代碼
}else{
當(dāng)條件不為 true 時執(zhí)行的代碼
}
多種情況時膝迎，增加else if(condition1)
適用情況最多粥帚，一般情況判斷用if else即可
switch(n){
case 1: n=1時執(zhí)行代碼塊 1 break;
case 2: 執(zhí)行代碼塊 2 break;
default: 與 case 1 和 case 2 不同時執(zhí)行的代碼
}
當(dāng)情況很多，進行匹配限次，用switch
注意不要漏掉break
如根據(jù)返回結(jié)果值匹配芒涡，如訂單處理，根據(jù)返回訂單狀態(tài)status卖漫，進行不同處理
三目運算符
var a =(age<18) ? "年齡太小":"年齡已達到";
如果變量 age 中的值小于 18费尽，則向變量 a 賦值 "年齡太小"，否則賦值 "年齡已達到"懊亡。
很常用的判斷用法依啰，適合簡單的判斷不要都用if else
循環(huán)
1.for循環(huán)，最常用
for (var i=0;i<cars.length;i++)
執(zhí)行代碼
}
通常循環(huán)數(shù)組內(nèi)容店枣，當(dāng)i<數(shù)組cars的長度速警，即為循環(huán)數(shù)組
配合數(shù)組.length 獲取數(shù)組長度
2.For/In 循環(huán)
3.while
4.do while
語句部分，大多數(shù)編程語言寫法很相似鸯两，基本上通用闷旧，個別地方不同
this
表示當(dāng)前的引用
注意不同情況下this指代內(nèi)容不同
Json
json是用來js和后端服務(wù)器交互的通用數(shù)據(jù)形式，API接口通常返回的數(shù)據(jù)也是json形式
json形式和js的對象相似
{"sites":[ {"name":"Runoob", "url":"www.runoob.com"}, {"name":"Google", "url":"www.google.com"}, {"name":"Taobao", "url":"www.taobao.com"}
]}
JSON.parse()钧唐，解析json忙灼，用于將一個 JSON 字符串轉(zhuǎn)換為 JavaScript 對象。
JSON.stringify()用于將 JavaScript 值轉(zhuǎn)換為 JSON 字符串。
正則表達式
適用于處理匹配字符串该园，通常用于匹配文本內(nèi)容
如酸舍，判斷用戶發(fā)表內(nèi)容是否有 wx號，手機號里初，檢測廣告
較多內(nèi)容啃勉，此處不展開
常用函數(shù)
1.瀏覽器相關(guān)
window.location.href = "url地址如xxx.com"; 打開新頁面
window.history.back(); 返回上一頁
2.數(shù)組操作
x.length; 數(shù)組長度
x.indexOf("a"); 看a在數(shù)組中位置，常用來判斷數(shù)組中是否存在a
x.push("a"); 數(shù)組末尾追加新元素
x.concat(a); 數(shù)組x合并數(shù)組a双妨，返回合并后數(shù)組
x.sort(); 數(shù)組排序
3.字符串操作
x.length; 字符串長度
x.concat(a); 兩個字符串x和a連接
x.indexOf("a"); 常用來判斷字符串中是否存在a
replace() 方法用于在字符串中用一些字符替換另一些字符
substr() 方法可在字符串中抽取從指定下標(biāo)開始的指定數(shù)目的字符
substring() 方法用于提取字符串中介于兩個指定下標(biāo)之間的字符淮阐。
4.計時器
setInterval()
不斷執(zhí)行，間隔指定的毫秒數(shù)不停地執(zhí)行指定的代碼刁品。
setTimeout()
倒計時泣特，在指定的毫秒數(shù)后執(zhí)行指定代碼。
這兩個適用于寫一些定時操作挑随，如状您，定時刷新加載數(shù)據(jù)，時間限制倒計時
5.數(shù)據(jù)類型轉(zhuǎn)換
parseInt(x) 轉(zhuǎn)換為整數(shù)
parseFloat(x) 轉(zhuǎn)換為小數(shù)
xx.toFixed(2) 保留兩位小數(shù)
6.時間操作
new Date() // 當(dāng)前日期和時間
var timestamp = new Date().getTime(); //當(dāng)前時間戳
時間戳與日期格式轉(zhuǎn)換
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;
}
常用事件
事件在用戶的操作后觸發(fā)執(zhí)行竞阐，如點擊某個按鈕后，執(zhí)行click點擊事件對應(yīng)函數(shù)內(nèi)容
事件操作通常配合jquery使用
onclick 鼠標(biāo)點擊某個對象
onchange用戶改變域的內(nèi)容暑劝，如改變input內(nèi)容
onblur元素失去焦點
onkeydown某個鍵盤的鍵被按下
onsubmit提交按鈕被點擊
Ajax
ajax就是異步更新的技術(shù)骆莹，簡單說不刷新頁面的情況下，get或者post和后端服務(wù)器交互
最常用的交互方法担猛，用來請求數(shù)據(jù)
通常傳統(tǒng)頁面幕垦，get或者post數(shù)據(jù)需要刷新網(wǎng)頁，體驗不好傅联，使用ajax先改，不需要重新刷新頁面，即可與后端交互數(shù)據(jù)
通常配合jquery蒸走，因為jq封裝簡化了ajax寫法
雖然很方便仇奶，無需刷新，但是傳統(tǒng)form表單方式使用也不可忽視
$.ajax({
url: "url地址xx.com/xx", //請求的接口地址
data: {name: 'jenny'}, //發(fā)送的數(shù)據(jù)內(nèi)容
type: "POST", //形式get或者post
dataType: "json", //數(shù)據(jù)json形式
success: function(data) {
//成功后執(zhí)行的代碼
}
});
form表單提交
serialize() 方法通過序列化表單值 比驻，獲取表單form的內(nèi)容该溯，不需要一個一個獲取表單中的值
$(".form").serialize();
此外有簡寫方法
//get方法
$.get(
"接口url",
{key1:"value1",key2:"value2"}, //請求內(nèi)容
function(data){
//成功后執(zhí)行的代碼
});
//post方法
$.post(
"接口url",
{key1:"value1",key2:"value2"}, //請求內(nèi)容
function(data){
//成功后執(zhí)行的代碼
});
注意ajax跨域情況，是一種安全策略别惦，js只能操作自己域下的資源狈茉，其他域不能訪問
常用方案1，后端允許跨域掸掸，并返回jsonp數(shù)據(jù)
方案2氯庆，后端做代理蹭秋，寫一個API接口，后端請求數(shù)據(jù)并返回堤撵，前端ajax請求該代理API仁讨，避免跨域
Jquery基礎(chǔ)
jquery就是一個js的函數(shù)庫，簡化代碼寫法粒督，更加方便
常用來操作html元素陪竿，事件處理，ajax
使用前屠橄，必須引入
<script src="jquery.min.js"></script>
src可以是網(wǎng)絡(luò)地址如知名cdn庫提供的地址，可以是本地地址
min.js 通常代表壓縮過的js文件闰挡，如果下載其他js插件锐墙，有很多，選擇min.js一般是壓縮過的长酗，文件更小溪北，加載快
就緒事件
防止在網(wǎng)頁沒有加載完成之前運行，jq寫在此處夺脾，表示加載完后運行jq代碼
$(function(){
// 開始寫 jQuery 代碼
});
選擇器
用來選擇某個元素之拨，如某個按鈕，選擇后即可執(zhí)行該元素的相關(guān)操作咧叭，如事件處理蚀乔，修改元素內(nèi)容
id選擇
$("#test")
class選擇
$(".test")
事件處理
點擊事件
$(".test").click(function(){
$(this).hide();
});
class為test的元素（如button按鈕）點擊后，執(zhí)行的代碼
此處hide隱藏該元素菲茬，對應(yīng)的show顯示元素
該寫法為jq事件通用寫法吉挣，其他事件修改事件名稱即可，如click改成focus變?yōu)?focus事件
此處this代表當(dāng)前元素婉弹，事件操作中常用this
鍵盤事件
keypress
keyup
keydown
鼠標(biāo)懸停hover()
表單相關(guān)
change()內(nèi)容改變睬魂，如input框內(nèi)容改變
submit() 表單提交
元素獲得焦點
focus()
失去焦點
blur()
操作元素內(nèi)容
兩種功能
1.設(shè)置，修改元素值
2.獲取镀赌，獲取當(dāng)前值
text() - 設(shè)置或返回所選元素的文本內(nèi)容
html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）氯哮，如設(shè)置某個div的內(nèi)容
append() 方法，在元素結(jié)尾(通常如div商佛，p)追加內(nèi)容
val() - 設(shè)置或返回表單字段的值
$(".test2").html("<b>Hello world!</b>");
使用場景舉例
ajax加載請求商品列表
1.ajax請求獲取數(shù)據(jù)
2.因為獲取的是數(shù)據(jù)不是html喉钢，因此將處理過的要展示的商品數(shù)據(jù)拼接html代碼后
3.設(shè)置在某個div顯示
追加append或者設(shè)置html
設(shè)置屬性attr()
如來設(shè)置href，title等屬性
操作class
hasClass()檢查被選元素是否包含指定的 class 名稱
addClass()
向被選元素添加一個或多個類
removeClass()
從被選元素刪除一個或多個類
toggleClass() 方法威彰，該方法對被選元素進行添加/刪除類的切換操作
使用場景舉例
操作css出牧，通常用來改變顯示效果，不同的類class有不同的css效果歇盼，給某元素添加了類class之后舔痕，該元素有了類的css效果
