半個月學習HTML CSS JS基礎知識總結下（內涵JS）
阿新 • • 發佈：2021-02-02
技術標籤：javascript
從基本的程式設計知識，到用HTML,CSS配合JS實現動態頁面
基礎知識
- 基本操作引入
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 彈出一個警告框
alert('出入平安！！')
// 在計算機頁面輸出東西
document.write('我在頁面中顯示')
// 在控制檯顯示
console.log('猜猜我在哪啊' - 基本知識
<script type="text/javascript">
// 字面量(不可改變)：像 1，2，3等
// 變數(用來儲存字面量) 以後常用 - 資料型別
/**
* 基本資料型別：
* String,Number,Boolean,Null,Undefined
* 引用資料型別：
* Object
*
* 可以利用 \ 來進行轉義
* \n(表示換行) \t(製表符) \"(表示 ") \'(表示 ')
* \\\\ 表示兩個反斜槓
*/
- 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>
- 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>
- 運算子
<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>
- 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>
- 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>
- 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>
- 面向物件建立物件
<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>
- 函式的引數
<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>
- return
<script type="text/javascript">
function fun1(){
function fun2(){
alert('我是fun4中的函式')
}
return fun2;
}
a=fun1();
// console.log(a);
// a();
fun1()();//原理同上一行
</script>
- 立即執行函式
<script type="text/javascript">
/**
* 只會執行一次
*/
(function(a,b){
alert(a+b);
alert('我是一個匿名函式');
})(12,13)
</script>
- 物件中的屬性是函式
<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>
- 列舉物件
<script type="text/javascript">
var obj={
name:'蓋世凱',
age:21,
gender:'男'
};
for(x in obj){
console.log(x);
console.log(obj[x])
}
</script>
- 作用域
<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>
- 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>
- 批量生產物件
<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>
- 建構函式
<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>
- 原型
<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>
- 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>
- 陣列
<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>
- 陣列中的方法：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>
- 陣列的練習+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>
- 陣列中的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>
- 去除陣列中多餘的數------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>
- 陣列中其他的方法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>
- 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>
- 函式中方法：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>
- 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>
- 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>
- 包裝類(瞭解)
<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>
- 字串的相關操作
<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>
- 正則表示式
<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>
- DOM
<script type="text/javascript">
/**
* 也可以在上面設定
*/
window.onload=function(){
// 這裡面寫你要執行的程式碼
/**
* 文件位元組 物件這個物件是window屬性 文件位元組代表整個網頁
*/
// 獲取button物件
var btn=document.getElementById('btn');
// 修改按鈕文字
btn.innerHTML='我是被修改的'
// 繫結一個單擊響應函式
btn.onclick=function(){
alert('你還點~~~~');
}
}
</script>
- 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)
});
}
- 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>
- 新增節點，刪除節點，插入節點+新增刪除使用者資訊練習(在練習裡面)
// 建立一個'廣州'節點新增到#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);//自殺
- 簡便的新增東西
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);
- 使用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>
- 讀取元素的樣式
<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>
- 過去塊的元素
<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>
- 事件物件
<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>
- 冒泡事件
<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>
- 事件的委派
<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>
- 事件的繫結
<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>
- 事件的傳播
<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>
- 滾輪事件
<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>
- 鍵盤事件
<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>
- 鍵盤控制
<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>
- 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>
- 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>
- 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>
- 定時器呼叫
<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>
- 定時器練習（切換圖片）
<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>
- 利用定時器取消延遲
<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>
- 延時呼叫
<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>
- 輪盤圖
<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>
- 類的操作
<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);
}
}