標題：JavaScript

建議：

A：在一個html中，如果沒有通過js檔案匯入javascript，建議將javascript的內容放置在</body>後面

B：由於瀏覽器的相容性問題

                            1建立相容性js和html

                            2

分別設計符合特定瀏覽器的頁面！

                            通過判斷瀏覽器型別決定訪問什麼檔案。

 

0、總綱

 

1、Java基本語法

 

1-1：變數

注意：關鍵字 變數名，數字，函式名，或其他識別符號中間的空格，製表符會被忽略，除非空格是字串或者其他變數的一部分

定義:語法 var str=”abs”;（原始型別）

var s=new Date();(複合型別)

作用域：全域性變數與區域性變數同名的時候，區域性變數生效；

1-1-1：型別

注typeof（）檢視當前變數的資料型別

Stirng的length只關注字元個數，不關心是漢字還是字母  sstr=”三是是是”。Sstr.length=4

 

1-1-2：js直接量

直接量是指：程式裡直接顯示出來的數值，可充當變數

（number Boolean 字串）

1-1-3運算子

1-1-3-1：String的算術運算子

字串相加：連線字串；

字串其他算數運算：若字串是數字則進行算數運算，若字串。。是非數字則返回Nan；

(字串會被嘗試轉化為數字（+法除外）)

1-1-3-2：Boolean相關運算子

true為1；falas為0

1-1-3-3：比較運算子

==  var a=”5”  a==5是true

===  var a=”5”  a===5使false     ===當值和型別都相等時，為true 

注：document.write(“....”);

   Document.write（”   ’sdf’   ”）;

1-1-3-4：優先順序

算術運算子

邏輯運算子

關係運算符

賦值運算子

字串運算子

1-1-4：表示式

直接量，變數，運算子與其他表示式的組合

 

 

 

2、物件

js物件（JavaScript 本地物件和內建物件 ）

Browser 物件（BOM）

HTML DOM 物件

建立物件可通過new 建構函式名來建立

物件中有屬性和函式

 

2-1：js物件有自定義物件和js提供的物件

（本筆記寫出常用的方法和屬性！具體請檢視手冊）

js提供的物件（number，boolean，array，String，date，math，regexp）

注js全域性物件來提供全域性屬性和函式

2-1-1：Array

2-1-1-1：方法

建立陣列的方法：

var mycars=
new Array()
        mycars[0]="Saab"
        mycars[1]="Volvo"
        mycars[2]="BMW"
var mycars=new Array(3)

        mycars[0]="Saab"
        mycars[1]="Volvo"
        mycars[2]="BMW"
      var mycars=
new Array("Saab","Volvo","BMW")

 

2-1-1-2：多維陣列(例子為一個二維陣列)

Var s=new Array(
		New Array()；New Array()；		)

Concat()連線陣列
join（）根據指定字元分割陣列
push（）向陣列中加入一個或多個元素，返回新的長度
        若push(陣列名)則把整個陣列當作一個字串加進去
Pop()刪除最後一個元素，並返回最後一個元素
reverse（）顛倒陣列的順序
 

 

2-1-1-3：屬性

length

 

2-1-2：String

2-1-2-1：方法

bold()  粗體

Fontcolor()  設定顏色

Fontsize()   設定大小

Link(url)    將字串顯示為連結。

Sub()      將字串顯示為下標

Sup()      將字串顯示為上標

Concat()    連線字串

charAt(s)取下標為s的字元（若字元不存在·則返回空字串）    

split()    把字串分割成字串陣列

indexOf()   返回該字元在字串中的位置

replace()   替換字串

subString()   取字串中兩個索引值之間的字元

subStr()   從起始索引號取出字串中的指定數目的字元

2-1-2-2：屬性

Length

2-1-3：Date

2-1-3-1：方法

構造方法：var s=new Date（）；

tolocaleString（） 把date轉換為本地習慣格式化的字串

getFullyear（）返回當前年

getmonth（）當前月

getday（）返回一週中的該天星期（0-6）0為週日

getdate（）返回該月的哪一天（1-31）

gethours（）當前小時

getminutes（）當前分鐘

getseconds（）當前秒

gettime（）當前時間距離1970/01/01/00：00：00的毫秒數（作用使用毫秒數處理快取處理）

2-1-4：math

2-1-4-1：方法

ceils（）上舍入   10.4   11

floor（）下舍入   10.4   10

round（）四捨五入  10.4  1

random（）得到0-1之間的隨機數

pow（x,y）  x的y次方

各種數學運算函式。。。。。

2-1-4-2：屬性

PI    //圓周率

2-1-5：全域性物件

全域性方法

使用方法:方法名()

Eval(str)   執行js程式碼  str是字串

encideURI() 對字元進行編碼

encideURIcomponent()對字元進行編碼

decideURI()對字元進行解碼

decideURIComponent()對字元進行解碼

Escape()    對字串進行編碼。之後可通過unescape()進行解碼

isNaN 檢查是否是數字如果是，返回false 如果不是，返回true

parseInt（）字串轉換為整數

parsefloat（）字串轉換為浮點型

 

2-2：自定義物件

構造器函式（函式名首字母大寫，且方法體中可用this）

可通過物件名.prototype.屬性名=屬性值  來擴充套件屬性

2-3：Browser 物件（BOM）

使用方法都是 物件名.方法名

2-3-1：Navigator(瀏覽器資訊)

2-3-2：Screen(客戶端顯示螢幕資訊)

2-3-3：location（請求url地址資訊）

   屬性

Href   是個可讀可寫的屬性

       Location.href.可獲取請求到的地址

       可以設定url地址

2-3-4：history（請求url地址的歷史記錄）

 方法

back（）  訪問到上一個頁面

forward（）訪問到下一個頁面

go（number/url） 訪問到指定頁面

，

2-3-5：window（視窗物件，頂層物件）

所有的bom物件都是在window之下的

方法

Alert()顯示帶有一段訊息和一個確認按鈕的警告框。

Confirm(“message”)  顯示帶有一段訊息以及確認按鈕和取消按鈕的對話方塊。

Prompt(“提示語”,”預設值”)  顯示可提示使用者輸入的對話方塊。

Open(url,name,featrues,replace)

       開啟新的瀏覽器視窗

                   url 新視窗的地址

                   name 一般為空

                   featrue 宣告新視窗特徵（例如“width=200px，height=100px”）

Close()   關閉視窗（相容性差）

 

 

2-3-6：做定時器

setinterval（“函式或程式碼串”，毫秒數）按指定週期呼叫表示式或函式

settimeout（“函式或程式碼串”，毫秒數）指定毫秒數後呼叫表示式或函式

兩者均返回一個id值

clearinterval（s）

cleartimeout（s）

以上兩個函式清除定時器  s為定時器設定時返回的id值

（通過setinterval+更換圖片！可實現圖片輪放

                            可使用圖片緩衝技術

                                     A new一個image物件

                                     B 將image中的src賦值

                                     C將src賦給img標籤中的src屬性

 

 

2-4：HTML DOM 物件

Document object model

可用dom提供的物件裡面的方法和屬性對標記型語言進行操作

使用

A：把所有的html裡的標籤屬性和文字內容都封裝起來

B：要對標記型語言進行操作前，必須先通過畫圖分析

  分析

       根據html的層次結構，在記憶體裡開闢出一個樹形的結構

Document是整個文件（window下的屬性）

element可能是標籤物件，屬性物件，文字物件

（node節點物件：該物件是這些物件的父物件，若在物件中找不到的方法則到node裡尋找）

2-4-1：document物件

writes（）

getelementbyid()

getelementbytagname()  返回集合

getelementbyname()    返回集合

2-4-2：element

方法

操作樹

獲取節點

getelementbyid()

getelementbytagname() 

getelementbyname()

插入節點

insertBefore（new，old）new為新插入節點，old是指將新節點插在old節點的前面

appendchild（）//有點類似剪下的，新增後，該子節點原來位置已經沒有子節點。

刪除節點

removeChild   ///通過父節點呼叫

替換節點   

replaceChild///通過父節點呼叫

新建節點

Createlement() 新建節點

createTextNode建立文字字串

通過appendChild將文字字串放在節點下面

複製節點

Clonenode(boolean) true為複製 false反之

將要進行復制的節點標籤.Clonenode(true);

獲取父節點.appendchild(已經被複制的節點)

2-4-3：js操作cookies

cookies是通過http傳遞的因此cookie不能包含分號等特殊符號，對cookies的屬性賦值時需要進行編碼esxcape（），讀取時用unescape（）解碼

document的屬性cookies

屬性

name

name（必須的）name是可以自定義的

例如

Document.cookies=”username=tom”;  表示建立一個名字為username值為tom的cookies

多個的時候可以

Document.cookies=escape(“username=tom;city=sdfs;zio=sdfsf”);

建立三個coolkies

 

Expries

定義cookies過期的時間

一般使用格林尼治時間的文字字串

expries=“new Date()”;

 

 

 

 

path

定義作用範圍

path=“地址”

path=/   //表示所有網頁都可以訪問

domain

實現伺服器共享

domain==伺服器地址

secure  （可忽略）

使cookie只能在安全的internet上使用

secure=true/secure=false

cookies儲存資訊

由於cookies有個數和大小的限制

可通過

名稱1=值1&名稱2=值2&名稱3=值3

這種組合實現多個資訊存入同一個cookies

如

Ddocument.cookies=escape(“user=jjj&age=45&sex=male&city=mes”);

這樣將使用者為jjj年齡為45，性別男，城市mes儲存在同一個cookies

 

cookies讀取資訊

通過unescape（）進行解碼再讀取

2-5：innerHTML屬性

作用獲取文字內容

向標籤裡面設定內容（可以是html程式碼）

例如

Vvar ssp=document.getelementbyid（”d“）

Ssp.innerHTML=”<h1>sdfsdf</h1>”

3、js函式

定義  呼叫

定義

Function 方法名（引數列表）

{

         方法體

         返回值//可有可無

}

匿名函式

Function（引數列表）

{

         方法體

         返回值

}

動態函式

V、ar aadd=new Function(“引數,”方法和返回值”)

模擬過載

1：js函式不存在過載

2：但是可以通過agruments陣列實現模擬過載

arguments是js函式中一個特殊的物件，該物件是以陣列的形式儲存呼叫函式時傳入的所有引數

例如

Function aadd（）

{

         If(argument.length==2)

                   Return arguments[0]+arguments[1];

Else if(argument.length==3)

Return arguments[0]+arguments[1]+ arguments[2];

 

}

4、js語句

for

switch支援所有型別

if

while

do    whille

for(屬性名 in物件組)  遍歷

continue

break

5、js事件

常用

Onclick  滑鼠點選

Onchange改變內容（selected同用）

Onblur得到焦點

Onfocus失去焦點

 

jQuery

js有許多優秀的指令碼庫，如prototype   Ext   Mootools   jquery！

學習jquery，必須熟悉html css js Dom xml ajax原理

搭載jquery環境

使用方法

<script src=”jquery的檔案地址”>*******jquery程式碼*********</script>

 

$

這個符號是jquery的簡寫形式

Jquery物件（jquery包裝集）

將Dom物件轉化為jquery物件後，可以使用jquery類庫提供的各種函式。可以把jquery理解為一個“類”，並封裝大量的方法，而且可動態載入外掛擴充套件這個類

 

Jquery物件其實是js的陣列

方法

屬性

jQuery：當前的jquery的版本號

length  陣列物件的元素個數

contex一般情況下都是指向htmldocument物件

selector 傳遞進來的選擇器內容。如 #yourid   .yourclass