jQuery 核心 - jQuery() 方法
定义和用法
jQuery() 方法接受一个字符串,其中包含了用于匹配元素集合的 CSS 选择器。
jQuery() 函数有三种语法:
语法 1
接受一个字符串,其中包含了用于匹配元素集合的 CSS 选择器:
jQuery(selector, [context]
语法 2
使用原始 HTML 的字符串来创建 DOM 元素:
jQuery(html,ownerDocument]
语法 3
绑定一个在 DOM 文档载入完成后执行的函数:
jQuery( callback )
jQuery( selector, [ context ] )
Ang syntax na ito ay may ilang mga paggamit:
用法 1 :设置选择器环境
語法
jQuery(selector, [context]
默认情况下,选择器从文档根部对 DOM 进行搜索。不过,可以为 $() 设置可选的 context 参数。
例如,如果我们希望在一个 callback 中搜索一个元素,可以限定下面的搜索:
實例
$("div.foo").click(function() { $("span", this).addClass("bar"); });
Dahil ay naglimitahan na namin ang selector ng span sa environment ng this, lamang ang span sa naaangkop na elemento na naitama ay magkakaroon ng added class.
Sa loob, ang kapaligiran ng selector ay naipalagay sa pamamagitan ng .find() method, kaya na $("span", this) ay katumbas ng $(this).find("span").
Ang mga pangunahing function ng jQuery ay naipalagay sa pamamagitan ng function na ito. Lahat ng bagay sa jQuery ay nakabase dito, o nagsasagawa ng kahit anong paraan ng paggamit ng function na ito. Ang pinakamababang paggamit ng function na ito ay ang paglagay ng isang expression (kadalasan ay CSS selector), pagkatapos ay maghanap ng lahat ng sumusunod na elementong tumutugma sa expression.
Sa normal na kaso, kung hindi tinukoy ang parameter na context, ang $() ay maghahanap ng DOM element sa kasalukuyang HTML document; kapag tinukoy ang parameter na context, tulad ng isang set ng DOM element o jQuery object, ay maghahanap ito sa loob ng context. Sa jQuery 1.3.2 at sa ibang pangkat, ang pagbabalik ng mga elemento ay katulad ng pagkakaroon ng mga ito sa context.
Paggamit 2: Gamit ang DOM element
語法
jQuery(element)
Ang function na ito ay nagbibigay-daan sa amin na gumawa ng jQuery object gamit ang DOM element na natagpuan nang ibang paraan. Ang pangkaraniwang paggamit ng feature na ito ay, ang pagtawag ng method ng jQuery sa elemento na nasa callback function na ipinasa sa this keyword:
實例
$("div.foo".click(function() { $(this).slideUp(); });
Ang halimbawa na ito ay gagamitin ang pagtanggap ng sliding animation sa elemento kapag ito ay naitama. Dahil ang process handler ay tumatanggap ng clicked item na nasa this keyword na isang purong DOM element, kailangang walagay ang elemento sa jQuery object bago ito ay tawagin ang mga method ng jQuery.
Ang function din ay maaaring tanggapin ang XML document at Window object (bagaman hindi sila DOM element) bilang wastong argumento.
Kapag ang XML data ay ibabalik mula sa Ajax na pagtawag, maaari naming gamitin ang $() function upang walagay ang data gamit ang jQuery object. Kapag tapos na, maaari naming gamitin ang .find() at ibang mga paraan ng paglalakad ng DOM upang makuha ang iisang elemento sa straktura ng XML.
Paggamit 3: Kopyahin ang jQuery object
語法
jQuery(jQuery object)
Kapag inilagay ang jQuery object bilang argumento sa $() function, magpapakita ito ng isang kopya ng objekto. Katulad ng pangunahing objekto, ang bagong jQuery object ay tumutukoy sa parehong DOM element.
Gagamit 4: Ibabalik ang walang collection
語法
jQuery()
Para sa jQuery 1.4, kapag tinawag ang walang parameter na jQuery() method, ibabalik ito ng walang jQuery collection. Sa mga naunang bersyon ng jQuery, ito ay ibabalik ng collection na may document na elemento.
jQuery( html, [ ownerDocument ] )
Ang syntax na ito ay may ilang mga paggamit:
Gagamit 1: Gumawa ng bagong elemento
語法
jQuery(html,ownerDocument]
Maaari kang ipasa ang isang pinagpipisan na HTML string, o string na ginawa ng ilang template engine o plugin, o string na na-load sa pamamagitan ng AJAX. Ngunit may limitasyon ang paglikha ng input na elemento, mangyaring tingnan ang ikalawang halimbawa.
Tuwang-tuwa, ang string na ito ay maaaring magkaroon ng slash (katulad ng isang address ng imaheng), at backslash. Kapag gumagawa ka ng isang elemento, gamitin ang closed tag o format ng XHTML. Halimbawa, gumawa ng span, magamit ka ng ("<span/>") o ("<span></span>"), ngunit hindi maaring ito gamitin ang ("<span>"). Sa jQuery, ang syntax na ito ay katumbas ng $(document.createElement("span")).
Kung ipapasa ang string bilang parameter sa $(), ang jQuery ay titingnan kung ang string ay HTML (katulad, ang ilang posisyon ng string ay may tag). Kung hindi, ang string ay ipapaliwanag bilang ekspresyon ng selector, mangyaring tingnan ang itaas na paliwanag. Ngunit kapag ang string ay HTML na pahina, ang jQuery ay sumusubok gumawa ng DOM na elemento na inilarawan ng HTML na pahina. Pagkatapos, gagawa at ibabalik ng jQuery ng isang reference na jQuery object na binibigay ng mga DOM na elemento:
實例
("<p id="test">My <em>new</em> text</p>").appendTo("body");
Kung ang HTML na pahina ay mas kumplikado kaysa sa simple na tag na walang attribute, tulad ng halimbawa sa itaas na HTML, ang tunay na paglikha ng elemento ay ginagawa ng mekanismo ng innerHTML ng browser. Sa detalye, ang jQuery ay maglikha ng bagong <div> na elemento, pagkatapos ay nagtatakda ng innerHTML attribute ng elemento sa pinapasok na HTML na pahina. Kapag ang parameter ay simple na tag, tulad ng ("<img />") o ("<a></a>"), ang jQuery ay gumagamit ng mga katutubong JavaScript createElement() function upang gumawa ng elemento.
要確保跨平台兼容性,片段的結構必須良好。能夠包含其他元素的標籤必須成對出現(帶有關閉標籤):
$("<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, 或 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() { // 文件準備就緒 });