1. 程式人生 > 其它 >半個月學習HTML CSS JS基礎知識總結下(內涵JS)

半個月學習HTML CSS JS基礎知識總結下(內涵JS)

技術標籤:javascript

從基本的程式設計知識,到用HTML,CSS配合JS實現動態頁面

基礎知識

  1. 基本操作引入
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// 彈出一個警告框
			alert('出入平安!!')
			// 在計算機頁面輸出東西
			document.write('我在頁面中顯示')
			// 在控制檯顯示
			console.log('猜猜我在哪啊'
) // 也可以使用:<script src="" type="text/javascript" charset="utf-8"> <!-- 這樣引入外面的Javascript 引入之後 不能在編寫程式碼了 寫了計算機也是忽略 --> </script> </head> <body> <!-- 寫在屬性中不方便維護 不推薦使用 --> <!-- 將js寫在onclick中 --> <button onclick="alert('討厭點我幹啥')"
>點我一下</button> <!-- 將js寫在超連結的href中 點選超連結時會執行js程式碼 --> <a href="javascript:alert('讓你點你就點!!');">你也點我一下唄</a> <a href="javascript:;"></a> </body>
  1. 基本知識
		<script type="text/javascript">
			// 字面量(不可改變):像 1,2,3等
			// 變數(用來儲存字面量) 以後常用
// 不能數字開頭 可以含有字母,數字,_,$ // 識別符號--utf-8中的東西都可以當作識別符號(例如中文) var a=123; // 不可以輸出var console.log(a); </script>
  1. 資料型別
			/**
			 * 基本資料型別:
			 * 			String,Number,Boolean,Null,Undefined
			 * 引用資料型別:
			 * 			Object
			 * 
			 * 可以利用 \ 來進行轉義
			 * 	\n(表示換行) \t(製表符) \"(表示 ") \'(表示 ')
			 * \\\\		表示兩個反斜槓
			 */
  1. number
<script type="text/javascript">
			/**
			 * 最大值:Number.MAX_VALUE
			 * 如果使用計算超過最大數字之後就會返回一個 number型別的
			 * 		Infinity 表示正無窮
			 * 		-Infinity 表示負無窮
			 * NaN是一個特殊的數字 表示Not A Number
			 * 例如a='abc'*'abc'
			 */
			var a=Number.MAX_VALUE;
			a=Number.MIN_VALUE;
			var b=0.3+0.3;
			// js進行浮點數進行計算 可能得到一個不準確的數字
			console.log(b);
			console.log(a);
			var c=null; //型別時object型別的
			var d=undefined  //型別還是undefined型別的
			console.log(typeof d)
			console.log(typeof c)
		</script>
  1. string,number boolean的型別轉化
<script type="text/javascript">
			/**
			 * String 
			 * 		呼叫toString() 方法
			 * 			除了null和undefined沒有上面的方法
			 */
			// var a=undefined
			// a=a.toString();
			// console.log(typeof a)
			// console.log(a)
			/**
			 * Number 
			 * 		呼叫函式Number()來進行轉化
			 * 			string-number
			 * 			如果是數字字串,直接轉化為數字
			 * 			如果有字母,返回undefined
			 * 			Boolean-number
			 * 			true----1 false----0
			 * 			null---0
			 * 			undefined---undefined
			 * 
			 * 		可以用parseInt()/parseFloat() 來對字串進行轉換
			 * 			不可以用來轉化純字母 從第一個開始
			 * 
			 * 	js中如果需要表示16進位制需要以 0X開頭
			 * 					8進位制-----0開頭
			 * 					2進位制-----0b開頭
			 * 
			 * 		指定的數字轉化用parseInt(a,10)----指定的數字轉化
			 */			
			// var a = undefined
			// a=Number(a)
			// console.log(a)
			// var b='123p'
			// b='t123'
			// b=parseInt(b)
			// console.log(b)
			/**
			 * Boolean()  
			 * 			數字--除了0/NaN其餘都是true
			 * 			字串---除了空串 都是true
			 * 			null和undefined 都是false
			 * 			物件會變成true
			 */
			
			var a=undefined
			a=Boolean(a)
			b=''
			b=Boolean(b)
			console.log(b)
			console.log(a)
		</script>
  1. 運算子
<script type="text/javascript">
			/**
			 * 運算子:typedof  
			 * 	算數運算子---非數字計算會先轉化為Number
			 * 		+:1數字直接計算 2兩個字串進行 拼串 3任何值和字串都先會轉化為字串
			 * 			利用3相當於toString() 轉化為字串的操作---直接+''----就可以
			 * 		- * /  和數字進行計算 都會自動轉化為 Number 然後進行計算
			 * 
			 * 一元運算子:
			 * 			+ 對於非Number  前面加一個+ 相當於 Number()
			 * 
			 * 自增和自減:
			 * 			a++和++a都是原變數增加1  
			 * 			a++ = 自增前的值/  ++a = 自增後的值
			 * 
			 * 			自減也是同理
			 * n1=10    n=n1++		n=10/n1=11
			 * 			n=++n1		n=12/n1=12
			 * n2=20	n=n2--		n=20/n2=19
			 * 			n=--n2		n=18/n2=18
			 * 
			 * 邏輯運算子 ! && ||
			 * 			!----非布林值轉化為布林值 進行轉化
			 * 				任意型別取兩次反 作用相當於Boolean()
			 * 
			 * 			&&---第一個為false  則不會看第二個值
			 * 				第一個值為true 返回第二個值------看看第二個
			 * 				第一個值為false 直接返回第一個值--第一個就不行-就不行
			 * 
			 * 			||---第一個為true	則不會看第二個值
			 * 				第一個值為true  返回第一個------直接放行
			 * 				第一個值為false 返回第二個-----再看看第二個
			 * 賦值運算子
			 * 			+=  -=  *=  /=  %=
			 * 
			 * 關係運算符--字串比較的是---字元編碼
			 * 			> < <= >= = == 
			 * 		==運算子  undefined==null 正確   前者衍生自後者
			 * 				NaN 和誰都不相等包括它本身  用isNaN() 判斷是否NaN
			 * 		!=
			 * 
			 * 		===不會自動給你轉化
			 * 		!==
			 * 
			 * 使用轉義字元輸出Unicode編碼
			 * 		\u四位編碼
			 * 		\#編碼---編碼需要的是10進位制
			 * 
			 * 三目運算子:條件表示式?語句一:語句二
			 *用來判斷最大值 var max=a>b?(a>c?a:c):(b>c?b:c)
			 * 
			 * 優先順序  物件裡面的 第一是 . [] new 第二是 ()
			 * 
			 * 程式碼塊 用來分組  沒有其他作用 
			 * 
			 */
			
			var a=1+'';
			console.log(typeof a)
			
			var b=1+ +'2'+3
			console.log(b)
			
		</script>
  1. for迴圈+ 1-100以內的質數+ 九九乘法表
<script type="text/javascript">
			/**
			 * for(初始化表示式;條件表示式;更新表示式){
				 * 語句
				 * }
			 */
			//輸出1-100以內的質數和
			var sum=0,i,j;
			for(i=2;i<100;i++){
				// 你要是在外面改變一次就不改變了
				var flag=true;
				for(j=2;j<=Math.sqrt(i);j++){
					if(i%j==0){
						flag=false;
						break;
					}
				} 
				if(flag){
					console.log(i);
					sum+=i;
				}
			}
			console.log(sum);
			// 九九乘法表
			for(i=1;i<=9;i++){
				for(j=1;j<=i;j++){
					document.write(j+'*'+i+'='+i*j+'\t')
				}document.write('<br />')
			}
		</script>
  1. switch
<script type="text/javascript">
			var score=+prompt('請輸入成績');
			// switch(score/10){
			// 	case 10:
			// 	case 9:
			// 	case 8:
			// 	case 7:
			// 	case 6:
			// 		console.log('合格')
			// 		break
			// 	default:
			// 		console.log('不合格')
			// } 
			switch(score>=60){
				case true:
					console.log('及格');
					break;
				default:
					console.log('不及格');
					break;
			}
		</script>
  1. if語句練習
<script type="text/javascript">
			// prompt() 函式中的返回值是 String 型別的
			var num1=+prompt('請輸入第一個數字')
			var num2=+prompt('請輸入第二個數字')
			var num3=+prompt('請輸入第三個數字')
			if(num1<num2 && num1<num3){
				// num1最小
				if(num2<num3){
					alert(num1+","+num2+","+num3)
				}else{
					alert(num1+","+num3+","+num2)
				}
			}
			if(num2<num1 && num2<num3){
				// num2最小
				if(num1<num3){
					alert(num2+","+num1+","+num3)
				}else{
					alert(num2+","+num3+","+num1)
				}
			}
			if(num3<num2 && num3<num1){
				// num1最小
				if(num2<num1){
					alert(num3+","+num2+","+num1)
				}else{
					alert(num3+","+num1+","+num2)
				}
			}
				
		</script>
  1. 面向物件建立物件
<script type="text/javascript">
			/**
			 * // 使用new創建出來的是建構函式 constructor
			var obj=new Object();
			obj.name='蓋世凱';
			obj.age='21'
			obj.sex='male'
			// 替換原來的屬性
			obj.name='李哲'
			// 刪除屬性
			delete obj.name;
			// 特殊的屬性名字用 特殊的方法來整
			obj['你好']='蓋世凱a'
			n='你好'
			console.log(obj[n]);
			// 屬性也可以是一個物件
			var obj2=new Object();
			obj.test=obj2;
			console.log(obj.test);
			// 測試obj中是否有此屬性
			console.log('test' in obj);
			 */
			
			// 物件是一個地址  
			// 這種方式建立物件  {裡面都是鍵值對(python中的字典)}
			// var obj3={
			// 	name:'張三',
			// 	age:12,
			// 	sex:'male'
			// };
			// console.log(obj3.name);
		</script>
  1. 函式的引數
<script type="text/javascript">
			function sum(a,b){
				console.log(a+b);
				return a;
				/**
				 * return 後面的語句不會被執行
				 */
				alert('hello')
			}
			/**
			 *呼叫函式的引數時 不會檢查函式的引數型別
			 * 多餘的形參將是undefined
			 */
			 // var result =alert('hello')
			 // console.log(result)//沒有被定義
			var a =sum(12,13,true,false)
			console.log(a)
			
			/**
			 * 建立一個函式 可以在控制檯輸出資訊
			 */
			var obj={
				name:'蓋世凱',
				age:21,
				male:'男'
			};
			function sayHello(o){
				console.log(o.name+o.age+o.male)
			}
			sayHello(obj)
			
			/**
			 * 傳遞函式
			 */
			function fun(a){
				console.log('a='+a)
				a(obj)
			}
			// fun(sayHello)
			/**
			 * 傳遞一個物件
			 */
			// main() 呼叫函式  main 呼叫物件
			
			fun(function(){alert('hello')})
		</script>
  1. return
<script type="text/javascript">
			function fun1(){
				function fun2(){
					alert('我是fun4中的函式')
				}
				return fun2;
			}
			a=fun1();
			// console.log(a);
			// a();
			fun1()();//原理同上一行
		</script>
  1. 立即執行函式
<script type="text/javascript">
			/**
			 * 只會執行一次
			 */
			(function(a,b){
				alert(a+b);
				alert('我是一個匿名函式');
			})(12,13)
			
		</script>
  1. 物件中的屬性是函式
<script type="text/javascript">
			var obj=new Object();
			obj.name='蓋世凱';
			obj.age=21;
			obj.sayName=function(){
				console.log(obj.name)
			};
			// console.log(obj.sayName);
			//調方法---函式作為物件的屬性--我們叫方法
			obj.sayName()
			
			function fun(){
				console.log('我是函式')
			}
			// 調函式---只是名稱不一樣
			fun()
		</script>
  1. 列舉物件
<script type="text/javascript">
			var obj={
				name:'蓋世凱',
				age:21,
				gender:'男'
			};
			for(x in obj){
				console.log(x);
				console.log(obj[x])
			}
		</script>
  1. 作用域
<script type="text/javascript">
			function fun(){
				console.log('我是fun函式')
			}
			
			/**
			 * 全域性作用域
			 * 		在外面時window的--都是window.
			 */
			window.fun();
			
			/**
			 * 關於var宣告
			 * 是在最開頭宣告的 但不會被賦值 不適用不會被提前
			 */
			var a;
			console.log(a);//結果時undefined
			a=123;
			
			/**
			 * 關於function xx()函式
			 * 在所有程式碼執行之前就被建立
			 * fun2()不會被執行---fun2 is not a function
			 */
			fun1();
			// fun2();
			function fun1(){
				console.log('我是function宣告的函式')
			};
			var fun2=function(){
				console.log('我是var宣告的函式')
			};
			
			/**
			 * 作用域---var也是提前宣告---function也是
			 * 		就近使用 沒有往上面找
			 * 			如果非要用 就用window.的方式來使用
			 */
			var b=10;
			function fun3(){
				console.log(window.b);
				console.log(b);
				b=12;
				d=100;//--相當於window.d=100
			}
			fun3();
			console.log(b);//輸出的時12 別修改後的數字
			console.log(d)
			 
			/**
			 * 定義了形參就相當於在裡面聲明瞭
			 */
			var e=23;
			function fun4(e){
				alert(e);//這裡輸出的是undefined
			}
			fun4();
			
			// 接下來就是除錯bug的課程
		</script>
  1. this關鍵字誰呼叫就用誰的物件裡面的this
<script type="text/javascript">
			/**
			 * 以函式的形式呼叫的時候  this永遠指向的是window
			 * 以方法的形式呼叫的時候  this指的是呼叫方法的物件
			 */
			var name='劉毅'
			function fun(a,b){
				console.log(this.name);//打印不出來this
			}
			// fun(1,2);
			var obj1={
				name:'蓋世凱1',
				age:21,
				sayName:fun
			}
			var obj2={
				name:'蓋世凱2',
				age:21,
				sayName:fun
			}
			// console.log(obj.sayName==fun)//true
			obj1.sayName();
			obj2.sayName();
			fun();
		</script>
  1. 批量生產物件
<script type="text/javascript">
			/**
			 * 批量生產物件
			 */
			function createPerson(name,age){
				var obj=new Object();
				obj.name=name;
				obj.age=age;
				obj.sayName=function(){
					alert(this.name);
				}
				return obj;
			}
			var a=createPerson('蓋世凱',21);
			var b=createPerson('劉毅',21);
			a.sayName()
			b.sayName()
		</script>
  1. 建構函式
<script type="text/javascript">
			/**
			 * 建構函式 也是函式 除了函式名首字母大寫 麼有區別
			 * 
			 * 不同的是 普通函式直接使用 建構函式需要用new關鍵字來呼叫
			 */
			
			/**
			 * 建構函式執行流程
			 * 	1 立即建立一個物件
			 * 	2 將物件設定為函式中的this,在建構函式中可以使用this來引用新建的物件
			 * 	3 逐行執行函式中的程式碼
			 * 	4 將新建的物件作為返回值返回
			 * 
			 * java理解
			 * 		new(new一個物件)的過程就是 建立你造出來的物件
			 */
			function Person(name,age){
				// this.name='蓋世凱'//這樣就寫死了 所以看下面
				this.name=name;
				this.age=age;
				this.sayName=function(){
					alert(this.name);
				}
				// 像物件中新增一個方法
				this.sayAge=fun;
			}
			// sayAge方法在全域性作用域中定義
			function fun(){
				alert(this.age);
			}
			/**
			 * 判斷一個物件 是否是一個類的例項
			 * 		物件 instanceof 建構函式
			 * 		是返回true 不是-false
			 */
			
			
			// 向原型中新增sayName方法  之後的拓展
			Person.prototype.sayName=function(){
				alert(this.name+'我是原型中的')
			}
			
			
			var per=new Person('蓋世凱',21);
			console.log(per instanceof Person)
			// console.log(per.name)
			per.sayName()
			per.sayAge()
		</script>
  1. 原型
<script type="text/javascript">
			/**
			 * 原型 prototype
			 * 建立每一個函式 解析器都會想函式中新增一個屬性prototype
			 */
			function MyClass(){
				
			}
			// 向原型中新增屬性
			MyClass.prototype.a=123
			var mc1=new MyClass();
			var mc2=new MyClass();
			// console.log(MyClass.prototype);
			// console.log(mc1.__proto__==mc2.__proto__)//true
			mc1.a='我是更改後的a'
			console.log(mc1.a)
		</script>
		
		<script type="text/javascript">
			
			function MyClass(){
				
			}
			MyClass.prototype.name='我是原型中的名字';
			var mc=new MyClass();
			mc.age=21;
			// console.log(mc.name)
			// 使用in來檢查物件中是否含有某個屬性 沒有去原型中尋找
			console.log('name' in MyClass)
			
			// 使用hasOwnProperty()檢查物件自身中是否含有該屬性
			console.log(mc.hasOwnProperty('age'))
			
			// 自身有用自身 沒有去原型中找 在沒有去原型的原型中尋找
			console.log(mc.__proto__.__proto__.hasOwnProperty('hasOwnProperty'));
			console.log(mc.__proto__.__proto__.__proto__);
			
		</script>
  1. toString
<script type="text/javascript">
			function Person(name,age){
				this.name=name;
				this.age=age;
			}
			var per =new Person('蓋世凱',21);
			
			// //重寫toString方法
			// per.toString=function(){
			// 	return '我是重寫的toString方法'
			// }
			
			//重寫Person原型的toString方法
			Person.prototype.toString=function(){
				return '我是Person原型中的toString方法'
			}
			
			// console.log(per.__proto__.__proto__.hasOwnProperty('toString'));
			var resule=per.toString();
			console.log(resule);
			
			// 垃圾回收機制 沒用的就扔了
			Person=null;
			console.log(Person.toString());
			
		</script>
  1. 陣列
<script type="text/javascript">
			/**
			 * 陣列的兩種建立方法
			 * var arr=new Array();
			 * var arr=[];
			 */
			var arr=new Array(10);//這裡的10是陣列的總長
			arr[0]=1;
			arr[arr.length]=1
			console.log(arr.length);
			
			arr1=[1,2,true,'hello',null,undefined,{name:'蓋世凱'},function(){alert(1)}]
			arr2=[10]//這裡的10是陣列中的元素
			console.log(arr1);//in 瀏覽器中顯示
			console.log(arr1[6].name);  //陣列中放物件
			console.log(arr1[7]());		//陣列中放方法
			console.log(arr2.length)
		</script>
  1. 陣列中的方法:push 和pop在末尾操作+unshift和shift再開頭操作+陣列的遍歷
<script type="text/javascript">
			var arr=['蓋世凱1','蓋世凱2','蓋世凱3','蓋世凱4']
			/**
			 * push()方法
			 * 		末尾新增1/多 個元素並返回陣列的 新長度
			 */
			arr.push('李哲','毅哥')
			console.log(arr)
			/**
			 * pop()方法
			 * 		刪除最後一個元素  並返回結果
			 */
			a=arr.pop();
			console.log(a);
			/**
			 * unshift()方法
			 * 		陣列開頭新增 1/多 元素
			 */
			arr.unshift('牛魔王','孫悟空');
			console.log(arr);
			/**
			 * shift()方法
			 * 		刪除第一個 並返回
			 */
			arr.shift();
			console.log(arr)
			
			// 陣列的遍歷
			for(var i=0;i<arr.length;i++){
				console.log(arr[i]);
			}
			
			
		</script>
  1. 陣列的練習+forEach方法
<script type="text/javascript">
			// 把大於18歲的人放到一個數組中
			function Person(name,age){
				this.name=name;
				this.age=age;
			}
			var p1=new Person('蓋世凱',21);
			var p2=new Person('毅哥',12);
			var p3=new Person('翀哥',34);
			var p4=new Person('鬆嶽',11);
			var arr=[p1,p2,p3,p4];
			var newArray=[]
			for(var i=0;i<arr.length;i++){
				if(arr[i].age>18){
					newArray.push(arr[i])
				}
			}
			/**
			 * forEach() 方法需要一個 函式 作為引數
			 * 		不用我們呼叫
			 * 		第一個引數返回陣列中的值
			 * 		第二個引數表示索引值
			 * 		第三個引數是列印全部
			 */
			newArray.forEach(function(value,index,object){
				console.log(value)
				console.log(index)
				console.log(object)
			})
		</script>
  1. 陣列中的splice的切片操作
<script type="text/javascript">
			var arr1=['G','S','K','Y','G'];
			/**
			 * slice(開始擷取的位置,結束的位置)方法
			 * 	不會改變原來的陣列
			 */
			// var result=arr1.slice(0,-1);//包頭不包尾(尾是負數的話就都包括了)
			// console.log(result)
			
			/**
			 * splice(表示開始刪除的位置,刪除的數量,後面可以新增一些元素)方法
			 * 	刪除陣列中指定的元素 會影響到原來的陣列 有返回值
			 * 第二個引數為0時就是不刪除
			 */
			var result=arr1.splice(0,3,'牛魔王','孫悟空');
			console.log(result);
			console.log(arr1);
		</script>
  1. 去除陣列中多餘的數------sqlice練習
<script type="text/javascript">
			var arr=[1,2,1,3,2,2,4,3,5,4,6]
			for(var i=0;i<arr.length;i++){
				for(var j=i+1;j<arr.length;j++){
					if(arr[i]==arr[j]){
						arr.splice(j,1);
						// j++和j-- 表示沒變
						j--;
					}
				}
			}
			for(var x=0;x<arr.length;x++){
				console.log(arr[x])
			}
		</script>
  1. 陣列中其他的方法join+concat+sort+reverse
<script type="text/javascript">
			var arr1=[12,3,4,5]
			var arr2=[1,2,3,4,5]
			var arr3=[1,2,3,4,5]
			/**
			 * concat() 進行拼接 返回新陣列 不對原陣列產生影響
			 */
			var result=arr1.concat(arr2,arr3,'蓋世凱');
			console.log(result)
			
			/**
			 * join(@[email protected])  陣列轉換成字串,返回新陣列,不對原陣列產生影響
			 */
			result =arr1.join('@[email protected]');
			console.log(result);
			
			/**
			 * reverse() 陣列都倒過來  修改原陣列
			 */
			arr1.reverse()
			console.log(arr1)
			
			/**
			 * sort() 進行排序  按照unicode排序
			 * ()裡面是一個>0的數  交換位置
			 * 			  <=0的數  位置不變
			 */
			arr1.sort(function(a,b){
				//升序排列
				return a-b;
				//降序排列
				return b-a;  
			})
		</script>
  1. arguments的隱藏功能
<script type="text/javascript">
			/**
			 * 函式中的兩個隱含引數   this & arguments(是一個類陣列物件)
			 * arguments.length=實參的長度
			 * arguments[0]----第一個實參
			 * arguments.callee指向當前函式的物件
			 */
			function fun(a,b){
				// 下面兩行都是false
				// console.log(arguments instanceof Array);
				// console.log(Array.isArray(arguments));
				console.log(arguments.length);
				console.log(arguments.callee==fun);
			}
			fun('hello',true)
		</script>
  1. 函式中方法:call()+apply()
<script type="text/javascript">
			function fun(){
				alert(this.name)
			}
			/**
			 * call() apply()
			 * 需要通過函式來呼叫
			 * 使用過程中this.傳進來的物件
			 * call() 可以將實參物件之後依次傳遞fun.call(obj,2,3)
			 * apply() 不同於上面 fun.apply(obj,[2,3])
			 */
			var obj={name:'蓋世凱'};
			fun.call()
			fun.apply(obj)
		</script>
  1. Date物件
<script type="text/javascript">
			// Date 表示物件
			/**
			 * getDate()   幾日
			 * getDay()		周幾0-週日
			 * gatMonth() 	月份0-一月
			 * getFullYear()	當前日期對應的年份
			 * getTime()	當前時間(毫秒呈現出來)
			 * Date.now()	當前的時間(多用於測試)
			 */
			var d=new Date();
			var a=new Date('01/14/2021 04:44:20');//月 日 年 時 分 秒
			console.log(d);
			console.log(a);
		</script>
  1. Math函式
<script type="text/javascript">
			// Math 不是物件是一個函式 通過Math.的方式
			/**
			 * abs()	一個數的絕對值
			 * ceil()	向上取整
			 * floor()	向下取整
			 * round()	四捨五入
			 * Math.random()	0-1之間的隨機數
			 * 					x-y之間的隨機數	Math.round(Math.random()*(y-x)+x)
			 * pow(x,y)	x的y次冪
			 * sqrt(x)	對x進行開方
			 */
		</script>
  1. 包裝類(瞭解)
<script type="text/javascript">
			/**
			 *String() 將基本資料型別轉化為String物件
			 * Number() 將基本資料型別轉化為Number物件
			 * Boolean() 將基本資料型別轉化為Boolean物件
			 */
			var num=new Number(3)
			var str=new String('hello')
			var bool=new Boolean(true)
			
			var s=123;
			s=s.toString();
			// 都幫我們自動轉化了
			s.hello='你好';
			console.log(s.hello)
		</script>
  1. 字串的相關操作
<script type="text/javascript">
			str='gaishikaiduopeifumu';
			/**
			 * charAt() 可以返回字串中指定位置的字元   根據索引過去指定的字元
			 * charCodeAt() 獲取指定位置字元的編碼(unicode編碼)
			 * formCharCode() 根據字元編碼獲取字元
			 * concat() 拼接字元 作用和 + 一樣
			 * indexof('a',7)	檢索是否含有指定內容(通常返回第一個)--可以指定位置
			 * 					沒有返回-1
			 * lastIndexOf('h',1) 從後往前找		功能和上面一樣
			 * substring(1,2)	和slice()類似
			 * 					傳遞的是負值 預設使用0  第二個引數小於第一個(自動換位置)
			 * substr(0.2)		擷取字串  開始的索引位置 擷取長度
			 * split('@')	拆分成陣列  會根據傳進去的東西去拆分陣列
			 * toUpperCase()   將字串轉化為大寫並返回
			 * toLowerCase()   將字串轉化為xiao寫並返回
			 */
			
		</script>
  1. 正則表示式
<script type="text/javascript">
			/**
			 * var 變數 = new RegExp('正則表示式','匹配模式')
			 * 正則表示式是一個物件
			 * 下面是一個測試是否含有a
			 * 		第二個引數可以是	i 忽略大小寫
			 * 						g 全域性匹配模式
			 */
			var reg=new RegExp('a','i')
			var str='a';
			var result=reg.test(str);
			console.log(result)
			
			/**
			 * 也可以使用字面量來建立正則表示式
			 * var 變數=/正則表示式/匹配模式
			 * reg=/a|b/;  | 表示或的意思
			 * reg=/[ab]/  [] 裡面的內容也是或的關係
			 * reg=/[a-z]/  任意小寫
			 * reg=/[A-Z]/  任意大寫
			 * reg=/[A-z]/  任意字母
			 * [^ abc] 除了abc
			 * search()  搜尋是否含有指定內容  傳一個正則就會根據 正則來檢索(新增全域性變數也沒用)
			 * match()   傳進去一個正則表示式  符合條件的內容 提取出來  裝到一個數組中返回
			 * replace() 引數: 1 被替換的內容 2 新的內容 預設只提取第一個
			 * split(/[A-z]/)   任意字母拆分字串   
			 * 
			 * 量詞  只對前面的第一個內容起作用(內容出現的次數)--可以加括號整的-多一點 
			 * 		{n} 正好出現n次
			 * 		{m,n} 出現m-n次
			 * 		{m,}  m次以上
			 * 		+  至少一個,相當於{1,}
			 * 		*   0個或者多個  相當於{0,}
			 * /^a/ 以a開頭
			 * /a$/ 以a結尾
			 * 
			 * 檢查是否含有.
			 * .表示任意字元  用\.  來表示.
			 * 				用\\   來表示\
			 * 
			 * \w  任意字母,數字,_  [A-z0-9]
			 * \W	上面相反
			 * \d	任意數字 [0-9]
			 * \D	上面相反
			 * \s	空格
			 * \S	上面相反
			 * \b	
			 * \B
			 * 
			 * 
			 */
			var reg=/A/;
			console.log(reg.test('abc'))
		</script>
  1. DOM
<script type="text/javascript">
			/**
			 * 也可以在上面設定
			 */
			window.onload=function(){
				// 這裡面寫你要執行的程式碼
				/**
				 * 文件位元組 物件這個物件是window屬性  文件位元組代表整個網頁
				 */
				// 獲取button物件
				var btn=document.getElementById('btn');
				// 修改按鈕文字
				btn.innerHTML='我是被修改的'
				// 繫結一個單擊響應函式
				btn.onclick=function(){
					alert('你還點~~~~');
			}
			}
		</script>
  1. dom裡面的東西
// 全局裡定義
			function myClass(idStr,fun){
				// 傳進來的是字串就不需要再改了
				var btn=document.getElementById(idStr);
				btn.onclick=fun;
			}
			window.onload=function(){
				// 1	查詢#bj結點
				myClass('btn01',function(){
					var bj=document.getElementById('bj')   //通過id來獲取一個節點的物件
					var lis=document.getElementsByTagName('li');  //通過標籤名來獲取一個組的節點物件
					var names=document.getElementsByName('gender');   //通過name屬性來獲取一組物件元素.name  元素.value   元素.id class屬性需要使用  元素.className
					


					alert(bj.innerHTML)
				});
				}
  1. dom中的其他方法
<script type="text/javascript">
			window.onload=function(){
				// 獲取body標籤
				// var body = document.getElementsByName('body');
				/**
				 * document中有一個body標籤 它儲存的是body的引用
				 */
				var body=document.body;
				console.log(body)
				/**
				 * document.documentElement儲存的是html標籤
				 */
				var html=document.documentElement;
				// console.log(html)
				/**
				 * document.all 代表頁面中所有的元素
				 */
				var all=document.all;
				// console.log(all.length)
				
				// for(var i=0;i<all.length;i++){
				// 	console.log(all[i]);
				// }
				// 作用同上
				all=document.getElementsByTagName('*');
				console.log(all.length)
				/**
				 * 根據元素的class屬性查詢一組元素節點物件
				 * 不支援IE8及一下的瀏覽器
				 */
				var box=document.getElementsByClassName('box1');
				console.log(box.length)
				// 獲取頁面中所有的div
				// var divs=document.getElementsByTagName('div');
				// console.log(divs.length)
				
				 /**
				 * document.querySelector()
				 * 需要一個字串作為引數 ,可以根據一個CSS選擇器來查詢一個元素的節點物件
				 */
				var div = document.querySelector('.box1 div');
				console.log(div.innerHTML)
				/**
				 * document.querySelectorAll 和上面的方法類似 會取出所有符合條件的元素
				 */
				var div = document.querySelectorAll('.box1 div');
				
			}
		</script>
  1. 新增節點,刪除節點,插入節點+新增刪除使用者資訊練習(在練習裡面)
				// 建立一個'廣州'節點新增到#city下
				myClick('btn01',function(){
					// 建立<li>廣州<li>
					/**
					 * document.createElement()----用於建立元素物件
					 * 	標籤名作為引數  會根據標籤名建立元素節點物件  並返回
					 */
					var li = document.createElement('li');
					/**
					 * document.createTextNode()----用來建立文字節點
					 */
					var gzText=document.createTextNode('廣州');
					/**
					 * 將gzText作為子節點傳入li中   認兒子
					 */
					li.appendChild(gzText)
					/**
					 * 將li傳入到city下
					 */
					var city=document.getElementById('city');
					city.appendChild(li);
				})
				/**
					 * inserBefore(新節點,舊節點)
					 * 	對子節點插入新的子節點
					 */
					 /**
					 * city.replaceChild  代替節點
					 */
					  * city.removeChild()---父親殺
					 */
					// city.removeChild(bj);
					bj.parentNode.removeChild(bj);//自殺
  1. 簡便的新增東西
var tr=document.createElement('tr');
					// 設定tr中的內容
					tr.innerHTML=
					'<td>'+name+'</td>'+
					'<td>'+email+'</td>'+
					'<td>'+salary+'</td>'+
					'<td><a href="javascript:;">Delete</a></td>'
					// 這裡有問題
					var a=document.getElementsByTagName('a')[0];
					a.onclick=delA;
					// 將tr裝到table中
					// 獲取table
					var showInformation=document.getElementById('showInformation');
					showInformation.appendChild(tr);
  1. 使用dom操作css
<script type="text/javascript">
			window.onload=function(){
				// 點選按鈕之後 修改box1的大小
				var box1=document.getElementById('box1');
				var btn01=document.getElementById('btn01');
				btn01.onclick=function(){
					/**
					 * 元素.style.樣式名=樣式值
					 * 在含有 - 的命名規範中 改用駝峰式寫法
					 * background-color寫成 backgroundColor
					 * 
					 * 如果使用了!important  js就無法修改
					 */
					box1.style.width='300px';
					box1.style.backgroundColor='yellow'
				}
			}
		</script>
  1. 讀取元素的樣式
<script type="text/javascript">
			window.onload=function(){
				var box1=document.getElementById('box1');
				var btn01=document.getElementById('btn01');
				btn01.onclick=function(){
					
					box1.style.width='300px';
					box1.style.backgroundColor='yellow'
					// 再裡面的可以讀出來
					// alert(box1.style.width); 
					/**
					 * 獲取當前顯示的樣式  只能讀不可以修改
					 * 元素.currentStyle.樣式名
					 * tmd  除了IE都不支援
					 * 所以其他用 getComputedStyle(物件,null);
					 * 返回一個物件 
					 */
					// alert(box1.currentStyle.backgroundColor)
					
					// var obj=getComputedStyle(box1,null);
					// alert(obj.width)
					// alert(getComputedStyle(box1,null).width)
					getStyle(box1,'width')
				};
			};
			/**
			 * 想要兩者相容
			 * 引數 (obj(要獲取元素),要獲取元素的樣式名)
			 */
			function getStyle(obj,name){
				if(window.getComputedStyle){
					alert(getComputedStyle(obj,null)[name])
				}else{
					alert(obj.currentStyle[name])
				}
				//一條語句方法
				// return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name]
			}
		</script>
  1. 過去塊的元素
<script type="text/javascript">
			window.onload=function(){
				var box1=document.getElementById('box1');
				var btn01=document.getElementById('btn01');
				var box4=document.getElementById('box4')
				btn01.onclick=function(){
					/**
					 * clientWidth
					 * clientHeight
					 * 可見高度和可見高度
					 * 屬性都是不帶px的 返回的是一個數字 可以直接進行計算
					 * 包括 內容區和內邊距
					 * 不能修改
					 */
					// alert(box1.clientWidth)
					
					/**
					 * offsetWidth
					 * offsetHeight
					 * 寬度高度---包括內容區 內邊距 邊框
					 */
					// alert(box1.offsetWidth)
					
					/**
					 * offsetParent
					 *  獲取當前定位父元素
					 * 	最近開啟定位的祖先元素
					 *	最上面的定位是body
					 */
					// var op=box1.offsetParent;
					// alert(op.id)
					
					/**
					 * offsetLeft
					 * 相對於定位元素的水平偏移量
					 * offsetTop
					 * 相對於定位元素的垂直偏移量
					 */
					// alert(box1.offsetTop)
					
					/**
					 * box4.scrollHeight
					 * box4.scrollWidth
					 * 整個滾動區
					 * 
					 * box4.scrollLeft
					 * box4.scrollTop
					 * 水平滾動條 垂直滾動條 滾動的距離
					 */
					// alert(parseInt(box4.scrollTop))
					
					/**
					 * 判斷滾動條是否已經到底了----這裡有小數 計算結果不準確
					 * box4.scrollHeight-box4.scrollTop=box4.clienHeight---垂直
					 * 
					 * box4.scrollWidth-box4.scrollLeft==box4.clienWidth---水平
					 */
					alert(box4.scrollWidth-box4.scrollLeft==box4.clienWidth)

				};
			};
		</script>
  1. 事件物件
<script type="text/javascript">
			window.onload=function(){//一定記得新增這個
				var areaDiv=document.getElementById('areaDiv')
				var showMsg=document.getElementById('showMsg')
				// 字母要寫正確
				areaDiv.onmousemove=function(event){
					// event是在頁面操作的一些  滑鼠 鍵盤等~~
					event=event||window.event;
					var x=event.clientX;
					var y=event.clientY;
					showMsg.innerHTML='x='+x+' y='+y;
				}
			
			}
		</script>
  1. 冒泡事件
<script type="text/javascript">
			window.onload=function(){
				/**
				 * 冒泡(Bubble)---好似向水裡投石 逐漸往外擴散
				 */
				var s1=document.getElementById('s1')
				s1.onclick=function(event){
					event=event||window.event
					alert('我是span的單擊響應函式')
					/**
					 * 取消冒泡
					 *  物件.cancelBubble設定為true 即可取消冒泡
					 */
					event.cancelBubble=true;
				}
				var box1=document.getElementById('box1')
				box1.onclick=function(){
					alert('我是div的單擊響應函式')
				}
				document.body.onclick=function(){
					alert('我是body中的單擊相應函式')
				}
			}
		</script>
  1. 事件的委派
<script type="text/javascript">
			window.onload=function(){
				var ul=document.getElementsByTagName('ul')[0];
				var btn=document.getElementById('btn');
				btn.onclick=function(){
					var li = document.createElement('li');
					li.innerHTML='<a href="javascript:;" class="link">我是新增的超連結</a>'
					ul.appendChild(li);
				}
				
				var allA=document.getElementsByTagName('a');
				// for(var i=0;i<allA.length;i++){
				// 	allA[i].οnclick=function(){
				// 		alert('hello');
				// 	}
				// }
				
				// 我們希望只繫結一次  新增之後也可以使用
				/**
				 * 事件的委派  給祖先綁定了 根據冒泡  總會傳到祖先元素
				 */
				ul.onclick=function(event){
					// alert('我是ul的單擊相應函式')
					/**
					 * event中的target表示的觸發事件的物件  觸發的是我們期望的元素 就會執行
					 */
					if(event.target.className=='link'){
						alert('我是ul的單擊響應函式')
					}
					
				}
				
			}
		</script>
  1. 事件的繫結
<script type="text/javascript">
			window.onload=function(){
				var btn=document.getElementById('btn');
				// btn.οnclick=function(){
				// 	alert(1)
				// }
				// btn.οnclick=function(){
				// 	alert(2)
				// }
				
				/**
				 * addEventListener(事件的字串‘不要on’,回撥函式‘事件觸發時函式呼叫’,false‘通常’)
				 * 	這個方法也可以為元素繫結響應函式
				 */
				// btn.addEventListener('click',function(){
				// 	alert(1)
				// },false)
				// btn.addEventListener('click',function(){
				// 	alert(2)
				// },false)
				// btn.addEventListener('click',function(){
				// 	alert(3)
				// },false)
				
				/**
				 * attachEvent(事件的字串‘要on’,回撥函式‘事件觸發時函式呼叫’) 
				 * 在IE8中使用繫結事件
				 */
				// btn.attachEvent('onclick',function(){
				// 	alert(1)
				// })
				// btn.attachEvent('onclick',function(){
				// 	alert(2)
				// })
				// btn.attachEvent('onclick',function(){
				// 	alert(3)
				// })
				bind(btn,'click',function(){
					alert(this)
				})
			}
			/**
			 * 定義一個函式 同意要繫結的事件
			 * obj  要繫結的物件
			 * eventStr 事件的字串
			 * callback  回撥函式
			 */
			function bind(obj,eventStr,callback){
				if(obj.addEventListener){
					// 大部分瀏覽器相容
					obj.addEventListener(eventStr,callback,false)
				}else{
					// IE8及一下瀏覽器 this是誰由呼叫方法決定的
					obj.attachEvent('on'+eventStr,function(){
						// 在匿名函式中回撥函式
						callback.call(obj);
					})
				}
			}
		</script>
  1. 事件的傳播
<script type="text/javascript">
			window.onload=function(){
				var box1=document.getElementById('box1')
				var box2=document.getElementById('box2')
				var box3=document.getElementById('box3')
				bind(box1,'click',function(){
					alert('我是box1的響應函式')
				})
				bind(box2,'click',function(){
					alert('我是box2的響應函式')
				})
				bind(box3,'click',function(){
					alert('我是box3的響應函式')
				})
				/**
				 * 捕獲階段
				 * 目標階段
				 * 冒泡階段
				 * 我們都不希望addEventListener在捕獲階段觸發事件 所以第三個引數一般都是false
				 */
			}
			
			function bind(obj,eventStr,callback){
				if(obj.addEventListener){
					// 大部分瀏覽器相容
					obj.addEventListener(eventStr,callback,false)
				}else{
					// IE8及一下瀏覽器 this是誰由呼叫方法決定的
					obj.attachEvent('on'+eventStr,function(){
						// 在匿名函式中回撥函式
						callback.call(obj);
					})
				}
			}
		</script>
  1. 滾輪事件
<script type="text/javascript">
			window.onload=function(){
				var box1=document.getElementById('box1');
					/**
					 * onmousewheel 在火狐裡面不支援它支援DOMMouseScroll
					 * 注意該事件用addEventListener來呼叫
					 */
				box1.onmousewheel=function(event){
					event=event||window.event;
					/**  if(除了0都是可以向下執行)
					 * 目標
					 * 滾輪向上移動的時候  box1邊段
					 * 滾輪向下移動的時候  box1邊長
					 * 我們使用whellDelta來進行判斷滾輪的方向
					 * chrom 中向上150 向下-150
					 * 上面的方法火狐裡面不支援 所以用event.detail 來獲取滾輪的方向
					 * 向上-3  向下3
					 */
					
					if(event.wheelDelta>0||event.detail <0){
						box1.style.height=box1.clientHeight-10+'px'
					}else{
						box1.style.height=box1.clientHeight+10+'px'
					}
					/**
					 * 我們使用addEventListener繫結響應函式時 不可以用return false
					 * 所以使用event.preventDefault();取消預設行為
					 * 但是IE8不支援 用的話會報錯  所以~~~~
					 */
					event.preventDefault||event.preventDefault();
					// 當我們瀏覽器也有滾動條時 滾條也會隨之滾動 我們用false取消瀏覽器的預設行為
					return false
					
				};
				
				bind(box1,'DOMMouseScroll',box1.onmousewheel)
			}
			function bind(obj,eventStr,callback){
				if(obj.addEventListener){
					// 大部分瀏覽器相容
					obj.addEventListener(eventStr,callback,false)
				}else{
					// IE8及一下瀏覽器 this是誰由呼叫方法決定的
					obj.attachEvent('on'+eventStr,function(){
						// 在匿名函式中回撥函式
						callback.call(obj);
					})
				}
			}
		</script>
  1. 鍵盤事件
<script type="text/javascript">
			window.onload=function(){
				/**
				 * 鍵盤事件
				 * onkeyup 按下  不鬆手一直觸發 剛開始慢 之後塊
				 * onkeydown 鬆開
				 * 鍵盤事件一般使用物件為:具有焦點(文字框) document
				 */
				document.onkeydown=function(event){
					/**
					 * altKey
					 * ctrlKey
					 * shiftKey   
					 * 表示alt ctrl shift 是否被按下
					 */
					if(event.keyCode===89&&event.ctrlKey){
						console.log('ctrl和y被按下啦')
					}
				} 
				// document.οnkeyup=function(){
				// 	console.log('鍵盤松開了')
				// }
				
				// 獲取input
				var input=document.getElementsByTagName('input')[0];
				input.onkeydown=function(event){
					event=event||window.event;
					if(event.keyCode>=48&&event.keyCode<=57){
						alert('hello')
						// 如果不想讓輸入某個數字就使用這個
						return false
					}
				}
			}
		</script>
  1. 鍵盤控制
<script type="text/javascript">
			window.onload=function(){
				
				var box1=document.getElementById('box1');
				var speed=10;
				document.onkeydown=function(event){
					event=event||window.event;
					if(event.ctrlKey){
						speed=500;
					}else{
						speed=10;
					}
					switch (event.keyCode){
						case 37:
							// alert('左')
							box1.style.left=box1.offsetLeft-speed+'px';
							break;
						case 39:
							// alert('右')
							box1.style.left=box1.offsetLeft+speed+'px';
							break;
						case 38:
							// alert('上')
							box1.style.top=box1.offsetTop-speed+'px';
							break;
						case 40:
							// alert('下')
							box1.style.top=box1.offsetTop+speed+'px';
							break;
					}
				}
			}
			
		</script>
  1. BOM瀏覽器物件模型
<script type="text/javascript">
			/**
			 * BOM   瀏覽器物件模型
			 * 	Window-
			 * 代表整個瀏覽器的視窗 同時window也是網頁中的全域性物件
			 * Navigator-
			 * 代表當前瀏覽器的資訊,通過此可以識別不同的瀏覽器
			 * Location-
			 * 代表瀏覽器的位址列資訊,通過Location可以過低位址列資訊,過著操作瀏覽器跳轉頁面
			 * History-
			 * 代表瀏覽器的歷史記錄 可以通過物件來操作瀏覽器的 歷史記錄---只有當前記錄
			 * Screen-
			 * 代表使用者的螢幕資訊,可以獲得顯示器的相關訊息
			 */
			
			// 測試Navigator 
			var ua=navigator.userAgent;
			console.log(ua)
			// if(/firefox/i.test(ua)){
			// 	alert('你是火狐瀏覽器')
			// }else if (/chrom/i.test(ua)){
			// 	alert('你是chrome瀏覽器')
			// }else if (/msie/i.test(ua)){
			// 	alert('你是IE瀏覽器')
			// }
			
			/**
			 * 通過navigator.userAgent不可以判斷IE了
			 * 使用ActiveXObject
			 */
			// if(window.ActiveXObject){
			// 	alert('你是IE,瀏覽器')
			// }else{
			// 	alert('你不是IE~~')
			// }
			// alert('ActiveXObject' in window)
		</script>
  1. history
<script type="text/javascript">
			/**
			 * History控制向前向後翻頁
			 */
			window.onload=function(){
				/**
				 * length  屬性用來獲取訪問連結數量
				 */
				// alert(history.length)
				/**
				 * back()  回到上一個頁面
				 * forward()  跳轉到下一個頁面
				 * go()  引數是1時相當於forward
				 * 		引數是-1時相當於back()
				 */
				history.back();
				history.forward();
			}
		</script>
  1. location
<script type="text/javascript">
			
			window.onload=function(){
				var btn=document.getElementById('btn');
				btn.onclick=function(){
					// alert(location)
					// location='http://baidu.com';
					/**
					 * location.assign  作用和直接修改 location一樣
					 * location.reload(true)  和按下重新整理按鈕一樣(強制重新整理)
					 * location.replace()  一個新的頁面替換當前頁面 沒有歷史記錄 不可以返回
					 */
					location.assign('http://baidu.com')
					location.reload(true)
					location.replace('http://baidu.com')
				}
			}
		</script>
  1. 定時器呼叫
<script type="text/javascript">
			window.onload=function(){
				var count=document.getElementById('count');
				/**
				 * 利用setInterval(回撥函式,間隔時間) 
				 * 返回值是一個Number型別的資料 這個數字作為定時器的唯一標識
				 */
				var num=1;
				var timer=setInterval(function(){
					count.innerHTML=num++;
					if(num==11){
						clearInterval(timer)//關閉定時器
					}
				},1000)
			}
		</script>
  1. 定時器練習(切換圖片)
<script type="text/javascript">
			window.onload=function(){
				var photo=["img/01.png","img/02.png","img/03.png","img/04.png","img/05.png"];
				var Gs=document.getElementById('Gs');
				var index=0;
				var timer;
				// 用來開啟定時器
				var btn01=document.getElementById('btn01');
				btn01.onclick=function(){
					/**
					 * 每次點選相當於開啟一個定時器 點的多開的多 並且我們只能關閉一個定時器
					 * 所以在開啟之前先關閉一個定時器
					 */
					clearInterval(timer);
					
					timer=setInterval(function(){
					index++;
					index %= photo.length;
					Gs.src=photo[index];
					},1000)
				}
				// 用來關閉定時器
				var btn02=document.getElementById('btn02');
				btn02.onclick=function(){
					clearInterval(timer);
				}
			}
		</script>
  1. 利用定時器取消延遲
<script type="text/javascript">
			window.onload=function(){
				var box1=document.getElementById('box1');
				var dir=0;
				var speed=10;
				document.onkeydown=function(event){
					event=event||window.event;
					if(event.ctrlKey){
						speed=500;
					}else{
						speed=10;
					}
					dir=event.keyCode;
				}
				setInterval(function(){
					switch (dir){
						case 37:
							// alert('左')
							box1.style.left=box1.offsetLeft-speed+'px';
							break;
						case 39:
							// alert('右')
							box1.style.left=box1.offsetLeft+speed+'px';
							break;
						case 38:
							// alert('上')
							box1.style.top=box1.offsetTop-speed+'px';
							break;
						case 40:
							// alert('下')
							box1.style.top=box1.offsetTop+speed+'px';
							break;
					}
				},30)
			}
		</script>
  1. 延時呼叫
<script type="text/javascript">
			window.onload=function(){
				var num=1;
				// setInterval(function(){
				// 	console.log(num++);
				// },1000)
				
				/**
				 * 延時呼叫 只執行一次
				 * 定時呼叫 一直執行
				 * 兩者可以互相代替
				 */
				var timer=setTimeout(function(){
					console.log(num++);
				},1000) 
				clearTimeout(timer)
			}
		</script>
  1. 輪盤圖
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			/* 可見邊框 */ 
			#outer{
				width: 680px;
				height: 680px;
				margin: 10px auto;
				background-color: yellowgreen;
				padding: 10px 10px;
				position:relative;
				overflow: hidden;
			}
			/* ul 裡面有圖片(li) */
			#imgList{
				list-style: none;
				position: absolute;
				/* left: -1360px;	 */
			}
			/* li  中有每一個圖片 */
			#imgList li{
				padding: 0 0 0 15px;
				float: left;
			}
			/* 地下的每個超連結 */
			#navDiv{
				position: absolute;
				top: 670px;
				/* 這個在js中設定left的值 讓他居中 
					(總長度為680px-div塊的長度55*5)/2
				*/
			   /* left: 202px; */
			}
			/* 每一個超連結 */
			#navDiv a{
				width: 25px;
				height: 25px;
				background-color: #FF0000;
				margin: 0 15px;
				opacity: 0.5;
				/* 兼顧IE瀏覽器 設定透明度*/
				filter: alpha(opacity=50);
				float: left;
			}
		</style>
		<!-- 引入移動工具 -->
		<script src="js/tools.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
				// 獲取最大的div
				var outer=document.getElementById('outer');
				//獲得ul
				var imgList=document.getElementById('imgList');
				// 獲得<li>
				var imgArr=document.getElementsByTagName('img');
				// 設定ul的寬度
				imgList.style.width=imgArr.length*690+'px';
				
				// 設定單行條居中
				var navDiv=document.getElementById('navDiv');
				navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+'px'
				// 設定預設選中效果---獲取所有的a
				var index=0;
				var allA=document.getElementsByTagName('a');
				allA[index].style.backgroundColor='black'
				// 點選那個圖片就跳轉到那個圖片裡面
				for(var i=0;i<allA.length;i++){
					/**
					 *  在點選的時候for迴圈就已經執行完了
					 * 所以設定一個存放i的地方 新增一個屬性
					 */
					allA[i].num=i;
					allA[i].onclick=function(){
						// alert(this.num) 
						// 點選圖片的時候停止 輪盤圖
						clearInterval(timer)
						index=this.num;
						// imgList.style.left=index*-680+'px';//用下面的函式代替
						move(imgList,index*-680,50,'left',function(){
							autoChange();
						})
						// 設定a的樣式
						setA();
					}
				}
				// 自動切換圖片
				autoChange();
				
				// 專門建立一個函式來設定a的樣式
				function setA(){
					// 判斷當前索引是不是最後一張圖片
					if(index>=imgArr.length-1){
						index=0;
						// 此時顯示的是最後一張圖片 和第一張一摸一樣 通過修改css 來進行改變
						imgList.style.left=0;
					}
					
					for(var i=0;i<allA.length;i++){
						allA[i].style.backgroundColor='';
					}
					allA[index].style.backgroundColor='black';
				}
				var timer;
				// 自動切換圖片
				function autoChange(){
					// 開啟一個定時器進行自動切換圖片
					timer=setInterval(function(){
						// 讓索引自增
						index++;
						index %=imgArr.length;
						move(imgList,index*-680,50,'left',function(){
							setA();
						})
					},2000)
				}
			}
		</script>
	</head>
	<body>
		<!-- 建立一個大容器 -->
		<div id="outer">
			<!-- ul放置圖片 -->
			<ul id="imgList">
				<li><img src="img/01.png" ></li>
				<li><img src="img/02.png" ></li>
				<li><img src="img/03.png" ></li>
				<li><img src="img/04.png" ></li>
				<li><img src="img/05.png" ></li>
				<li><img src="img/01.png" ></li>
			</ul>
			
			<!-- 建立導航條 -->
			<div id="navDiv">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
		</div>
	</body>
</html>
  1. 類的操作
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.b1{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			.b2{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			
		</style>
		<script src="js/tools.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
				var btn01=document.getElementById('btn01');
				var box=document.getElementById('box');
				btn01.onclick=function(){
					// 這樣太慢
					// box.style.backgroundColor='black';
					// box.style.width='300px';
					// box.style.height='300px';
					/**
					 * 類的操作  物件.className=‘類名字’  進行修改
					 */
					toggleClass(box,'b2');
				}
			}
		</script>
	</head>
	<body>
		<button id="btn01">點我變形</button>
		<div id="box" class="b1 b2">
			
		</div>
	</body>
</html>

用到的連個工具

/**
			 *建立一個定時器,可以執行簡單的動畫函式
			 * obj 物件
			 * target:執行的目標
			 * speed 移動速度
			 * attr:要操作的樣式
			 * callback  傳進去一個回撥函式
			 */
			function move(obj,target,speed,attr,callback){
				clearInterval(obj.timer)
				// 過去當前元素的目標位置
				var current=parseInt(getStyle(obj,attr));
				// 讓傳進來的都是正值
				if(current>target){
					speed=-speed
				}
				obj.timer=setInterval(function(){
				var oldValue=parseInt(getStyle(obj,attr));
				var newValue=oldValue+speed;
				if((speed<0&&newValue<target)||(speed>0&&newValue>target)){
					newValue=target;
				}
				obj.style[attr]=newValue+'px'
				if(newValue==target){
					clearInterval(obj.timer);
					// callback();
					// 你要是不傳引數就別調用這個函式
					callback&&callback();
				}
			},30)
			}
			
			/**
			 * 想要兩者相容
			 * 引數 (obj(要獲取元素),要獲取元素的樣式名)
			 */
			function getStyle(obj,name){
				if(window.getComputedStyle){
					return getComputedStyle(obj,null)[name]
				}else{
					return obj.currentStyle[name]
				}
				//一條語句方法
				// return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name]
			}
			
			// 類的增加刪除
			
			/**
			 * 建立一個函式進行新增 類 樣式
			 */
			function addClass(obj,cn){
				if(!haveClass(obj,cn)){
					obj.className +=' '+cn;
				}
			}
			/**
			 * 判斷是否有這個類
			 */
			function haveClass(obj,cn){
				var reg=new RegExp('\\b'+cn+'\\b');
				return reg.test(obj.className);
			}
			/**
			 * 刪除一個類
			 */
			function removeClass(obj,cn){
				var reg=new RegExp('\\b'+cn+'\\b');
				obj.className=obj.className.replace(reg,'');
			}
			
			/**
			 * 綜上  特別好的方法  有就刪除 沒有就新增
			 */
			function toggleClass(obj,cn){
				if(haveClass(obj,cn)){
					removeClass(obj,cn)
				}else{
					addClass(obj,cn);
				}
			}