jQuery 常用方法

(1)AJAX 請(qǐng)求

$(function() {
    $('#send').click(function() {
        $.ajax({
            type: "GET", //GET或POST,
            async:true, //默認(rèn)設(shè)置為true叮叹，所有請(qǐng)求均為異步請(qǐng)求展蒂。
            url: "http://www.idaima.com/xxxxx.php",
            data: {
                username: $("#username").val(),
                content: $("#content").val()
            },
            dataType: "json", //xml绷旗、html、script撬腾、jsonp、text
            beforeSend:function(){},
            complete:function(){},
            success: function(data) {
                alert(data)
            },
            error:function(){},
        });
    });
});

(2) 如何獲取 checkbox，并判斷是否選中

$("input[type='checkbox']").is(':checked') 
//返回結(jié)果：選中=true顺囊，未選中=false

(3) 獲取 checkbox 選中的值

var chk_value =[]; 
$('input[]:checked').each(function(){ 
    chk_value.push($(this).val()); 
});

(4)checkbox 全選 / 反選 / 選擇奇數(shù)

$("document").ready(function() {
    $("#btn1").click(function() {
        $("[name='checkbox']").attr("checked", 'true'); //全選 
    }) $("#btn2").click(function() {
        $("[name='checkbox']").removeAttr("checked"); //取消全選 
    }) $("#btn3").click(function() {
        $("[name='checkbox']:even").attr("checked", 'true'); //選中所有奇數(shù) 
    }) $("#btn4").click(function() {
        $("[name='checkbox']").each(function() { //反選 
            if ($(this).attr("checked")) {
                $(this).removeAttr("checked");
            } else {
                $(this).attr("checked", 'true');
            }
        })
    })
})

(5) 獲取 select 下拉框的值

其實(shí)下拉框的最簡(jiǎn)單了，直接 val 就行了

$("#select").val()

(6) 獲取選中值蕉拢，三種方法都可以：

$('input:radio:checked').val()特碳；
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

(7) 設(shè)置第一個(gè) Radio 為選中值：

$('input:radio:first').attr('checked', 'checked');

或者

$('input:radio:first').attr('checked', 'true');

(8) 設(shè)置最后一個(gè) Radio 為選中值：

$('input:radio:last').attr('checked', 'checked');

或者

$('input:radio:last').attr('checked', 'true');

(9) 根據(jù)索引值設(shè)置任意一個(gè) radio 為選中值：

$('input:radio').eq(索引值).attr('checked', 'true');//索引值=0,1,2....

或者

$('input:radio').slice(1,2).attr('checked', 'true');

(10) 根據(jù) Value 值設(shè)置 Radio 為選中值

$("input:radio[value='rd2']").attr('checked','true');

或者

$("input[value='rd2']").attr('checked','true');

通過 jquery 的 $() 引用元素包括通過 id、class晕换、元素名以及元素的層級(jí)關(guān)系及 dom 或者 xpath 條件等方法午乓，且返回的對(duì)象為 jquery 對(duì)象（集合對(duì)象），不能直接調(diào)用 dom 定義的方法闸准。http://www.idaima.com/a/1663.html

只有 jquery 對(duì)象才能使用 jquery 定義的方法益愈。注意 dom 對(duì)象和 jquery 對(duì)象是有區(qū)別的，調(diào)用方法時(shí)要注意操作的是 dom 對(duì)象還是 jquery 對(duì)象。

普通的 dom 對(duì)象一般可以通過 $() 轉(zhuǎn)換成 jquery 對(duì)象蒸其。

如：

$(document.getElementById("msg"))

則為 jquery 對(duì)象敏释，可以使用 jquery 的方法。

由于 jquery 對(duì)象本身是一個(gè)集合摸袁。所以如果 jquery 對(duì)象要轉(zhuǎn)換為 dom 對(duì)象則必須取出其中的某一項(xiàng)钥顽，一般可通過索引取出。

如：

$("#msg")[0]靠汁，$("div").eq(1)[0]蜂大，$("div").get()[1]，$("td")[5]

這些都是 dom 對(duì)象蝶怔，可以使用 dom 中的方法奶浦，但不能再使用 Jquery 的方法。

以下幾種寫法都是正確的：

$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

對(duì)于獲取的元素集合添谊，獲取其中的某一項(xiàng)（通過索引指定）可以使用 eq 或 get(n) 方法或者索引號(hào)獲取财喳，要注意，eq 返回的是 jquery 對(duì)象斩狱，而 get(n) 和索引返回的是 dom 元素對(duì)象耳高。對(duì)于 jquery 對(duì)象只能使用 jquery 的方法，而 dom 對(duì)象只能使用 dom 的方法所踊，如要獲取第三個(gè) < div > 元素的內(nèi)容泌枪。有如下兩種方法：

$("div").eq(2).html(); //調(diào)用jquery對(duì)象的方法
$("div").get(2).innerHTML; //調(diào)用dom的方法屬性

Jquery 中的很多方法都是如此，主要包括如下幾個(gè)：http://www.idaima.com/a/1663.html

$("#msg").html(); //返回id為msg的元素節(jié)點(diǎn)的html內(nèi)容秕岛。
$("#msg").html("<b>new content</b>");
//將“<b>new content</b>” 作為html串寫入id為msg的元素節(jié)點(diǎn)內(nèi)容中,頁面顯示粗體的new content
$("#msg").text(); //返回id為msg的元素節(jié)點(diǎn)的文本內(nèi)容碌燕。
$("#msg").text("<b>new content</b>");
//將“<b>new content</b>” 作為普通文本串寫入id為msg的元素節(jié)點(diǎn)內(nèi)容中,頁面顯示<b>new content</b>
$("#msg").height(); //返回id為msg的元素的高度
$("#msg").height("300"); //將id為msg的元素的高度設(shè)為300
$("#msg").width(); //返回id為msg的元素的寬度
$("#msg").width("300"); //將id為msg的元素的寬度設(shè)為300
$("input").val("); //返回表單輸入框的value值
$("input").val("test"); //將表單輸入框的value值設(shè)為test
$("#msg").click(); //觸發(fā)id為msg的元素的單擊事件 
$("#msg").click(fn); //為id為msg的元素單擊事件添加函數(shù)

同樣 blur,focus,select,submit 事件都可以有著兩種調(diào)用方法

對(duì)于 jquery 返回的集合內(nèi)容無需我們自己循環(huán)遍歷并對(duì)每個(gè)對(duì)象分別做處理，jquery 已經(jīng)為我們提供的很方便的方法進(jìn)行集合的處理继薛。

包括兩種形式：

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//為索引分別為0修壕，1，2的p元素分別設(shè)定不同的字體顏色遏考。
$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//實(shí)現(xiàn)表格的隔行換色效果
$("p").click(function(){alert($(this).html())})
//為每個(gè)p元素增加了click事件慈鸠，單擊某個(gè)p元素則彈出其內(nèi)容

$.extend({ 
    min: function(a, b){return a < b?a:b; },
    max: function(a, b){return a > b?a:b; }
}); //為jquery擴(kuò)展了min,max兩個(gè)方法

使用擴(kuò)展的方法（通過 “$. 方法名” 調(diào)用）：

alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

所謂連寫，即可以對(duì)一個(gè) jquery 對(duì)象連續(xù)調(diào)用各種不同的方法灌具。

例如：http://www.idaima.com/a/1663.html

$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});

主要包括以下幾種方式：

$("#msg").css("background"); //返回元素的背景顏色
$("#msg").css("background","#ccc") //設(shè)定元素背景為灰色
$("#msg").height(300); $("#msg").width("200"); //設(shè)定寬高
$("#msg").css({ color: "red", background: "blue" });//以名值對(duì)的形式設(shè)定樣式
$("#msg").addClass("select"); //為元素增加名稱為select的class
$("#msg").removeClass("select"); //刪除元素名稱為select的class
$("#msg").toggleClass("select"); //如果存在（不存在）就刪除（添加）名稱為select的class

Jquery 已經(jīng)為我們提供了各種事件處理方法青团，我們無需在 html 元素上直接寫事件，而可以直接為通過 jquery 獲取的對(duì)象添加事件咖楣。

如：

$("#msg").click(function(){alert("good")}) //為元素添加了單擊事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//為三個(gè)不同的p元素單擊事件分別設(shè)定不同的處理

jQuery 中幾個(gè)自定義的事件：

（1）hover(fn1,fn2)：一個(gè)模仿懸停事件（鼠標(biāo)移動(dòng)到一個(gè)對(duì)象上面及移出這個(gè)對(duì)象）的方法督笆。當(dāng)鼠標(biāo)移動(dòng)到一個(gè)匹配的元素上面時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)诱贿。當(dāng)鼠標(biāo)移出這個(gè)元素時(shí)娃肿，會(huì)觸發(fā)指定的第二個(gè)函數(shù)。

// 當(dāng)鼠標(biāo)放在表格的某行上時(shí)將 class 置為 over，離開時(shí)置為 out料扰。

$("tr").hover(
function(){
     $(this).addClass("over");
}, 
function(){ 
$(this).addClass("out"); 
});

（2）ready(fn): 當(dāng) DOM 載入就緒可以查詢及操縱時(shí)綁定一個(gè)要執(zhí)行的函數(shù)锨阿。

$(document).ready(function(){alert("Load Success")})http://www.idaima.com/a/1663.html

// 頁面加載完畢提示 “Load Success”, 不同于 onload 事件，onload 需要頁面內(nèi)容加載完畢（圖片等）记罚，而 ready 只要頁面 html 代碼下載完畢即觸發(fā)墅诡。與 $(fn) 等價(jià)

（3）toggle(evenFn,oddFn): 每次點(diǎn)擊時(shí)切換要調(diào)用的函數(shù)。如果點(diǎn)擊了一個(gè)匹配的元素桐智，則觸發(fā)指定的第一個(gè)函數(shù)末早，當(dāng)再次點(diǎn)擊同一元素時(shí)，則觸發(fā)指定的第二個(gè)函數(shù)说庭。隨后的每次點(diǎn)擊都重復(fù)對(duì)這兩個(gè)函數(shù)的輪番調(diào)用然磷。

//每次點(diǎn)擊時(shí)輪換添加和刪除名為selected的class。
$("p").toggle(function(){ 
     $(this).addClass("selected"); 
},function(){ 
     $(this).removeClass("selected"); 
});

（4）trigger(eventtype): 在每一個(gè)匹配的元素上觸發(fā)某類事件刊驴。

例如：

$("p").trigger("click"); // 觸發(fā)所有 p 元素的 click 事件

（5）bind(eventtype,fn)姿搜，unbind(eventtype): 事件的綁定與反綁定

.browser. 瀏覽器類型：檢測(cè)瀏覽器類型。有效參數(shù)：safari, opera, msie, mozilla捆憎。如檢測(cè)是否 ie：.browser.isie舅柜，是 ie 瀏覽器則返回 true。

$.each(obj, fn)：通用的迭代函數(shù)躲惰≈路荩可用于近似地迭代對(duì)象和數(shù)組（代替循環(huán)）。

如

$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });

等價(jià)于：

var tempArr=[0,1,2]; 
for(var i=0;i<tempArr.length;i++){ 
    alert("Item #"+i+": "+tempArr[i]); 
}

也可以處理 json 數(shù)據(jù)础拨，如

$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });

結(jié)果為：

Name:name, Value:John

Name:lang, Value:JS

$.extend(target,prop1,propN)：用一個(gè)或多個(gè)其他對(duì)象來擴(kuò)展一個(gè)對(duì)象氮块，返回這個(gè)被擴(kuò)展的對(duì)象。這是 jquery 實(shí)現(xiàn)的繼承方式诡宗。

如：

$.extend(settings, options);

// 合并 settings 和 options滔蝉，并將合并結(jié)果返回 settings 中，相當(dāng)于 options 繼承 setting 并將繼承結(jié)果保存在 setting 中塔沃。

復(fù)制

var settings = $.extend({}, defaults, options);

// 合并 defaults 和 options蝠引，并將合并結(jié)果返回到 setting 中而不覆蓋 default 內(nèi)容。

可以有多個(gè)參數(shù)（合并多項(xiàng)并返回）

$.map(array, fn)：數(shù)組映射芳悲。把一個(gè)數(shù)組中的項(xiàng)目 (處理轉(zhuǎn)換后) 保存到到另一個(gè)新數(shù)組中立肘，并返回生成的新數(shù)組边坤。

如：

var tempArr=$.map( [0,1,2], function(i){ return i + 4; });

tempArr 內(nèi)容為：[4,5,6]

var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });

tempArr 內(nèi)容為：[2,3]

$.merge(arr1,arr2): 合并兩個(gè)數(shù)組并刪除其中重復(fù)的項(xiàng)目名扛。

如：

$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]

$.trim(str)：刪除字符串兩端的空白字符。

如：

$.trim(" hello, how are you? "); //返回"hello,how are you? "

很多時(shí)候我們自己定義了 (id) 方法來獲取一個(gè)元素茧痒，或者[其他](http://www.idaima.com/explore/category-17)的一些 js 類庫如 prototype 也都定義了 方法肮韧，如果同時(shí)把這些內(nèi)容放在一起就會(huì)引起變量方法定義沖突，Jquery 對(duì)此專門提供了方法用于解決此問題。

使用 jquery 中的 jQuery.noConflict(); 方法即可把變量 的控制權(quán)讓渡給第一個(gè)實(shí)現(xiàn)它的那個(gè)庫或之前自定義的 方法弄企。之后應(yīng)用 Jquery 的時(shí)候只要將所有的 換成 jQuery 即可超燃，如原來引用對(duì)象方法("#msg") 改為 jQuery("#msg")。

如：

jQuery.noConflict(); 
// 開始使用jQuery 
jQuery("div p").hide(); 
// 使用其他庫的 $() 
$("content").style.display = 'none';

$(document).keyup(function(event){
  if(event.keyCode ==13){
    $("#submit").trigger("click");
  }
});
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末拘领，一起剝皮案震驚了整個(gè)濱河市意乓，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌约素，老刑警劉巖届良，帶你破解...
    沈念sama閱讀 222,183評(píng)論 6贊 516
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異圣猎，居然都是意外死亡士葫，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評(píng)論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門送悔，熙熙樓的掌柜王于貴愁眉苦臉地迎上來慢显，“玉大人，你說我怎么就攤上這事欠啤〖栽澹” “怎么了？”我有些...
    開封第一講書人閱讀 168,766評(píng)論 0贊 361
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵洁段，是天一觀的道長(zhǎng)鞋喇。 經(jīng)常有香客問我，道長(zhǎng)眉撵，這世上最難降的妖魔是什么侦香？ 我笑而不...
    開封第一講書人閱讀 59,854評(píng)論 1贊 299
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮纽疟，結(jié)果婚禮上罐韩，老公的妹妹穿的比我還像新娘。我一直安慰自己污朽，他們只是感情好散吵，可當(dāng)我...
    茶點(diǎn)故事閱讀 68,871評(píng)論 6贊 398
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蟆肆，像睡著了一般矾睦。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上炎功，一...
    開封第一講書人閱讀 52,457評(píng)論 1贊 311
  • 城市分裂傳說
    那天枚冗，我揣著相機(jī)與錄音，去河邊找鬼蛇损。 笑死赁温，一個(gè)胖子當(dāng)著我的面吹牛坛怪，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播股囊，決...
    沈念sama閱讀 40,999評(píng)論 3贊 422
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼袜匿，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來了稚疹？” 一聲冷哼從身側(cè)響起居灯，我...
    開封第一講書人閱讀 39,914評(píng)論 0贊 277
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎内狗，沒想到半個(gè)月后穆壕，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 46,465評(píng)論 1贊 319
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡其屏，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,543評(píng)論 3贊 342
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年喇勋，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片偎行。...
    茶點(diǎn)故事閱讀 40,675評(píng)論 1贊 353
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡川背，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出蛤袒，到底是詐尸還是另有隱情熄云，我是刑警寧澤，帶...
    沈念sama閱讀 36,354評(píng)論 5贊 351
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布妙真，位于F島的核電站缴允，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏珍德。R本人自食惡果不足惜练般，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,029評(píng)論 3贊 335
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望锈候。 院中可真熱鬧薄料，春花似錦、人聲如沸泵琳。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評(píng)論 0贊 25
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽获列。三九已至谷市，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間击孩，已是汗流浹背迫悠。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評(píng)論 1贊 274
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留溯壶，地道東北人及皂。 一個(gè)月前我還...
    沈念sama閱讀 49,091評(píng)論 3贊 378
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長(zhǎng)得像且改，于是被迫代替她去往敵國和親验烧。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,685評(píng)論 2贊 360