一、選擇網頁元素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下的所有元素。獲取指...