JavaScript
JavaScript是一門編程語言，瀏覽器內置了JavaScript語言的解釋器，所以在瀏覽器上按照JavaScript語言的規則編寫相應代碼之，瀏覽器可以解釋並做出相應的處理。
1.JavaScript代碼存在形式
<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script>
<!-- 方式二 -->
<script type"text/javascript">
Js代碼內容
</script>2.JavaScript代碼存在位置
HTML的head中
HTML的body代碼塊底部(推薦)
由於Html代碼是從上到下執行，如果Head中的js代碼耗時嚴重，就會導致用戶長時間無法看到頁面，如果放置在body代碼塊底部，那麼即使js代碼耗時嚴重，也不會影響用戶看到頁面效果，只是js實現特效慢而已。
3.變量
全局變量
局部變量
var key = 'value1' 局部變量
key = 'value' 全局變量
注：註釋 // 或 /* */
4.基本數據類型
1)數字（Number）
var page = 111;
var age = Number(18);
var a1 = 1,a2 = 2, a3 = 3;
parseInt("1.2");
parseFloat("1.2");
2)字符串(String)
var name = "javascript";
var name = String("javascript");
var age_str = String(18);
常用方法：
obj.trim()
obj.charAt(index)
obj.substring(start,end)
obj.indexOf(char)
obj.length
3)布爾(Boolean)
var status = true;
var status = false;
var status = Boolen(1==1)
4)數組(Array)
var names = ['a1', 'a2', 'a3']
var names = Array('a1', 'a2', 'a3')
常用方法：
添加
obj.push(ele) 追加
obj.unshift(ele) 最前插入
obj.splice(index,0,'content') 指定索引插入
移除
obj.pop() 數組尾部獲取
obj.shift() 數組頭部獲取
obj.splice(index,count) 數組指定位置後count個字符
切片
obj.slice(start,end)
合併
newArray ＝ obj1.concat(obj2)
翻轉
obj.reverse()
字符串化
obj.join('_')
長度
obj.length
字典
var items = {'k1': 123, 'k2': 'tony'}
5.循環語句
數組類型 var names = ["a1", "a2", "a3"];
方式一
for(var i=0;i<names.length;i++){
console.log(i);
console.log(names[i]);
}
方式二
for(var index in names){
console.log(index);
console.log(names[index]);
}
字典類型 var names = {"name": "a1", "age": 18};
for(var index in names){
console.log(index);
console.log(names[index]);
}
while(條件){
// break;
// continue;
}
6.條件語句
//if條件語句
if(條件){ ...
}else if(條件){ ...
}else{ ...
}
var name = 'a1';
var age = 1;
// switch,case語句
switch(name){
case 'a1':
age = 123;
break;
case 'a2':
age = 456;
break;
default :
age = 777;
}
7.異常處理
try{
內容1
}catch(e) {
內容2
}finally{
內容3
}
8.函數
函數的聲明
function func(arg){
return true;
}
匿名函數
var func = function(arg){
return "tony";
}
自執行函數
(function(arg){
console.log(arg);
})('123')
9.面向對象
function Foo (name,age) {
this.Name = name;
this.Age = age;
this.Func = function(arg){
return this.Name + arg;
}
}
var obj = new Foo('a1', 01);
var ret = obj.Func("sb");
console.log(ret);
Dom
文檔對象模型（Document Object Model，DOM）是一種用於HTML和XML文檔的編程接口。它給文檔提供了一種結構化的表示方法，可以改變文檔的內容和呈現方式。我們最爲關心的是，DOM把網頁和腳本以及其他的編程語言聯繫了起來。DOM屬於瀏覽器，而不是JavaScript語言規範裏的規定的核心內容。
注：一般說的JS讓頁面動起來泛指JavaScript和Dom
1.選擇器
document.getElementById('id');
document.getElementsByName('name');
document.getElementsByTagName('tagname');
document.getElementsByClassName('classname');
2.內容
innerText
innerHTML
var obj = document.getElementById('nid')
obj.innerText # 獲取文本內容
obj.innerText = "hello" # 設置文本內容
obj.innerHTML # 獲取HTML內容
obj.innerHTML = "<h1>asd</h1>" # 設置HTML內容
特殊的：
input 系列
textarea 標籤
select 標籤
value 屬性操作用戶輸入和選擇的值
3.創建標籤
方式一：
var obj = document.createElement('a');
obj.href = "http://www.baidu.com";
obj.innerText = "this is a test text";
var container = document.getElementById('container');
//container.appendChild(obj);
//container.insertBefore(obj, container.firstChild);
//container.insertBefore(obj, document.getElementById('hhh'));
方式二：
var container = document.getElementById('container');
var obj = "<input type='text' />";
container.innerHTML = obj;
// 'beforeBegin', 'afterBegin', 'beforeEnd', 'afterEnd'
//container.insertAdjacentHTML("beforeEnd",obj);
4.標籤屬性
var obj = document.getElementById('container');
固定屬性
obj.id
obj.id = "nid"
obj.className
obj.style.fontSize = "88px";
自定義屬性
obj.setAttribute(name,value)
obj.getAttribute(name)
obj.removeAttribute(name)
5.提交表單
document.getElementById('form').submit()
<form id="form" action="https://www.sogou.com/web?">
<input type="text" value="query"/>
<input type="submit" value="submit"/>
<input type="button" onclick="submit_form()" value="button"/>
</form>
<script type="text/javascript">
function submit_form(){
// document.getElementById('form').submit()
// window.location.href = 'http://www.baidu.com'
window.open('http://www.baidu.com')
}
</script>其他函數：
console.log()
alert()
confirm()
window.location.href = 'http://www.baidu.com' // 跳轉
window.open('http://www.baidu.com')
// URL和刷新
location.href
location.href = "url" window.location.reload()
6.事件
7.其他功能
// 定時器
setInterval("alert()",2000); // 2秒執行一次
clearInterval(obj) // 清除
setTimeout(); // 只執行一次
clearTimeout(obj) //
實例：
1）搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="search" value="請輸入關鍵字" onfocus="Focus();" onblur="Blur();"/>
<script type="text/javascript">
function Focus(){
var nid = document.getElementById('search');
var value = nid.value;
if (value == '請輸入關鍵字'){
nid.value = '';
}
}
function Blur(){
var nid = document.getElementById('search');
var value = nid.value;
if (!value.trim()){
nid.value = '請輸入關鍵字';
}
}
</script>
</body>
</html>2）title跑馬燈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>歡迎xxx蒞臨指導</title>
</head>
<body>
<input type="button" onclick="Stop();" value="停止">
<script>
obj = setInterval('Func()',1000);
function Stop(){
clearInterval(obj)
}
function Func(){
var text = document.title;
var firstChar= text.charAt(0)
var subText = text.substring(1,text.length)
var newTitle = subText + firstChar
document.title = newTitle
}
</script>
</body>
</html>