jquery知識總結（1）

一、jquery 的介紹

將獲取元素的語句寫到頁面頭部，會因為元素還沒有載入而出錯， jquery 提供了 ready 方法解決這個問題，它的速度比原生的window.onload 更快。

可以簡寫為：

三、jquery 選擇器jquery的選擇器有很多很多種比如 id選擇器 class選擇器標籤選擇器屬性選擇器層級選擇器子代選擇器後代選擇器篩選選擇器表單選擇器常用的有以下幾種

$(document) //選擇整個文件物件

$(『li』) //選擇所有的 li 元素

$(』#myid』) //選擇 id 為 myid 的網頁元素

$(』.myclass』) // 選擇 class 為 myclass 的元素

$(『input[name=first]』) // 選擇 name 屬性等於 first 的 input 元素

$(』#ul1 li span』) //選擇 id 為為 ul1 元素下的所有 li 下的 span 元素

對選擇集進行修飾過濾(類似 css 偽類)

$(』#ul1 li:first』) //選擇 id 為 ul1 元素下的第乙個 li

$(』#ul1 li:odd』) //選擇 id 為 ul1 元素下的 li 的奇數行

$(』#ul1 li:eq(2)』) //選擇 id 為 ul1 元素下的第 3 個 li

$(』#ul1 li:gt(2)』) // 選擇 id 為 ul1 元素下的前三個之後的 li

$(』#myform :input』) // 選擇表單中的 input 元素

$(『div:visible』) //選擇可見的 div 元素

對選擇集進行函式過濾

$(『div』).has(『p』); // 選擇包含 p 元素的 div 元素

$(『div』).not(』.myclass』); //選擇 class 不等於 myclass 的 div 元素 $(『div』).filter(』.myclass』); //選擇 class 等於 myclass 的 div 元素

$(『div』).first(); //選擇第 1 個 div 元素

$(『div』).eq(5); //選擇第 6 個 div 元素

jquery 用法思想一選擇某個網頁元素，然後對它進行某種操作 jquery 選擇器 jquery 選擇器可以快速地選擇元素，選擇規則和 css 樣式相同，

使用 length 屬性判斷是否選擇成功。

四、jquery 樣式操作

jquery 用法思想二同乙個函式完成取值和賦值

操作行間樣式

// 獲取 div 的樣式

$(「div」).css(「width」);

$(「div」).css(「color」);

//設定 div 的樣式

$(「div」).css(「width」,「30px」);

$(「div」).css(「height」,「30px」);

$(「div」).css();

特別注意

選擇器獲取的多個元素，獲取資訊獲取的是第乙個，比如：

$(「div」).css(「width」)，獲取的是第乙個 div 的 width。

操作樣式類名

$("#div1").addclass(「divclass2」) //為 id 為 div1 的物件追加樣式 divclass2 $("#div1").removeclass(「divclass」) //移除 id 為 div1 的物件的 class 名為 divclass 的樣式 $("#div1").removeclass(「divclass divclass2」) //移除多個樣式 $("#div1").toggleclass(「anotherclass」) //重複切換 anotherclass 樣式

五、jquery 屬性操作

1. html() 取出或設定 html 內容

2. text() 取出或設定 text 內容、

// 取出文字內容

var $htm = $(』#div1』).text();

// 設定文字內容

$(』#div1』).text('新增文字');

// 取出的位址

var $src = $(』#img1』).attr(『src』);

// 設定的位址和 alt 屬性

$(』#img1』).attr();

六、繫結 click 事件

$(』#btn1』).click(function())

七、jquery 的特效效果及鏈式呼叫

//fadein() 淡入

$btn.click(function());

});fadeout() 淡出

fadetoggle() 切換淡入淡出

hide() 隱藏元素

show() 顯示元素

toggle() 依次展示或隱藏某個元素

slidedown() 向下展開

slideup() 向上捲起

slidetoggle() 依次展開或捲起某個元素

jquery 物件的方法會在執行完後返回這個 jquery 物件，所有 jquery 物件的方法可以連起來寫：

$(』#div1』) // id 為 div1 的元素

.children(『ul』) //該元素下面的 ul 子元素

.slidedown(『fast』) //高度從零變到實際高度來顯示 ul 元素

.parent() //跳到 ul 的父元素，也就是 id 為 div1 的元素

.siblings() //跳到 div1 元素平級的所有兄弟元素

.children(『ul』) //這些兄弟元素中的 ul 子元素

.slideup(『fast』); //高度實際高度變換到零來隱藏 ul 元素

八、jquery 動畫

通過 animate 方法可以設定元素某屬性值上的動畫，可以設定乙個或多個屬性值，動畫執行完成後會執行乙個函式。

$('#div1').animate(,1000,swing,function());

引數可以寫成數字表示式：

$('#div1').animate(,1000,swing,function());

jquery知識總結（1）

JQuery知識補充1

jquery基礎知識1

jQuery知識點總結

jquery知識總結（1）

JQuery知識補充1

jquery基礎知識1

jQuery知識點總結

相關推薦