jquery 使用方法總結

2021-10-07 01:33:28 字數 2809 閱讀 8214

一、選擇網頁元素jquery的基本設計和主要用法,就是"選擇某個網頁元素,然後對其進行某種操作"。這是它區別於其他函式庫的根本特點。

使用jquery的第一步,往往就是將乙個選擇表示式,放進建構函式jquery()(簡寫為$),然後得到被選中的元素。

選擇表示式可以是css選擇器:

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

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

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

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

也可以是jquery特有的表示式:

1 $(『a:first』)//選擇網頁中第乙個a元素

2 $(『tr:odd』)//選擇**的奇數行

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

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

5 $(『div:gt(2)』)//選擇所有的div元素,除了前三個

6 $(『div:animated』)//選擇當前處於動畫狀態的div元素

二、改變結果集

如果選中多個元素,jquery提供過濾器,可以縮小結果集:

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

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

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

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

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

有一些時候,我們需要從結果集出發,移動到附近的相關元素,jquery也提供了在dom樹上的移動方法:

1 $(『div』).next(『p』); //選擇div元素後面的第乙個p元素

2 $(『div』).parent(); //選擇div元素的父元素

3 $(『div』).closest(『form』); //選擇離div最近的那個form父元素

4 $(『div』).children(); //選擇div的所有子元素

5 $(『div』).siblings(); //選擇div的同級元素

三、鏈式操作

選中網頁元素以後,就可以對它進行某種操作。

jquery允許將所有操作連線在一起,以鏈條的形式寫出來,比如:

1 $(『div』).find(『h3』).eq(2).html(『hello』);

我們可以這樣拆封開來,就是下面這樣:

1 $(『div』)//找到div元素

2 .find(『h3』)//選擇其中的h3元素

3 .eq(2)//選擇第3個h3元素

4 .html(『hello』); //將它的內容改為hello

這是jquery最令人稱道、最方便的特點。它的原理在於每一步的jquery操作,返回的都是乙個jquery物件,所以不同操作可以連在一起。

jquery還提供了.end()方法,使得結果集可以後退一步:

1 $(『div』)

2 .find(『h3』)

3 .eq(2)

4 .html(『hello』)

5 .end()//退回到選中所有的h3元素的那一步

6 .eq(0)//選中第乙個h3元素

7 .html(『world』); //將它的內容改為world

四、元素的操作:取值和賦值

操作網頁元素,最常見的需求是取得它們的值,或者對它們進行賦值。

jquery使用同乙個函式,來完成取值(getter)和賦值(setter)。到底是取值還是賦值,由函式的引數決定。

$(『h1』).html(); //html()沒有引數,表示取出h1的值 $(『h1』).html(『hello』); //html()有引數hello,表示對h1進行賦值

常見的取值和賦值函式如下:

.html()

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

.attr() 取出或設定某個屬性的值

.width() 取出或設定某個元素的寬度

.height() 取出或設定某個元素的高度

.val()

取出或設定html內容 取出某個表單元素的值

取出或設定html內容 取出某個表單元素的值

需要注意的是,如果結果集包含多個元素,那麼賦值的時候,將對其中所有的元素賦值;取值的時候,則是只取出第乙個元素的值(.text()例外,它取出所有元素的text內容)。

五、元素的操作:移動

如果要移動選中的元素,有兩種方法:一種是直接移動該元素,另一種是移動其他元素,使得目標元素達到我們想要的位置。

假定我們選中了乙個div元素,需要把它移動到p元素後面。

第一種方法是使用.insertafter(),把div元素移動p元素後面:

$(『div』).insertafter(『p』);

第二種方法是使用.after(),把p元素加到div元素前面:

$(『p』).after(『div』);

六、元素的操作:複製、刪除和建立

複製元素使用.clone()。

刪除元素使用.remove()和.detach()。兩者的區別在於,前者不保留被刪除元素的事件,後者保留,有利於重新插入文件時使用。

清空元素內容(但是不刪除該元素)使用.empty()。

建立新元素的方法非常簡單,只要把新元素直接傳入jquery的建構函式就行了:

1 $(『

hello

』);2 $(『

初學jQuery使用方法

先引用jquery源包 even奇數 gt 大於 lt 小於 jquery完整使用方法參考手冊 tag p i eq 0 html good 選擇對應的索引值去修改1 tag p i eq 1 html good 選擇對應的索引值去修改2var tp document.getelementbyid ...

使用方法總結

變數賦值 name xiaoming 程式互動 name input 請輸入你的名字 sum int input 請輸入你的名字 變成數字型,和數字比較 type 查詢資料型別的方法 a 2 print a,type a 結果 123 格式化輸出 msg 是佔位符 s 數字型 bit length ...

Jquery使用方法的一些總結

1.判斷id在網頁中是否存在 比如id user id var id index user id 0 如果該id不存在,則返回 1,否則返回乙個具體數值。從而我們可以根據結果來判斷是否存在user id。2.獲取指定範圍內的所有元素 get 比如 div get 是獲取當前div下的所有元素。獲取指...