day03 js 詳解

• JavaScript的基礎
  • JavaScript的變量
  • JavaScript的數據類型
  • JavaScript的語句
  • JavaScript的數組
  • JavaScript的函數
  • JavaScript內建對象
  • JavaScript自定義對象
• BOM的基礎
  • Window對象
  • Navigator
  • Screen
  • History對象
  • Location對象
• DOM的基礎
  • Document對象
  • Element對象
  • Node對象
• innerHTML

1．JavaScript變量.

JavaScript是弱變量類型的語言.弱變量類型：定義變量的時候 變量沒有具體的類型.當變量被賦值的時候.變量才會有具體的數據類型.

????????// 定義變量 在JavaScript中定義所有的變量都使用var. ????????var a = 1; ????????var b = "abc"; ????????var c = true; ????????var d = 'bcd'; ? ????????// 如果了解變量的具體類型 那么可以使用 typeof ????????alert(typeof(a));????????????// output number ????????alert(typeof(b));????????????// output string ????????alert(typeof(c));????????????// output boolean ????????alert(typeof(d));????????????// output string ? ????????// 在JavaScript中 定義字符串 可以使用單引號 或者 雙引號.

2. JavaScript中的語句.

• 1. 條件語句

兩種：if語句 和 switch語句

2. if語句:

????????黑馬javaee+hadoop

3. switch語句

var a = "2"; ????????// Java中switch作用在什么上? ????????// 在Java中 switch() 可以 byte short char int 不可以 long String類型也是不可以 但是在JDK1.7中String類型可以作用在switch上. ????????// 在JavaScript中 switch是否可以作用在string上. string在JavaScript中是原始數據類型. ????????switch(a){ ????????????case "1": ????????????????alert("a==1"); ????????????????break; ????????????case "2": ????????????????alert("a==2"); ????????????????break; ????????????case "3": ????????????????alert("a==3"); ????????????????break; ????????????default: ????????????????alert("a是其他值"); ???????????????? ? ????????}

4. if語句比較的時候 全等和非全等(=== !==)

???????? var a = "98"; ????????????// 與Java不一樣的地方. == 比較的值. 而且可以進行簡單的類型轉換. ????????????// 在JavaScript中有一個 === 全等. (值相等 而且 類型也要相等.) ????????????if(a === 98){ ????????????????alert("a等于98"); ????????????}else{ ????????????????alert("a不等于98"); ????????????}

• 5.循環語句

6.for while dowhile for in

for語句

????????var arr = [11,22,33,44]; ???????? ? ????????/* ????????for(var i = 0;i<arr.length;i++){ ????????????alert(arr[i]); ????????} ????????*/

while語句

????????var i = 0; ????????while(i<arr.length){ ????????????alert(arr[i]); ????????????i++; ????????}

dowhile

????????var i = 0; ????????do{ ????????????alert(arr[i]); ????????????i++; ????????}while(i<arr.length);

for in

????????for(var i in arr){ ????????????alert(arr[i]); ????????}

JavaScript中的數據類型

JavaScript中5種原始數據類型:

Undefined、Null、Boolean、Number 和 String

// null 和 undefined區別? ????????// 定義變量 變量沒有初始化 如果訪問了這個對象 對象中的某個屬性不存在 訪問了對象的不存在的這個屬性 undefined ????????// 對象不存在 null ? ????????//var div1 = document.getElementById("div1111"); ????????//alert(div1); // null ? ????????var a; ????????if(a == undefined){ ????????????alert("a沒有初始化"); ????????} ? ????????//var div1 = document.getElementById("div1") ????????//alert(div1.href);

7.JS中的數組.

????????????// 定義數組. ????????????var arr1 = []; // 定義一個空數組 ????????????var arr2 = [11,22,33,44]; // 定義了一個有元素的數組. ????????????var arr3 = [11,true,'abc']; // 定義一個數組 存入不同的數據類型. 但是一般不建議這樣使用. ? ????????????/* ????????????for(var i = 0;i<arr3.length;i++){ ????????????????????alert(arr3[i]); ????????????} ????????????*/ ????????????// 定義數組 使用對象定義 ????????????var arr4 = new Array();????????// 定義了一個空數組. ????????????var arr5 = new Array(5);????// 定義了一個長度為5的數組. ????????????//alert(arr5[0]); ????????????// alert(arr4.length); ????????????var arr6 = new Array(1,2,3,4,5,6); // 定義了一個數組 元素 1,2,3,4,5 ????????????arr6[100] = 10; ? ????????????// 數組的長度是以 數組的最大下標值 + 1 ????????????alert(arr6.length); ? ????????????// 面試題 ????????????/* ????????????????一下的語句那個是錯誤的( C ) ????????????????A.var a = //; ????????????????B.var a = []; ????????????????C.var a = (); ????????????????D.var a = {}; ????????????*/

3. JS中的函數

1. 定義函數:

一種：普通方式 function 函數名(參數列表){ 函數體 } 二種:構造方式(動態函數) var 函數名 = new Function("參數列表","函數體"); 三種:直接量方式 var 函數名 = function(參數列表){ 函數體 }

2. 函數中變量作用范圍

在JavaScript中存在于兩個域的. 全局域和函數域.

3. 特殊的函數

回調函數：作為參數傳遞的函數 匿名函數：沒有函數名的函數 匿名回調函數：這個方法作為參數傳遞而且還沒有方法名 私有函數:定義在函數內部的函數. 保證函數的內部代碼私有性。 一個函數執行多個邏輯 返回函數的函數 自調函數:定義()() 第一個小括號是函數定義 第二個小括號是函數調用.

4. JS中的內置對象.

• 1.Array對象

常用：

length:計算數組的長度. prototype:原型.

常用方法

reverse() :反轉 sort() : 排序

• 2.Boolean對象

• 3. Date對象

• 4.Math對象

• 5.Number對象

• 6.String對象

常用:

charAt(); indexOf(); split(); match(); substr(); substring();

?

• 7.RegExp對象.

常用的方法:test();

5.JS的面向對象.

1.JS不是面向對象的 是基于對象. JS中的函數就是對象.

2.對象的定義：

一種： var p1 = new Object(); 二種: var p2 = {}; 三種： function P{ }

3.將三種定義形式.分成兩類.

普通形式

var obj = { name:"張三", sayHello:function(){ } }

?

函數形式

function Person(){ this.name = "李四"; this.sayHello = function(){ } } 調用的時候 需要new var p = new Person();

6.JS函數中的重載問題.

1.函數的重載:一個類中的方法名相同，但是參數個數或參數類型不同.

JS中本身沒有重載需要使用arguments對象來實現類似與重載的效果 arguments本身就是數組.

arguments存的方法中的參數.

????????// 使用argument模擬重載效果. ????????function add(){ ????????????if(arguments.length == 2){ ????????????????return arguments[0] + arguments[1]; ????????????}else if(arguments.length == 3){ ????????????????return arguments[0] + arguments[1] + arguments[2]; ????????????} ????????} ? ????????alert(add(1,2,3));

2.JS中的繼承:

要了解繼承就需要先了解prototype屬性.在每個函數對象中都有一個prototype的屬性.

那么就可以使用prototype對對象進行擴展（包括內建對象）

prototype:原型.作用用類對函數對象.進行擴展.

3.JS擴展內建對象.

????????????????// 擴展Array對象.判斷某一個值是否在數組中。 ????????????????Array.prototype.inArrays = function(val){ ????????????????????????for(var i = 0;i<this.length;i++){ ????????????????????????????????if(this[i]==val){ ????????????????????????????????????return true ????????????????????????????????} ????????????????????????} ????????????????????????return false; ????????????????} ???????????????? ? ????????????????var arr = ["red","green","blue"]; ????????????????alert(arr.inArrays("black"));

4.JS中的繼承：JS中本身沒有繼承，實現繼承的效果. prototype就是一個函數對象的屬性.利用了這個屬性的擴展功能(擴展了的屬性和方法 就可以當成在自己類定義的時候定義的那個屬性和方法.)

5.利用prototype完成繼承的效果.

????????????function A(){ this.aName = "a"; } function B(){ this.bName = "b"; } B.prototype = new A();

6.另一種繼承 原型繼承.

function A(){} A.prototype = { ????aName : "a" } ? function B(){ ????this.bName = "b"; } ? B.prototype = A.prototype; ? var b = new B(); alert(b.bName); alert(b.aName);

7.BOM:Browser Object Model(瀏覽器對象模型.)

• Window:對象表示瀏覽器中打開的窗口 最頂層對象.
• Navigator :瀏覽器對象.
• Screen: 屏幕對象
• History:瀏覽器歷史對象
• Location:地址對象.

8.Window對象

常用的方法：

alert(); :彈出一個提示框. confirm(); :彈出一個確認框 prompt(); :輸入框 setTimeout();定時 執行一次就ok了 setInterval();定時 循環執行 clearTimeout();清除定時 clearInterval();清除定時 open():打開一個新窗口 close():窗口關閉了.

1.案例：open和showModalDialog

2.History對象：瀏覽器的歷史對象

常用的方法

back() go() forward()

3.Screen對象:屏幕對象

常用的屬性

width height

4.Location對象：地址對象

常用的屬性 href = url

5.Navigator對象：瀏覽器對象

?

_——————————————————————————————————————————————————

_——————————————————————————————————————————————————

自我學習筆記：

?

day03

?

上節內容回顧

????1、html的表單標簽

????????<form>:

????????????** action method enctype

????????輸入項：

????????????** type="text"

????????????** passwrod

????????????** radio

????????????** checkbox

????????????** file

????????????** submit

????????????** reset

????????????** type="image" src=""

????????????** select

????????????** textarea

????????????** type="button"

????????????** hidden

????

????2、css????

????????** css和html的結合方式（四種）

????????????（1）在標簽里面style

????????????（2）使用標簽<style>

????????????（3） 使用@import url()

????????????（4）link頭標簽實現

?

????????** css的基本選擇器（三種）

????????????（1）標簽選擇器

????????????（2）class選擇器 .名稱

????????????（3）id選擇器 #名稱

????

????3、javascript

????????** java和javascript區別

?

????????** js原始類型（五個）

????????????string number boolean null undifined

????????????使用var

????????** js的語句

????????????if switch while for do-while

????????

????????** js運算符

????????????* == 和 === 區別

????????

????????** js的數組

????????????** 創建方式（三種）

????????????????var arr1 = [1,2,3,"4"];

????????????????var arr2 = new Array(3);

????????????????var arr3 = new Array(4,5,6);

????????????** 屬性 length：長度

????????

????????** js的函數

????????????** 定義方式（三種）

????????????????function add1(){}

????????????????function(){}

????????

????????** js的全局變量和局部變量

????????????** 全局變量：在頁面的任何js的部分都可以使用

????????????** 局部變量：在方法內部定義的變量，只是在方法內部使用

????????

????????** script標簽應該放在什么位置 </body>

?

1、js的String對象

????** 創建String對象

????????*** var str = "abc";

????

????** 方法和屬性（文檔）

????????*** 屬性 length：字符串的長度

?

????????*** 方法

????????（1）與html相關的方法

????????????- bold()：加粗

????????????- fontcolor(): 設置字符串的顏色

????????????- fontsize(): 設置字體的大小

?

????????????- link(): 將字符串顯示成超鏈接

????????????????**** str4.link("hello.html")

????????????

????????????- sub() sup(): 下標和上標

?

????????（2）與java相似的方法

????????????- concat(): 連接字符串

????????????????** //concat方法

????????????????var str1 = "abc";

????????????????var str2 = "dfg";

????????????????document.write(str1.concat(str2));

?

????????????- charAt():返回指定指定位置的字符串

????????????????** var str3 = "abcdefg";

????????????????document.write(str3.charAt(20)); //字符位置不存在，返回空字符串

????????????

????????????- indexOf()： 返回字符串位置

????????????????** var str4 = "poiuyt";

????????????????document.write(str4.indexOf("w")); //字符不存在，返回-1

????????????

????????????- split()：切分字符串，成數組

????????????????** var str5 = "a-b-c-d";

????????????????var arr1 = str5.split("-");

????????????????document.write("length: "+arr1.length);

????????????

????????????- replace() ： 替換字符串

????????????????* 傳遞兩個參數：

????????????????????-- 第一個參數是原始字符

????????????????????-- 要替換成的字符

????????????????* var str6 = "abcd";

????????????????document.write(str6);

????????????????document.write("<br/>");

????????????????document.write(str6.replace("a","Q"));

????????????

????????????- substr()和substring()

????????????????* var str7 = "abcdefghuiop";

????????????????//document.write(str7.substr(5,5)); //fghui 從第五位開始，向后截取五個字符

????????????????????*** 從第幾位開始，向后截取幾位

?

????????????????document.write("<br/>");

????????????????document.write(str7.substring(3,5)); //de 從第幾位開始到第幾位結束 [3,5)

????????????????????*** 從第幾位開始，到第幾位結束，但是不包含最后哪一位

????????????

2、js的Array對象

????** 創建數組（三種）

????????- var arr1 = [1,2,3];

????????- var arr2 = new Array(3); //長度是3

????????- var arr3 = new Array(1,2,3); //數組中的元素是1 2 3

?

????????- var arr = []; //創建一個空數組

????

????** 屬性：length：查看數組的長度

?

????** 方法

????????- concat方法： 數組的連接

????????????* var arr11 = [1,2,3];

????????????var arr12 = [4,5,6];

????????????document.write(arr11.concat(arr12));

?

????????- join()：根據指定的字符分割數組

????????????* var arr13 = new Array(3);

????????????arr13[0] = "a";

????????????arr13[1] = "b";

????????????arr13[2] = "c";

?

????????????document.write(arr13);

????????????document.write("<br/>");

????????????document.write(arr13.join("-"));

????????

????????- push():向數組末尾添加元素，返回數組的新的長度

????????????** 如果添加的是一個數組，這個時候把數組當做一個整體字符串添加進去

?

????????????* //push方法

????????????var arr14 = new Array(3);

????????????arr14[0] = "tom";

????????????arr14[1] = "lucy";

????????????arr14[2] = "jack";

????????????document.write("old array: "+arr14);

?

????????????document.write("<br/>");

????????????document.write("old length:"+arr14.length);

?

????????????document.write("<br/>");

????????????document.write("new length: "+arr14.push("zhangsan"));

?

????????????document.write("<br/>");

????????????document.write("new array: "+arr14);

?

????????????* ????????var arr15 = ["aaa","bbb","ccc"];

????????????var arr16 = ["www","qqq"];

?

????????????document.write("old array:"+arr15);

????????????document.write("<br/>");

????????????document.write("old length:"+arr15.length);

?

????????????document.write("<br/>");

????????????document.write("new length:"+arr15.push(arr16));

????????????document.write("<br/>");

????????????document.write("new array: "+arr15);

????????????for(var i=0;i<arr15.length;i++) {

????????????????alert(arr15[i]);

????????????}

????????

????????- pop()：表示 刪除最后一個元素，返回刪除的那個元素

????????????* var arr17 = ["zhangsan","lisi","wangwu","zhaoliu"];

????????????document.write("old array: "+arr17);

????????????document.write("<br/>");

?

????????????document.write("return: "+arr17.pop());

????????????document.write("<br/>");

????????????document.write("new array: "+arr17);

????????

????????- reverse():顛倒數組中的元素的順序

????????????* var arr17 = ["zhangsan","lisi","wangwu","zhaoliu"];

????????????document.write("old array: "+arr17);

????????????document.write("<br/>");

?

????????????document.write("return: "+arr17.pop());

????????????document.write("<br/>");

????????????document.write("new array: "+arr17);

?

????????????//reverse方法

????????????document.write("<hr/>");

????????????var arr18 = ["zhangsan1","lisi1","zhaoliu1","niuqi1"];

????????????document.write("old array: "+arr18);

????????????document.write("<br/>");

????????????document.write("new array:"+arr18.reverse());

?

?

3、js的Date對象

????** 在java里面獲取當前時間

????????Date date = new Date();

????????//格式化

????????//toLocaleString() //2015年4月17日 11:17:12

????

????** js里面獲取當前時間

????????var date = new Date();

????????//獲取當前時間

????????var date = new Date();

????????document.write(date); // Fri Apr 17 10:47:46 UTC+0800 2015

?

????????//轉換成習慣的格式

????????document.write("<hr/>");

????????document.write(date.toLocaleString());

????

????** 獲取當前的年方法

????????getFullYear()：得到當前的年

????????????**** document.write("year: "+date.getFullYear());

????

????** 獲取當前的月方法

????????getMonth()：獲取當前的月

????????????*** 返回的是 0-11月，如果想要得到準確的值，加1

????????????**** var date1 = date.getMonth()+1;

????????????document.write("month: "+date1);

????

????** 獲取當前的星期

????????getDay()：星期,返回的是 (0 ~ 6)

????????** 外國朋友，把星期日作為一周的第一天，星期日返回的是 0

???????? 而星期一到星期六 返回的是 1-6

????????** document.write("week: "+date.getDay());

?

????** 獲取當前的日

????????getDate()：得到當前的天 1-31

????????** document.write("day: "+date.getDate());

????

????** 獲取當前的小時

????????getHours()：獲取小時

????????** document.write("hour: "+date.getHours());

????

????** 獲取當前的分鐘

????????getMinutes()：分鐘

????????** document.write("minute: "+date.getMinutes());

?

????** 獲取當前的秒

????????getSeconds(): 秒

????????** document.write("second: "+date.getSeconds());

????

????** 獲取毫秒數

????????getTime()

????????返回的是1970 1 1 至今的毫秒數

?

????????** 應用場景：

????????????*** 使用毫秒數處理緩存的效果（不有緩存）

????????????????http://www.baidu.com?毫秒數

????????

4、js的Math對象

????* 數學的運算

????** 里面的都是靜態方法，使用可以直接使用 Math.方法()

?

????** ceil(x): 向上舍人

?

????** floor(x)：向下舍人

?

????** round(x)：四舍五入

?

????** random()：得到隨機數（偽隨機數）

????????- 得到0-9的隨機數

????????????Math.random()*10

????????????Math.floor(Math.random()*10));

????

5、js的全局函數

????* 由于不屬于任何一個對象，可以直接寫名稱使用

?

????** eval() ： 執行js代碼（如果字符串是一個js代碼，使用方法直接執行）

????????**** var str = "alert('1234');";

????????//alert(str);

????????eval(str);

?

????** encodeURI() ：對字符進行編碼

????????- %E6%B5%8B%E8%AF%95%E4%B8%AD%E6%96%87aaa1234

???? ?

???? decodeURI() ：對字符進行解碼

?

???? encodeURIComponent() 和 decodeURIComponent()

????

????** isNaN():判斷當前字符串是否是數字

????????-- var str2 = "aaaa";

????????alert(isNaN(str2));

????????*** 如果是數字，返回false

????????*** 如果不是數字，返回true

????

????** parseInt()：類型轉換

????????** var str3 = "123";

????????document.write(parseInt(str3)+1);

????

6、js的函數的重載

????** 什么是重載？方法名相同，參數不同

?

????** js的重載是否存在？ 不存在

????????** 調用最后一個重載的方法

????????** 把傳遞的參數保存到 arguments數組里面

?

????** js里面是否存在重載？(面試題目)

????????（1）js里面不存在重載。

????????（2）但是可以通過其他方式模擬重載的效果 （通過aruguments數組來實現）

?

????????*** function add1() {

????????????//比如傳遞的是兩個參數

????????????if(arguments.length == 2) {

????????????????return arguments[0]+arguments[1];

?

????????????} else if (arguments.length == 3) {

????????????????return arguments[0]+arguments[1]+arguments[2];

?

????????????} else if (arguments.length == 4) {

?

????????????????return arguments[0]+arguments[1]+arguments[2]+arguments[3];

????????????} else {

????????????????return 0;

????????????}

????????}

?

7、js的bom對象

????** bom：broswer object model: 瀏覽器對象模型

?

????** 有哪些對象？

????*** navigator： 獲取客戶機的信息（瀏覽器的信息）

????????- navigator.appName

????????- document.write(navigator.appName);

?

????*** screen: 獲取屏幕的信息

????????- document.write(screen.width);

????????document.write("<br/>");

????????document.write(screen.height);

?

????*** location: 請求url地址

????????- href屬性

????????**** 獲取到請求的url地址

????????????- document.write(location.href);

?

????????**** 設置url地址

????????????- 頁面上安置一個按鈕，按鈕上綁定一個事件，當我點擊這個按鈕，頁面可以跳轉到另外一個頁面

????????????- location.href = "hello.html";

?

????????**** <input type="button" value="tiaozhuan" οnclick="href1();"/>

????????????- 鼠標點擊事件 οnclick="js的方法;"

????????

????*** history：請求的url的歷史記錄

????????- 創建三個頁面

????????????1、創建第一個頁面 a.html 寫一個超鏈接 到 b.html

????????????2、創建b.html 超鏈接 到 c.html

????????????3、創建c.html

?

????????- 到訪問的上一個頁面

????????????history.back();

????????????history.go(-1);

????????????//history.go(參數)

???????????? ： -1 表示返回上一個頁面

???????????? ： 1 表示前進到下一個頁面

?

????????- 到訪問的下一個頁面

????????????history.forward();

????????????history.go(1);

?

????**** window（****）

????????* 窗口對象

????????* 頂層對象（所用的bom對象都是在window里面操作的）

?

????????** 方法

????????????- window.alert() : 頁面彈出一個框，顯示內容

????????????????** 簡寫alert()

????????????

????????????- confirm()： 確認框

????????????????- var flag = window.confirm("顯示的內容");

????????????

????????????- prompt()： 輸入的對話框

????????????????- window.prompt("please input : ","0");

????????????????- window.prompt("在顯示的內容","輸入框里面的默認值");

????????????

????????????- open() :　打開一個新的窗口

????????????????** open("打開的新窗口的地址url","","窗口特征，比如窗口寬度和高度")

????????????????- 創建一個按鈕，點擊這個按鈕，打開一個新的窗口

????????????????- window.open("hello.html","","width=200,height=100");

????????????

????????????- close(): 關閉窗口(瀏覽器兼容性比較差)

????????????????- window.close();

????????????

????????????- 做定時器

????????????** setInterval("js代碼",毫秒數) 1秒=1000毫秒

????????????????- 表示每三秒，執行一次alert方法

????????????????window.setInterval("alert('123');",3000);

????????????????

????????????** setTimeout("js代碼",毫秒數)

????????????????- 表示在毫秒數之后執行，但是只會執行一次

?

????????????????- 表示四秒之后執行js代碼，只會執行一次

????????????????window.setTimeout("alert('abc');",4000);

????????????

????????????** clearInterval(): 清除setInterval設置的定時器

????????????????var id1 = setInterval("alert('123');",3000);//通過setInterval會有一個返回值

????????????????clearInterval(id1);

?

????????????** clearTimeout() : 清除setTimeout設置的定時器

????????????????var id2 = setTimeout("alert('abc');",4000);

????????????????clearTimeout(id2);

?

8、js的dom對象（****）

????* dom：document object model: 文檔對象模型

????** 文檔：

????????超文本文檔（超文本標記文檔） html 、xml

????** 對象：

????????提供了屬性和方法

????** 模型：使用屬性和方法操作超文本標記型文檔

?

????*** 可以使用js里面的dom里面提供的對象，使用這些對象的屬性和方法，對標記型文檔進行操作

?

????*** 想要對標記型文檔進行操作，首先需要 對標記型文檔里面的所有內容封裝成對象

????????-- 需要把html里面的標簽、屬性、文本內容都封裝成對象

????

????*** 要想對標記型文檔進行操作，解析標記型文檔

????????- 畫圖分析，如何使用dom解析html

?

????*** 解析過程

????????根據html的層級結構，在內存中分配一個樹形結構，需要把html中的每部分封裝成對象，

????????- document對象：整個文檔

????????- element對象：標簽對象

????????- 屬性對象

????????- 文本對象

?

????????-- Node節點對象：這個對象是這些對象的父對象

????????????*** 如果在對象里面找不到想要的方法，這個時候到Node對象里面去找

????

????DOM模型有三種：

????????DOM level 1：將html文檔封裝成對象。

????????DOM level 2：在level 1的基礎上添加新的功能，例如：對于事件和css樣式的支持。

????????DOM level 3：支持xml1.0的一些新特性。

?

????* DHTML：是很多技術的簡稱

????????** html: 封裝數據

????????** css：使用屬性和屬性值設置樣式

????????** dom：操作html文檔（標記型文檔）

????????** javascript：專門指的是js的語法語句（ECMAScript）

????

9、document對象

????* 表示整個的文檔

?

????** 常用方法

????????**** write()方法：

????????????（1）向頁面輸出變量（值）

????????????（2）向頁面輸出html代碼

????????????- var str = "abc";

????????????document.write(str);

????????????document.write("<hr/>");

????????

????????**** getElementById();

????????????- 通過id得到元素（標簽）

????????????- //使用getElementById得到input標簽

????????????var input1 = document.getElementById("nameid"); //傳遞的參數是標簽里面的id的值

????????????//得到input里面的value值

????????????alert(input1.name); //標簽對象.屬性名稱

????????????//向input里面設置一個值value

????????????input1.value = "bbbbb";

????????

????????**** getElementsByName();

????????????- 通過標簽的name的屬性值得到標簽

????????????- 返回的是一個集合（數組）

????????????- //使用getElementsByName得到input標簽

????????????var inputs = document.getElementsByName("name1"); //傳遞的參數是 標簽里面的name的值

????????????//alert(inputs.length);

????????????//遍歷數組

????????????for(var i=0;i<inputs.length;i++) { //通過遍歷數組，得到每個標簽里面的具體的值

????????????????var input1 = inputs[i]; //每次循環得到input對象，賦值到input1里面

????????????????alert(input1.value); //得到每個input標簽里面的value值

????????????}

????????

????????**** getElementsByTagName("標簽名稱");

????????????- 通過標簽名稱得到元素

????????????- //演示getElementsByTagName

????????????var inputs1 = document.getElementsByTagName("input"); //傳遞的參數，是標簽名稱

????????????//alert(inputs1.length);

????????????//遍歷數組，得到每個input標簽

????????????for(var m=0;m<inputs1.length;m++) {

????????????????//得到每個input標簽

????????????????var input1 = inputs1[m];

????????????????//得到value值

????????????????alert(input1.value);

????????????}

?

????????**** 注意地方

????????????**** 只有一個標簽，而這個標簽只能使用name獲取到，這個時候，使用getElementsByName返回的是一個數組，

????????????但是現在只有一個元素，這個時候就不需要遍歷，而是可以直接通過數組的下標獲取到值

????????????//通過name得到input標簽

????????????var inputs2 = document.getElementsByName("name11")[0];

????????????alert(inputs2.value);

?

????????????var inputss = document.getElementsByTagName("input")[0];

????????????alert(inputss.value);

?

10、案例：window彈窗案例

????- 實現過程

????????1、創建一個頁面

????????????** 有兩個輸入項和一個按鈕

????????????** 按鈕上面有一個事件：彈出一個新窗口 open

?

????????2、創建彈出頁面

????????????** 表格

????????????** 每一行有一個按鈕和編號和姓名

????????????** 按鈕上有一個事件：把當前的編號和姓名，賦值到第一個頁面相應的位置

?

????????????****//實現s1方法

????????????function s1(num1,name1) {

????????????????//需要把num1和name1賦值到window頁面

????????????????//跨頁面的操作 opener：得到創建這個窗口的窗口 得到window頁面

????????????????var pwin = window.opener; //得到window頁面

????????????????pwin.document.getElementById("numid").value = num1;

????????????????pwin.document.getElementById("nameid").value = name1;

????????????????//關閉窗口

????????????????window.close();

????????????}

?

????????????－　opener:屬性，獲取創建當前窗口的窗口

?

????- 做這個案例時候會有一個問題

????????*** 由于我們現在訪問的是本地文件，js安全性（由于js的安全性，導致不允許訪問本地文件），谷歌瀏覽器安全級別很高，不允許訪問本地文件

????????*** 在實際開發中，沒有這樣的問題，實際中不可能訪問本地的文件。

????????*** http://www.baidu.com

?

?

轉載于:https://www.cnblogs.com/Prozhu/p/5712728.html

總結

以上是生活随笔為你收集整理的Day03 javascript详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。