目錄
1.基礎知識
1.基礎
-
<script type="text/javascript"></script>一般寫在頭文件中，一種弱語言，可以寫多個，變量賦值後不要改變類型，關鍵字區分大小寫，顧名思義，不能以數字開頭。
-
alert("hello world!");警告框顯示
-
document.write("hello world");打印
-
<script type="text/javascript" src="demo.js">引入外部語句
2.自動數據類型
var temp="1"+1;
alert(temp);
var tmp=1-"2";//-1
var tmp=1-"2a";//NaN
alert(tmp);
-
運算符：算術、關係、邏輯、自增、自減、賦值；
-
自動類型轉換：任何類型的數據和字符串相加，其他數據類型自動轉換爲字符串，表示字符串拼接；
-
查看語法錯誤：谷歌瀏覽器：chome控制檯F12；
3.表達式和賦值
代碼規範
1.注意層級縮進；tab=4空格；
2.； ，後面跟空格 運算符=+前後空格；
3.每條語句加；
看錶達式：
1.功能；
2.表達式值，比如100, 2+3；
3.細分：算術表達式；
賦值運算符：= 複合賦值運算：+=
4.強制數據類型
1.除了相加操作，任何數據類型與數字做運算，其他類型都會自動轉換爲數字在運算；
2.通過Boolean()強制轉換爲布爾型，數字0轉成布爾爲false，非0均爲true；空字符串轉爲false，否則爲true；特殊轉爲false；
3.Number（）將別的數字類型轉爲數字；非數字字符串轉爲NaN; 1.特殊：null：0；underined：NaN
4.parseInt()取整 20a轉爲20
5.parseFloat() 取浮點數
6.分母可以取0；
5.運算符
5.1 一元運算符
只能操作一個值的運算符；a++，a--；--a；++a
5.2 關係運算符
1. 比較字符創編碼值，字符以二進制方式存儲，可以轉換爲十進制進行比較，ASCII碼錶 ；
2.逐位比較；
3.兩個操作數有一個是數值，則將另外一個轉爲數值；
在等於和不等於比較上，非數值：
1.一個操作數爲布爾值，則比較前轉爲數值；
2.一個操作數爲字符串，比較前轉爲數值；
3.一個爲NaN,則==轉爲false，！=爲true；
全等和全不等上====，！==，判斷值相等，數據類型也必須相等
5.3 邏輯運算符
&&，||，！
6.流程語句
選擇語句：
if(){
}else if(){
}
else{
}
}
switch和三目：
// switch(){
// case 常量1：
// break;
// case 常量2；
// break;
// default:
// break;
// }
/*
三目：表達式1？表達式2：表達式3；
*/
循環語句：
1.while
2.dowhile
3.for
4.break,continue;
2.數組與字符串
1.數組定義
var arr=[1,true,"hello"];
alert(arr);
alert(arr[0]);
2.屬性和遍歷
var arr=[1,true,"hello"];
alert(arr.length);//屬性
var srr=[10,20,30,40];
alert(srr[1+2]);
var arr=[];
for(var i=0;i<10;i++)
{
arr[i]=Math.random();//隨機數
}
alert(arr);
for (var i in arr)//效率高
{
document.write(arr[i]+"<br />");
}
3.棧方法和隊列方法
<script type="text/javascript">
var arr=["a","b","c"];
var srr= arr.push("c","d");//返回值是長度
alert(arr);//a,b,c,c,d
alert(srr);//5
var trr=arr.pop();//返回值是去除的元素，先進後出
alert(arr);//a,b,c,c
//隊列
var trr=arr.shift();//先進先出，b,c,c
alert(arr);
var srr=arr.unshift("ff");//頭部插入，返回值是長度
alert(arr);//ff,b,c,c
</script>
4.方法
<script type="text/javascript">
var arr=["a","b","c"];
var arr2=["vv","ss"];
var ner=arr.concat(arr2);//合併a,b,c,vv,ss
alert(ner);
var ner=arr.slice(1,2);//截取，不包括右端
alert(ner);//b
arr.splice(1,1) //1.刪除:start,長度，替換的元素
alert(arr);//a,c
arr.splice(1,0,"dd"); //2.插入
alert(arr);//a,dd,c
//替換就是先刪除後插入
</script>
5.二維數組
在數組元素中元素還爲數組
var arr=[[] [] []]
6.字符串
概念
var str="hello";//創建
alert(str.length);//屬性
alert(str[1]);//訪問
字符串.方法()
3.函數
1.函數分類
1.無參 function 函數名（）{
函數體
}
function print(){
for(var i=0;i<10;i++){
document.write("hello world! <br/>");
}
}
2.有參函數
function print(n){
for(var i=0;i<n;i++){
document.write("hello world! <br/>");
}
}
print(5);
2.內置函數：alert()······
3.自定義函數：函數名爲標識符
4.arguments數組
function sum(){
for(var i=0;i<arguments.length;i++){
sum += arguments[i];
}
alert(sum);
}
sum(3,4,5,6);
2.返回值
function add(num1,num2){
return num1+num2;
}
var result=add(3,4);
alert(result);
3.作用域
var a=10;
function sum(){
var a=5;
alert(a);
}
alert(a);//10
sum();//5
alert(a);//10
4.遞歸
-
面試會用，但是工作一般禁止，如sum（100）=sum(99)+100;
function sum(n){
if(n==1){
return 1;
}
return sum(n-1)+n;
}
alert(sum(100));
5.事件驅動函數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){//頁面加載完畢才執行
var oBtn=document.getElementById("btn");
oBtn.onclick=function(){
alert(oBtn);
}
}
</script>
</head>
<body>
<input type="button" value="按鈕" id="btn" >
</body>
</html>
4.對象
1.創建
常用：var person={}；
日期對象：var d=new Date();
2.定時器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
var i=0;
window.onload=function(){
var oBtn=document.getElementById("btn");
oBtn.onclick=function(){//點擊後顯示
var timer=setInterval(function(){//匿名函數
document.write(i++ +"<br />");
if (i==5){
clearInterval(timer);
}
},1000);//函數，毫秒數
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="按鈕" >
</body>
</html>
5.BOM:瀏覽器對象模型
1.對話框
var res= confirm("請選擇確定和取消");
alert(res);
var aee=prompt("請輸入一個數",9);
2.open
<script type="text/javascript">
function init(){
var oBtn =document.getElementById("btn");
oBtn.onclick=function(){
open("http://www.baidu.com","百度");
}
}
</script>
3.history對象
<script type="text/javascript">
//保存用戶上網記錄
//history.length,.back()後退，.forward(),前進，.go():0,重載。正數前進，負數後退
window.onload=function(){
var oBtn=document.getElementById("btn");
oBtn.onclick=function(){
alert(history.length);
}
var oForward=document.getElementById("forward");
oForward.onclick=function(){
history.forward();
}
var oBack=document.getElementById("back");
oBack.onclick=function(){
history.back();
}
var oGo=document.getElementById("go");
oGo.onclick=function(){
history.go(2);
}
}
</script>
4.字符串實例
?id=5&search=ok
獲取url中search，通過傳入對應的key，返回key對應的value
例子：傳入id，返回5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
/*?id=5&search=ok
獲取url中search，通過傳入對應的key，返回key對應的value
例子：傳入id，返回5
*/
function getValue(search,key){
var start=search.indexOf(key);//返回第一次出現的位置，找不到就返回-1
if(start == -1){
return;
}else{
var end=search.indexOf("&",start);//第2個參數是查找的起始位置,O要大寫
if(end==-1){
end=search.length;
}
}
var str=search.substring(start,end);//提取子字符串
// alert(str)
var arr=str.split("=");
return arr[1];
}
var search = "?id=5&search=ok";
alert(getValue(search,"id"));
alert(getValue(search,"search"));
</script>
</head>
<body>
</body>
</html>
6.DOM：文檔對象模型
1.元素節點
innerHTML 獲取元素節點標籤間的內容
id； className ；tagName 獲取元素節點的標籤名；name
1.1Id節點
document.getElementById("div1");
1.2 TagName節點
document.getElementByTagName
參數：標籤名
功能：獲取當前頁面上所有符合該標籤名標準的元素節點
返回值：數組
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementsByTagName("li");
alert(oDiv);//[object HTMLCollection]
alert(oDiv.length);//8
var oli=document.getElementById("ul1");
var oLi=oli.getElementsByTagName("li");
alert(oLi.length);//4
for(var i=0;i<oLi.length;i++){
alert(oLi[i].innerHTML);// 1111 333 444 555
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>11111</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<ol>
<li>11111</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ol>
</body>
</html>
1.3 Name節點
document.getElementsByName()
參數：name的值
返回值：數組
只有文本輸入框的元素節點纔有
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementsByName("hello");
alert(oDiv.length);
}
</script>
</head>
<body>
<div name="hello">
</div>
<span name="hello"></span>
<input name="hello">
</body>
</html>
1.4 ClassName節點
document.getElementsByClassName()
參數：calss
返回值：數組
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementsByClassName("box");
alert(oDiv.length);
}
</script>
</head>
<body>
<ul id="ul1">
<li>11111</li>
<li class="box">333</li>
<li>444</li>
<li>555</li>
</ul>
<ol>
<li>11111</li>
<li class="box">333</li>
<li>444</li>
<li class="box">555</li>
</ol>
</body>
</html>
1.5 封裝函數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <style>
#div1{
background-color: red;
width:300px;
}
</style> -->
<script type="text/javascript">
//封裝函數簡化操作，css選擇器,id,.className,tagName,name=xxx,
function $(vArg){
switch(vArg[0]){
case "#"://id
return document.getElementById(vArg.substring(1));
break;
case "."://className
return document.getElementsByClassName(vArg.substring(1));
break;
default:
var str=vArg.substring(0,5);
if(str=="name="){
return document.getElementsByName(vArg.substring(5));
}else{
return document.getElementsByTagName(vArg);
}
break;
}
}
window.onload=function(){
alert($("#div1").innerHTML);
alert($(".box").length);
alert($("div").length);
alert($("name=hello").length);
}
</script>
</head>
<body>
<div id="div1">11111</div>
<div class="box">222</div>
<div class="box">3333</div>
<div name="hello">4444</div>
</body>
</html>
2.獲取當前樣式
getComputedStyle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#div1{
background-color: red;
width:300px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
// alert(oDiv.stytle.width);
//獲取當前有效樣式
alert(getComputedStyle(oDiv)["width"]);
}
</script>
</head>
<body>
<div id="div1" ></div>
</body>
</html>
3.操作當前節點元素
setAttribute，removeAttribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--
set/getAttribute()
removeArribute()
操作當前元素節點中某個屬性
-->
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.setAttribute("title","xxx");
oDiv.removeAttribute("name");
}
</script>
</head>
<body>
<div id="div1" title="hello" name="world" class="box">11111</div>
</body>
</html>