前端第三篇---前端基礎之JavaScript

時間 2019-11-18

標籤前端第三基礎 javascript 欄目 JavaScript 简体版

原文原文鏈接

前端第三篇---前端基礎之JavaScript

1、JavaScript概述

2、JavaScript的基礎

3、詞法分析

4、JavaScript的內置對象和方法

5、BOM對象

6、DOM對象

7、事件

8、拓展

1、JavaScript概述

1.JavaScript的歷史

1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).後將其更名ScriptEase.(客戶端執行的語言)javascript
Netscape(網景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0產品中開發出一套livescript的腳本語言.Sun和Netscape共同完成.後更名叫Javascriptcss
微軟隨後模仿在其IE3.0的產品中搭載了一個JavaScript的克隆版叫Jscript.html
爲了統一三家,ECMA(歐洲計算機制造協會)定義了ECMA-262規範.國際標準化組織及國際電工委員會（ISO/IEC）也採納 ECMAScript 做爲標準（ISO/IEC-16262）。今後，Web 瀏覽器就開始努力（雖然有着不一樣的程度的成功和失敗）將 ECMAScript 做爲 JavaScript 實現的基礎。EcmaScript是規範.前端

2.ECMAScript

儘管 ECMAScript 是一個重要的標準，但它並非 JavaScript 惟一的部分，固然，也不是惟一被標準化的部分。實際上，一個完整的 JavaScript 實現是由如下 3 個不一樣部分組成的：java

核心（ECMAScript）
文檔對象模型（DOM） Document object model (整合js，css，html)
瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）
Javascript 在開發中絕大多數狀況是基於對象的.也是面向對象的.

簡單地說，ECMAScript 描述瞭如下內容：node

語法
類型
語句
關鍵字
保留字
運算符
對象 (封裝繼承多態) 基於對象的語言.使用對象.

2、JavaScript的基礎

2.1 JavaScript語法基礎

　　2.1.1 變量命名規範

1. 變量名只能是字母、數字、下劃線或美圓符號的任意組合
2. 變量名不能是數字開頭
3. 關鍵字不能聲明爲變量名
4. 建議用駝峯命名方式
5. 變量名是區分大小寫
6. 變量的定義要具備可描述性

　　2.1.2 變量聲明

1. var 變量名 = 變量值
2. JaveScript屬於動態類型（就是同一個變量能夠存不一樣數據類型的值）
3. 保留字不能用作變量名

abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile

保留字列表

　　2.1.3 註釋

1. 單行註釋： // 單行註釋
2. 多行註釋： /* 多行註釋 */

　　2.1.3 結束符

　　　　　　JavaScript中的語句要以分號（;）爲結束符python

2.2 JavaScript數據類型類型查詢

　　2.2.1數字Number

　　　　JavaScript不區分整型和浮點型，就只有一種數字類型。web

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

　　　　經常使用方法：正則表達式

# 將字符串轉爲數字(當傳入的字符串參數不能轉爲數字時，變返回NaN)
parseInt("123")  # 返回123
parseInt("ABC")  # 返回NaN，NaN屬性是表明非數字值的特殊值，該屬性用於指示某個值不是數字
parseFloat("123.456")  # 返回123.456

　　2.2.2字符串類型String

　　　　字符串能夠是引號中的任意文本可使用單引號或雙引號　　　　編程

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 獲得Helloworld

　　　　經常使用方法：

·String.length：返回長度
·String.trim()：移除空白
·String.trimLeft()：移除左邊空白
·String.trimRight()：移除右邊空白
·String.charAt(n)：返回第N個字符
·String.concat(value, ...)：拼接字符串
·String.indexOf(substring, start)：返回子序列位置
·String.substring(from, to)：根據索引獲取子序列(顧頭不顧尾)
·String.slice(start, end)：切片
·String.toLowerCase()：轉換成小寫
·String.toUpperCase()：轉換成大寫
·String.split(delimiter, limit)：分割

　　　　注意：·string.slice(start, stop)和string.substring(start, stop)對比：

·二者的相同點：
        若是start等於end，返回空字符串
        若是stop參數省略，則取到字符串末
        若是某個參數超過string的長度，這個參數會被替換爲string的長度
    ·substirng()的特色：
        若是 start > stop ，start和stop將被交換
        若是參數是負數或者不是數字，將會被0替換
    ·silce()的特色：
        若是 start > stop 不會交換二者
        若是start小於0，則切割從字符串末尾往前數的第abs(start)個的字符開始(包括該位置的字符)
        若是stop小於0，則切割在從字符串末尾往前數的第abs(stop)個字符結束(不包含該位置字符)

　　2.2.3布爾類型Boolean

　　　　布爾只能有兩個值true 或 false注意true和false都是小寫

var x=true;
var y=false;

　　2.2.4數組Array

　　　　示例：

·建立數組方式一：
    var cars=new Array();
    cars[0]="A";
    cars[1]="B";
    cars[2]="C";
·建立數組方式二：
    var cars=new Array("A","B","C");

　　　　　經常使用方法：　

·Array.length：數組的長度
·Array.push(element)：尾部追加元素
·Array.pop()：獲取尾部的元素
·Array.unshift(element)：頭部插入元素
·Array.shift()：頭部移除元素
·Array.slice(start, end)：切片
·Array.reverse()：反轉
·Array.join(seq)：將數組元素鏈接成字符串
·Array.concat(val, ...)：鏈接數組
·Array.sort()：排序

　　　　　關於雞肋的JavaScript內置sort方法的解釋及優化：

若是調用sort方法時沒有傳入參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（若有必要），以便進行比較。
    若是想按照其餘標準進行排序，就須要提供比較函數，該函數要比較兩個值，而後返回一個用於說明這兩個值的相對順序的數字。比較函數應該具備兩個參數 a 和 b，其返回值以下：
    若 a 小於 b，在排序後的數組中 a 應該出如今 b 以前，則返回一個小於 0 的值。
    若 a 等於 b，則返回 0。
    若 a 大於 b，則返回一個大於 0 的值。

// 根據上面的規則自行實現一個排序函數：
    function sortNumber(a,b) {
      return a - b
    }
    // 調用sort方法時將定義好的排序函數傳入便可。
    stringObj.sort(sortNumber)

　　2.2.5對象Object對象

　　　　　由花括號分隔在括號內部對象的屬性以名稱和值對的形式 name value 來定義屬性由逗號分隔

　　　　　示例：

var person={
firstname : "Elijah",
lastname  : "Yang",
id        :  110104
};

　　　　　經常使用尋址方式：

name=person.lastname;
name=person["lastname"];

　　2.2.6空Null

　　　　　　表示值是空通常在須要指定或清空一個變量時纔會使用

　　2.2.7未定義Undefined

　　　　　　當聲明一個變量但未初始化時該變量的默認值是undefined函數無明確的返回值時返回值也是undefined　　

　　2.2.8類型查詢

　　　　　　方法：typeof

typeof是一個一元運算符（就像++，–，！，- 等一元運算符），不是一個函數，也不是一個語句

　　　　　　　　對變量或值調用 typeof 運算符將返回下列值之一：

　　　　　　　　規則：

1. 1. undefined - 若是變量是 Undefined 類型的
  2. boolean - 若是變量是 Boolean 類型的
  3. number - 若是變量是 Number 類型的
  4. string - 若是變量是 String 類型的
  5. object - 若是變量是一種引用類型或 Null 類型的

2.3 JavaScript運算符

　　2.3.1 算數運算符　

+：相加
-：相減
*：相乘
/：相除
%：取餘
++：自加1 (注意：n++表示後自加，++n表示先自加)
–-：自減1 (注意：n–表示後自減，–n表示先自減)

　　2.3.2 比較運算符

> ：大於
>= ：大於等於
< ：小於
<= ：小於等於
== ：相等，判斷值是否相等  「1」 == 1 返回true
!= ：不等於
=== ：嚴格相等，判斷值、類型是否徹底相等
!== ：嚴格不等於

　　2.3.3 邏輯運算符

&& ：且
|| ：或
! ：非

　　2.3.4 賦值運算符

= ：賦值
+= ：自加
-= ：自減
*= ：自乘
/= ：自除

2.4 JavaScript流程控制　

　　2.4.1 if else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

　　2.4.2 if else if else

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

　　2.4.3 switch

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:    #注意
  console.log("...")
}
switch中的case子句一般都會加break語句，不然程序會繼續執行後續case中的語句。

　　2.4.4 for

for (var i=0;i<10;i++) {
  console.log(i);
}

　　2.4.5 while

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

　　2.4.6三元運算判斷條件知足條件的返回值不知足條件的返回值

var a = 1;
var b = 2;
var c = a > b ? a : b

2.5 JavaScript函數

　　2.5.1 JavaScript中的函數和Python中的很是相似，只是定義方式有點區別

// 普通函數定義
function f1() {
  console.log("Hello world!");
}

// 帶參數的函數
function f2(a, b) {
  console.log(arguments);  // 內置的arguments對象
  console.log(arguments.length);
  console.log(a, b);
}

// 帶返回值的函數
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 調用函數

// 匿名函數方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 當即執行函數
(function(a, b){
  return a + b;
})(1, 2);

　　2.5.2 arguements

function add(a,b){
  console.log(a+b);
  console.log(arguments.length)
}

add(1,2)

　　輸出：

3
2

　　2.5.3 函數的全局變量和局部變量

　　　　局部變量：

　　　　　　在JavaScript函數內部聲明的變量（使用 var）是局部變量，因此只能在函數內部訪問它（該變量的做用域是函數內部）。只要函數運行完畢，本地變量就會被刪除。

　　　　全局變量：

　　　　　　在函數外聲明的變量是全局變量，網頁上的全部腳本和函數都能訪問它。

　　　　變量生存週期：

　　　　　　JavaScript變量的生命期從它們被聲明的時間開始。

　　　　局部變量會在函數運行之後被刪除。

　　　　全局變量會在頁面關閉後被刪除

　　2.5.4 做用域

　　　　首先在函數內部查找變量，找不到則到外層函數查找，逐步找到最外層。

例子1：

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}

f();  //輸出結果是？

ShenZhen

結果

例子2：

var city = "BeiJing";
function Bar() {
  console.log(city);
}
function f() {
  var city = "ShangHai";
  return Bar;
}
var ret = f();
ret();  // 打印結果是？

BeiJing

結果

3.閉包

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();
ret();  // 打印結果是？

ShangHai

結果

3、詞法分析

　　JavaScript中在調用函數的那一瞬間，會先進行詞法分析。

　　詞法分析的過程：

　　當函數調用的前一瞬間，會先造成一個激活對象：Avtive Object（AO），並會分析如下3個方面：

　　　　1:函數參數，若是有，則將此參數賦值給AO，且值爲undefined。若是沒有，則不作任何操做。
　　　　2:函數局部變量，若是AO上有同名的值，則不作任何操做。若是沒有，則將此變量賦值給AO，而且值爲undefined。
　　　　3:函數聲明，若是AO上有，則會將AO上的對象覆蓋。若是沒有，則不作任何操做。

　　函數內部不管是使用參數仍是使用局部變量都到AO上找

例子一：

var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
}
foo();  // 問：執行foo()以後的結果是？

例子二：

var age = 18;
function foo(){
  console.log(age);
  var age = 22;
  console.log(age);
  function age(){
    console.log("呵呵");
  }
  console.log(age);
}
foo();  // 執行後的結果是？

詞法分析過程：
1、分析參數，有一個參數，造成一個 AO.age=undefine;
2、分析變量聲明，有一個 var age, 發現 AO 上面已經有一個 AO.age，所以不作任何處理
3、分析函數聲明，有一個 function age(){...} 聲明， 則把原有的 age 覆蓋成 AO.age=function(){...};

最終，AO上的屬性只有一個age，而且值爲一個函數聲明

執行過程：
注意：執行過程當中全部的值都是從AO對象上去尋找

1、執行第一個 console.log(age) 時，此時的 AO.age 是一個函數，因此第一個輸出的一個函數
2、這句 var age=22; 是對 AO.age 的屬性賦值， 此時AO.age=22 ，因此在第二個輸出的是 2
3、同理第三個輸出的仍是22, 由於中間再沒有改變age值的語句了

結果分析

4、JavaScript的內置對象和方法

　　　　JavaScript中的全部事物都是對象：字符串、數字、數組、日期，等等。在JavaScript中，對象是擁有屬性和方法的數據。

　　　　咱們在學習基本數據類型的時候已經帶你們瞭解了，JavaScript中的Number對象、String對象、Array對象等。

注意：var s1 = "abc"和var s2 = new String("abc")的區別：

　　　typeof s1 --> string而 typeof s2 --> Object

　　4.1 自定義對象

　　　　4.1.1 相似於（某方面相似）Python中的字典數據類型

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

ps：Alex
      18

　　　　遍歷對象中的內容：

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

ps：name Alex
　　age 18

　　4.1.2 建立對象

var person=new Object();  // 建立一個person對象
person.name="Alex";  // person對象的name屬性
person.age=18;  // person對象的age屬性

　　擴展：　

// 父類構造函數
var Car = function (loc) {
  this.loc = loc;
};

// 父類方法
Car.prototype.move = function () {
  this.loc ++;
};

// 子類構造函數
var Van = function (loc) {
  Car.call(this, loc);
};

// 繼承父類的方法
Van.prototype = Object.create(Car.prototype);
// 修復 constructor
Van.prototype.constructor = Van;
// 擴展方法
Van.prototype.grab = function () {
  /* ... */
};

JavaScript面向對象之繼承

　　4.2 Date對象

　　　　建立Date對象

//方法1：不指定參數
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：參數爲日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：參數爲毫秒數
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：參數爲年月日小時分鐘秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒並不直接顯示

　　　　Date對象的方法

var d = new Date(); 
//getDate()                 獲取日
//getDay ()                 獲取星期
//getMonth ()               獲取月（0-11）
//getFullYear ()            獲取完全年份
//getYear ()                獲取年
//getHours ()               獲取小時
//getMinutes ()             獲取分鐘
//getSeconds ()             獲取秒
//getMilliseconds ()        獲取毫秒
//getTime ()                返回累計毫秒數(從1970/1/1午夜)

　　4.3 JSON對象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串轉換成對象
var obj = JSON.parse(str1); 
// 對象轉換成JSON字符串
var str = JSON.stringify(obj1);

　　4.4 RegExp對象

//RegExp對象

//建立正則對象方式1
// 參數1 正則表達式(不能有空格)
// 參數2 匹配模式：經常使用g(全局匹配;找到全部匹配，而不是在第一個匹配後中止)和i(忽略大小寫)

// 用戶名只能是英文字母、數字和_，而且首字母必須是英文字母。長度最短不能少於6位 最長不能超過12位。

// 建立RegExp對象方式（逗號後面不要加空格）
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");

// 匹配響應的字符串
var s1 = "bc123";

//RegExp對象的test方法，測試一個字符串是否符合對應的正則規則，返回值是true或false。
reg1.test(s1);  // true

// 建立方式2
// /填寫正則表達式/匹配模式（逗號後面不要加空格）
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;

reg2.test(s1);  // true


// String對象與正則結合的4個方法
var s2 = "hello world";

s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正則 的內容
s2.search(/h/g);        // 0                      查找字符串中符合正則表達式的內容位置
s2.split(/o/g);         // ["hell", " w", "rld"]  按照正則表達式對字符串進行切割
s2.replace(/o/g, "s");  // "hells wsrld"          對字符串按照正則進行替換

// 關於匹配模式：g和i的簡單示例
var s1 = "name:Alex age:18";

s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"
s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配
s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不區分大小寫


// 注意事項1：
// 若是regExpObject帶有全局標誌g，test()函數不是從字符串的開頭開始查找，而是從屬性regExpObject.lastIndex所指定的索引處開始查找。
// 該屬性值默認爲0，因此第一次仍然是從字符串的開頭查找。
// 當找到一個匹配時，test()函數會將regExpObject.lastIndex的值改成字符串中本次匹配內容的最後一個字符的下一個索引位置。
// 當再次執行test()函數時，將會從該索引位置處開始查找，從而找到下一個匹配。
// 所以，當咱們使用test()函數執行了一次匹配以後，若是想要從新使用test()函數從頭開始查找，則須要手動將regExpObject.lastIndex的值重置爲 0。
// 若是test()函數再也找不到能夠匹配的文本時，該函數會自動把regExpObject.lastIndex屬性重置爲 0。

var reg3 = /foo/g;
// 此時 regex.lastIndex=0
reg3.test('foo'); // 返回true
// 此時 regex.lastIndex=3
reg3.test('foo'); // 返回false
// 因此咱們在使用test()方法校驗一個字符串是否徹底匹配時，不推薦添加全局匹配模式g。

// 注意事項2(說出來你可能不信系列)：
// 當咱們不加參數調用RegExpObj.test()方法時, 至關於執行RegExpObj.test("undefined"), 而且/undefined/.test()默認返回true。
var reg4 = /^undefined$/;
reg4.test(); // 返回true
reg4.test(undefined); // 返回true
reg4.test("undefined"); // 返回true

RegExp

　　4.5 Math對象

abs(x)      返回數的絕對值。
exp(x)      返回 e 的指數。
floor(x)    對數進行下舍入。
log(x)      返回數的天然對數（底爲e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次冪。
random()    返回 0 ~ 1 之間的隨機數。
round(x)    把數四捨五入爲最接近的整數。
sin(x)      返回數的正弦。
sqrt(x)     返回數的平方根。
tan(x)      返回角的正切。

Math

5、BOM對象

　　 5.1 window

　　 BOM（Browser Object Model）是指瀏覽器對象模型，它使 JavaScript 有能力與瀏覽器進行「對話」

　　window對象

　　全部瀏覽器都支持window對象

　　概念上講----一個html文檔對應一個window對象

　　功能上講----控制瀏覽器窗口

　　使用上講----window對象不須要建立對象，直接使用便可

window.document.getElementById("header");

與

document.getElementById("header");

相同

　　一些經常使用的Window方法：

- window.innerHeight - 瀏覽器窗口的內部高度
- window.innerWidth - 瀏覽器窗口的內部寬度
- window.open() - 打開新窗口
- window.close() - 關閉當前窗口

　　　5.2 navigator對象（瞭解便可）

　　　　瀏覽器對象，經過這個對象能夠斷定用戶所使用的瀏覽器，包含了瀏覽器相關信息

navigator.appName　　// Web瀏覽器全稱
navigator.appVersion　　// Web瀏覽器廠商和版本的詳細字符串
navigator.userAgent　　// 客戶端絕大部分信息
navigator.platform　　　// 瀏覽器運行所在的操做系統

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
    
<div id="example"></div>
<script>
txt = "<p>瀏覽器代號: " + navigator.appCodeName + "</p>";
txt+= "<p>瀏覽器名稱: " + navigator.appName + "</p>";
txt+= "<p>瀏覽器版本: " + navigator.appVersion + "</p>";
txt+= "<p>啓用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平臺: " + navigator.platform + "</p>";
txt+= "<p>用戶代理: " + navigator.userAgent + "</p>";
txt+= "<p>用戶代理語言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

</body>
</html>

代碼示例

　　　 5.3 screen對象（瞭解便可）

　　　　window.screen 對象包含有關用戶屏幕的信息

- Window Screen 的一些屬性

screen.availWidth - 可用的屏幕寬度
screen.availHeight - 可用的屏幕高度

- Window Screen 可用寬度

　　　　　　 screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，好比窗口任務欄　　　

返回您的屏幕的可用寬度：
<script>
document.write("可用寬度: " + screen.availWidth);
</script>
以上代碼輸出爲：
可用寬度: 1366

- Window Screen 可用高度
  screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，好比窗口任務欄。

返回您的屏幕的可用高度：
<script>

document.write("可用高度: " + screen.availHeight);

</script>
以上代碼將輸出：
可用高度: 738

　　　5.4 history對象（瞭解便可）

　　　　window.history 對象包含瀏覽器的歷史。

- Window History

　　　　　　爲了保護用戶隱私，對 JavaScript 訪問該對象的方法作出了限制。

　　　　　　一些方法：

history.back() - 與在瀏覽器點擊後退按鈕相同
history.forward() - 與在瀏覽器中點擊向前按鈕相同

<html>
<head>
<script>
function goBack()
  {
  window.history.back()   
  }
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()">

</body>
</html>

History Back

<html>
<head>
<script>
function goForward()
  {
  window.history.forward()
  }
</script>
</head>
<body>

<input type="button" value="Forward" onclick="goForward()">

</body>
</html>

History Forward

　　　5.5 location對象

　　　　window.location 對象用於得到當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面

　　　　一些實例:

location.hostname 返回 web 主機的域名
location.pathname 返回當前頁面的路徑和文件名
location.port 返回 web 主機的端口 （80 或 443）
location.protocol 返回所使用的 web 協議（http:// 或 https://）

- location.href 獲取URL

location.href  獲取URL
location.href="URL" // 跳轉到指定頁面
location.reload() 從新加載頁面

　　　5.6 彈出框

　　　　能夠在 JavaScript 中建立三種消息框：警告框、確認框、提示框。

- 警告框-- alert

　　　　警告框常常用於確保用戶能夠獲得某些信息。

　　　　當警告框出現後，用戶須要點擊肯定按鈕才能繼續進行操做。

　　　　語法：

alert("sometext");

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    alert("你好，我是一個警告框！");
}
</script>
</head>
<body>

<input type="button" onclick="myFunction()" value="顯示警告框">

</body>
</html>

警告框

- 確認框-- confirm
  
  確認框一般用於驗證是否接受用戶操做。
  
  當確認卡彈出時，用戶能夠點擊 "確認" 或者 "取消" 來肯定用戶操做。
  
  當你點擊 "確認", 確認框返回 true，若是點擊 "取消", 確認框返回 false

　　　　　語法：

confirm("sometext");

var r=confirm("按下按鈕");
if (r==true)
{
    x="你按下了\"肯定\"按鈕!";
}
else
{
    x="你按下了\"取消\"按鈕!";
}

確認框

- 提示框--prompt

　　　　　　提示框常常用於提示用戶在進入頁面前輸入某個值。

　　　　　　當提示框出現後，用戶須要輸入某個值，而後點擊確認或取消按鈕才能繼續操縱。

　　　　　　若是用戶點擊確認，那麼返回值爲輸入的值。若是用戶點擊取消，那麼返回值爲 null。

　　　　　語法：

prompt("sometext","defaultvalue");

var person=prompt("請輸入你的名字","Harry Potter");
if (person!=null && person!="")
{
    x="你好 " + person + "! 今天感受如何?";
    document.getElementById("demo").innerHTML=x;
}

提示框

- 換行

　　　　　　彈窗使用反斜槓 + ‘n’ （\n）　來設置換行

alert("Hello\nHow are you?");

　　　 5.7 計時相關

　　　　經過使用 JavaScript，咱們能夠在必定時間間隔以後來執行代碼，而不是在函數被調用後當即執行。咱們稱之爲計時事件。

　　　　在 JavaScritp 中使用計時事件是很容易的，兩個關鍵方法是:

setInterval() - 間隔指定的毫秒數不停地執行指定的代碼。
setTimeout() - 暫停指定的毫秒數後執行指定的代碼

　　　　　Note: setInterval() 和 setTimeout() 是 HTML DOM Window對象的兩個方法。　

setInterval () 方法-----間隔指定的毫秒數不停地執行指定的代碼

　　　　　語法：

setInterval("javascript function",milliseconds);

　　第一個參數是函數（function）。

　　第二個參數間隔的毫秒數

#   每三秒彈出 "hello" ：
setInterval(function(){alert("Hello")},3000);

#  每隔一秒輸出一個呵呵
var t = setInterval(foo,1000);

# 清除（在下面）
clearInterval(t);

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>時鐘</title>
</head>
<body>

<p>在頁面顯示一個時鐘</p>
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}
</script>

</body>
</html>

實例

　　如何中止執行?

　　　　clearInterval() 方法用於中止 setInterval() 方法執行的函數代碼。　　　　　

　　　　語法：

clearInterval(intervalVariable)

要使用 clearInterval() 方法, 在建立計時方法時你必須使用全局變量：　　

myVar=setInterval("javascript function",milliseconds);

　　　 而後你可使用clearInterval() 方法來中止執行。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>中止時鐘</title>
</head>
<body>

<p>頁面上顯示時鐘：</p>
<p id="demo"></p>
<button onclick="myStopFunction()">中止時鐘</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
    clearInterval(myVar);
}
</script>

</body>
</html>

中止時鐘

setTimeout() 方法------暫停指定的毫秒數後執行指定的代碼

　　　　語法：

setTimeout("javascript 函數",毫秒數);

　　第一個參數是含有 JavaScript 語句的字符串。這個語句可能諸如 "alert('5 seconds!')"，或者對函數的調用，諸如 alertMsg()"。

　　第二個參數指示從當前起多少毫秒後執行第一個參數。

function foo(){
　　console.log('呵呵')
}
var t = setTimeout(foo,3000)

　　如何中止執行?

　　　　clearTimeout() 方法用於中止執行setTimeout()方法的函數代碼。

　　　　語法：

clearTimeout(timeoutVariable)

　　　　要使用clearTimeout() 方法, 你必須在建立超時方法中（setTimeout）使用全局變量:

myVar=setTimeout("javascript function",milliseconds);

　　　　若是函數還未被執行，你可使用 clearTimeout() 方法來中止執行函數代碼。

function foo(){
　　console.log('呵呵')
}
var t = setTimeout(foo,3000)

clearTimeout(t)

6、DOM對象

　　DOM （Document Object Model）是指文檔對象模型，經過它，能夠訪問HTML文檔的全部元素

　　HTML DOM 模型被構造爲對象的樹：

　　經過可編程的對象模型，JavaScript 得到了足夠的能力來建立動態的 HTML。

- JavaScript 可以改變頁面中的全部 HTML 元素
- JavaScript 可以改變頁面中的全部 HTML 屬性
- JavaScript 可以改變頁面中的全部 CSS 樣式
- JavaScript 可以對頁面中的全部事件作出反應

DOM標準規定HTML文檔中的每一個成分都是一個節點(node)：

文檔節點(document對象)：表明整個文檔
元素節點(element 對象)：表明一個元素（標籤）
文本節點(text對象)：表明元素（標籤）中的文本
屬性節點(attribute對象)：表明一個屬性，元素（標籤）纔有屬性
註釋是註釋節點(comment對象)

　6.1 查找HTML元素　

　　一般，經過 JavaScript，您須要操做 HTML 元素。

　　爲了作到這件事情，您必須首先找到該元素。有三種方法來作這件事：

　　直接查找

- 經過 id 找到 HTML 元素
- 經過標籤名找到 HTML 元素
- 經過類名找到 HTML 元素

document.getElementById           根據ID獲取一個標籤
document.getElementsByClassName   根據class屬性獲取
document.getElementsByTagName     根據標籤名獲取標籤合集

　　間接查找

parentElement            父節點標籤元素
children                 全部子標籤
firstElementChild        第一個子標籤元素
lastElementChild         最後一個子標籤元素
nextElementSibling       下一個兄弟標籤元素
previousElementSibling   上一個兄弟標籤元素

　　6.2節點（標籤）操做

　　　建立節點

　　　　　　語法：createElement(標籤名)

var divEle = document.createElement("div");

　　　添加節點

　　　　　　語法：

追加一個子節點（做爲最後的子節點）

somenode.appendChild(newnode)；

把增長的節點放到某個節點的前邊。

somenode.insertBefore(newnode,某個節點);

var imgEle=document.createElement("img");
imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

　　　刪除節點

　　　　語法：

　　　　得到要刪除的元素，經過父元素調用刪除。

　　　　removeChild(要刪除的節點)

　　　替換節點

　　　　語法：

　　　　somenode.replaceChild(newnode, 某個節點);

　　　屬性節點

　　　　獲取文本節點的值：

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

　　　　設置文本節點的值：

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

　　attribute操做

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自帶的屬性還能夠直接.屬性名來獲取和設置
imgEle.src
imgEle.src="..."

　　獲取值操做

　　語法：

　　elementNode.value

　　適用於如下標籤：

- .input
- .select
- .textarea

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

　　class的操做

className  獲取全部樣式類名(字符串)

classList.remove(cls)  刪除指定類
classList.add(cls)  添加類
classList.contains(cls)  存在返回true，不然返回false
classList.toggle(cls)  存在就刪除，不然添加

　　指定CSS操做

obj.style.backgroundColor="red"

　　　　JS操做CSS屬性的規律：

　　　　1.對於沒有中橫線的CSS屬性通常直接使用style.屬性名便可。如：

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

　　　　2.對含有中橫線的CSS屬性，將中橫線後面的第一個字母換成大寫便可。如：

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

7、事件

　　　　HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動做（action），好比當用戶點擊某個 HTML 元素時啓動一段 JavaScript。下面是一個屬性列表，這些屬　　　　　性可插入 HTML 標籤來定義事件動做。

　　7.1 經常使用事件

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素得到焦點。               // 練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.
onchange       域的內容被改變。             應用場景：一般用於表單元素,當元素內容被改變時觸發.（select聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並鬆開。
onkeyup        某個鍵盤按鍵被鬆開。
onload         一張頁面或一幅圖像完成加載。
onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。

onselect      在文本框中的文本被選中時發生。
onsubmit      確認按鈕被點擊，使用的對象是form。

　　7.2 綁定方式

　　方式一：

<div id="d1" onclick="changeColor(this);">點我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
</script>

　　注意：

　　this是實參，表示觸發事件的當前元素。

　　函數定義過程當中的ths爲形參。

　　方式二：

<div id="d2">點我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵";
  }
</script>

8、拓展

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框示例</title>

</head>
<body>
    <input id="d1" type="text" value="請輸入關鍵字" onblur="blurs()" onfocus="focus()">
    
<script>
function focus(){
    var inputEle=document.getElementById("d1");
    if (inputEle.value==="請輸入關鍵字"){
        inputEle.value="";
    }
}

function blurs(){
    var inputEle=document.getElementById("d1");
    var val=inputEle.value;
    if(!val.trim()){
        inputEle.value="請輸入關鍵字";
    }
}
</script>
</body>
</html>

搜索框示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
          .left{
              width: 20%;
              height: 500px;
              float: left;
              background-color: wheat;
          }

          .right{
              float: left;
              width: 80%;
              height: 500px;
              background-color: lightgray;

          }

           .title{
               text-align: center;
               line-height: 40px;
               background-color: #0e90d2;
               color: white;
           }
        .item{
            padding: 10px;
        }

        .hide{
            display: none;
        }
    </style>
</head>
<body>



<div class="outer">
      <div class="left">
           <div class="item">
               <div class="title">菜單一</div>
               <ul class="con">
                   <li>111</li>
                   <li>111</li>
                   <li>111</li>
               </ul>
           </div>
          <div class="item">
               <div class="title">菜單二</div>
               <ul class="con hide">
                   <li>222</li>
                   <li>222</li>
                   <li>222</li>
               </ul>
           </div>
          <div class="item">
               <div class="title">菜單三</div>
               <ul class="con hide">
                   <li>333</li>
                   <li>333</li>
                   <li>333</li>
               </ul>
           </div>
      </div>
      <div class="right"></div>
</div>


<script>

    var eles_title=document.getElementsByClassName("title");



    for (var i=0;i<eles_title.length;i++){
         eles_title[i].onclick=function(){

             this.nextElementSibling.classList.remove("hide");

             for(var j=0;j<eles_title.length;j++){

                 if (eles_title[j]!=this){
                     eles_title[j].nextElementSibling.classList.add("hide")
                 }

             }


         }

    }




</script>
</body>
</html>

左側菜單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            background-color: white;
            height: 2000px;
        }

        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: grey;
            opacity: 0.4;
        }

        .hide{
            display: none;
        }

        .models{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            height: 200px;
            width: 200px;
            background-color: wheat;

        }
    </style>
</head>
<body>
<div class="back">
    <input class="c" type="button" value="click">
</div>

<div class="shade hide handles"></div>

<div class="models hide handles">
    <input class="c" type="button" value="cancel">
</div>


<script>


    var eles=document.getElementsByClassName("c");
    var handles=document.getElementsByClassName("handles");
    for(var i=0;i<eles.length;i++){
        eles[i].onclick=function(){

            if(this.value=="click"){

                for(var j=0;j<handles.length;j++){

                    handles[j].classList.remove("hide");

                 }

            }
            else {
                for(var j=0;j<handles.length;j++){

                    handles[j].classList.add("hide");
                }

            }
        }
    }

</script>

</body>
</html>

模態對話框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button class="select_all">全選</button>
<button class="select_reverse">反選</button>
<button class="cancel">取消</button>

<hr>

<table class="server_table" border="2px" cellspacing="2px">
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>333</td>
        <td>333</td>
        <td>333</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="item"></td>
        <td>444</td>
        <td>444</td>
        <td>444</td>
    </tr>
</table>


<script>
/*
    var ele_all=document.getElementsByClassName("select_all")[0];
    var ele_reverse=document.getElementsByClassName("select_reverse")[0];
    var ele_cancel=document.getElementsByClassName("cancel")[0];
    var input_arr=document.getElementsByClassName("item");

    ele_all.onclick=function(){
          for(var i=0;i<input_arr.length;i++){
              console.log(input_arr[i]);
              var input=input_arr[i];
              input.checked=true;
          }
    };

     ele_cancel.onclick=function(){
          for(var i=0;i<input_arr.length;i++){
              console.log(input_arr[i]);
              var input=input_arr[i];
              input.checked=false;
          }
    };

    ele_reverse.onclick=function(){
          for(var i=0;i<input_arr.length;i++){
              console.log(input_arr[i]);
              var input=input_arr[i];
              if(input.checked){
                  input.checked=false;
              }
              else{
                  input.checked=true;
              }
          }
    };

*/


    var input_arr=document.getElementsByClassName("item");
    var button_arr=document.getElementsByTagName("button");

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

        button_arr[i].onclick=function(){


            for (var j=0;j<input_arr.length;j++){
                 var inp=input_arr[j]
                 if(this.innerText=="全選"){
                     console.log("ok");
                 inp.checked=true;
             }
            else if(this.innerText=="取消"){
                  inp.checked=false;
             }
            else {
                 if(inp.checked){
                     inp.checked=false;
                 }else {
                     inp.checked=true;
                 }
             }
                
            }
        }

    }
</script>
</body>
</html>

表格案例

二級聯動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .outer{
            margin: 0 auto;
            background-color: darkgray;
            width: 80%;
            height: 600px;margin-top: 30px;
            word-spacing: -5px;

        }

        #left{
            display: inline-block;
            width: 100px ;
            height: 140px;
            background-color: wheat;
            text-align: center;


        }

        #choice{
            display: inline-block;
            height: 140px;
            background-color: darkolivegreen;

            vertical-align: top;
            padding:0 5px;


        }

        #choice button{
            margin-top: 20px;
        }

         #right{
            display: inline-block;
            width: 100px ;
            height: 140px;
            background-color: wheat;
            text-align: center;
            line-height: 140px;

        }

    </style>
</head>
<body>



<div class="outer">

    <select multiple="multiple" size="5" id="left">
    <option>紅樓夢</option>
    <option>西遊記</option>
    <option>水滸傳</option>
    <option>JinPingMei</option>
    <option>三國演義</option>
</select>




<span id="choice">
    <button id="choose_move"> > </button><br>
    <button id="all_move"> >> </button>
</span>



<select multiple="multiple" size="10" id="right">
    <option>放風箏的人</option>
</select>


</div>




<script>

    var choose_move=document.getElementById("choose_move");
    var all_move=document.getElementById("all_move");

    var right=document.getElementById("right");
    var left=document.getElementById("left");
    var options=left.options;



    choose_move.onclick=function(){

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

             var option=options[i];
             if(option.selected==true){

                   // var news=option.cloneNode(true);
                   // console.log(news);

                   right.appendChild(option);
                   i--;
             }
         }
    };

    all_move.onclick=function(){

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

             var option=options[i];

                   right.appendChild(option);
                   i--;

         };
    };




    /*
   var buttons=document.getElementsByTagName("button");
   for(var i=0;i<buttons.length;i++) {
        buttons[i].onclick = function () {

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

                var option = options[i];

                if (this.innerText == ">") {
                    if (option.selected == true) {

                        // var news=option.cloneNode(true);
                        // console.log(news);

                        right.appendChild(option);
                        i--;
                    }
                } else {
                    right.appendChild(option);
                    i--;
                }
            }
        };
    }


   */


</script>


</body>
</html>

select聯動

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>tab</title>
  <style>
    *{margin:0; padding:0; list-style:none;}
    body{
        font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif;
    }
    h3{
        text-align: center;
        color:darkcyan;
        margin-top: 30px;
        letter-spacing: 5px;
    }
    .box{
      width: 1000px;
      margin:50px auto 0px;
    }
    #title{
      line-height: 40px;
      background-color: rgb(247,247,247);
      font-size: 16px;
      font-weight: bold;
      color: rgb(102,102,102);
    }
    #title span{
      float: left;
      width: 166px;
      text-align: center;
    }
    #title span:hover{
      /*color: black;*/
      cursor: pointer;
    }
    #content{
      margin-top: 20px;
    }
    #content li{
      width: 1050px;
      display: none;
      background-color: rgb(247,247,247);
    }
    #content li div{
      width: 156px;
      margin-right: 14px;
      float: left;
      text-align: center;
    }
    #content li div a{
      font-size: 14px;
      color: black;
      line-height: 14px;
    /*  float: left;*/
    display: inline-block;
      margin-top: 10px;
    }
    #content li a:hover{
      color: #B70606;
    }
    #content li div span{
        font-size: 16px;
        line-height: 16px;
        /*float: left;*/
        display: block;
        color: rgb(102,102,102);
        margin-top: 10px;
      }
    #content img{
      float: left;
      width: 155px;
      height: 250px;
    }
    #title .select{
      background-color: #2459a2;
      color: white;
        border-radius: 10%;
    }
    #content .show{
      display: block;
    }

    .show span{
        color: red!important;
        font-size: 30px;
    }
  </style>
</head>

<body>
    <h3 id="wel">京東商城歡迎您</h3>
    <!--  direction="right up down left" -->
<!--  behavior：滾動方式(包括3個值：scroll、slide、alternate) -->
<!--  說明：scroll：循環滾動，默認效果；slide：只滾動一次就中止；alternate：來回交替進行滾動。 -->
<!--  scrollamount="5" 滾動速度 -->

<marquee behavior="scroll" direction="right">歡迎您苑昊先生</marquee>
    <script>

    function test(){

        var mywel = document.getElementById("wel");
        var content = mywel.innerText;

        var f_content = content.charAt(0);
        var l_content = content.substring(1,content.length);

        var new_content = l_content + f_content;
        mywel.innerText = new_content;

    }

    // setInterval("test();", 500);
</script>
    <div class="box">
      <p id="title">
        <span class="select">家用電器</span>
        <span>傢俱</span>
        <span>汽車</span>
        <span>食品</span>
        <span>女鞋</span>
        <span>醫療保健</span>
      </p>

      <ul id="content">
        <li class="show">

          <div><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t4786/325/2470647304/119102/9e1a4ed5/59005841Nd786a8df.jpg" alt="冰箱"><a href="#">容聲(Ronshen)冰箱</a><span>價格:5600</span></div>
          <div><img src="https://img12.360buyimg.com/n1/s450x450_jfs/t3037/347/1290968859/201366/7c1028a0/57c00194N9d0a54c6.jpg" alt="洗衣機"><a href="#">海爾洗衣機</a><span>價格:5400</span></div>
          <div><img src="https://img11.360buyimg.com/n1/jfs/t3289/128/2393835119/236360/af1d283b/57e0f300N53dde603.jpg" alt="電飯煲"><a href="#">福庫(CUCKOO)電飯煲</a><span>價格:3999</span></div>
          <div><img src="https://img13.360buyimg.com/n1/jfs/t3235/137/2361713777/152258/a6908440/57e098c2N44a90a5d.jpg" alt="智能電視"><a href="#">三星智能電視</a><span>價格:8999</span></div>
          <div><img src="https://img10.360buyimg.com/n1/jfs/t2053/101/1391591157/215066/572e131b/5696ee9bN2376492d.jpg" alt="淨水器"><a href="#">淨水器</a><span>價格:1300</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3175/78/2357430273/262835/9a8e7f65/57e0a3e9Nbda39dd2.jpg" alt="空氣淨化器"><a href="#">空氣淨化器</a><span>價格:5300</span></div>
        </li>

        <li>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div>

        </li>
        <li>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div>
        </li>
        <li>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興糉子"><a href="#">嘉興糉子</a><span>價格:1</span></div>

        </li>
        <li>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>
          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div>

        </li>
        <li>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>
          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div>

        </li>


      </ul>
    </div>

    <script>
      var title=document.getElementById('title');
      var content=document.getElementById('content');
      var category=title.getElementsByTagName('span');
      var item=content.getElementsByTagName('li');

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

          category[i].index=i;

          category[i].onclick=function(){

            for (var j = 0; j < category.length; j++) {
              category[j].className='';
              item[j].className='';
            }
            this.className='select';
            item[this.index].className='show';
          }


      }

    </script>
</body>
</html>

跑馬燈與tab切換

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

前端第三篇---前端基礎之JavaScript

前端第三篇---前端基礎之JavaScript

1、JavaScript概述

1.JavaScript的歷史

2.ECMAScript

2、JavaScript的基礎

2.1 JavaScript語法基礎

2.1.1 變量命名規範

2.1.2 變量聲明

2.1.3 註釋

2.1.3 結束符

2.2 JavaScript數據類型類型查詢

2.2.1數字Number

2.2.2字符串類型String

2.2.3布爾類型Boolean

2.2.4數組Array

2.2.5對象Object對象

2.2.6空Null

2.2.7未定義Undefined

2.2.8類型查詢

2.3 JavaScript運算符

2.3.1 算數運算符

2.3.2 比較運算符

2.3.3 邏輯運算符

2.3.4 賦值運算符

2.4 JavaScript流程控制

2.4.1 if else

2.4.2 if else if else

2.4.3 switch

2.4.4 for

2.4.5 while

2.4.6三元運算判斷條件知足條件的返回值不知足條件的返回值

2.5 JavaScript函數

2.5.1 JavaScript中的函數和Python中的很是相似，只是定義方式有點區別

2.5.2 arguements

2.5.3 函數的全局變量和局部變量

局部變量會在函數運行之後被刪除。

全局變量會在頁面關閉後被刪除

2.5.4 做用域

例子1：

例子2：

3.閉包

3、詞法分析

4、JavaScript的內置對象和方法

注意：var s1 = "abc"和var s2 = new String("abc")的區別：

typeof s1 --> string而 typeof s2 --> Object

4.1 自定義對象

4.2 Date對象

4.3 JSON對象

4.4 RegExp對象

4.5 Math對象

5、BOM對象

5.1 window

window對象

5.2 navigator對象（瞭解便可）

5.3 screen對象（瞭解便可）

Window Screen 的一些屬性

Window Screen 可用寬度

Window Screen 可用高度

5.4 history對象（瞭解便可）

Window History

5.5 location對象

location.href 獲取URL

5.6 彈出框

確認框-- confirm

提示框--prompt

語法：

5.7 計時相關

在 JavaScritp 中使用計時事件是很容易的，兩個關鍵方法是:

語法：

如何中止執行?

語法：

語法：

如何中止執行?

語法：

6、DOM對象

6.1 查找HTML元素

直接查找

間接查找

6.2節點（標籤）操做

　　2.1.1 變量命名規範

　　2.1.2 變量聲明

　　2.1.3 註釋

　　2.1.3 結束符

　　2.2.1數字Number

　　2.2.2字符串類型String

　　2.2.3布爾類型Boolean

　　2.2.4數組Array

　　2.2.5對象Object對象

　　2.2.6空Null

　　2.2.7未定義Undefined

　　2.2.8類型查詢

　　2.3.1 算數運算符　

　　2.3.2 比較運算符

　　2.3.3 邏輯運算符

　　2.3.4 賦值運算符

2.4 JavaScript流程控制　

　　2.4.1 if else

　　2.4.2 if else if else

　　2.4.3 switch

　　2.4.4 for

　　2.4.5 while

　　2.4.6三元運算判斷條件知足條件的返回值不知足條件的返回值

　　2.5.1 JavaScript中的函數和Python中的很是相似，只是定義方式有點區別

　　2.5.2 arguements

　　2.5.3 函數的全局變量和局部變量

　　　　局部變量會在函數運行之後被刪除。

　　　　全局變量會在頁面關閉後被刪除

　　2.5.4 做用域

　　　typeof s1 --> string而 typeof s2 --> Object

　　4.1 自定義對象

　　4.2 Date對象

　　4.3 JSON對象

　　4.4 RegExp對象

　　4.5 Math對象

　　 5.1 window

　　window對象

　　　5.2 navigator對象（瞭解便可）

　　　 5.3 screen對象（瞭解便可）

Window Screen 可用寬度　　　　　

　　　5.4 history對象（瞭解便可）

　　　5.5 location對象

location.href 獲取URL　　　　

　　　5.6 彈出框

提示框--prompt　　

　　　　　語法：

　　　 5.7 計時相關

　　　　在 JavaScritp 中使用計時事件是很容易的，兩個關鍵方法是:

　　　　　語法：

　　如何中止執行?

　　　　語法：

　　　　語法：

　　如何中止執行?

　　　　語法：

　6.1 查找HTML元素　

　　直接查找

　　間接查找

　　6.2節點（標籤）操做

　　　建立節點

　　　添加節點

　　　刪除節點

　　　替換節點

　　　屬性節點

　　獲取值操做

　　class的操做

　　7.1 經常使用事件

　　7.2 綁定方式