努力到無能為力,拼搏到感動(dòng)自己 !
一 核心：函數(shù)和對(duì)象訪問
1頁面加載函數(shù):
最原始最麻煩的寫法
jQuery(document).ready(function(){});
簡寫方式(開發(fā)中常用)
$(function(){});
2 JQ與JS頁面加載的區(qū)別:
① JS頁面加載存在覆蓋問題，加載速度比JQ慢(除了要加載整個(gè)頁面還得加載與之相關(guān)資源)
② JQ頁面加載不存在覆蓋問題，按照書寫順序依次執(zhí)行，加載速度比JS塊(當(dāng)整個(gè)文檔繪制完畢后就執(zhí)行)
3 JQ對(duì)象與DOM對(duì)象之間的轉(zhuǎn)換:
①JQ向DOM轉(zhuǎn)換 (可能忘記了JQ里面的方法但是記得DOM的操作)
方式一: $(element).get(index,一般都是0)
方式二： $(element)[0]
②DOM向JQ轉(zhuǎn)換 (使用$()將DOM對(duì)象包裹起來)
$(DOM對(duì)象)
注意：##
JQ和DOM對(duì)象不能互相使用對(duì)方的屬性和方法！
4 遍歷
在對(duì)象訪問中的遍歷：
$(DOM對(duì)象).each(function(i,n){})
其中，i代表角標(biāo)，n代表被遍歷后的每一個(gè)元素,DOM對(duì)象就是被遍歷的對(duì)象。
JQ工具類中的遍歷方式：
$.each(被遍歷的對(duì)象,function(i,n){});
二 選擇器
1 基本選擇器
1 id選擇器
2 類選擇器
3 元素選擇器
4 通配符*
** 多個(gè)選擇器同時(shí)作用(并集) : 注意，多個(gè)選擇器之間使用逗號(hào)(,)分開 **
2 層級(jí)選擇器
A B (尋找A下面的所有包含B元素的內(nèi)容(兒子、孫子、重孫子))
A>B (尋找A下面的所有包含B元素的內(nèi)容(只找兒子))
A+B (尋找A下面的所有包含B元素的內(nèi)容(下一個(gè)同桌))
A~B (尋找A下面的所有包含B元素的內(nèi)容(兄弟元素))
3 基本過濾選擇器
過濾選擇器都有一個(gè)共同的特性 : 前面都有冒號(hào) " : "
:first (索引為第一的本標(biāo)簽)
:last (索引為最后一個(gè)的本標(biāo)簽)
:even (索引為偶數(shù),從零開始)
:odd (索引為奇數(shù))
:lt(n) (索引小于n)
:gt(n) (索引da于n)
4 屬性選擇器
寫法：其它選擇器[屬性名='屬性值']
注意手冊(cè)里面的attr的寫法
5表單選擇器
:input
:text
:checked (選擇框被選中的元素)
:selected (下拉表選中的元素)
三 屬性操作
屬性
attr(name) 獲取屬性名為name屬性值
attr(name,value) 設(shè)置一個(gè)屬性名為name，屬性值為value的屬性
attr(properties) 設(shè)置多個(gè)屬性
removeAttr(name) 刪除屬性名為
name的屬性
CSS類
addClass(class屬性值)
一般開發(fā)的時(shí)候CSS樣式都是由別人寫好的，我們只需要調(diào)用此方法即可，完成添加新的樣式
removeClass(class屬性值)
移除指定class值的樣式
toggleClass(class屬性值)
切換指定的樣式(一次是帶有class屬性值的樣式，一次是沒有的樣式)
html/text/val
html() 獲取html里面的內(nèi)容，它包含html標(biāo)簽
html(val) 設(shè)置一個(gè)內(nèi)容
text() 獲取文本值，不包含html標(biāo)簽
text(val) 設(shè)置文本的值
val() 獲取標(biāo)簽中value屬性的值
val(val) 給標(biāo)簽中value屬性設(shè)置值
四 CSS操作
css(name) 獲取指定名稱為name的樣式
css(name,value ) 設(shè)置屬性名為name的value值樣式
css(properties) 設(shè)置多個(gè)CSS樣式
五 文檔處理
內(nèi)部插入
append() A.append(B):將B插入到A的內(nèi)部的末尾處 (進(jìn)行的是剪切操作)
appendTo() A.appendTo(B):將A插入到B的內(nèi)部的末尾處 (進(jìn)行的是剪切操作)
prepend() A.prepend(B):將B插入到A的內(nèi)部的開頭處 (進(jìn)行的是剪切操作)
prependTo() A.prependTo(B):將A插入到B的內(nèi)部的開頭 (進(jìn)行的是剪切操作)
外部插入
after() A.after(B):將B插入到A的外部的后面 (進(jìn)行的是剪切操作)
before() A.before(B):將B插入到A的外部的前面 (進(jìn)行的是剪切操作)
insertBefore() A.insertBefore(B) 將A添加到B的前面(外面)
insertAfter() A.insertAfter(B) 將A加入B的后面(外部)
復(fù)制
clone() /clone(true)
如果里面有參數(shù)true，那么表示復(fù)制過去的內(nèi)容也與原內(nèi)容具有相同的事件(請(qǐng)參考相關(guān)代碼)
刪除
empty() 刪除所有的子節(jié)點(diǎn)，不包括自己
Remove() 刪除所有子節(jié)點(diǎn)，包括自己，同時(shí)刪除事件
detach() 刪除所有子節(jié)點(diǎn)，包括自己，將事件保留
替換
$(A).replaceWith($(B)) 用對(duì)象$(B)的替換掉$(A)
$(A).replaceAll($(B)) 用$(A)替換掉$(B)
六 效果和事件
效果
顯示：show()
隱藏：hide()
淡入：fadeIn()
淡出：fadeOut()
滑入：slideDown()
滑出：slideUp()
以上函數(shù)都可以有參數(shù)：
可以是英文字母 : slow /normal / fast
可以是毫秒值： 例如: $(A).show(3000)
事件
我們?cè)陂_發(fā)中使用JQ事件與JS大致相同，只需要將事件前面的on去掉即可
頁面加載
** 問題引入：**
<script type="text/javascript">
document.getElementById("panel").onclick = function() {
alert("元素已經(jīng)加載完畢 !");
}
/* 執(zhí)行錯(cuò)誤，為什么？
因?yàn)閐om還未加載完畢。*/
</script>
解決辦法：
方式一：將整個(gè)JS代碼放到Body后面
方式二：將真?zhèn)€JS代碼放到頁面加載函數(shù)里面)
事件綁定
綁定方式：
$("#img").bind('click',function(){});
事件移除
解綁方式：
$('#btn').unbind("click");
事件合成
$(".head").hover(function() {
$(this).next().show();
}, function() {
$(this).next().hide();
})
努力到無能為力,拼搏到感動(dòng)自己!
