jQuery seçiciler jQuery kütüphanesinin en önemli parçalarından biridir.
jQuery Seçiciler
jQuery seçicileri seçmek ve HTML işlemek için izin element(s) .
jQuery seçiciler için kullanılır "find" (or select) özellikleri ve çok daha fazlası ad, id, sınıflar, türleri, nitelikleri, değerleri temel HTML öğelerini. Mevcut dayanıyor CSS Seçiciler ve ek olarak, bazı kendi özel seçiciler vardır.
JQuery tüm seçicileri dolar işareti ve parantez ile başlar: $() .
eleman Seçici
jQuery eleman seçme elemanı adına göre elemanlarını seçer.
Hepiniz seçebilirsiniz <p> Böyle bir sayfadaki öğeleri:
$("p")
Example
Bir kullanıcı bir düğmeye tıkladığında, tüm <p> elemanları gizlenecek:
Örnek
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Kendin dene " #id Seçici
JQuery #id seçici kullanan id belli maddeyi bulmak için, HTML etiketinin niteliği.
Eğer tek ve benzersiz eleman bulmak istediğinizde #id seçici kullanmalısınız böylece bir kimlik, bir sayfa içinde benzersiz olmalıdır.
Belirli bir kimliğe sahip bir öğe bulmak için, HTML öğesinin kimliği eklenen bir karma karakteri yazın:
$("#test")
Example
Bir kullanıcı bir düğmeye tıkladığında, id = "test" ile eleman gizlenecek:
Örnek
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Kendin dene " .class Seçici
JQuery sınıf seçici belirli bir sınıf ile elemanları bulur.
Belirli bir sınıfla elemanları bulmak için, sınıfın adını ve ardından bir dönem karakteri, yazma:
$(".test")
Example
Bir kullanıcı bir düğmeye tıkladığında, class = "test" ile elementler gizlenecek:
Örnek
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Kendin dene " jQuery seçiciler Diğer Örnekler
Sözdizimi | Açıklama | Örnek |
---|---|---|
$ ( "*") | tüm elemanları seçer | Dene |
$ (This) | Geçerli HTML öğesini seçer | Dene |
$ ( "P.intro") | Tüm seçer <p> sınıfla elemanları = "intro" | Dene |
$ ( "P: İlk") | İlk seçer <p> elemanının | Dene |
$ ( "Ul li: İlk") | Seçer ilk <li> birinci elemanı <ul> | Dene |
$ ( "Ul li: first-child") | Seçer ilk <li> Her unsuru <ul> | Dene |
$ ( "[Href]") | bir href niteliği olmayan tüm unsurları seçer | Dene |
$ ( "A [target = '_ blank']") | Bir hedefle tüm <a> elemanlar eşit değerde atfettikleri seçer "_blank" | Dene |
$ ( "A [hedef! = '_ Blank']") | DEĞİL eşit bir hedef özellik değerine sahip tüm <a> unsurları seçer "_blank" | Dene |
$ ( ": Düğmesi") | Tüm seçer <button> elemanları ve <input> type = "düğme" elemanları | Dene |
$ ( "Tr: hatta") | Bütün bile seçer <tr> elemanları | Dene |
$ ( "Tr: garip") | Tüm tek seçer <tr> elemanları | Dene |
Bizim kullanın jQuery Seçici Tester farklı seçicileri göstermek için.
Tüm jQuery seçiciler tam Referans için, bizim için gidin lütfen jQuery Seçiciler Referans .
Ayrı Dosya Fonksiyonlar
Web sitenizin sayfalarında bir sürü içerir ve size jQuery fonksiyonları bakımı kolay olmasını istiyorsanız, ayrı bir js dosyasında jQuery fonksiyonları koyabilirsiniz.
Bu dersimizde jQuery göstermek zaman fonksiyonları doğrudan eklenir <head> bölümünde. Ancak, bazen (kullanmak gibi ayrı bir dosyada yerleştirmek tercih edilir src .js dosyasına başvurmak için öznitelik):
Örnek
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>
Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 » Egzersiz 6»