jQuery 3.3

jQuery()




jquery
قم بإرجاع مجموعة من العناصر المتطابقة سواء وجدت في DOM استنادًا إلى وسيطة (وسائط) تم تمريرها أو تم إنشاؤها عن طريق تمرير سلسلة HTML.

jQuery (المحدد [، السياق]) الإرجاع: jQuery

الوصف: يقبل سلسلة تحتوي على محدد CSS والذي يستخدم بعد ذلك لمطابقة مجموعة من العناصر.

في الصيغة الأولى المذكورة أعلاه ، jQuery() - والتي يمكن كتابتها أيضًا كـ $() - تقوم بالبحث من خلال DOM عن أي عناصر تتطابق مع المحدد المقدم وتقوم بإنشاء عنصر jQuery جديد يشير إلى هذه العناصر:

$( "div.foo" );

إذا لم تطابق أي عناصر المحدد المحدد ، فسيكون كائن jQuery الجديد "فارغ" ؛ أي أنه يحتوي على أي عناصر ولديه خاصية .length 0.

سياق محدد

بشكل افتراضي ، تقوم المحددات بإجراء عمليات البحث الخاصة بها داخل DOM بدءًا من جذر المستند. ومع ذلك ، يمكن إعطاء سياق بديل للبحث باستخدام المعلمة الثانية الاختيارية للدالة $() . على سبيل المثال ، لإجراء بحث داخل معالج الأحداث ، يمكن تقييد البحث مثل:

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

عندما يقتصر البحث عن محدد النطاق على سياق this ، ستحصل فقط على الامتدادات داخل العنصر الذي تم النقر عليه على فئة إضافية.

داخليًا ، يتم تطبيق سياق محدد مع أسلوب .find() ، بحيث يكون $( "span", this ) مساوياً لـ $( this ).find( "span" ) .

باستخدام عناصر DOM

تقوم الصياغتان الثانية والثالثة لهذه الدالة بإنشاء كائن jQuery باستخدام عنصر DOM أو أكثر تم تحديدهما بالفعل بطريقة أخرى. يتم إنشاء كائن jQuery من عناصر الصفيف بالترتيب الذي ظهرت به في الصفيف؛ بخلاف معظم عمليات jQuery متعددة العناصر الأخرى ، لا يتم فرز العناصر بترتيب DOM. سيتم نسخ العناصر من المصفوفة كما هي ولن يتم حذفها إذا كانت مجموعات jQuery بالفعل.

يرجى ملاحظة أنه على الرغم من أنه يمكنك تمرير العقد النصية وعقد التعليق في مجموعة jQuery بهذه الطريقة ، فإن معظم العمليات لا تدعمها. والقليل من ذلك سيكون لديه ملاحظة واضحة على صفحة وثائق API الخاصة بهم.

الاستخدام الشائع لبناء عنصر DOM مفرد هو استدعاء أساليب jQuery على عنصر تم تمريره إلى وظيفة رد اتصال عبر الكلمة الأساسية التالية:

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

يتسبب هذا المثال في إخفاء العناصر باستخدام حركة متحركة منزلقة عند النقر فوقها. نظرًا لأن المعالج يتلقى العنصر الذي تم النقر عليه في this الكلمة الرئيسية كعنصر DOM ، يجب تمرير العنصر إلى الدالة $() قبل تطبيق أساليب jQuery عليه.

يمكن تمرير بيانات XML التي يتم إرجاعها من استدعاء Ajax إلى الدالة $() بحيث يمكن استرداد العناصر الفردية لهيكل XML باستخدام .find() وطرق اجتياز DOM أخرى.

$.post( "url.xml", function( data ) {
  var $child = $( data ).find( "child" );
});

استنساخ jQuery الأجسام

عندما يتم تمرير كائن jQuery إلى الدالة $() ، يتم إنشاء نسخة من الكائن. يشير كائن jQuery الجديد إلى نفس عناصر DOM كواحد من العناصر الأولية.

إرجاع مجموعة فارغة

اعتبارًا من jQuery 1.4 ، يؤدي استدعاء الأسلوب jQuery() بدون أية وسائط إلى إرجاع مجموعة jQuery فارغة (مع خاصية .length من 0). في الإصدارات السابقة من jQuery ، يؤدي ذلك إلى إرجاع مجموعة تحتوي على عقدة المستند.

العمل مع كائنات عادي

في الوقت الحاضر ، العمليات الوحيدة المدعومة على كائنات جافا سكريبت عادي ملفوفة في jQuery هي: .data() و .prop() و .on() و .off() و .trigger() و .triggerHandler() . استخدام .data() (أو أي طريقة تتطلب .data() ) على كائن عادي سيؤدي إلى خاصية جديدة على الكائن تسمى jQuery {randomNumber} (على سبيل المثال. jQuery123456789).

// Define a plain object
var foo = { foo: "bar", hello: "world" };
 
// Pass it to the jQuery function
var $foo = $( foo );
 
// Test accessing property values
var test1 = $foo.prop( "foo" ); // bar
 
// Test setting property values
$foo.prop( "foo", "foobar" );
var test2 = $foo.prop( "foo" ); // foobar
 
// Test using .data() as summarized above
$foo.data( "keyName", "someValue" );
console.log( $foo ); // will now contain a jQuery{randomNumber} property
 
// Test binding an event name and triggering
$foo.on( "eventName", function () {
  console.log( "eventName was called" );
});
 
$foo.trigger( "eventName" ); // Logs "eventName was called"

يجب استخدام .trigger( "eventName" ) ، فإنه سيتم البحث عن خاصية "eventName" على الكائن ومحاولة تنفيذه بعد تنفيذ أية معالجات jQuery مرفقة. لا يتحقق ما إذا كانت الخاصية دالة أم لا. لتجنب هذا السلوك ، يجب استخدام .triggerHandler( "eventName" ) بدلاً من ذلك.

$foo.triggerHandler( "eventName" ); // Also logs "eventName was called"

أمثلة:

ابحث عن جميع عناصر p التي تمثل أطفال عنصر div وتطبيق حد لها.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>one</p>
<div><p>two</p></div>
<p>three</p>
 
<script>
$( "div > p" ).css( "border", "1px solid gray" );
</script>
 
</body>
</html>

عرض:

ابحث عن جميع مدخلات نوع الراديو داخل النموذج الأول في المستند.

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

ابحث عن كل عناصر div في وثيقة XML من استجابة Ajax.

$( "div", xml.responseXML );

قم بتعيين لون خلفية الصفحة إلى الأسود.

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

إخفاء كل عناصر الإدخال داخل النموذج.

$( myForm.elements ).hide();

jQuery (html [، ownerDocument]) الإرجاع: jQuery

الوصف: ينشئ عناصر DOM على الطاير من سلسلة HTML الأولية المتوفرة.

  • الإصدار المضاف: 1.0 jQuery (html [، ownerDocument])

    • أتش تي أم أل
      النوع: htmlString
      سلسلة من HTML لإنشاء على الطاير. لاحظ أن هذا يوزع HTML وليس XML.
    • ownerDocument
      النوع: document
      هو المستند الذي سيتم إنشاء العناصر الجديدة فيه.
  • الإصدار المضاف: 1.4 jQuery (html، attributes)

    • أتش تي أم أل
      النوع: htmlString
      سلسلة تعريف عنصر HTML مستقل (مثل <div /> أو <div> </ div>).
    • سمات
      اكتب: PlainObject
      عنصر من السمات والأحداث والطرق للاتصال على العنصر الذي تم إنشاؤه حديثًا.

خلق عناصر جديدة

إذا تم تمرير سلسلة كمعلمة إلى $() ، فسيقوم jQuery بفحص السلسلة لترى ما إذا كان يبدو مثل HTML (على سبيل المثال ، يبدأ بـ <tag ... > ). إذا لم يكن الأمر كذلك ، فسيتم تفسير السلسلة على أنها تعبير محدد ، كما هو موضح أعلاه. ولكن إذا كانت السلسلة تبدو كمقتطف HTML ، فإن jQuery يحاول إنشاء عناصر DOM جديدة كما هو موضح بواسطة HTML. ثم يتم إنشاء كائن jQuery وإرجاعه يشير إلى هذه العناصر. يمكنك تنفيذ أي من طرق jQuery المعتادة على هذا الكائن:

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

لإجراء تحليل واضح لسلسلة إلى HTML ، استخدم الأسلوب $.parseHTML() .

بشكل افتراضي ، يتم إنشاء العناصر باستخدام .ownerDocument المطابق للمستند الذي تم تحميل مكتبة jQuery عليه. يجب إنشاء العناصر التي يتم حقنها في مستند مختلف باستخدام تلك الوثيقة ، على سبيل المثال $("<p>hello iframe</p>", $("#myiframe").prop("contentWindow").document) .

إذا كان HTML أكثر تعقيدًا من علامة واحدة بدون سمات ، كما هو الحال في المثال أعلاه ، .innerHTML التعامل مع الإنشاء الفعلي للعناصر من خلال آلية المتصفح .innerHTML . في معظم الحالات ، يقوم jQuery بإنشاء عنصر <div> جديد ويقوم بتعيين الخاصية innerHTML للعنصر إلى مقتطف HTML الذي تم تمريره. عندما يكون للمعلمة علامة واحدة (مع علامة إغلاق اختيارية أو إغلاق سريع) - $( "<img />" ) أو $( "<img>" ) أو $( "<a></a>" ) أو $( "<a>" ) - يقوم jQuery بإنشاء العنصر باستخدام جافا سكريبت الأصلي .createElement() وظيفة.

عند تمرير HTML معقدة ، قد لا تقوم بعض المتصفحات بإنشاء DOM الذي يكرر بالضبط مصدر HTML المقدم. كما ذكرنا ، فإن jQuery تستخدم خاصية .innerHTML الخاصة .innerHTML لتحليل HTML الذي تم تمريره .innerHTML في الوثيقة الحالية. أثناء هذه العملية ، تقوم بعض المستعرضات بتصفية عناصر معينة مثل <html> أو <title> أو <head> العناصر. نتيجة لذلك ، قد لا تمثل العناصر التي تم إدراجها السلسلة الأصلية التي تم تمريرها.

ومع ذلك ، لا يقتصر التصفية على هذه العلامات. على سبيل المثال ، سيقوم Internet Explorer قبل الإصدار 8 بتحويل كافة خصائص href على الارتباطات إلى عناوين URL المطلقة ، ولن يقوم Internet Explorer قبل الإصدار 9 بمعالجة عناصر HTML5 بدون إضافة طبقة توافق منفصلة.

لضمان التوافق عبر النظام الأساسي ، يجب أن يكون المقتطف جيدًا. يجب إقران العلامات التي يمكن أن تحتوي على عناصر أخرى مع علامة إغلاق:

$( "<a href='https://jquery.com'></a>" );

قد تكون العلامات التي لا تحتوي على عناصر سريعة الإغلاق أو لا:

$( "<img>" );
$( "<input>" );

عند تمرير HTML إلى jQuery() ، لاحظ أن العقد النصية لا تعامل كعناصر DOM. باستثناء بعض الطرق (مثل .content() ) ، يتم تجاهلها أو إزالتها بشكل عام. على سبيل المثال:

var el = $( "<br>2<br>3" ); // returns [<br>, "2", <br>]
el = $( "<br>2<br>3 >" ); // returns [<br>, "2", <br>, "3 &gt;"]

هذا السلوك متوقع. اعتبارًا من jQuery 1.9.0 (وما لم تستخدم المساعد jQuery Migrate ) ، تتطلب jQuery() سلسلة HTML للبدء بـ < (أي أن العقد النصية لا تظهر في مقدمة سلسلة HTML).

اعتبارًا من jQuery 1.4 ، يمكن أن تقبل الوسيطة الثانية إلى jQuery() كائنًا عاديًا يتكون من مجموعة كبيرة من الخصائص التي يمكن تمريرها إلى طريقة .attr() .

هام: إذا تم تمرير الوسيطة الثانية ، يجب أن تمثل سلسلة HTML في الوسيطة الأولى عنصرًا بسيطًا بدون سمات. اعتبارًا من jQuery 1.4 ، يمكن تمرير أي نوع من الأحداث ، ويمكن استدعاء أساليب jQuery التالية: val أو css أو html أو text أو data أو width أو height أو offset .

اعتبارًا من jQuery 1.8 ، يمكن استخدام أي أسلوب مثيل jQuery (طريقة jQuery.fn ) كخاصية للكائن الذي تم تمريره إلى المعلمة الثانية:

$( "<div></div>", {
  "class": "my-div",
  on: {
    touchstart: function( event ) {
      // Do something
    }
  }
}).appendTo( "body" );

يجب ذكر الاسم "class" في الكائن لأنه عبارة عن كلمة محجوزة لـ JavaScript ، ولا يمكن استخدام "className" لأنه يشير إلى خاصية DOM ، وليس السمة.

في حين أن الوسيطة الثانية مريحة ، يمكن أن تؤدي مرونتها إلى عواقب غير مقصودة (على سبيل المثال $( "<input>", {size: "4"} ) استدعاء الأسلوب .size() بدلاً من تعيين سمة الحجم). يمكن بالتالي كتابة كتلة التعليمات البرمجية السابقة بدلاً من ذلك على النحو التالي:

$( "<div></div>" )
  .addClass( "my-div" )
  .on({
    touchstart: function( event ) {
      // Do something
    }
  })
    .appendTo( "body" );

أمثلة:

قم بإنشاء عنصر div (وكافة محتوياته) بشكلٍ ديناميكي وألحقه بعنصر الجسم. داخليًا ، يتم إنشاء عنصر ويتم تعيين الخاصية innerHTML الخاصة به إلى الترميز المعين.

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

قم بإنشاء بعض عناصر DOM.

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

jQuery (رد الاتصال) الإرجاع: jQuery

الوصف: يقوم بربط دالة سيتم تنفيذها عند انتهاء تحميل DOM.

  • الإصدار المضاف: 1.0 jQuery (رد الاتصال)

    • أتصل مرة أخرى
      النوع: Function ()
      الدالة التي سيتم تنفيذها عندما يكون DOM جاهزًا.

تتصرف هذه الوظيفة تمامًا مثل $( document ).ready() ، في أنه يجب استخدامها $( document ).ready() عمليات $() على صفحتك والتي تعتمد على DOM جاهزة. على الرغم من أن هذه الوظيفة ، من الناحية التقنية ، قابلة للتسلسل ، إلا أنه لا يوجد الكثير من الاستخدامات للتسلسل ضدها.

أمثلة:

قم بتنفيذ الوظيفة عندما يكون DOM جاهزًا للاستخدام.

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

استخدم كل من الاختصار لـ $ (مستند). ready () والوسيطة لكتابة رمز jQuery fail آمن باستخدام $ alias ، دون الاعتماد على الاسم المستعار العام.

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