JavaScript用法分享
- 巴扎黑原創
- 2017-07-18 15:51:25950瀏覽
一概述
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中文網其他相關文章！