jQuery中的常用內容總結(一)

funnyZpC發表於2017-09-21
原文網址 : http://www.cnblogs.com/funnyzpc/p/7455909.html
jQuery

jQuery中的常用內容總結(一)

 

前言

　　不好意思(✿◠‿◠)，由於回家看病以及處理一些其它事情耽擱了，不然這篇部落格本該上上週或者上週寫的；同時閒談幾句：在這裡建議各位開發的童鞋，如果有疾病儘快治療，不要拖，大病的話甚是~，身體是本錢，如果人的身體健康是一的話，若沒有前面的一，後面再多的零也是徒然，同時，建議在開發的時候保持一個好的心態，積極面對需求和技術難點，不要像我一樣在難的地方朝一個地方死鑽、而且經常性考慮需求之外的需求，這樣都是不太好，儘量以"需求"的心態去"開發"，而不是以"開發"的心態做"需求",這點要理清~(◕ܫ◕)~

NOW，回到正題==》

內容提要

 

  • 選擇器(本節)
  • 選擇器的擴充套件方法(本節)
  • 節點的CSS操作及節點其他操作(本節)
  • Ajax同步與非同步(第二節)
  • 事件(第二節)
  • 彈窗(第三節)
  • 引數序列化(第四節)
  • 遍歷(第四節)
  • 其他(第四節)

選擇器大致分四類:

　　>>CLASS(類)選擇器　　形如:$(".[dom中定義的class的值]");

　　>>ID選擇器　　　　　　形如:$("#[dom中定義的ID的值]");

　　>>標籤名選擇器　　　　形如:$("[標籤名稱]");

　　>>複合選擇器　　　　　形如:$(".[dom中定義的class的值] [標籤名稱]");或 $("#[dom中定義的ID的值] [標籤名稱]");

這四類選擇器定義的都是以美元符號$開始後跟著左右括號，括號中的值視不同的選擇器而不同,這裡不多綴訴，直接上程式碼吧:

 1 <body>
 2 <div id="bodys">
 3         <h3>h3</h3>
 4         <p class="1">第一個P</p>
 5         <p class="2">第二個P</p>
 6         <p class="2">第三個P</p>
 7         <p id="4">第四個P</p>
 8         <p id="4">第五個P</p>
 9     <hr>
10     <input type="button" onclick="classSelect()" value="類選擇">
11     <input type="button" onclick="idSelect()" value="ID選擇">
12     <input type="button" onclick="labelSelect()" value="標籤選擇">
13     <input type="button" onclick="complexSelect()" value="複合選擇">
14     <script type="text/javascript">
15     function classSelect(){
16         alert($(".1"));
17     }
18     function idSelect(){
19         alert($("#4"));
20     }
21     function labelSelect(){
22         alert($("h3"));
23     }
24     function complexSelect(){
25         alert($("#bodys p:eq(4)"));
26     }
27 </script>
28 </div>
29 </body>

這裡不管是類、ID、標籤還是符合選擇器，結果都是一個List型別(根據瀏覽器大致的展現方式):

 

準確的說這是一個符合型別,一般其他教程裡面都是叫jQuery物件型別，在這裡也順遂大意叫"jQuery型別"吧，現在來看看這個jQuery物件到底是什麼東東：

嗯~，這裡總結下，jQuery物件一般包含:

　　　　List:存放dom內容，context:選擇範圍(相當於作用域)

　　　　length:當前選擇器選擇的數量(也就是List物件的大小)

　　　　prevObject:上一個選擇物件(如果沒有則都是document)

　　　　selector:選擇的方式(就是選擇器括號裡面的內容)

 且注意！如果是ID選擇器，則jQuery物件中沒有prevObject這個引數，因為ID本身就是唯一的，例如上面的程式碼，如果在html中定義了兩個ID，jQuery選擇器永遠只會選擇第一個匹配的，如果你只需要在class選擇器結果中只取第五個，一般來說有兩種寫法

　　　　A>使用":eq(第幾個-1)",例如:$("#bodys p:eq(4)");

　　　　B>使用巢狀的寫法,例如:$($("#bodys p")[4]);

已經學會使用選擇器了，現在我講解下jQuery選擇器的常用的方法和屬性:

　　next():下一個節點 　　　　　　　　　　　　　　  樣例：$('.2').next();

　　prev():上一個節點　　　　　　　　　　　　　　   樣例：$('.2').prev();

　　parent():父節點　　　　　　　　　　　　　　　　樣例：$('.2').parent();

　　parents("div"):標籤為div的父節點    　　　　　　　樣例：$('.2').parents('div');

　　childen():子節點　　　　　　　　　　　　　　　   樣例：$('.2').childen();

　　find(".2"):搜尋當前節點下節點class值為2的節點　　樣例：$('.2').find('.2');

　　:first:選擇第一個節點　　　　　　　　　　　　　   樣例：$('.2:first');

　　:last:選擇最後一個節點　　　　　　　　　　　　　樣例：$('.2:last');

　　:eq(0):選擇第一個節點　　　　　　　　　　　　　 樣例：$('.2:eq(0)');

　　:selected:下拉框被選中的項(也是節點)　　　　　　 樣例：$('input[name=cc]:selected');

　　:checked:單選或多選被選中的　　　　　　　　　　樣例：$('input[name=cc]:checked');

　　[name=value]:選擇節點的name屬性為value的節點  樣例：$(input[name=99]');

注意，以上所選擇的節點即為一個jQuery物件，但是最終操作的還是節點(DOM),一下給一個樣例：

　　

　　以上我使用的是chorme的console來直接取的，從指令碼返回的結果並不能直接說明已經選擇到需要選擇的那個，這個需要個簡單的方法(稍後會講)來說明結果的正確性：使用text();方法(取節點內的內容);

OK,節點選擇的內容大致說完了，下面說說節點操作和節點CSS操作==>

實際開發中對節點的常用操作有哪些呢，這裡我理一理:節點的顯示和隱藏、取值、設定或修改引數、刪除、設定或修改節點的CSS、選中的(單選、多選)、選取的(下拉)、提交...

　　hide():節點的顯示(等同於CSS中的display:none;)

　　show():節點的隱藏(等同於CSS中的display:block;)

　　attr("key","value"):給節點設定一個屬性和屬性值(也是修改)

　　removeAttr("key"):刪除節點的一個屬性

　　remove():刪除節點

　　append();新增節點(新增)

　　html():新增節點(覆蓋新增)

　　=====表單類====

　　value():取當前節點的值

　　value("value"):給當前節點設定值

　　submit():提交當前表單(只用於表單，將於第四節講)

　　serialize():序列化表單(URL中鍵值對的形式,常用語get請求，將於第四節講)

　　serializeArray:序列化表單(將表單序列化為一個陣列,常用於post提交,將於第四節講)

　　====CSS操作===

　　css("key","value"):給節點設定一個css樣式

　　removeClass();刪除一個樣式物件

　　addClass():新增一個樣式物件(樣式名稱可能需要在css檔案或者頁面中先定義出來)

好了，現在做一個實際應用展示:

節點刪除=>

給節點(表單節點)設定一個值:

給節點新增一個樣式=>

 

 新增一個樣式物件=>

 

 

 

 

　　

 

相關文章