1.1第一個(gè) JavaScript 程序

#這段代碼的效果是，彈出一個(gè)小框，顯示“hello world!”
<html>
  <head></head>
    <body>
      <script>
        alert("hello world!");
      </script>
    </body>
</html>

2.變量的聲明

在 JavaScript 中，變量用 Var 命令做聲明：

var test ;    // 聲明了一個(gè)名為 test 的變量。
var test_2 = "shiyanlou" ;  // 聲明一個(gè)名為 test_2 的變量，并賦值為“shiyanlou”。

在 JavaScript 中，變量也可以不作聲明，而在使用時(shí)再根據(jù)數(shù)據(jù)的類型來(lái)確其變量的類型，如：

x = 100 ;     // 變量 x 為整數(shù)
y = "hello" ; // 變量 y 為字符串
z = True ;    // 變量 z 為布爾型
cars=["Audi","BMW","Volvo"]; // cars 是一個(gè)數(shù)組

3.Javascript語(yǔ)句

if/else
switch/case
for
while
break/continue

4.JavaScript函數(shù)

function 函數(shù)名 (參數(shù)1，參數(shù)2)
{
  函數(shù)體;

  return 返回值;
}

5.事件

<html>
<head>
  <script>
    function click_button() {     // 事件處理程序，彈出提示窗
      alert('welcome to shiyanlou');
    }
  </script>
</head>

<body align="center">
  <br></br>
  <button onclick="click_button()">click me</button>  <!--發(fā)生事件 onclick 的時(shí)候，執(zhí)行 click_button()-->
</body>
</html>

常用事件

name	function
onclick	單擊
ondblclick	雙擊
onfocus	元素獲得焦點(diǎn)
onblur	元素失去焦點(diǎn)
onmouseover	鼠標(biāo)移到某元素之上
onmouseout	鼠標(biāo)從某元素移開(kāi)
onmousedown	鼠標(biāo)按鈕被按下
onmouseup	鼠標(biāo)按鍵被松開(kāi)
onkeydown	某個(gè)鍵盤(pán)按鍵被按下
onkeyup	某個(gè)鍵盤(pán)按鍵被松開(kāi)
onkeypress	某個(gè)鍵盤(pán)按鍵被按下并松開(kāi)

其中，onmouseover 和 onmouseout 事件可用于在鼠標(biāo)移至 HTML 元素上和移出元素時(shí)觸發(fā)函數(shù)。比如這一例子：

<html>
<head></head>
    <body>
        <div style="background-color:green;width:200px;height:50px;margin:20px;padding-top:10px;color:#ffffff;font-weight:bold;font-size:18px;text-align:center;"
          onmouseover="this.innerHTML='good'"
          onmouseout="this.innerHTML='you have moved out'"
        >move your mouse to here</div>
    </body>
</html>

onmousedown, onmouseup 是鼠標(biāo) 壓下和松開(kāi) 的事件。首先當(dāng)點(diǎn)擊鼠標(biāo)按鈕時(shí)，會(huì)觸發(fā) onmousedown 事件，當(dāng)釋放鼠標(biāo)按鈕時(shí)，會(huì)觸發(fā) onmouseup 事件。
舉例說(shuō)明：

<html>
<head>
  <script>
    function mDown(obj)    // 按下鼠標(biāo) 的 事件處理程序
    {
    obj.style.backgroundColor="#1ec5e5";
    obj.innerHTML="release your mouse"
    }
    function mUp(obj)     // 松開(kāi)鼠標(biāo) 的 事件處理程序
    {
    obj.style.backgroundColor="green";
    obj.innerHTML="press here"
    }
  </script>
</head>
<body>
<div style="background-color:green;width:200px;height:35px;margin:20px;padding-top:20px;color:rgb(255,255,255);font-weight:bold;font-size:18px;text-align:center;"

onmousedown="mDown(this)"
onmouseup="mUp(this)"
>press here</div>
</body>

</html>

6.對(duì)象

6.1創(chuàng)建對(duì)象

student = new Object();  // 創(chuàng)建對(duì)象“student”

student.name = "Tom";   // 對(duì)象屬性 名字
student.age  = "19";    // 對(duì)象屬性 年齡

student.study =function() {   // 對(duì)象方法 學(xué)習(xí)
    alert("studying");
};

student.eat =function() {     // 對(duì)象方法 吃
    alert("eating");
};

以上方法在創(chuàng)建多個(gè)對(duì)象時(shí)，會(huì)產(chǎn)生大量重復(fù)代碼，所以我們也可以采用函數(shù)的方式新建對(duì)象：

function student(name,age) {
    this.name = name;
    this.age = age;
    this.study = function() {
        alert("studying");
    };
    this.eat = function() {
        alert("eating");
    }
}

然后通過(guò) new 創(chuàng)建 student 對(duì)象的實(shí)例：

var student1 = new student('Tom','19');
var student2 = new student('Jack','20');

6.2訪問(wèn)對(duì)象的屬性與方法

新建的 student1 對(duì)象，可以這樣使用：

<script>
var x = student1.name;  // 訪問(wèn)對(duì)象的屬性
var y = student1.age;

document.write(x);
document.write(y);

student1.study();     // 調(diào)用對(duì)象的方法
</script>

當(dāng)我們需要反復(fù)訪問(wèn) 某對(duì)象的時(shí)候，可以使用 with 語(yǔ)句簡(jiǎn)化操作，而不需要反復(fù)地用“.”符號(hào)，比如：

with(student1) {
var x = name;
var y= age;
study();
eat();
}

7.內(nèi)置對(duì)象

1.String

屬性：string.length

方法	功能
charAt(n)	返回該字符串第 n 位的單個(gè)字符。（從 0 開(kāi)始計(jì)數(shù)）
charCodeAt(n)	返回該字符串第 n 位的單個(gè)字符的 ASCII 碼。
indexOf()	用法：string_1.indexOf(string_2,n); 從字符串 string_1 的第 n 位開(kāi)始搜索，查找 string_2，返回查找到的位置，如果未找到，則返回 -1，其中 n 可以不填，默認(rèn)從第 0 位開(kāi)始查找。
lastIndexOf()	跟 indexOf() 相似，不過(guò)是從后邊開(kāi)始找。
split('分隔符')	將字符串按照指定的分隔符分離開(kāi)，返回一個(gè)數(shù)組，例如：'1&2&345&678'.split('&')；返回?cái)?shù)組：1,2,345,678。
substring(n,m)	返回原字符串從 n 位置到 m 位置的子串。
substr(n,x)	返回原字符串從 n 位置開(kāi)始，長(zhǎng)度為 x 的子串。
toLowerCase()	返回把原字符串所有大寫(xiě)字母都變成小寫(xiě)的字符串。
toUpperCase()	返回把原字符串所有小寫(xiě)字母都變成大寫(xiě)的字符串。

2.Math

屬性	作用
E	返回常數(shù) e (2.718281828...)。
LN2	返回 2 的自然對(duì)數(shù) (ln 2)。
LN10	返回 10 的自然對(duì)數(shù) (ln 10)。
LOG2E	返回以 2 為低的 e 的對(duì)數(shù) (log2e)。
LOG10E	返回以 10 為低的 e 的對(duì)數(shù) (log10e)。
PI	返回π（3.1415926535...)。
SQRT1_2	返回 1/2 的平方根。
SQRT2	返回 2 的平方根。

方法	作用
abs(x)	返回 x 的絕對(duì)值。
round(x)	返回 x 四舍五入后的值。
sqrt(x)	返回 x 的平方根。
ceil(x)	返回大于等于 x 的最小整數(shù)。
floor(x)	返回小于等于 x 的最大整數(shù)。
sin(x)	返回 x 的正弦。
cos(x)	返回 x 的余弦。
tan(x)	返回 x 的正切。
acos(x)	返回 x 的反余弦值（余弦值等于 x 的角度），用弧度表示。
asin(x)	返回 x 的反正弦值。
atan(x)	返回 x 的反正切值。
exp(x)	返回 e 的 x 次冪 (e^x)。
pow(n, m)	返回 n 的 m 次冪 (nm)。
log(x)	返回 x 的自然對(duì)數(shù) (ln x)。
max(a, b)	返回 a, b 中較大的數(shù)。
min(a, b)	返回 a, b 中較小的數(shù)。
random()	返回大于 0 小于 1 的一個(gè)隨機(jī)數(shù)。

3.Array數(shù)組對(duì)象

注意：JavaScript只有一維數(shù)組，要使用多維數(shù)組，請(qǐng)用這種虛擬法：
var myArray = new Array(new Array(), new Array(), new Array(), ...);
調(diào)用這個(gè)“二維數(shù)組”的元素時(shí)：
myArray[2][3] = ...;

屬性：length
返回?cái)?shù)組的長(zhǎng)度，即數(shù)組里有多少個(gè)元素。它等于數(shù)組里最后一個(gè)元素的下標(biāo)加一。

想添加一個(gè)元素，只需要：
myArray[myArray.length] = ...;

(2)Array 的方法

join("指定分隔符") ：返回一個(gè)字符串，把數(shù)組元素串起來(lái)，元素間用指定分隔符隔開(kāi)。
toString() ：把數(shù)組轉(zhuǎn)為字符串，并返回結(jié)果。
reverse() ：使數(shù)組元素倒序。
slice(n,m) ：返回子數(shù)組，從數(shù)組第 n 個(gè)元素到第 m 個(gè)元素。
sort(SortFunction) ：按照指定的 SortFunction 將數(shù)組的元素排序。
concat(Array_1,Array_2) ：用于連接兩個(gè)或多個(gè)數(shù)組。

8.DOM

DOM 是文檔對(duì)象模型（Document Object Model）的簡(jiǎn)稱，它的基本思想是把結(jié)構(gòu)化文檔（比如 HTML 和 XML）解析成一系列的節(jié)點(diǎn)，再由這些節(jié)點(diǎn)組成一個(gè)樹(shù)狀結(jié)構(gòu)（DOM Tree）。所有的節(jié)點(diǎn)和最終的樹(shù)狀結(jié)構(gòu)，都有規(guī)范的對(duì)外接口，以達(dá)到使用編程語(yǔ)言操作文檔的目的，所以，DOM 可以理解成文檔（HTML 文檔、XML 文檔）的編程接口。

選取文檔元素
(1)通過(guò)ID選取
我們可以使用方法 getElementById() 通過(guò)元素的 ID 而選取元素，并對(duì)其做操作，比如：

<html>
<body>
<div id="my_div"></div>

<script>
    document.getElementById("my_div").style.height="100px";  // 設(shè)置 my_div 高度為 100px
    document.getElementById("my_div").style.background="red"; // 設(shè)置 my_div 顏色為 紅色
</script>

</body>
</html>

(2)通過(guò)名字（Name）或標(biāo)簽名（TagName）選取

<html>
<body>
<input type="text" />
<input type="text" />

<script>
document.getElementsByTagName("input")[0].value="hello";   // 下標(biāo)為 [0] 表示選取第 1 個(gè) input 標(biāo)簽
document.getElementsByTagName("input")[1].value="shiyanlou"; // 下標(biāo)為 [1] 表示選取第 2 個(gè) input 標(biāo)簽
</script>

</body>
</html>

9.節(jié)點(diǎn)、屬性操作和文檔遍歷

查詢和設(shè)置元素屬性
可以通過(guò) getAttribute() 和 setAttribute() 查詢和設(shè)置元素的屬性：

<html>
<head>
<style>
.class_1 {
    height:100px;
    width:100px;
    background:red;
}
.class_2 {
    height:100px;
    width:100px;
    background:blue;
}
</style>
</head>

<body>
<div id="div_1" class="class_1"></div>
<br/>
<a>before:</a>

<script>
document.write(document.getElementById("div_1").getAttribute("class")); // 查詢 div_1 的屬性
</script>

<br/>
<a>after:</a>

<script>
document.getElementById("div_1").setAttribute("class","class_2");  // 修改 div_1 的屬性為 class_2
document.write(document.getElementById("div_1").getAttribute("class")); // 再次查詢 div_1 的屬性
</script>

</body>
</html>

父節(jié)點(diǎn)
通過(guò) parentNode() 方法可以查看并操作一個(gè)節(jié)點(diǎn)的父節(jié)點(diǎn)，示例：找到 id 為 demo 的元素的父節(jié)點(diǎn)，并輸出其 class 的名稱：

<html>
<body>
<div class="demo-parent">
    <div id="demo">        
    </div>
</div>

<script>
    document.write(document.getElementById("demo").parentNode.getAttribute("class"));
</script>
</body>
</html>

創(chuàng)建和插入節(jié)點(diǎn)
JavaScript 可以動(dòng)態(tài)地在頁(yè)面中創(chuàng)建并插入節(jié)點(diǎn)，這便需要用到 createElement()、appendChild() 方法，它們的作用分別是創(chuàng)建節(jié)點(diǎn)和插入節(jié)點(diǎn)。

比如：創(chuàng)建一個(gè) div 并為其設(shè)置高度（100px）和背景色（red），并追加到 body 后面：

<html>
<body>
<div style="background:#00F; height:100px"></div>
<script>
    var mydiv = document.createElement("div");
    mydiv.style.height = "100px";
    mydiv.style.background = "red";
    document.getElementsByTagName("body")[0].appendChild(mydiv);
</script>
</body>
</html>

刪除節(jié)點(diǎn)
除了創(chuàng)建，我們還可以刪除一個(gè)節(jié)點(diǎn)，通過(guò) removeChild() 方法：

<html>
<head>
</head>
<body>
<div>
    <div id="div_red" style="background:#F00; height:100px"></div>
    <div id="div_blue" style="background:#00F; height:100px"></div>
</div>
<script>
function remove_red(){
    var obj = document.getElementById("div_red");
    obj.parentNode.removeChild(obj);
    }
</script>
<button onclick="remove_red()">remove red div</button>
</body>
</html>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

JavaScript基礎(chǔ)

JavaScript基礎(chǔ)

1.1第一個(gè) JavaScript 程序

2.變量的聲明

3.Javascript語(yǔ)句

4.JavaScript函數(shù)

5.事件

常用事件

6.對(duì)象

6.1創(chuàng)建對(duì)象

6.2訪問(wèn)對(duì)象的屬性與方法

7.內(nèi)置對(duì)象

1.String

2.Math

3.Array數(shù)組對(duì)象

(2)Array 的方法

8.DOM

9.節(jié)點(diǎn)、屬性操作和文檔遍歷

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

JavaScript基礎(chǔ)

1.1第一個(gè) JavaScript 程序

2.變量的聲明

3.Javascript語(yǔ)句

4.JavaScript函數(shù)

5.事件

常用事件

6.對(duì)象

6.1創(chuàng)建對(duì)象

6.2訪問(wèn)對(duì)象的屬性與方法

7.內(nèi)置對(duì)象

1.String

2.Math

3.Array數(shù)組對(duì)象

(2)Array 的方法

8.DOM

9.節(jié)點(diǎn)、屬性操作和文檔遍歷

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av