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</
這裏不管是類、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文件或者頁面中先定義出來)
好了，現在做一個實際應用展示:
節點刪除=>
給節點(表單節點)設置一個值:
給節點添加一個樣式=>
添加一個樣式對象=>
jQuery中的常用內容總結(一)