30 kemahiran pembangunan kod jQuery klasik

Contoh dalam artikel ini meringkaskan 30 kemahiran pembangunan kod jQuery klasik. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

1. Buat penapis bersarang

Salin kod Kod adalah seperti berikut:

.filter(":not(:has(.selected ))" ) //Alih keluar semua elemen yang tidak mengandungi kelas .dipilih 

2. Gunakan semula pertanyaan elemen anda

Salin kod Kod adalah seperti berikut:

var allItems = $("div.item"); 

var keepList = $("div#container1 div.item");
nama kelas: $(formToLookAt " input:checked").setiap(function() { keepListkeepList = keepList.filter("." $(this).attr("name"));

});

3 Gunakan has() untuk menentukan sama ada sesuatu elemen mengandungi kelas atau elemen tertentu

Salin kod Kod adalah seperti berikut:

//jQuery 1.4.* termasuk sokongan untuk kaedah has . Kaedah ini akan menemui 

//jika elemen mengandungi kelas elemen lain tertentu atau apa sahaja ia

//anda mencari dan melakukan apa sahaja yang anda mahukan kepada mereka
$("input").has(".email").addClass("email_icon");

4. Gunakan jQuery untuk menukar gaya

Salin kod Kod adalah seperti berikut:

//Cari jenis media yang anda ingin tukar kemudian tetapkan href kepada helaian gaya baharu anda

$('link[media='screen']').attr('href', 'Alternative.css');

5 Hadkan kawasan yang dipilih

Salin kod Kod adalah seperti berikut:

//Jika boleh, pratetapkan nama kelas anda dengan nama tag

//supaya jQuery tidak perlu menghabiskan lebih banyak masa mencari

//untuk elemen yang anda cari. Juga ingat bahawa apa sahaja

//anda boleh lakukan untuk lebih spesifik tentang di mana elemen itu

//pada halaman anda akan mengurangkan masa pelaksanaan/carian

var in_stock = $('#shopping_cart_item input.is_in_stock');

  Item X

  Item Y

  Item Z

6. Cara menggunakan ToggleClass dengan betul

Salin kod Kod adalah seperti berikut:

//Togol kelas membolehkan anda menambah atau mengalih keluar kelas

//dari unsur bergantung pada kehadirannya

//class. Di mana sesetengah pembangun akan menggunakan:

a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');

//toggleClass membolehkan anda melakukan ini dengan mudah menggunakana.toggleClass('Butang biru');

7. Tetapkan fungsi yang ditentukan oleh IE

Salin kod Kod adalah seperti berikut:

jika ($.browser.msie) {

// Internet Explorer seorang yang sadis.

}

8. Gunakan jQuery untuk menggantikan elemen

Salin kod Kod adalah seperti berikut:

$('#thatdiv').replaceWith('fnuh ');

9. Sahkan sama ada elemen kosong

Salin kod Kod adalah seperti berikut:

jika ($('#keks').html( )) {

//Tiada apa-apa ditemui ;
}

10. Cari indeks unsur dalam set tidak tertib

Salin kod Kod adalah seperti berikut:

$("ul > li").click( fungsi () { var index = $(this).prevAll().length;

11. Mengikat fungsi pada acara

Salin kod Kod adalah seperti berikut:

$('#foo').bind('click ', function () { alert('Pengguna mengklik pada "foo."');

12. Tambahkan HTML pada elemen

Salin kod Kod adalah seperti berikut:

$('#lal').append('sometext ');

13 Gunakan objek untuk mentakrifkan atribut semasa mencipta elemen

Salin kod Kod adalah seperti berikut:

var e = $("", { href: " #", kelas: "a-class another-class", tajuk: "..." });

14. Gunakan penapis untuk menapis berbilang atribut

Salin kod Kod adalah seperti berikut:

//Pendekatan berasaskan ketepatan ini boleh berguna apabila anda gunakan

//banyak elemen input serupa yang mempunyai jenis yang berbeza

elemen var = $('#someid input[type=sometype][value=somevalue]').get();

15. Gunakan jQuery untuk pramuat imej

Salin kod Kod adalah seperti berikut:

jQuery.preloadImages = function() { for(var i = 0; i').attr('src', argumen[i]); // Penggunaan $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');

16. Tetapkan pengendali acara untuk sebarang acara yang sepadan dengan pemilih
[kod]$('button.someClass').live('klik', someFunction); //Perhatikan bahawa dalam jQuery 1.4.2, pilihan perwakilan dan nyahdelegasikan telah
//diperkenalkan untuk menggantikan secara langsung kerana ia menawarkan sokongan yang lebih baik untuk konteks
//Sebagai contoh, dari segi jadual yang sebelum ini anda akan gunakan..
//
.live() $("table").each(function(){ $("td", this).live("hover", function(){ $(this).toggleClass("hover"); }) ; });
//Sekarang gunakan..
$("table").delegate("td", "hover", function(){ $(this).toggleClass("hover"); });

17 Cari elemen pilihan yang dipilih

Salin kod Kod adalah seperti berikut:

$('#someElement').find('option :dipilih' );

18. Sembunyikan elemen yang mengandungi nilai tertentu

Salin kod Kod adalah seperti berikut:

$("p.value:contains('thetextvalue' )") .sembunyi();

19 Tatal secara automatik ke kawasan tertentu halaman

Salin kod Kod adalah seperti berikut:

jQuery.fn.autoscroll = function(selector) { $ ('html ,body').animate( {scrollTop: $(selector).offset().top}, 500 ); //Kemudian untuk menatal ke kelas/kawasan yang anda ingin dapatkan seperti ini:

$('.nama_kawasan').autoscroll();

20. Kesan pelbagai pelayar

Salin kod Kod adalah seperti berikut:Kesan Safari (jika( $.browser.safari)) , Kesan IE6 dan ke atas (jika ($.browser.msie && $.browser.version > 6 )), Kesan IE6 dan ke bawah (jika ($.browser.msie && $.browser.version <= 6 )), Kesan FireFox 2 dan ke atas (jika ($.browser.mozilla && $.browser.version >= '1.8' ))

21. Gantikan perkataan dalam rentetan

Salin kod Kod adalah seperti berikut:

var el = $('#id'); .html( el.html().replace(/word/ig, ''));

22. Tutup menu klik kanan

Salin kod Kod adalah seperti berikut:

$(document).bind('contextmenu',function (e) { return false; });

23 Tentukan pemilih tersuai

Salin kod Kod adalah seperti berikut:

$.expr[':'].mycustomselector = function (elemen, indeks, meta, tindanan){

// elemen- ialah elemen DOM

// indeks - indeks gelung semasa dalam tindanan

// meta - data meta tentang pemilih anda

// timbunan - timbunan semua elemen untuk gelung

// Kembalikan benar untuk memasukkan elemen semasa

// Kembalikan palsu untuk mengecualikan elemen semasa

};

// Penggunaan Pemilih Tersuai:

$('.someClasses:test').doSomething();

24 Tentukan sama ada unsur wujud

Salin kod Kod adalah seperti berikut:

jika ($('#someDiv').length) {

//hooray!!! ia wujud...

}

25 Gunakan jQuery untuk menentukan klik butang kiri dan kanan tetikus

Salin kod Kod adalah seperti berikut:

$("#someelement").live('click ', fungsi (e) { if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) { alert("Butang Tetikus Kiri Diklik" ); } else if(e.button == 2) alert("Butang Tetikus Kanan Diklik" });

26. Paparkan atau padamkan nilai lalai kotak input

Salin kod Kod adalah seperti berikut:

//Coretan ini akan menunjukkan kepada anda cara mengekalkan lalai nilai
//dalam medan input teks apabila pengguna belum memasukkan
//nilai untuk menggantikannya
swap_val = [];
$(".swap").setiap(fungsi(i){ swap_val[i] = $(this).val();
$(this).focusin(function(){ if ($(this).val() == swap_val[i]) { $(this).val(""); } }).focusout(function(){ if ($.trim($(this).val()) == "") { $(this).val(swap_val[i]);

27 Sembunyikan atau tutup elemen secara automatik selepas masa tertentu (disokong dalam 1.4)

Salin kod Kod adalah seperti berikut:

//Begini cara kami melakukannya dalam 1.3. 2 menggunakan setTimeout 

setTimeout(function() { $('.mydiv').hide('buta', {}, 500) }, 5000 

//Dan inilah cara anda boleh melakukannya dengan 1.4 menggunakan ciri kelewatan() (ini sama seperti tidur)

$(".mydiv").delay(5000).hide('buta', {}, 500);

28 Cipta elemen ke DOM
secara dinamik

Salin kod Kod adalah seperti berikut:

var newgbin1Div = $('');

newgbin1Div.attr('id','gbin1.com').appendTo('body');

29 Hadkan bilangan aksara dalam kawasan teks

Salin kod Kod adalah seperti berikut:

jQuery.fn.maxLength = function(max){ this.each(function(){ var type = this.tagName.toLowerCase(); 

var inputType = this.type? this.type.toLowerCase() : null; if(type == "input" && 

inputType == "text" || inputType == "password"){

//Anwenden der Standard-maxLength this.maxLength = max;

} else if(type == "textarea"){ this.onkeypress = function(e){ var ob = e || Ereignis;

var keyCode = ob.keyCode;

var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;

return !(this.value.length >= max &&

(keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection); }; 

this.onkeyup = function(){ if(this.value.length > max){ this.value = this.value.substring(0,max); } }; } }); }; 

//Verwendung: 

$('#gbin1textarea').maxLength(500);

30. 为函数创建一个基本测试用例

复制代码代码如下:

//Unterteilen Sie Tests in Module.

module("Modul B");

test("ein anderer gbin1.com-Test", function() {

//Geben Sie an, wie viele Behauptungen voraussichtlich innerhalb eines Tests ausgeführt werden. erwarten(2); //Eine Vergleichszusicherung, äquivalent zu „assertEquals“ von JUnit. 

equal( wahr, falsch, „Test nicht bestanden“ );

equal( wahr, wahr, „Test bestanden“ ); 

});

希望本文所述对大家的jquery程序设计有所帮助.

30 kemahiran pembangunan kod jQuery klasik_jquery