1.2入口函數詳細介紹
第一種:$("document").ready(function () { } ); 第二種:$(function
() { } );
和js的入口函數window.onload的區別:
jQuery--文檔樹加載完成的時候執行,不會等待突破資源的加載完成
js--文檔樹加載完成後,必須等待圖片等的資源加載完成纔會執行
1.3 jQuery中的$符號
本質就是一個函數,且$ === jQuery,可分爲3種功能:
1,$(function () { } ); 參數是function,功能是入口函數
2,$("#id"); $(".wrap");等 參數是字符串,一般都是選擇器,功能是查找頁面的元素
3,$(domObj); 將dom對象轉化成jQuery對象
1.4
jQuery對象:用jQuery方法獲取到的元素返回的對象
DOM對象:使用JavaScript中的方法獲取頁面中的元素返回的對象
兩者的區別:jQuery對象就是DOM對象的包裝集(僞數組)
兩者之間的轉換:
jQuery對象轉DOM對象:通過索引-- jQueryObj[index]
或 jQueryObj.get(index)
DOM對象轉jQuery對象:$(domObj)
1.5jQuery和javascript
js是一種腳本語言,jQuery是靠js寫成的,jQuery就是一個js庫
jQuery 元素選擇器和屬性選擇器:它們允許您通過標籤名、屬性名或內容對 HTML 元素進行選擇。對應$(selector).action()的前半部分。
jQuery 元素選擇器:
$("p") 選取 <p> 元素。
$("p.intro") 選取所有 class="intro" 的 <p> 元素。
$("p#demo") 選取所有 id="demo" 的 <p> 元素。
jQuery 屬性選擇器:
$("[href]") 選取所有帶有 href 屬性的元素。
$("[href='#']") 選取所有帶有 href 值等於 "#" 的元素。
$("[href!='#']") 選取所有帶有 href 值不等於 "#" 的元素。
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素。
2.1 基本選擇器
$(".className") 類選擇器
$("#id") id選擇器
$("tagName") 標籤選擇器
$("selector1,selector2") 並集選擇器
$("selector1selector2") 交集選擇器
2.2 層級選擇器
後代 選擇器 $("selector1 selector2")
子代 選擇器 $("selector1>selector2")
2.3 過濾選擇器
格式:$("selector:filter")
odd $("selector:odd") 奇數過濾選擇器
even $("selector:even") 偶數過濾選擇器
eq(index) $("selector:eq(index)") 序號過濾選擇器
2.4 篩選選擇器
篩選選擇器全都是方法
children(selector)
find(selector)
next()
siblings(selector)
parent()
eq(index)
3.1 css操作
設置單個樣式 css(name, value)
設置多個樣式 css(obj) {name:value,name:value....,name:value}
獲取樣式 css(name)
3.2 class操作
添加class addClass(className) 追加
移除class removeClass(className) 如果不傳參數 移除所有的樣式
判斷class樣式 hasClass(className)
切換class樣式 toggleClass(className) 若有則移除,若無則添加