jQuery

Contents:

jQuery( selector, [ context ] )
- jQuery( selector, [ context ] )
- jQuery( element )
- jQuery( elementArray )
- jQuery( jQuery object )
- jQuery( )
jQuery( html, [ ownerDocument ] )
- jQuery( html, [ ownerDocument ] )
- jQuery( html, props )

jQuery( callback )
- jQuery( callback )

jQuery( selector, [ context ] )

מחזירה: jQuery

תיאור: מקבל מחרוזת שמכיחה סלקטורים של CSS, הם משתמשים אחרי זה לבחירת אלמנטים בהתאמה.

ארגומנטים

jQuery( selector, [ context ] )

הוספה בגרסה: 1.0

selector

מחרוזת

מחרוזת מכילה ביטוי של סלקטור.

context

אלמנט, jQuery

אלמנט DOM, מסמך, או jQuery שמשמש כי קונטכסט.

jQuery( element )

הוספה בגרסה: 1.0

element

אלמנט

אלמנט DOM לעטיפה באובייקט jQuery.

jQuery( elementArray )

הוספה בגרסה: 1.0

elementArray

מערך

מערך שמכיל אוסף של אלמנטים DOM לעטיפה באובייקט jQuery.

jQuery( jQuery object )

הוספה בגרסה: 1.0

jQuery object

אובייקט

אובייקט jQuery הקיים לשיבוט.

jQuery( )

הוספה בגרסה: 1.4

בניסוח המפורט לעיל, jQuery() — שיכול להיות רשום כ- $() — מתבצע חיפוש באמצעות DOM עבור כל אלמנטים, שתואמים למצב ובונה אובייקט חדש של jQuery, שמתייחס לאלמנטים האלה:

$('div.foo');

סלקטור של הקונטכסט

בברירת מחדל, סלקטורים מבצעים חיפוש שלהם בתוך DOM, מתחיל משורש של המסמך. עם זאת, קונטכסט חלופי אפשר לתת עבור חיפוש באמצעות פרמטר השני אופציאונלי לפונקציה $(). לדוגמה, אם בתוך פונקציה חוזרת אנחנו רוצים לבצע חיפוש של האלמנט, אנחנו יכולים להגביל חיפוש הזה:

$('div.foo').click(function() {
  $('span', this).addClass('bar');
});

מכיוון שהגבלנו סלקטור span בתוך הקונטכסט this, רק אלמנטים span בתוך אלמנטים שנלחצו יקבלו class נוסף .

פנימי, בחירת סלקטור מתבצעת באמצעות שיטה .find(), לכן $('span', this) שווה ל-$(this).find('span').

שימוש באלמנטים DOM

ניסוח שני ושלישי של פונקציה הזאת מאפשר לנו ליצור אובייקט jQuery באמצעות אלמנט DOM או אלמנטים, שמצאנו בדרך אחרת. שימוש משוטף באובייקט הזה הוא בהפעלת שיטה של jQuery על אלמנט, שהתקבל לתוך הפונקציה של קריאה חוזרת דרך מילת מפתח this:

$('div.foo').click(function() {
  $(this).slideUp();
});

דוגמה הזו מציגה הסתרה של פריטים באמצעות אנימציה בלחיצה עליהם. מכיוון שמטפל מקבל אלמנט שנלחץ במילת מפתח this כאלמנט עירום של DOM, אלמנט חייב להיות עטוף באובייקט jQuery לפני שנוכל להפעיל עליו שיטות jQuery.

כאשר נתונים XML מוחזרים מקריאה של Ajax, אנחנו יכולים להשתמש בפונקציה $() כדי לעטוף אותו באובייקט jQuery, שננוכל לעבוד איתו קל. ברגע שזה נעשה נוכל להחזיר אלמנטים של מבנה יחידים של XML באמצעות .find() ושיטות אחרות של DOM traversal.

שיבוט של אובייקטים jQuery

כאשר אובייקט jQuery הועבר כפרמטר של פונקציה $(), מתבצע שיבוט של האובייקט. אובייקט החדש הזה של jQuery מתייחס לאותם אלמנטים של DOM כמו אלמנט המקור.

החזרת אוסף רייק

ב- jQuery 1.4, אם אתם מעבירים ארגומנטים בתוך שיטה jQuery(), אוסף רייק של jQuery יוחזר. בגרסאות הקודמות של jQuery, יוחזר אוסף שמכיל צומת של המסמך.

דוגמאות

דוגמה 1

מוצא כל האלמנטים 'p', שהם ילדים של אלמנט div.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
   $("div > p").css("border", "1px solid gray");
});
</script>
</head>
<body>
<p>one</p> <div><p>two</p></div> <p>three</p>
</body>
</html>

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 2

מחפש כל הכפתורים מסוג רדיו בתוך התוונית הראשונה במסמך.

$("input:radio", document.forms[0]);

דוגמה 3

מחפש של האלמנטים div בתוך מסמך XML מתשובה שהתקבלה מ- Ajax.

$("div", xml.responseXML);

דוגמה 4

מגדיר צבע רקע של הדף לשחור.

$(document.body).css( "background", "black" );

דוגמה 5

מסתיר כל האלמנטים קלט בתוך התוונית.

$(myForm.elements).hide()

jQuery( html, [ ownerDocument ] )

מחזירה: jQuery

תיאור: מייצר אלמנטים DOM במהירות בזק מתוך מחרוזת של HTML טרי.

ארגומנטים

jQuery( html, [ ownerDocument ] )

הוספה בגרסה: 1.0

html

מחרוזת

מחרוזת HTML לייצר במהירות הבזק. שימו לב, שניתוח מבנית של HTML ו לא XML.

ownerDocument

מסמך

מסמך שבתוכו אלמנטים חדשים ייווצר.

jQuery( html, props )

הוספה בגרסה: 1.4

html

מחרוזת

מחרוזת שמגדירה אלמנט HTML יחיד ועצמאי (למשל <div/> או <div>).

props

תכונות, אירועים, שיטות

תכונות, אירועים, ושיטות להפעלה על אלמנט חדש שנוצר.

יצירת אלמנטים חדשים

אם מחרוזת מועברת בתור פרמטר ל- $(), jQuery בוחן מחרוזת כדי לראות אם היא נראת כמו HTML (לדוגמה, אם היא מכילה <tag ... > איפשהו בתוך המחרוזת ). אם לא אז מחרוזת מפורשת כביטוי של סלקטור, כמו שתואר לעיל. אבל אם מחרוזת מכילה חלק מקוד HTML, jQuery מנסה ליצור אלמנטים DOM חדשים כמו שתואר ב-HTML. אז אובייקט jQuery שנוצר והוחזר הוא מתייחס לאלמנטים האלה. אנחנו יכולים להפעיל כל השיטות רגילות של jQuery על האובייקט הזה:

$('<p id="test">My <em>new</em> text</p>').appendTo('body');

כשה HTML יותר מורכב מאשר תג ללא תכונות, כמו בדוגמה לעיל, יצירת בפועל של אלמנטים מטופלת על ידי מנגנון של דפדפן innerHTML. במיוחד, jQuery מייצר אלמנט <div> חדש ומגדיר תכונות innerHTML של אלמנט לחלק של HTML שהתקבל. אם לפרמטר יש תג בודד, כמו $('<img />') או $('<a></a>'), jQuery מייצר אלמנט באמצעות פונקציה מקורית של JavaScript createElement().

כדי להבטיח התאמה בין הפלטפורמות, חלק HTML חייב להיות מפורמט נכון. תגים, שיכולים להכיל אלמנטים אחרים צריכים להיות צמודים יחיד עם תג סגירה:

$('<a href="http://xhtml.co.il/he/"></a>');

חוץ מזה, jQuery מאפשר תחביר של תגים כמו XML ( עם או ללא רווח לפני סלאש ):

$('<a/>');

תגים שלא מכילים אלמנטים יכולים להיות סגורים מייד או לא:

$('<img />');
$('<input>');

ב- jQuery 1.4, אנחנו יכולים להעביר מפת של תכונות לארגומנט השני. ארגומנט הזה מקבל תוספים של תכונות שיכולים להיות מעוברים לשיטה .attr(). חוץ מזה, כל סוג של אירוע ניתן להעביר, וגם שיטות הבאות של jQuery ניתן להפעיל: val, css, html, text, data, width, height, offset.

דוגמאות

דוגמה 1

מייצר אלמנט div (ואת כל התוכן שלו) באופן דינמי, ומקשר אותו לגוף האלמנט. בפנים, נוצר אלמנט ואוסף תכונות שלו innerHTML עבור סימון שלו. לכן שניהם דיי גמישים ומוגבלים.

$("<div><p>Hello</p<</div>").appendTo("body")

דוגמה 2

מייצר כמה אלמנטים DOM.

$("<div/>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");

$("<input>", {
  type: "text",
  val: "Test",
  focusin: function() {
    $(this).addClass("active");
  },
  focusout: function() {
    $(this).removeClass("active");
  }
}).appendTo("form");

jQuery( callback )

מחזירה: jQuery

תיאור: מקשר פונקציה שתופעל כאשר DOM מסיים טעינה.

ארגומנטים

jQuery( callback )

הוספה בגרסה: 1.0

callback

פונקציה

פונקציה שמופעלת כשה DOM מוכן.

פונקציה הזו מתנהגת כמו $(document).ready(), מכיוון שהיא משמשת לעטיפה של פעולות אחרות $() בדף שלכם, שתלויות ממוכנות של DOM. למרות שפונקציה הזו מבחינה טכנית ניתנת לשירשור, אין כאן הרבה אפשרויות לבניית שרשרת.

דוגמאות

דוגמה 1

מפעיל פונקציה כשה DOM מוכן לשימוש.

$(function(){
  // Document is ready
});

דוגמה 2

משמש כקיצור עבור $(document).ready() וכארגומנט, כדי לכתוב קוד jQuery אל כשל באמצעות כינוי $ , ללא הסתמכות על כינוי גלובלי.

jQuery(function($) {
  // Your code using failsafe $ alias here...
});

האם מידע זה היה מועיל?

כן לא

jQuery

jQuery( selector, [ context ] )

ארגומנטים

jQuery( selector, [ context ] )

jQuery( element )

jQuery( elementArray )

jQuery( jQuery object )

jQuery( )

סלקטור של הקונטכסט

שימוש באלמנטים DOM

שיבוט של אובייקטים jQuery

החזרת אוסף רייק

דוגמאות

דוגמה 1

דוגמה 2

דוגמה 3

דוגמה 4

דוגמה 5

jQuery( html, [ ownerDocument ] )

ארגומנטים

jQuery( html, [ ownerDocument ] )

jQuery( html, props )

יצירת אלמנטים חדשים

דוגמאות

דוגמה 1

דוגמה 2

jQuery( callback )

ארגומנטים

jQuery( callback )

דוגמאות

דוגמה 1

דוגמה 2

תגובות