JavaScript用法分享

 

一概述

1.什麼是JavaScript?

基於物件、由事件驅動的解釋性腳本語言。

2.JavaScript語法特點

• #區分大寫小，這一點不同於HTML。

• 結尾的分號可有可無。

• 變數是弱型別的：變數在定義時統一採用var，型別在賦值時決定。

3.UI線程

# 瀏覽器中都有一個用於頁面展示的線程，叫做UI線程，向伺服器提交以後，UI執行緒清空頁面，等待載入伺服器的回饋，如果等待時間過長，頁面將出現空白。

4.this

主要用在方法中，代表目前對象，也就是方法的直接呼叫者。

二資料型別

1.JavaScript的資料型別

String、Number、Math 、Array、boolean、Date、Object、RegExp、null。

2.變數定義

• # 全域變數：在函數外宣告的變數為全域變量，在整個頁面範圍有效。為一個未宣告的變數賦值，該變數轉換為全域變數。

• 局部變數：在函數內部宣告的變數為局部變量，只在函數內部有效。

• this：如果在函數內部宣告變數時採用this引用，則變數在函數外部可以透過物件引用。

3.String

常用方法：

• length：取得字串的長度。

• ==：在JS中透過「==」對比兩個字串是否相等。

• indexOf(subStr)：指定字元第一次出現的索引值。

• lastIndexOf(subStr)：指定字元最後一次出現的索引值。

• substr(begin[len])：從指定位置開始取得指定長度的字元。

• substring(begin[end])：取得指定索引區間的字元。

• replace(regExp,substr)：以指定字元取代滿足格式的字元。

• concat(str01...)：連接多個字串，傳回一個新的字串。

• split(delim[limit])：使用指定分隔符號分割字符，將分割結果以數組形式傳回，limit是分割次數，可選項。

4.Number

• # toFixed(n)：保留n個小數。

5.Math

• # random()：隨機傳回一個0-1的數字。

• round(x)：四捨五入。

• max(x...)：取得最大值。

• min(x...)：取得最小值。

6.Date

• # getTime()：取得從1970-01-01至今的毫秒數。

• getFullYear()：取得此時的四位元年份。

• getMonth()：取得此時的月份。

• getDate()：取得此時所屬月份第幾天。

• getDay()：取得此時所屬星期的第幾天，範圍0-6。

• getHours()：取得此時的小時數。

• getMinutes()：取得此時的分鐘數。

• getSeconds()：取得此時的秒數。

7.RegExp

# 建立：

##

var reg=/xxxx/;
var ret=new RegExp("");

常用方法：
  test(str)：判断字符串是否满足指定的格式。

8.Array

⑴数据类型

   不同与java语言，JS中的数组在创建时不需要指定长度与数据类型，可以存储多种类型数据。

⑵创建（3种方式）

var arr01=[数组中的值];//创建时赋值
var arr01=new Array(数组中的值);//创建时赋值
//先声明，后赋值
var arr01=new Array();
arr01[0]=1;
arr01[1]=2;
var arr01=new Array(6);//创建时指定数组长度

⑶常用操作

• arr[0]：获取指定索引位置的元素，也可以为指定索引位置赋值。

• arr.length：获取数组长度。

• push(data)：向数组尾部添加元素并返回操作完成后的数组长度。

• unshift(data)：向数组头部添加一个元素并返回数组长度。

• pop()：删除数组的最后一个元素并返回删除的元素。

• shift()：删除并返回数组的第一个元素。

• for(index in arr)：遍历数组，arr[index]获取数组中的元素。

• sort(function(a,b){return a-b;})：如果数组中存储的是字符，不需要指定函数，按照字母升序排序；如果数组中存储的是数字，需要设定排序函数，a-b升序排列，b-a降序排列。

• reverse()：反转排序。

• join(connector)：使用指定的连接符将数组连接成字符串，未指定连接符时默认采用","作为连接符。

• toString()：等效于join()，将数组转化为一个由","连接的字符串。

• slice(begin,end)：获取指定索引范围的元素，包含begin,不包含end。

• splice(begin,howmany,newValue...)：从指定索引位置（包含该位置）开始删除howwmany个元素，插入新的元素。

• concat(anotherArr...)：将参数数组的元素依次追加到该数组中并返回一个新的数组，原数组不变。

9.Object

⑴用于自定义对象，对象的创建方式：

//第一种方式,对象的声明与实例化一体
var obj={name:"张三",age:20,myFunction:function(){}};
//第二种方式,将函数当做构造方法
function person(name,age){
this.name=name;
this.age=age;
this.myfunction=function(){
alert(this.name);
     }
}
var tom=new function("tom",20);
//第三种方式
person=function(){
this.name=name;
this.age=age;
this.myfunction:function(){
      }
}
var tom=new function("tom",20);

⑵fn01:fn02的意義

將fn02賦值給fn01，fn01擁有與fn02完全相同的內容。

三 屬性

使用者描述物件的特徵，實例化物件。
  常用屬性：

• #href="#"：跳到頁面開頭。

• title作為元素的文字直接顯示，元素無法直接顯示文字時，當滑鼠停留在上方時會顯示為提示訊息。

四window

#  瀏覽器視窗對象，是一個全域對象，是所有物件的頂級對象，引用屬性或函數時可以省略。

1.常用屬性

• #    document：一個代表視窗中全部HTML元素的物件。

•     closed：boolean類型，用於判斷目前視窗是否已關閉。

•     location：取得目前頁面的URL；存取指定的資源，該資源可以是HTML，也可以是Servlet或其他伺服器資源，在當前頁面中開啟。 location=url與location.href=url功能相同。

•     history：表示目前視窗瀏覽記錄的物件。在形成了瀏覽記錄的前提下，可以跳到前後頁面，history.go(-1)跳到上一個頁面，history.go(1)跳到下一個頁面。

•     parent：表示包含目前視窗的父視窗。

•     opener：表示開啟目前視窗的父窗口，常用語父子視窗通訊。

2.常用方法：

• #    alert(content):跳出警告對話框。

•     confirm(content)：彈出一個確認對話框，回傳確認結果，true或false。

•     prompt：提示對話框，用於使用者輸入，回傳輸入結果。

•     setTimeout()：計時執行。

•     setInterval()：週期性執行。

•     open():在新視窗中載入指定的URL。

•     close():關閉目前視窗。

•     parseInt()：將字元創轉換為int數字。

•     eval：將普通字串解析成JS程式碼。

•     typeof:傳回資料的型別。

•     isNaN：判斷資料是否為數字。

五DOM

 Document Object Model是一種操作文檔的技術，將文件視為按樹形分層結果排列的對象，document是代表該文件的對象。

1.元素

 文件中的標籤節點。
  子節點：元素節點、文字節點、註解節點，不包含屬性節點。

2.建立物件

 document.createElement(tagName)：根據標記名建立元素，作為參數的標記不帶<>。

3.取得物件

• #  document.all.id：根據id取得物件。

•   formId.tagId:透過id取得表單下的元素，也可以透過"formName.tagName"的方式取得表單下的元素。

•   document.getElementById(id):根據id取得物件。

•   document.getElementsByName(name):根據name取得對象，因為可能存在多個物件name相同，所以取得的物件是複數。

•   document.getElementsByTagName(tagName)：通过标签名称获取对象。

4.属性

•  document.location：同document.location.href作用相同，用于访问指定资源，该资源可以是HTML，也可以是Servlet以及其他服务器资源，不能获取当前页面的URL。

5.常用方法

•  document.write(content)：向页面输出。

六 函数

 在JS中调用函数不必像在java中那样必须为每一个形参赋值，只需为需要的形参赋值即可，其他形参位可以空着。每一个函数都有其对应的作用范围，不同作用范围的函数定义在不同的节点上。

  1.常用函数

   javascript:void(0)：保留超链接样式，只执行js代码，不进行页面跳转。

  2.动态添加函数

动态地向元素添加函数有两种方式：

⑴使用JS：

使用JS获取对象以后，通过对象调用函数不包含括号），将自定义的函数function赋给该函数

obj.action=function(){};

⑵使用JQuery：

$(selector).action(function(){});

两种方式不能混用，即不能这样使用：$(selector).action=function(){}。

3.插入

java输出代码块与EL表达式都可以插入JavaScript代码中，插入时将其视作字符串处理，包裹在单引号或者双引号中，如:

alert("<%=name%>");
alert("${name}");

七 事件

動作引發的行為稱作事件，可以為一個事件新增多個函數，多個函數依照新增順序依序執行。不同的元素對應的事件不同。

1. 常用事件：

• # onclick：滑鼠點選時觸發。

• onchange：下拉列錶框的選項發生改變時觸發。

• onblur：失去焦點時觸發。

• onfocus：獲得焦點時觸發。

• onmouseover：滑鼠移到元素上時觸發。

• onmousemove：滑鼠在元素上移動時觸發。

• onmouseout：滑鼠離開元素時觸發。

• onselect：在選取文字網域時觸發。

八表單提交

# 1.按鈕提交

## 單擊submit按鈕，提交表單。

2.程式碼提交

執行document.forms["formName"].submit()程式碼，透過程式碼提交表單。

九父子視窗通訊

父子視窗通訊指的是視窗向開啟該視窗的視窗傳遞訊息，即由子視窗向父視窗傳遞訊息，而由父視窗向子視窗傳遞訊息可以透過QueryString完成。

子視窗向父視窗傳遞訊息的關鍵是在子視窗中取得父視窗對象，透過window.opener取得父視窗對象，然後可以像在父視窗中一樣操作了。

十個table

1.table物件常用操作

• ## table.rows：包含表格中所有行的陣列對象，table.rows.length取得長度，即行數。

• insertRow(index)：在指定位置插入一行，不指定位置，在結尾插入。

• deleteRow(index)：刪除指定位置的行，不指定位置，刪除最後一行。

2.tr物件常用操作

• #rowIndex:取得索引位置，即行號。

• insertCell(index)：在指定位置插入列，不指定在，在最後插入。

• deleteCell(index)：刪除指定位置的列，不指定位置，刪除最後一列。

 ###

以上是JavaScript用法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！