1. 程式人生 > >Javascript 個人筆記

Javascript 個人筆記

js為基於物件的指令碼語言,本身已經建立物件。區分大小寫的語言

js 能建立和讀取cookie,js不能讀寫機器上的檔案,js不能寫伺服器上的檔案,不能訪問本站外的指令碼或資源

js不能操縱其他視窗,js不能設定的過小

js註釋           //

嵌入式    <script language="JavaScript" type="text/JavaScript">程式碼</script>

連結式    <script type="text/JavaScript" src=".js"></script>

行內式    <p onclick"JavaScript:alert('Hello World!');"></p>

運算子號

== 是否全等    === 是否全等,包括型別    != 是否不等於    !==是否不全等於    >、<、>=、<=

in,用於判斷物件中是否存在某個屬性

instanceof  物件是否為某個類的例項

&&    ||    !    支援簡寫賦值運算子    +連線運算子,只要以連結為主,有一個非數值時執行連結     ?  :三元運算子

typeof 返回物件型別

字串的屬性和方法

length,返回字串中字元的個數

charAt(n)  返回字串物件在指定位置處的字元

charCodeAt(n)返回字串物件在指定位置處的ASCII碼

indexOf(“”)返回查詢子串在字串中的位置

laseIndexOf("")返回查詢子串在字串中的倒數位置

substr(開始位置,長度)擷取字元

substring(開始位置,結束位置)擷取字元

split(“”)分割字元成字串

replace(“”,“”)替換子串

toLowerCase()將字串變成小寫字母

toUpperCase()將字串變成大寫字母

數值型 布林型

陣列   的屬性和方法

var rank=new Array(n);rank[0],rank[1]……rank[n-2],rank[n-1]

length 返回陣列的長度

toString()    將陣列轉化為字串

concat()     將陣列中附加新的元素或多個數組元素連線成新陣列a..concat(b)

join(“”)        將陣列的內容連線起來組成新的字串,預設以逗號進行連線,也可以指定連線符

push()在陣列的結尾新增一個或多個項,同時更改陣列的長度

pop()返回陣列的最後一個元素,並將其從陣列中刪除

shift() 返回陣列的第一個元素,並將其從數值中刪除

unshift()在陣列開始位置插入元素,返回新元素

slice()返回陣列的片段,兩個引數,一個開始,一個結束

splice()刪除陣列元素,兩個引數,一個開始,一個結束

sort()大小排序

reserve()逆序

數值轉字串 結尾加“”或者使用toString()

字串轉數值parseInt()   parseFloat()

js語句與C語言一致

函式使用function標記 arguments訪問函式的引數

js物件     自定義物件  內建物件    瀏覽器物件

with,通過省略物件,直接訪問屬性

this 當前屬性(行內為當前元素,作為傳參使用,事件觸發體內this指代元素,window屬性

內建物件         Date物件,可以帶引數變成設定指定時間,不帶引數返回當前時間

Date物件的方法  getFullYear()  getMonth()  getDate()  getHours() toLocaleString()等

瀏覽器物件BOM(Browser Object Model)

1.調整視窗大小

(1)window.moveBy(dx,dy) 該方法將瀏覽器相當於當前的位置移動指定的距離(相對定位)

(2)window.moveTo(x,y)    將瀏覽器移動到指定位置(絕對定位)

(3)window.resize(dw,dh)   相對當前視窗增加或者減少視窗

(4)window.resizeTo(w,h)   將視窗調整到指定大小

2.開啟新視窗

window.open([url][,target][,option])    target可以將是視窗名稱

3.opener父視窗屬性

4.系統對話方塊

(1)alert (2)confirm (3)prompt

setTime(函式名,時間)設定隔多少時間執行一次函式   cleanTimeout取消指定引用

setInterval(程式碼,時間)每隔多少時間執行一次指定函式  clearInterval

location物件

location物件主要分析和設定頁面的URL地址

hash ——錨點後部   host——伺服器名稱和埠部分   href——完整的URL pathname——主機名後的部分     port——URL埠號  protocol——使用的協議    search——執行get請求的URL中間號(?)後的部分

history物件

history.go(-1) ==history.back();    history.go(0)==location.reload()    history.go(1)==history.forward();      history.length

BOM中的document物件

物件屬性       

anchors——網頁中所有錨點的集合

embeds——網頁中所有嵌入式物件的集合

forms——頁面中所有表單的集合

images——頁面中所有影象的集合

links——頁面中所有超連結的集合

cookies——用於設定或者讀取cookies的值

body——指定頁面主體的開始和結束

all——頁面中所有物件的集合

lastModified屬性獲取網頁最後更新時間

screen物件

availHeigh——視窗可以使用的螢幕高度,一般是螢幕高度減去工作列的高度

availWidth——視窗可以使用的螢幕寬度

colorDepth——螢幕的顏色位數

height——螢幕的高度

width——螢幕的寬度

滿屏顯示

<script type="text/JavaScript">
window.moveTo(0,0);
window.resizeTo(screen.availWidth,screen.availHeight);
</script>

文件物件模型(Document Object Module)DOM

HTML程式碼對應與一顆DOM樹,每一個元素就是DOM樹中的一個節點。node的屬性和方法如下:

屬性/方法 返回型別/型別 說明
nodeName String 節點名稱,元素節點的名稱都是大寫形式
nodeValue String 節點的值
nodeType Number 節點型別,數值表示
firstChild Node 指向childNodes列表中的第一個節點
lastChild  Node 指向childBodes列表中的最後一個節點
childNodes NodeList 所有子節點列表,方法item(i)可以訪問第i+1個節點
parentNode Node 指向節點的父節點,如果已是根節點,則返回null
previousSibling Node 指向前一個兄弟節點,如果已是第一個節點,則返回null
nextSibling Node 指向後一個兄弟節點,如果已是最後一個節點,則返回null
hasChildNodes() Bolean 當childNodes包括一個或多個節點時,返回true
attributes NameNodeMap 包含一個元素的Attr物件,僅用於元素節點
appendChild(node) Node 將node節點新增到childNodes的末尾
removeChild(node) Node 從childNodes中刪除node節點
replaceChild(newnode,oldnode) Node 將childNodes中的oldnode節點替換成newnode節點
insertBefore Node 在childNodes中的refnode節點前插入newnode節點

DOM在HTML中應用1.訪問指定節點2.訪問相關節點3.訪問節點屬性4.檢查節點型別5.建立節點

通過ID訪問指定節點      getElementById()

通過元素name訪問元素      getElementsByName()              返回陣列

通過標記名訪問元素         getElementsByTagName()          返回陣列

        注意:childNodes獲得的序列,Firefox會將元素後的回車列入,因此最好通過getElementsByTagName訪問子節點

訪問特殊節點元素

html——document.documentElement

head——document.documentElement.firstChild

body——document.body

超連結元素——document.links[n]

img元素——document.images[n]

form元素——document.forms[""]

訪問和設定元素的HTML屬性

getAttribute(name)     setAttribute(name,value)       removeAttribute(name)

可通過DOM元素.屬性名=“” 設定和刪除屬性  DOM元素.屬性名訪問屬性

訪問元素的內容innerHTML,可以新增元素或者文字

設定CSS屬性

DOM元素.style.CSS屬性      //樣式帶‘-’的後一個字母要大寫並忽略‘-’//float應為styleFloat//只能讀取到元素的行內樣式,style是行內元素,發生衝突時以style為準。

使用clssName屬性切換元素的類名或者是追加元素的類名(需要在前面新增空格)

replace方法去掉元素的某一類名

獲取元素的最終CSS樣式

function getCurrentStyle(element){
    if(element.currentStyle)
        return element.currentStyle          //IE支援
    else
        return document.defaultView.getComputedStyle(element.null)    //DOM支援

DOM節點的型別

DOM節點的屬性 元素節點 屬性節點 文字節點
nodeType 1 2 3
nodeName 元素標記名單大寫 屬性名稱

#text

建立和操作節點

1.createElement()方法建立元素    2.createTextNode()建立文字節點    3.createDocumentFragment()建立文件碎片

4.appendChild()為當前節點新增一個子節點,並且將其作為最後一個子節點

5.insertBefore()為當前節點新增一個子節點,將其插入到指定的子節點之前

6.replaceChild()將當前節點的某個子節點替換為其他節點

7.removeChild()刪除當前節點的某個子節點

DOM操作表單

通過document.forms["name"].elements[n]訪問表單中的子元素,或者直接通過元素的name屬性訪問(包括表單名及表單的子元素都可以使用.name屬性訪問)

屬性/方法 說明
checked 對於單選和複選而言,選中則為true
defaultChecked 對於單選按鈕和複選框而言,如果初始時選中則為true
value

除下拉選單外,所有元素的value屬性值

defaultValue 對於文字框和多行文字框而言,初始設定的value值
form 指向元素所在的<form>
name 元素的name屬性
type 元素的型別
blur() 使焦點離開某個元素
focus() 聚焦到某個元素
click() 模擬使用者單擊該元素
select() 對於文字框、多行文字框而言,選中並高亮顯示其中的文字

表單的submit()方法代替提交按鈕

使用js可同時設定多個action,target,submit等方法,將表單提交到不同的網頁,然後使用框架的形式將返回的頁面顯示

事件流

捕獲型事件採用body->div-->p,冒泡型採用特定事件傳播到最不確定事件中

1.事件處理函式

(1)HTML標記事件處理程式,在HTML程式碼新增js程式碼

(2)以屬性的形式出現的事件監聽程式,即元素加事件名

2.通過事件監聽程式註冊事件,新增或者刪除來重複執行相應的程式碼

元素.detachEvent(“事件”,函式名)       //IE刪除監聽函式

元素.attachEvent(”事件“,函式名)          //IE新增監聽函式

函式名不帶括號,即呼叫時才返回函式值。

元素.removeEventListener("事件”,函式,bolean);            //標準DOM刪除監聽事件

元素.addEventListener(“事件”,函式,bolean);               //標準DOM新增監聽事件

DOM與IE的區別,事件不帶on,bolean設定冒泡還是捕獲,false為冒泡

滑鼠事件的
事件名 描述
onClick 單擊滑鼠左鍵時觸發
onDbclick 雙擊滑鼠左鍵時觸發
onmousedown 滑鼠任意一個按鍵按下時觸發
onmouseup 鬆開滑鼠任意一個按鍵時觸發
onmouseover 滑鼠指標移動到元素上觸發
onmouseout 滑鼠指標移出該元素邊界時觸發
onmousemove 滑鼠指標在某個元素上移動時持續觸發
常用的HTML屬性
onload 頁面完全載入在window物件上觸發,圖片載入完成後在其上觸發
onunload 頁面完全解除安裝後在window物件上觸發,圖片解除安裝完成後在其上觸發
onerror 指令碼出錯時window物件上觸發,影象無法載入時在其上觸發
onSelect 選擇了文字框的某些字元或下拉列表框的某項後觸發
onChange 文字框或下拉框內容改變時觸發
onSubmit 單擊提交按鈕時在表單form上觸發
onBlur 任何元素或視窗失去焦點時觸發
onFocus 任何元素或視窗獲得焦點時觸發

事件在瀏覽器中是以物件的形式存在的,在IE中,事件又是window物件的一個屬性event.(window.event)因此使用事件物件可以是:

op.onclick=function(oEvent){
oEvent=oEvent||window.event}

jQuery框架

1.訪問頁面中的某個元素2.修改頁面的表現3.更改頁面的內容4.相應事件5.為頁面新增動畫6.與伺服器非同步互動

$("")作為選擇器

使用jQuery後會產生物件,該物件的方法與DOM物件的方法不一樣,兩者不能互相使用,但物件之間可以互相轉換

jQuery物件為一個數組物件$("")[0]轉換為一個DOM物件||使用$("").get(0)方法得到相應的DOM物件

jQuery選擇多個物件後,通過$("").eq(0)返回陣列中的一個

DOM轉iQuery只需要將物件用$()包裝起來

相關推薦

Javascript 個人筆記

js為基於物件的指令碼語言,本身已經建立物件。區分大小寫的語言 js 能建立和讀取cookie,js不能讀寫機器上的檔案,js不能寫伺服器上的檔案,不能訪問本站外的指令碼或資源 js不能操縱其他視窗,js不能設定的過小 js註釋           // 嵌入式 

javascript的發展及個人筆記

custom 它的 支持 解決 定義 bsp 連接 {} eve Node.js是一個Javascript運行環境(runtime),發布於2009年5月,由Ryan Dahl開發,實質是對Chrome V8引擎進行了封裝。Node.js對一些特殊用例進行優化,

Java程序猿的JavaScript學習筆記(12——jQuery-擴展選擇器)

type write number article mat 我們 content ace val 計劃按例如以下順序完畢這篇筆記: Java程序猿的JavaScript學習筆記(1——理念) Java程序猿的JavaScript學習筆記(2——屬性復制和繼承) Jav

JavaScript 經典筆記

實現 2個 write 變量 global light 不能 java 文件夾 JavaScript 是弱類型的語言,所以編譯器不能檢測出類型錯誤。 JavaScript 依賴於全局變量來進行鏈接。所有編譯單元的所有頂級變量被撮合到一個被稱為全局對象(the global

JavaScript學習筆記整理Day5

數字類型 cal 數組排序 return 函數 屬性 scrip each 第一個 #數組 ##一:數組的定義 1. 數組是值的有序集合 2. 每一個值叫做一個元素 3. 每個元素在數組中都有一個位置,以數字表示,叫做索引。索引從0開始。 ##二:特

JavaScript學習筆記整理Day4

沒有 默認值 函數的調用 -- 復雜 簡潔 day4 打開 nts ##函數 ####函數是一段在一起,可以做某件事的程序。 ###優點:控制程序設計的復雜性 1. 提高軟件的開發可靠性 2. 提高軟件的開發效率 3. 提高軟件的可維護性

JavaScript學習筆記整理Day9

elements substr() 長度 開平 and ret val false index 一.JavaScript定時器:   1.單次定時:setTimeout(fn,time);   2.多次定時:setInterval(timer);   3.停止單次定時:cl

JavaScript學習筆記整理Day10

表達 所有 原子 驗證 code abc 表達式 color 步驟 一.正則表達式(規則表達式)   定義:使用單個字符串來描述、匹配一系列符合某個語法規則的字符串搜索模式 二.正則表達式的作用   操作字符串是正則的唯一作用(驗證用戶名,驗證電話號碼,驗證密碼等表單元

javascript學習筆記(二):定義函數、調用函數、參數、返回值、局部和全局變量

兩個 cnblogs bsp 結果 value ava ase com 調用 定義函數、調用函數、參數、返回值 關鍵字function定義函數,格式如下: function 函數名(){ 函數體 } 調用函數、參數、返回值的規則和c語言規則類似。 1 <!DOC

javascript學習筆記(五):異常捕獲和事件處理

log 類型 按鈕 輸入 button lan yellow logs 代碼 異常捕獲 Try{   發生異常的代碼塊 }catch(err){   異常信息處理 } 1 <!DOCTYPE html> 2 <html> 3 <head

JavaScript筆記01——Making Stuff Happen???

文件 eight tin clas 快捷 strong init chrome scrip While, generally speaking, HTML is for content and CSS is for presentation, JavaScript is

JavaScript練習筆記整理·3 - 6.25

fat 題目 最優 app pread 以及 值類型 循環 return 歡迎和大家一起來討論~ 基礎練習(1): 我的解答為: function array_diff(a, b) { if (b == "") return a; return a

JavaScript練習筆記整理·4 - 6.26

math 參數表 兩個 接收 strong middle 沒有 [] 判斷 基礎練習(1): 我的解答為: function getMiddle(s) { if(s.length%2 == 0) { return s.charAt(s.length/2-1

laravel框架的個人筆記

laravel框架的個人筆記具體安裝環境可更具最新版本的文檔來,一下內容 只是我代碼的一些操作demo ,是對文檔進行的個人筆記;//路由命名Route::get(‘admin‘,[‘as‘=>‘profile‘,function(){ echo route(‘profile‘); re

Java程序猿的JavaScript學習筆記(9—— jQuery工具方法)

article 順序 還要 並且 defined this ont property plain 計劃按例如以下順序完畢這篇筆記: Java程序猿的JavaScript學習筆記(1——理念) Java程序猿的JavaScript學習筆記(2——屬性

你不知道的JavaScript學習筆記1——作用域

模式 引用 語法分析 訪問 要素 並不會 參數 嵌套 ron 處理程序三要素: 引擎:編譯與執行過程。 編譯器:語法分析與代碼生成等。 作用域:收集並維護由所有聲明的標識符(變量)組成的一系列查詢,並實施一套非常嚴格的規則,確定當前執行的代碼對這些標識符的訪問權限。 示

Javascript 學習筆記

取值 num bject apt 1.2 存儲 else 邏輯運算 als Javascript note chapter one 1.1 值 js中有六種基本的值類型:number,string,boolean,object,function,undifin

JavaScript學習筆記2_面向對象

面向 枚舉 差異 () 適用於 父類構造函數 ring key lap 1.對象的定義 ECMAScript中,對象是一個無序屬性集,這裏的“屬性”可以是基本值、對象或者函數 2.數據屬性與訪問器屬性 數據屬性即有值的屬性,可以設置屬性只讀、不可刪除、不可枚舉等等

javascript學習筆記1

per 選擇 src bsp rop 語句 conf log 一個   一.JavaScript介紹   JavaScript又被稱為js,主要負責瀏覽器的動畫等效果.現在一般瀏覽器都兼容js(IE6.7.8可能不兼容某些用法)。   二.JS常用語句   1.docume

JavaScript學習筆記】if使用

document asc cnblogs class body 學習筆記 lang div var <html> <body> <script language="JavaScript">