نواة jQuery - دالة jQuery()
مثال
ابحث عن جميع العناصر p التي تنتمي إلى عناصر div كأبناء، ثم أعد تعيين خصائص الحواف:
$("div > p").css("border", "1px solid gray");
التعريف والاستخدام
jQuery() يقبل نص يحتوي على مختار CSS للتوافق مع مجموعة العناصر.
يملك دالة jQuery() ثلاثة نواتج:
النحو 1
قبول نص يحتوي على مختار CSS للتوافق مع مجموعة العناصر:
jQuery(مختار, [سياق]
النحو 2
استخدام نص HTML الأصلي لإنشاء عناصر DOM:
jQuery(html,ownerDocument]
النحو 3
ربط دالة تنفيذها بعد تحميل مستند DOM:
jQuery( callback )
jQuery( مختار, [ سياق ] )
هذه الجملة لها استخدامات متعددة:
الاستخدام 1: تعيين بيئة المختار
النحو
jQuery(مختار, [سياق]
بالافتراض، يقوم الم selector بالبحث في DOM من جذور الوثيقة. ومع ذلك، يمكن تعيين معامل اختياري لل سياق $().
مثلاً إذا أردنا البحث عن عنصر في callback، يمكن تحديد البحث التالي:
مثال
$("div.foo").click(function() {
$("span", this).addClass("bar");
});
بما أننا قمنا بتحديد مصفوفة span في هذا البيئة، فإن فقط span في العنصر المُنقر عليه سيتم إضافة الكلاس.
تم تنفيذ بيئة المصفوفة من خلال طريقة .find()، لذا $("span", this) متساوية مع $(this).find("span").
تم تنفيذ جميع الوظائف الأساسية لـ jQuery من خلال هذه الوظيفة. كل شيء في jQuery يعتمد على هذه الوظيفة، أو هو يستخدم هذه الوظيفة بطريقة ما. الاستخدام الأساسي لهذه الوظيفة هو نقل تعبير (عادة ما يكون مصفوفة CSS) إليها، ثم البحث عن جميع العناصر التي تتوافق مع هذا التعبير.
بالتقديم، إذا لم يتم تحديد معاملات السياق، سيبحث $() في مستند HTML الحالي عن العناصر DOM؛ إذا تم تحديد معاملات السياق، مثل مجموعة عناصر DOM أو jQuery object، سيتم البحث في هذا السياق. بعد jQuery 1.3.2، يتم رجوع العناصر بناءً على الترتيب الذي يظهر فيه السياق.
استخدام 2: استخدام عنصر DOM
النحو
jQuery(element)
تتيح هذه الوظيفة إنشاء jQuery object باستخدام العناصر DOM التي تم العثور عليها بطريقة أخرى. الاستخدام العادي لهذه الوظيفة هو استدعاء طرق jQuery للعناصر التي تم نقلها إلى وظيفة callback من خلال الكلمة المفتاحية this:
مثال
$("div.foo".click(function() {
$(this).slideUp();
});
سيتم استخدام هذا المثال لتمرير حركة الرقعة عند النقر على العنصر. نظرًا لأن المعالج يقبل العنصر الذي يتم النقر عليه في هذا الكلمات المفتاحية this كعنصر DOM النقي، يجب 包装 هذا العنصر بجهاز jQuery قبل استدعاء طرق jQuery.
يمكن لهذه الوظيفة أيضًا استقبال مستند XML وأداة Window (بالرغم من أنها ليست عناصر DOM) كمعاملات صالحة.
بعد أن يتم إرجاع بيانات XML من استدعاء Ajax، يمكننا استخدام وظيفة $() بفضل jQuery object لتغليف هذه البيانات. بمجرد الانتهاء، يمكننا استخدام .find() وطرق استكشاف DOM الأخرى للحصول على عنصر فردي داخل بنية XML.
استخدام 3: نسخ jQuery object
النحو
jQuery(jQuery object)
عندما يتم نقل jQuery إلى وظيفة $() بوصفها شكل من أشكال المعامل، يتم إنشاء نسخة من هذا الجهاز. مثل الجهاز الأصلي، يشير الجهاز الجديد إلى نفس العنصر DOM.
استخدام 4: العودة إلى مجموعة فارغة
النحو
jQuery()
للمستخدم jQuery 1.4، عند استدعاء دالة jQuery() بدون معاملات، سيقوم بتحويل مجموعة jQuery الفارغة. في إصدارات jQuery السابقة، سيقوم بتحويل مجموعة تحتوي على عقدة document.
jQuery( html, [ ownerDocument ] )
هذه الجملة لها استخدامات متعددة:
استخدام 1: إنشاء عناصر جديدة
النحو
jQuery(html,ownerDocument]
يمكنك تقديم سلسلة HTML مكتوبة يدويًا، أو سلسلة مكتوبة من قبل بعض محركات النماذج أو الإضافات، أو سلسلة تم تحميلها عبر AJAX. ولكن هناك قيود عند إنشاء عنصر input، يمكنك الرجوع إلى المثال الثاني.
بالطبع يمكن للسلسلة أن تحتوي على شرطة (مثل عنوان صورة) أو شرطة معكوسة. عندما تخلق عنصرًا واحدًا، استخدم علامة التبويب المغلقة أو نموذج XHTML. على سبيل المثال، يمكنك إنشاء span باستخدام $("<span/>") أو $("<span></span>")، ولكن ليس من المستحسن استخدام $("<span>")). في jQuery، هذه الجملة تساوي $(document.createElement("span")).
إذا تم تمرير 字符ية كمعامل إلى $()، jQuery ستحقق ما إذا كانت السلسلة هي HTML (مثل، السلسلة تحتوي على علامات في بعض المواقع). إذا لم تكن كذلك، فإنها تفسح السلسلة كعبرة اختيارية، يرجى الرجوع إلى الشرح أعلاه. ولكن إذا كانت السلسلة قطعة HTML، فإن jQuery تحاول إنشاء العناصر DOM المصفوفة من قبل قطعة HTML هذه. ثم تخلق وتعيد دالة jQuery لمجموعة العناصر DOM هذه:
مثال
$("<p id="test">My <em>new</em> text</p>").appendTo("body");
إذا كان قطعة HTML أكثر تعقيدًا من علامة التبويب البسيطة بدون خصائص، مثل مثال HTML أعلاه، فإن عملية إنشاء العنصر الفعلية تتم من خلال ميكانيكية innerHTML لمتصفح الويب. على وجه التحديد، jQuery تخلق عناصر <div> جديدة، ثم تضبط خاصية innerHTML للعنصر المقدم لقطعة HTML. عندما يكون المعامل مجرد علامة تبويب، مثل $("<img />") أو $("<a></a>")، jQuery تخلق العناصر باستخدام وظيفة createElement() الداخلية للجافا سكريبت.
لضمان التوافق عبر المنصات، يجب أن تكون بنية الفقاعات جيدة. يجب أن تكون العلامات التي يمكن أن تحتوي على عناصر أخرى مرتبطة بشكل مزدوج (مزودة بعلامة الإغلاق):
$("<a href="http://jquery.com"></a>");
لكن جافا سكريبت يسمح أيضًا بنحو علامات مشابه لـ XML:
$("<a/>");
يمكن إغلاق العلامات التي لا تحتوي على عناصر أخرى، أو عدم إغلاقها:
$("<img />");
$("<input>");
الاستخدام 2: تعيين الخاصيات والأحداث
النحو
jQuery(html,props)
للجافا سكريبت 1.4، يمكننا إرسال خريطة الخاصيات كثاني معامل. يقبل هذا المعامل مجموعة متميزة من الخاصيات التي يمكن إرسالها إلى .attr() 方法. بالإضافة إلى ذلك، يمكن إرسال أي نوع من الأحداث، ويمكن استدعاء هذه الطرق من جافا سكريبت: val, css, html, text, data, width, height، أو offset.
لا يسمح إنترنت إكسبلورر بإنشاء عنصر input وتغيير نوعه؛ يجب عليك استخدام مثل "<input type="checkbox" />" لتعريف النوع.
مثال
إنشاء عنصر <input> مع تعيين خصائص نوعه وقيمته، بالإضافة إلى بعض الأحداث.
$("<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() {
// مستند جاهز
});
