Jquery基本教程(背還是要背的)
阿新 • • 發佈：2018-10-16
clas 等於 基本選擇器 sun 簡介 cte document user last
Jquery入門學習
一.簡介
1.Jquery是基於JavaScript的一種框架,兼容主流瀏覽器,提供了dom,animate(JQ+CSS),ajav;
2.Jquery2.0後版本不支持IE6/7/8瀏覽器
特點
--- write less, do more二.引入對象獲取
1.引入
<script src="jquery-1.11.0" type=""text/javascript>
</script>2. 對象獲取
//獲取文本框內容 <input type="text" name="username" id="username" value="java" /> //獲取文本框對象 var ot = $("#username"); 或者 var ot = JQuery("#usernmme");
3. Jquery對象操作
- 獲取Jquery對象的兩種方式:
- JQuery("選擇器");
- $("選擇器");
- 當然是各種各樣的選擇器啊
- 演示:獲取對象中的value屬性值
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JQuery測試啊</title> </head> <body> <input type="text" id="username" value="觥籌啊觥籌" class="usr"> </body> </html> <script src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> var ol = $("#username"); console.log(ol.val()); //觥籌啊觥籌 var ol1 = document.getElementById("username"); console.log(ol1.value); //觥籌啊觥籌 </script>
三.JQuery對象和Dom對象的關系
1. Dom對象封裝在Jquery對象中,他們可以相互轉換,但是無法直接使用Jqyery對象調用dom的方法
2. 轉換語法
- Dom->JQ:<font color="red">$(dom對象)</font>
- JQ->DOM:<font color="red">JQ[0] 或 JQ.get()</font> 觥籌啊觥籌Jquery_ol index.html:18 觥籌啊觥籌Dom_ol1 ol.get(0).value "觥籌啊觥籌" ol1.value "觥籌啊觥籌"
3. 基本語法
- 頁面加載函數
- 最後執行,最根本的: window.onload=function(){};
- 在其他非加載完畢代碼執行後執行,最先執行: $(document).ready();
- 回調當前函數對象,所有執行順序僅比window.onload高一點: $(document).ready(fnuction(){});
```java
## 四.Jquery選擇器 **用來獲取元素對象的** ### 1. 基本選擇器 |名稱|說明|語法| |:-----------|:-----------|:-----------| |id選擇器|根據id來選擇元素|$("#config") |元素選擇器|根據標簽來選擇元素|$("div") |類選擇器|更具類名來獲取元素|$(".username")備註:
### 2. 層級選擇器 |名稱|說明|語法| |:-----------|:-----------|:-----------| |後代選擇器|A B ,表示獲取A元素內部的所有B元素|$("#ul li")| |父子選擇器|A>B ,獲取A元素內部子級標簽中所有的B元素,**不包括孫子**|$("#ul > li")| |下級選擇器|A+B ,獲取和A元素平級的下一個B元素|$("#ul+li")| |下下級選擇器|A~B ,獲取和A元素平級的下面**所有**B元素|$("#ul~li")|備註:### 3. 基本過濾器 |名稱|說明|語法| |:-----------|:-----------|:-----------| |:first|獲得當前元素中的**第一個**元素| $("#spnMove:animated")| |:last|獲得當前元素中的**最後**一個元素| $("#spnMove:animated")| |:even|獲得當前元素中索引號為**偶數**的元素,索引從0開始| |:odd|獲得當前元素中索引號為**奇數**的元素,索引從0開始| |:eq(inedx)|獲取**指定**索引的元素,索引從0開始| |:gt(index)|獲取**大於**給定索引的元素,索引從0開始| |:lt(index)|獲取**小於**給定索引的元素,索引從0開始| |:header|獲取標題類型的元素| |:animated|獲取正在執行的d動畫效果元素|備註:### 4. 屬性選擇器(不需要**":"**) |名稱|說明|語法| |:-----------|:-----------|:-----------| |[屬性名]|獲得有該屬性名的元素|$("#abs[type]"),獲得由type屬性的元素| |[屬性名=值]|獲得屬性名等於值的元素| |[屬性名!=值]|獲取屬性名不等於值的元素| |[屬性名^=值]|獲取屬性名以值開頭的元素| |[屬性名$=值]|獲取屬性名以值結尾的元素| |[屬性名*=值]|獲取屬性名含有值的元素| |[以上選擇器][xx][xx]|復合屬性選擇器,多個屬性同時過濾返回滿足所有的結果|備註:
### 5. 表單對象選擇器 |名稱|說明|語法| |:-----------|:-----------|:-----------| |:enable|匹配所有元素| |:disable|匹配所有不可用元素| |:checked|選取匹配所有被選中的元素(單選框,多選框等)|$('input[type=checkbox]:checked') |:selected|選取所有被選中項元素(下拉框)|備註:## 五. Jquery對象的屬性和方法 ### 1. attr和prop,設置對象屬性 |名稱|說明|語法| |:-----------|:-----------|:-----------| |attr(屬性名)|用來獲取一個屬性的值| |attr(屬性名,屬性值)|用來設置一個屬性對應的值| |attr({屬性名1:屬性值1,xx})|設置多個屬性,json格式| |removeAttr(屬性名)|刪除某個格式| |prop格式同上!| - 一個標簽中的checked屬性有返回值並且返回boolean類型 - 只要checked裏面有值,那麽它就返回為true - prop可以設置屬性的返回值(只要checked屬性純在,就返回true,設置成false就相當強刪除該元素),也可以設置屬性的value值;備註:**prop用來操作dom對象所包含的屬性**, **attr用來操作自定義的屬性**### 2.常用的方法 |名稱|說明|語法| |:---|:---|:---| |val()|通常用來操作標準的表單對象|用來獲取value和設置value的值|$('#xxx').val('[xxx]'); |val|打印一個構造,沒有意義|沒意義哦| |text()|獲取或改變指定元素的文本|$("xx").text()| |html()|獲取或改變指定元素的html元素|$("xx").html| ### 3.Jquery的綁定事件和解綁時間 #### 3.1.1 one 綁定一次 **`語法格式:one(eventTypes,[data],fn)`**String,Object,Function
enecTypes:事件類型,可一可多;
data:要傳遞的數據,可省略;
fn:事件觸發時執行的參數;#### 3.1.2 delegate 方式(個孩子綁定) **`語法格式:delegate( selector, eventTypes, fn )`**selector:子選擇器
evenTypes:事件類型,可一可多;
fn:事件觸發時執行的參數;#### 3.1.3 on 方式(1.7後,就只有這種方式了) **`語法格式:on(eventTypes,[selector],[data],fn)`**evenTypes:事件類型,可一可多;
selecotr:子選擇器,可以省略;
data:要傳遞的數據,可以省略;
fn:時間觸發時要執行的函數;#### 3.1.4 bind方式 **`bind(evenTypes,[data],fn);`**evenType:事件類型,可一可多
data:要傳遞的數據參數,可省略
fn:觸發事件時要執行的參數Jq對象.bind(事件名,回調函數)
jq對象.bind({事件名:回調函數,事件名:回調函數});#### 3.2.1 unbind 解綁 bind事件 **`unbind(); -- 解除綁定所有事件`** **`ubbind(eventType) -- 解除綁定所有事件`**Jq對象.unbind("" "" ""); 中間以空格隔開
#### 3.2.2 undelegate 解綁 delegate事件 **`undelegate(); -- 解綁所有的delegate事件`** **`undelegate(evenType); -- 解綁指定的事件`** #### 3.2.3 off 解綁 on 事件,1.7之後就只有這個了 **`off(); -- 解綁所有事件`** **`off(evenTypes,count); -- 解綁所有指定事件,count代表數量,但是不是Number類型的參數,"**"代表全部`** ### 六.Jqyery動畫 太多,未完待續吧.... ### 七.遍歷 #### 1. JQuery.each(data,fn)//遍歷函數
//index表示索引名,element表示元素名
$("ul li").each(function(index,element){
//this表示當前的
// console.log($(this).html())
});
```2. 鏈式方法
函數 描述 .add() 將元素添加到匹配元素的集合中。 .andSelf() 把堆棧中之前的元素集添加到當前集合中。 .children() 獲得匹配元素集合中每個元素的所有子元素。 .closest() 從元素本身開始，逐級向上級元素匹配，並返回最先匹配的祖先元素。 .contents() 獲得匹配元素集合中每個元素的子元素，包括文本和註釋節點。 .each() 對 jQuery 對象進行叠代，為每個匹配元素執行函數。 .end() 結束當前鏈中最近的一次篩選操作，並將匹配元素集合返回到前一次的狀態。 .eq() 將匹配元素集合縮減為位於指定索引的新元素。 .filter() 將匹配元素集合縮減為匹配選擇器或匹配函數返回值的新元素。 .find() 獲得當前匹配元素集合中每個元素的後代，由選擇器進行篩選。 .first() 將匹配元素集合縮減為集合中的第一個元素。 .has() 將匹配元素集合縮減為包含特定元素的後代的集合。 .is() 根據選擇器檢查當前匹配元素集合，如果存在至少一個匹配元素，則返回 true。 .last() 將匹配元素集合縮減為集合中的最後一個元素。 .map() 把當前匹配集合中的每個元素傳遞給函數，產生包含返回值的新 jQuery 對象。 .next() 獲得匹配元素集合中每個元素緊鄰的同輩元素。 .nextAll() 獲得匹配元素集合中每個元素之後的所有同輩元素，由選擇器進行篩選（可選）。 .nextUntil() 獲得每個元素之後所有的同輩元素，直到遇到匹配選擇器的元素為止。 .not() 從匹配元素集合中刪除元素。 .offsetParent() 獲得用於定位的第一個父元素。 .parent() 獲得當前匹配元素集合中每個元素的父元素，由選擇器篩選（可選）。 .parents() 獲得當前匹配元素集合中每個元素的祖先元素，由選擇器篩選（可選）。 .parentsUntil() 獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素為止。 .prev() 獲得匹配元素集合中每個元素緊鄰的前一個同輩元素，由選擇器篩選（可選）。 .prevAll() 獲得匹配元素集合中每個元素之前的所有同輩元素，由選擇器進行篩選（可選）。 .prevUntil() 獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止。 .siblings() 獲得匹配元素集合中所有元素的同輩元素，由選擇器篩選（可選）。 .slice() 將匹配元素集合縮減為指定範圍的子集。 八.表單校驗
1. 格式
$("#form1").validate({ rules:{ }, messages:{ } });菜鳥詳細教程
2. 自定義校驗
$.validator.addMethod("自定義校驗規則名字",function(value,element,params){ value 校驗輸入框的值 element 校驗框 params 表示校驗規則時傳遞的實際值 },錯誤信息); /* 自定義校驗規則，用來驗證密碼。長度6-12字符或數字,不能包含中文字符 addMethod()方法具有三個參數： name:表示校驗規則的名字，例如這裏是 pwdFormat method:表示處理自定義校驗規則代碼，這裏需要給回調函數 function(value,element,params){ 回調函數三個參數： value:輸入框輸入的值，即要驗證的值 element:表示要驗證的輸入框標簽對象 params:使用校驗規則時傳遞的實際參數 。 [6,12] 如果使用時傳遞的是多個值， 那麽params就是數組，如果是單個值params就是變量 } 關於回調函數補充：如果滿足校驗規則，返回true，可以提交表單。不滿足返回false，不可以提交表單 message:提示的錯誤信息，可以不書寫，如果書寫，那麽在使用錯誤信息的時候就可以不書寫了 */ $.validator.addMethod("pwdFormat",function (value,element,params) { //定義正則 // var reg=/^[0-9a-zA-Z]{6,12}$/; var reg=new RegExp("^[0-9a-zA-Z]{"+params[0]+","+params[1]+"}$"); //判斷 if(reg.test(value)) { //說明合法 return true;//可以提交表單 }else { //說明不合法 return false;//不能提交表單 } },"長度{0}-{1}字符或數字,不能包含中文字符");九.元素操作
1. 元素追加
1.1 append()
追加到元素內部的最後面位置
1.2 prepend()
追加到元素內部最前面位置
1.3 appenTo() , prependTo()
-和上面兩種相反
// 需求：創建一個li標簽並且使用append追加到ul的最後面 /* 在jq中創建標簽：$("創建的標簽"); $("<li>222</li>") 創建li標簽 */ $("ul").append($("<li>222</li>")); // 需求：創建一個li標簽並且使用prepend添加到ul的最前面 $("ul").prepend($("<li>000</li>")); // 需求： 創建一個li 並且使用appendTo添加到ul的最後面 $("<li>333</li>").appendTo($("ul")); // 需求： 創建一個li 並且使用prependTo添加到ul的最前面 $("<li>-1-1-1</li>").prependTo($("ul")); // 需求一：創建一個li使用after插入到bbb的後面 <li>bbb</li> // $("#bbb").after($("<li>ccc</li>")); // // 需求二：創建一個li使用before插入到bbb的前面 // $("#bbb").before($("<li>aaa</li>")); // 需求三：創建一個li使用insertAfter插入到bbb的後面 $("<li>ccc</li>").insertAfter($("#bbb")); // 需求四：創建一個li使用insertBefore插入到bbb的前面 $("<li>aaa</li>").insertBefore($("#bbb"));2. 元素清空和刪除案例
2.1 remove()
刪除該元素
2.2 empty()
- 清空元素內部
//需求1：刪除div $("div").remove(); //需求2：清空ul $("ul").empty();Jquery基本教程(背還是要背的)