jQuery-keskiosa - jQuery()-menetelmä
实例
Löydä kaikki div-elementin alle kuuluvat p-elementit ja aseta niiden reunaviivan ominaisuus:
$("div > p").css("border", "1px solid gray");
Määritelmä ja käyttö
jQuery()-menetelmä hyväksyy merkkijonon, joka sisältää CSS-valitsimen elementtipakalle.
jQuery()-funktioilla on kolme syntaksia:
Syntaksi 1
Hyväksyy merkkijonon, joka sisältää CSS-valitsimen elementtipakalle:
jQuery(valitsin, [konteksti]
Syntaksi 2
Luo DOM-elementti alkuperäisellä HTML-merkkijonolla:
jQuery(html,ownerDocument]
Syntaksi 3
Liitä funktio, joka suoritetaan DOM-dokumentin lataamisen jälkeen:
jQuery( callback )
jQuery( valitsin, [ konteksti ] )
Tämä syntaksi on käytettävissä seuraavilla tavoilla:
Käyttötapa 1: Määritä valitsijaympäristö
语法
jQuery(valitsin, [konteksti]
Oletusarvoisesti valitsin etsii DOM:aa dokumentin juuresta. Voimme kuitenkin asettaa $() valinnaiselle kontekstiparametrille.
Esimerkiksi, jos haluamme etsiä elementtiä callbackissa, voimme määrittää seuraavan hakun:
实例
$("div.foo").click(function() {
$("span", this).addClass("bar");
});
Koska olemme rajoittaneet span-valitsimen this-ympäristöön, vain napsautetussa elementissä olevat span-elementit saavat lisätyn luokan.
Sisäisesti valitsija-ympäristö toteutetaan .find() -menetelmän avulla, joten $("span", this) on sama kuin $(this).find("span").
jQuery:n ydintoiminnot toteutetaan tämän funktion kautta. Kaikki jQuery:ssä tapahtuva on perustuu tähän funktioon tai käyttää jollain tavalla tätä funktiota. Tämä funktion peruskäyttö on lähettää sille ilmaisu (yleensä CSS-valitsimen muodossa), ja sitten etsiä kaikki vastaavat elementit kyseisen ilmaisun perusteella.
Oletusarvoisesti, jos kontekstiparametria ei määritetä, $() etsii DOM-elementtejä nykyisestä HTML-dokumentista; jos kontekstiparametri määritetään, kuten DOM-elementtisarja tai jQuery-objekti, etsintä tehdään kyseisessä kontekstissa. jQuery 1.3.2 jälkeen sen palauttama elementtijärjestys vastaa kontekstin elementtien ilmestymisjärjestystä.
Käyttötapa 2: DOM-elementin käyttö
语法
jQuery(element)
Tämä funktio mahdollistaa jQuery-objektin luomisen käyttämällä muilla tavoin löydettyjä DOM-elementtejä. Tämä toiminto käytetään yleensä siinä, että kutsutaan jQuery-metodeja elementtiin, joka on jo saanut this-kriitteryhmän callback-funktiosta:
实例
$("div.foo".click(function() {
$(this).slideUp();
});
Tässä esimerkissä käytetään liukuvaa animaatiota piilottaakseen elementin, kun se on napsautettu. Koska käsittelevä ohjelma saa napsautetun kohteen this-kriitteryhmässä puhtaana DOM-elementtinä, täytyy käyttää jQuery-objektia elementin kääriäksesi ennen kuin sitä kutsutaan jQuery-metodeja.
Tämä funktio voi myös hyväksyä XML-dokumentin ja Window-objektin (vaikka ne eivät ole DOM-elementtejä)有效参数。
Kun XML-data palautetaan Ajax-kutsusta, voimme käyttää $() -funktiota pakataksimme tiedot jQuery-objektin avulla. Kun se on valmis, voimme käyttää .find() ja muita DOM-selailumetodeja hakeaksemme yksittäisiä elementtejä XML-rakenteesta.
Käyttötapa 3: jQuery-objektin kloonaus
语法
jQuery(jQuery-objekti)
Kun jQuery-objekti siirretään $() -funktiolle parametrina, luodaan sen kopio. Uusi jQuery-objekti viittaa samoihin DOM-elementteihin kuin alkuperäinen objekti.
Käyttötapa 4: Palauta tyhjä kokoelma
语法
jQuery()
jQuery 1.4 versiossa kutsu ilman parametreja jQuery() -metodilla palauttaa tyhjän jQuery-kokoelman. Aiemmissa jQuery-versioissa tämä palauttaa dokumenttikoon sisältävän kokoelman.
jQuery( html, [ ownerDocument ] )
Tämä syntaksi on käytettävissä seuraavilla tavoilla:
Käyttötapa 1: Luo uusi elementti
语法
jQuery(html,ownerDocument]
Voit lähettää käsinkirjoitetun HTML-merkkijonon, jossain mallinnusmoottorissa tai lisäosassa luodun merkkijonon tai AJAX:llä ladatun merkkijonon. Mutta kun luot input-elementin, sinulla on rajat, joita voit tarkistaa toisessa esimerkissä.
Tämä merkkijono voi sisältää vinovartion (esimerkiksi kuvan osoite) ja pystysuoran viivan. Kun luot yksittäistä elementtiä, käytä sulkeita tai XHTML-muotoa. Esimerkiksi span-luominen voidaan tehdä $("<span/>") tai $("<span></span>"), mutta ei suositella $("<span>")). jQuery:ssä tämä syntaksi on yhtä kuin $(document.createElement("span"))
Jos merkkijonoa siirretään parametrina $() -funktioon, jQuery tarkistaa, onko merkkijono HTML:ää (esimerkiksi, merkkijonossa on tageja tiettyyn sijaintiin). Jos ei ole, merkkijono tulkitaan valitsinilmauksena, kuten yllä kuvatun esimerkin mukaisesti. Jos merkkijono on HTML-kappale, jQuery yrittää luoda DOM-elementin, jota HTML-kappale kuvaa. Tämän jälkeen luodaan ja palautetaan jQuery-objekti, joka viittaa näihin DOM-elementteihin:
实例
$("<p id="test">My <em>new</em> text</p>").appendTo("body");
Jos HTML-kappale on monimutkaisempi kuin yksinkertainen ilman ominaisuuksia oleva merkki, kuten yllä olevassa esimerkissä, elementin todellinen luontiprosessi suoritetaan selaimen innerHTML-mekanismin avulla. Tarkemmin sanottuna jQuery luo uuden <div>-elementin ja asettaa elementin innerHTML-ominaisuuden saadulle HTML-kappaleelle. Kun parametrina annetaan vain yksinkertainen merkki, kuten $("<img/>") tai $("<a></a>"), jQuery luo elementin内生 JavaScript createElement()-funktioita käyttäen.
要确保跨平台兼容性，片段的结构必须良好。能够包含其他元素的标签必须成对出现（带有关闭标签）：
$("<a href="http://jquery.com"></a>");
不过，jQuery 也允许类似 XML 的标签语法：
$("<a/>");
无法包含其他元素的标签可以关闭，也可以不关闭：
$("<img />");
$("<input>");
用法 2 ：设置属性和事件
语法
jQuery(html,props)
对于 jQuery 1.4，我们可以向第二个参数传递一个属性映射。该参数接受能够传递给 .attr() 方法的属性的超集。此外，可以传递任意的事件类型，并可以调用下面的 jQuery 方法：val, css, html, text, data, width, height, or offset。
注意，Internet Explorer 不允许你创建 input 元素并改变其类型；您必须使用例如 "<input type="checkbox" />" 来规定类型。
实例
创建一个 <input> 元素，同时设定 type 属性、属性值，以及一些事件。
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
jQuery( callback )
允许你绑定一个在 DOM 文档载入完成后执行的函数。
该函数的作用如同 $(document).ready() 一样，只不过用这个函数时，需要把页面中所有需要在 DOM 加载完成时执行的其他 $() 操作符都包装到其中来。尽管从技术上来说，这个函数是可链接的，但真正以这种方式链接的情况并不多。
例子
当DOM加载完成后，执行其中的函数：
$(function() {
// 文档就绪
});
