alert(); 頁面彈窗css
<input plactholder="請輸入密碼"/>(隱藏字體效果)
js對數據類型不敏感,與Java類似
1.js變量定義符:var
2.js數據類型:
number string bollean undefind 引用數據類型
typeod 查看數據類型
3.js的函數有兩種定義方式
①普通函數語法:
function 函數名稱(){
js功能邏輯代碼
}
②匿名函數語法:優勢:節省命名空間
(var 函數名稱 = )function(參數列表){
js功能邏輯代碼
}
4.js事件
onclick 鼠標點擊觸發事件
onmouseover 鼠標移入
onmouseout 鼠標移出
onload 某個頁面或圖像被完成加載
onsubmit 當表單提交時觸發該事件--注意事件源是表單form
ondblclick 鼠標雙擊某個對象
onblur 元素失去焦點
onfocus 元素得到焦點
onchange 用戶改變域的內容
onkeydown 某個鍵盤的鍵被按下
onkeypress 某個鍵盤的鍵被按下或按住
onkeyup 某個鍵盤的鍵被鬆開
onmousedown 某個鼠標按鍵被按下
onmouseup 某個鼠標按鍵被鬆開
onmousemove 鼠標移動
5.js的BOM對象
①screen對象,screen對象中存放着有關顯示瀏覽器屏幕的信息
②window對象,window對象表示一個瀏覽器窗口或一個框架
1)彈框的方法
提示框 alert(提示信息)
確認框 comfirm(確認信息) 返回值(true,false)
輸入框 prompt(輸入信息)
2)定時器
執行屢次的定時器:setInterval
執行一次的定時器:setTimeout(函數,毫秒值)
清除定時器:(執行屢次清除)clearInterval(函數)
清除定時器:(執行一次清除)clearTimeout(函數)
3)全局方法(經常使用的幾個)
parseInt/parseFloat函數(字符格式轉換)
eval函數---特色:能夠將字符串解析成js腳本
window.onload 頁面加載完畢事件
document.getElementById() 獲取頁面中相應的文檔id,方便修改信息
③navigator對象,包含的屬性描述了正在使用的瀏覽器
④history對象,是用來保存瀏覽器歷史紀錄信息
⑤location對象,location對象是window對象的一部分,可經過window.location屬性來訪問。
location.href="網址"; 至關於自動在瀏覽器中輸入網址並跳轉
6.js的DOM的操做方法
(1)標籤元素的操做
①得到元素對象:
根據id得到一個元素:getElementBy(id屬性值)
根據標籤名稱得到多個元素:getElementsByTagName(標籤名稱)
根據class屬性得到多個元素:getElementsByClassName(class的屬性值)
根據name屬性得到多個元素:getElementsByName(name屬性值)
②建立一個新元素 createElement()
③將元素放到某個父元素的內部appendChild()
④標籤體的獲取與設置:innerHTML
(2)屬性的操做
得到屬性的值:getAtrribute(name)
設置添加屬性的值:setAtrribute(name,value)
刪除某個屬性:removeAtrribute(name)
得到元素父節點: parentElement parentNode
刪除元素子節點: removeChile(元素)
查看元素是否有子節點: hasChildNodes(元素)
剪切節點替換: 父節點.replaceChild(要替換節點,被替換節點);
添加子節點: appendChild(子節點);
建立節點: createElement("標籤名稱")
節點插入: 父節點.insertBefore(插入,被插入)
父節點.insertAfter(插入,被插入)
7.Date 函數
8.Map 函數
9.RegExp 正則表達式
-------------------------------------------------
jQuery
10.jQuery對象與js對象之間的轉換
js對象轉成jQuery對象,語法:$(js對象)
jQuery對象轉換成js對象,語法: jQuery對象[索引]或jQuery對象.get(索引)
11.事件的寫法不一樣,意義相同
js的事件的寫法:js對象.onclick = function(){}
jQuery的事件的寫法:jQuery對象.click(function(){})
12.js的頁面加載完畢與jQuery的頁面加載完畢
js的頁面加載完畢:window.onload = function(){}
jQuery的頁面加載完畢:$(document).ready(function(){})
二者區別:
a)jQuery的頁面加載完畢有簡寫形式:$(function(){})
b)jQuery的頁面加載完畢事件能夠寫屢次,而js只能寫一次,寫屢次也只會執行一次。
13.基本選擇器
標籤選擇器(元素選擇器): $("html標籤名")
id選擇器:$("#id的屬性值")
類選擇器:$(".class的屬性值")
14.層級選擇器
得到A元素內部的全部B元素:$("A B")
得到A元素下面的全部的B子元素(孫子就不行):$("A>B")
得到A元素同級下一個B元素:$("A+B")
得到A元素同級全部後面B元素:$("A~B")
15.屬性選擇器
得到有屬性名的元素:$("A[屬性名]")
得到屬性名 等於 值 元素:$("A[屬性名=值]")
得到屬性名 不等於 值 元素:$("A[屬性名!=值]")
得到屬性名 以 值 開頭 元素:$("A[屬性名^=值]")
得到屬性名 以 值 結尾 元素:$("A[屬性名$=值]")
得到屬性名 含有 值 元素 元素:$("A[屬性名*=值]")
複合屬性選擇器,多個屬性同時過濾:$("A[屬性名!=值][屬性名!=值][屬性名!=值]")
16.基本過濾選擇器
得到選擇的元素中的第一個元素: :first
得到選擇的元素中的最後一個元素: :last
不包括指定內容的元素例如: :not(selecter)
偶數,從0開始計數: :even
奇數,從0開始計數: :odd
指定第幾個: :eq(index)
大於n個: :gt(index)
小於n個: :lt(index)
得到標題(<h1>/<h2>...):header ---固定寫法
得到動畫: :animated ---固定寫法 正在執行的動畫
17.表單屬性選擇器
可用: :enabled
不可用: :disabled
選中(單選radio,多選checkbox): :checked
選擇(下列列表<select>): :selected
18.jQuery的DOM操做方法
①HTML代碼/文本/值/屬性:html()/test()/val()
html text val 傳遞參數表明賦值 空參表明獲取
②HTML屬性操做:attr()/prop()
attr()===setAtrribute和getAttribute
attr(屬性名稱);---獲取屬性的值
attr(屬性名稱,屬性值);---設置屬性的值
③HTML的class屬性操做:addClass() removeClass()
addClass(值)===attr("class",值)
removeClass(class值)===removeAttr("class值")
④HTML的樣式操做:css()
css()===js對象.style.屬性
css(css屬性名) 獲取css屬性名稱對應值
scc(css屬性名,值) 設置css樣式
⑤HTML的元素的建立:$("標籤")
$("<li></li>")===createElement("li")
⑥HTML的內部插入:append() prepend()
append()===appendChild
prepend() 加入全部子元素的最前面
⑦HTML元素的刪除操做:remove()
注意:jQuery中的大部分方法是集設置值與獲取值爲一體的
定義變量時 使用var 則該變量屬於函數私有
不寫var 則該變量屬於全局的
19.jQuery的效果
①元素的顯示與隱藏
show(speed,fn)顯示
參數 speed,顯示速度,單位:毫秒。固定字符串:slow,normal,or fast
參數 fn,顯示成功以後回調函數。
hide() 隱藏
fadeIn() 顯示。
fadeOut() 隱藏。
fadeToggle() 切換
slideUp() 滑出
slideOut() 滑走
20.js頁面的編碼方法
encodeURL() : 編碼
decodeURL() : 解碼
21.jquery中經常使用的事件
jQuery的事件與js的事件的功能和意義同樣,只是在使用語法上稍微有些差別
blur([[data],fn]) 失去焦點事件
change([[data],fn]) 域內容變化
click([[data],fn]) 點擊事件
dblclick([[data],fn]) 雙擊事件
focus([[data],fn]) 得到焦點事件
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
scroll([[data],fn]) 滾動事件
submit([[data],fn]) 提交事件
22.事件的綁定:jQuery對象.bind(事件類型,相應函數);
例如:
綁定一個事件:
$("btn").bind("click",function(){
alert();
});
綁定多個事件:
$("button").bind({
click:function(){alert()},
mouseover:function(){alert()},
mouseout:function(){alert()}
});
事件的解綁:jQuery對象.unbind([事件類型]);
例如:
解綁全部事件:
$("btn").unbind();
解綁指定事件:
$("button").unbind("click");
23.事件轉換
$("#btn").hover(鼠標移入事件,鼠標移出事件);html