1、基础
jquery对象集:
$():jquery对象集合
获取jquery对象集中的元素:
使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0]
使用jquery的get方法获取jquery对象集中的javascript元素:var temp = $('img[alt]').get(0)
使用jquery的eq方法获取jquery对象集中的jquery对象元素:
$('img[alt]').eq(0)
$('img[alt]').first()
$('img[alt]').last()
jquery对象集转换成javascript数组:
var arr = $('label+button').toArray()label后面所有同级button元素,转换成javascript数组
jquery对象集的索引:
var n = $('img').index($('img#id')[0])注意:index()参数是javascript元素
var n = $('img').index('img#id') 等同于上一行 找不到返回-1
var n = $('img').index()img在同级元素中的索引
向jquery对象集中添加更多的jquery对象集:
使用逗号:$('img[alt],img[title]')
使用add方法:$('img[alt]').add('img[title]')
对不同的jquery对象集中采取不同的方法:
$('img[alt]').addClass('thickBorder').add('img[title]').addClass('');
向jquery对象集中添加新创建的元素:
$('p').add('
Padamkan elemen daripada set objek jquery:
$('img[title]').bukan('[title*=pu]')
$('img').not(function(){return !$(this).hasClass('someClassname')})
Tapis set objek jquery:
$('td').filter(function(){return this.innerHTML.match(^d $)}) menapis td
yang mengandungi nombor
Dapatkan subset set objek jquery
$('*').slice(0,4) Set objek jquery baharu yang mengandungi 4 elemen pertama
$('*').slice(4)Set objek jquery baharu yang mengandungi 4 elemen pertama
$('div').has('img[alt]')
Tukar elemen dalam set objek jquery
var allIds = $('div').map(function(){
Kembali (this.id==udefined) ? null : this.id;
}).get();Tukar kepada tatasusunan javascript melalui kaedah get
Lintas elemen dalam set objek jquery
$('img').setiap(fungsi(n){
This.alt = 'Ini ialah [' n ']gambar ke-, id gambar ialah' this.id;
})
$([1,2,3]).setiap(fungsi(){alert(ini);})
Gunakan hubungan antara elemen untuk mendapatkan set objek jquery
$(this).closest('div') Contohnya, div mana butang yang dicetuskan berlaku
$(this).siblings('button[title="Close"]')Semua elemen adik-beradik, tidak termasuk dirinya
$(this).children('.someclassname')Semua elemen nod anak, tidak termasuk nod anak pendua
$(this).closest('') bersebelahan dengan unsur moyang
$(this).contents() ialah set objek jquery yang terdiri daripada kandungan elemen Sebagai contoh, anda boleh mendapatkan kandungan elemen
$(this).cari(p span)
var hasImg = $('*').is('img');
$().sembunyikan()
$().addClass('')
$().html('')
$('a').size()Bilangan elemen
$('p:even')
$('tr:nth-child(1)')
$('body > div') elemen anak langsung
$('a[href=$='pdf']')Pilih
berdasarkan atribut
$(div:mempunyai(a)) penapis
$.trim()
$(document).ready(function(){});
$(function(){});
$('
').insertAfter();
if(item)(){}else{} ujian longgar
Ujian if(item != null) disyorkan untuk membezakan antara null dan undefined
2. Pilih elemen untuk dikendalikan
Mengikut nama tag: $('a')
Berdasarkan id: $('#id')
Mengikut nama kelas: $('.someclassname')
Penuhi berbilang syarat: $('a#id.someclassname') atau $('div,span')
Semua nod anak unsur: $(p a.someclassname)
Nod anak langsung bagi elemen: $(ul.myList > li)
Mengikut nama atribut:
$(a[href^='http://']) bermula dengan...
$(href$='.pdf') berakhir dengan...
$(form[method]) form
mengandungi atribut kaedah
$(input[type='text'])
$(input[nama!=''])
$(href*='some')mengandungi
Elemen pertama selepas elemen tertentu: $(E F) sepadan dengan F, dan F ialah elemen pertama selepas E
Elemen selepas elemen tertentu: $(E~F) sepadan dengan F, dan F ialah elemen selepas E
Kedudukan lulus:
$(li:first)Li pertama
$(li:last)li terakhir
$(li:even)baris genap li
$(li:odd)baris ganjil li
$(li:eq(n))Elemen ke-n, indeks bermula dari 0
$(li:gt(n))Unsur selepas elemen ke-n, indeks bermula dari 0
$(li:lt(n))Elemen sebelum elemen ke-n, indeks bermula dari 0
$(ul:first-child)Li pertama
dalam senarai
$(ul:last-child)Li terakhir dalam senarai
$(ul:nth-child(n))The nth li
dalam senarai
$(ul:anak tunggal)ul tanpa abang li
$(ul:nth-child(even))Baris genap li dalam senarai, ganjil ialah kiraan baris li
$(ul:nth-child(5n 1))li
dalam senarai dibahagikan dengan 5 dengan baki 1
Mengikut penapis:
$(input:not(:checkbox))
$(':not(img[src*="anjing"])')
$('img:not([src*="anjing"])')
$(div:has(span))
$('tr:has(img[src$="pu.png"])')
$(tr:animated)tr
dalam keadaan animasi
$(input:button) termasuk Input
butang jenis, tetapkan semula, serahkan
$(input:checkbox) adalah bersamaan dengan $(input[type=checkbox])
$(span:contains(food))span
mengandungi makanan teks
$(input:disabled)disable
$(input:enabled)Dayakan
$(input:file) bersamaan dengan $(input[type=file])
$(:header)h1 hingga h6
$(input:tersembunyi)
$(input:image) bersamaan dengan $(input[type=image])
$(:input) termasuk input, pilih, kawasan teks, elemen butang
$(tr:ibu bapa)
$(input:password) bersamaan dengan $(input[type=password])
$(input:radio) bersamaan dengan $(input[type=radio])
$(input:reset) adalah bersamaan dengan $(input[type=reset]) atau $(button[type=reset])
$('.clssname:selected')
$(input:submit) adalah bersamaan dengan $(input[type=submit]) atau $(button[type=submit])
$(input:text) bersamaan dengan $(input[type=text])
$(div:kelihatan)
3. Memproses elemen DOM
Manipulasi sifat unsur:
$('*').setiap(fungsi(n){
This.id = this.tagName n;
})
Dapatkan nilai atribut: $('').attr('');
Tetapkan nilai atribut:
$('*').attr('title', function(index, previousValue){
Kembalikan nilai sebelumnya ' Saya elemen ' indeks ' dan nama saya ' this.id;
}) Tetapkan nilai untuk atribut
$('input').attr({
Nilai: '',
tajuk: ''
}); Tetapkan nilai untuk berbilang atribut
Padamkan atribut:
$('p').removeAttr('value');
Jadikan semua pautan terbuka dalam tetingkap baharu:
$('a[href^="http://"]').attr('target',"_kosong");
Elakkan daripada menghantar borang beberapa kali:
$("borang").serahkan(fungsi(){
$(":submit", this).attr("disabled","disabled");
})
Tambahkan nama kelas: $('#id').addClass('')
Padamkan nama kelas: $('#id').removeClass('')
Tukar nama kelas: $('#id').toggleClass('') padamkan nama kelas jika wujud, tambah nama kelas jika tidak wujud
Tentukan sama ada ia mengandungi nama kelas: $('p:first').hasClass('') $('p:first').is('')
Mengembalikan senarai nama kelas dalam bentuk tatasusunan:
$.fn.getClassNames = function(){
var name = this.attr('someclsssname');
if(nama != null){
Kembalikan nama.split(" ");
}
lain
{
Kembalikan [];
}
}
Tetapkan gaya:
$('div.someclassname').css(function(index, currentWidth){
Pulangan arusLebar 20;
});
$('div').css({
Kursor: 'penunjuk',
Sempadan: '1px hitam pejal',
Pelapik: '12px 12px 20px 20x',
bacgroundColor: 'Putih'
});
Mengenai saiz:
$(div).lebar(500)
$('div').height()
$('div').innerHeight()
$('div').innerWidth()
$('div').outerHeight(true)
$('div').OuterWidth(false)
Mengenai kedudukan:
Kedudukan rujukan $('p').offset() relatif kepada dokumen
$('p').position() mengimbangi kedudukan relatif elemen induk
$('p').scrollLeft() mengimbangi nilai bar skrol mendatar
$('p').scrollLeft(value)
$('p').scrollTop()
$('p').scrollTop(value)
Kandungan elemen yang berkaitan:
$('p').html()
$('p').html('')
$('p').text()
$('p').text('')
Kandungan tambahan
Tambahkan sekeping html di hujung elemen: $('p').append('some text');
Elemen sedia ada dalam dom di hujung elemen: $('p').append($(a.someclassname))
Tambahkan pada permulaan elemen: $("p").prepend()
Tambahkan di hadapan elemen: $("span").before()
Tambahkan selepas elemen: $("span")after()
Tambahkan kandungan ke penghujung: appendTo(sasaran)
Tambahkan kandungan pada permulaan: prependTo(sasaran)
Tambahkan kandungan pada bahagian hadapan elemen: insertBefore(sasaran)
Tambahkan kandungan pada penghujung elemen: $('
Elemen bungkus:
$('a.someclassname').wrap("
Padam elemen:
$('.classname').remove() memadamkan elemen dan peristiwa serta data yang terikat pada elemen juga akan dipadamkan
$('.classname').detach() memadamkan elemen tetapi mengekalkan peristiwa dan data
$('.classname').empty() tidak memadamkan elemen, tetapi mengosongkan kandungan elemen
Salin elemen:
$('img').clone().appendTo('p.someclassname')
$('ul').clone().insertBefore('#id')
Elemen gantian:
$('img[alt]').setiap(fungsi(){
$(this).replaceWith('' $(this).attr('alt') '');
})
$("p").replaceAll("")
Mengenai nilai elemen bentuk:
$('[name="radioGroup"]:checked').val() mendapat nilai butang radio Jika satu tidak dipilih, ia mengembalikan tidak ditentukan
var checkboxValues = $('[name="checkboxGroup"]:checked').map(function(){
Kembalikan $(this).val();
}).toArray(); Dapatkan nilai kotak berbilang pilihan
Untuk