jQuery هسته - روش jQuery()

دستورالعمل هسته‌ای jQuery

مثال

تمام عناصر p فرزند div را پیدا کنید و ویژگی حاشیه آن‌ها را تنظیم کنید:

$("div > p").css("border", "1px solid gray");

تست کنید

تعریف و استفاده

jQuery() عملکرد یک رشته را می‌پذیرد که شامل انتخاب‌گر CSS برای تطبیق مجموعه عناصر است.

jQuery() عملکرد سه‌گانه دارد:

استفاده 1

یک رشته را می‌پذیرد که شامل انتخاب‌گر CSS برای تطبیق مجموعه عناصر است:

jQuery(selector, [context]

استفاده دقیق

استفاده 2

با استفاده از رشته‌های HTML اصلی، عناصر DOM ایجاد کنید:

jQuery(html,ownerDocument]

استفاده دقیق

استفاده 3

یک تابع را به اجرا درآورید که پس از بارگذاری مستند DOM انجام شود:

jQuery( callback )

استفاده دقیق

jQuery( selector, [ context ] )

این گرامر دارای چندین کاربرد است:

استفاده 1: تنظیم محیط انتخاب‌گر

قوانین

jQuery(selector, [context]

به صورت پیش‌فرض، انتخاب‌گر از ریشه مستند برای جستجوی DOM استفاده می‌کند. اما می‌توانید پارامتر انتخابی context را برای $() تنظیم کنید.

مثلاً، اگر بخواهیم در یک callback یک عنصر را جستجو کنیم، می‌توانیم جستجوی زیر را محدود کنیم:

مثال

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

به دلیل اینکه ما انتخاب‌گر span را به محیط اینستاکس محدود کرده‌ایم، تنها عناصر span در عنصر کلیک شده به کلاس اضافه می‌شوند.

در داخل، محیط انتخاب‌گر از طریق روش .find() پیاده‌سازی می‌شود، بنابراین $("span", this) معادل $(this).find("span") است.

تمام عملکردهای هسته‌ای jQuery از طریق این تابع پیاده‌سازی می‌شوند. همه چیز در jQuery بر اساس این تابع است یا به عبارت دیگر، همه چیز به روشی به این تابع متکی است. کاربرد پایه‌ای این تابع این است که یک عبارت (معمولاً یک انتخاب‌گر CSS) به آن ارسال می‌شود و سپس بر اساس این عبارت تمام عناصر تطابق‌یافته را جستجو می‌کند.

به طور پیش‌فرض، اگر پارامتر context تعیین نشده باشد، تابع $() در مستند HTML فعلی جستجو می‌کند؛ اگر پارامتر context تعیین شده باشد، مانند یک مجموعه از عناصر DOM یا شیء jQuery، در این محیط جستجو می‌شود. از jQuery 1.3.2 به بعد، ترتیب عناصر بازگشتی با ترتیب ظاهر شدن در محیط مطابقت دارد.

کاربرد 2: استفاده از عنصر DOM

قوانین

jQuery(element)

این تابع به ما اجازه می‌دهد تا شیء jQuery را با استفاده از عنصرهای DOM که به روش‌های دیگر پیدا کرده‌ایم ایجاد کنیم. کاربرد معمول این ویژگی این است که روش‌های jQuery را بر روی عناصری که به عنوان اینستاکس به تابع callback ارسال شده‌اند، فراخوانی کنیم:

مثال

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

این مثال از یک انیمیشن اسلایدینگ برای پنهان کردن عنصر در هنگام کلیک استفاده می‌کند. به دلیل اینکه متد پردازنده این اینستاکس به عنصر کلیک شده به عنوان یک عنصر DOM خالص اشاره دارد، باید قبل از فراخوانی روش‌های jQuery، آن عنصر را با استفاده از شیء jQuery بسته‌بندی کنیم.

این تابع همچنین می‌تواند مستند XML و شیء Window (که هر دو عنصر DOM نیستند) را به عنوان پارامترهای معتبر پذیرش کند.

وقتی داده‌های XML از فراخوانی Ajax بازمی‌گردد، می‌توانیم از تابع $() برای بسته‌بندی داده‌ها با استفاده از شیء jQuery استفاده کنیم. پس از اتمام، می‌توانیم از روش‌های جستجوی DOM مانند .find() استفاده کنیم تا عناصر مجزا در ساختار XML را بازیابی کنیم.

کاربرد 3: کپی کردن شیء jQuery

قوانین

jQuery(شیء jQuery)

وقتی جاوااسکریپت به شکل پارامتر به تابع $() یک شیء jQuery ارسال می‌شود، یک کپی از آن شیء ایجاد می‌شود. مانند شیء اولیه، شیء 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 است (مثلاً، در某些 positions برچسب‌هایی وجود دارد). اگر نیست، رشته را به عنوان عبارت انتخاب‌کننده تفسیر می‌کند، لطفاً به توضیحات بالا مراجعه کنید. اما اگر رشته یک قطعه HTML باشد، jQuery سعی می‌کند عناصر DOM را که توسط این قطعه HTML توصیف شده‌اند ایجاد کند. سپس یک جعبه jQuery ایجاد و به آن بازمی‌گرداند که به این عناصر DOM اشاره می‌کند:

مثال

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

اگر قطعه HTML پیچیده‌تر از برچسب ساده بدون ویژگی‌ها باشد، مانند مثال بالا، فرآیند ایجاد واقعی عناصر توسط مکانیزم innerHTML مرورگر انجام می‌شود. به طور خاص، jQuery یک عناصر جدید <div> ایجاد می‌کند و سپس ویژگی innerHTML عناصر را برای قطعه HTML ورودی تنظیم می‌کند. وقتی که پارامتر فقط یک برچسب ساده است، مانند $("<img />") یا $("<a></a>")، jQuery از تابع createElement() داخلی JavaScript استفاده می‌کند تا عناصر ایجاد کند.

برای اطمینان از سازگاری بین پلتفرم‌ها، ساختار قطعه باید خوب باشد. برچسب‌هایی که می‌توانند عناصر دیگر را شامل شوند باید به صورت دوگانه ظاهر شوند (با برچسب بسته):

$("<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> ایجاد کنید، در حالی که نوع، مقادیر ویژگی و برخی از رویدادها را تنظیم می‌کنید.

$("<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() {
  // آماده‌سازی مستند
});

دستورالعمل هسته‌ای jQuery