jQuery Core - jQuery() Method

مثال

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

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

آزمایش کنید

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

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

jQuery() Function سه ترتیب دارد:

ترتیب 1

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

jQuery(selector, [context]

راهنمای استفاده مفصل

ترتیب 2

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

jQuery(html,ownerDocument]

راهنمای استفاده مفصل

ترتیب 3

یک تابع را به عنوان یک callback در تکمیل بارگذاری مستند DOM تنظیم کنید:

jQuery( callback )

راهنمای استفاده مفصل

jQuery( selector, [ context ] )

این گرامر دارای چندین استفاده است:

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

نحوه استفاده

jQuery(selector, [context]

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

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

مثال

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

由于我们已经将 span 选择器限定到 this 这个环境中,只有被点击元素中的 span 会得到附加的 class。

在内部,选择器环境是通过 .find() 方法实现的,因此 $("span", this) 等价于 $(this).find("span")。

jQuery 的核心功能都是通过这个函数实现的。jQuery中的一切都基于这个函数,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。

默认情况下, 如果没有指定 context 参数,$() 将在当前的 HTML document 中查找 DOM 元素;如果指定了 context 参数,如一个 DOM 元素集或 jQuery 对象,那就会在这个 context 中查找。在 jQuery 1.3.2 以后,其返回的元素顺序等同于在 context 中出现的先后顺序。

用法 2 :使用 DOM 元素

نحوه استفاده

jQuery(element)

该函数允许我们通过使用以其他方式找到的 DOM 元素来创建 jQuery 对象。该功能通常的用法是,对已经通过 this 关键字传递到 callback 函数的元素调用 jQuery 的方法:

مثال

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

此例会在元素被点击时使用滑动动画对其进行隐藏。由于处理程序接受的 this 关键词中的被点击项目是纯的 DOM 元素,因此在对其调用 jQuery 的方法之前,必须用 jQuery 对象包装该元素。

یہ فنکشن ایکس ایم ال ڈاٹا اور ویندو آئی دی (جبکہ وہ ڈی او ایم عناصر نہیں ہیں) کو بھی اچھا پارامتر کے طور پر قبول کرتا ہے۔

جب ایک ایکس ایم ال ڈاٹا ایک ایکجائیجی کوئنٹ میں واپس لوود ہو تو، ہم اس ڈاٹا کو جی کوئنٹ کا آئی دی کی شکل میں پیکیج کر سکتے ہیں اور جب کسی بھی چیز کا کام کئے جارہا ہے تو، ہم اس کو .find() اور دیگر ڈی او ایم تلاش کا سمت کاروغن استعمال کرسکتے ہیں تاکہ واپس لوود ہونے والی ایکس ایم ال کی کسی بھی ایک واحد عنصر کو لائی سکتے ہیں۔

استعمال 3: جی کوئنٹ کا کلون کرنا

نحوه استفاده

jQuery(جی کوئنٹ)

جب کہ آپ جی کو پارامتر کے طور پر $() فنکشن کو جی کوئئنٹ کا آئی دی کی شکل میں پرسنل کیا جائے تو اس کی ایک کاپی بنائی جائیگی۔ جیسا کہ ابتدائی آئی دی کی طرح، نئی جی کوئنٹ کا حوالہ ایک ہی ڈی او ایم عناصر کو دیتا ہے۔

استفاده 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 از یک برچسب ساده بدون ویژگی‌ها پیچیده‌تر باشد، مانند مثال بالا، فرآیند واقعی ایجاد عناصر توسط مکانیزم 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.

لطفاً توجه داشته باشید که اینترنت اکسپلورر اجازه نمی‌دهد که یک عنصر 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(){
  // دستورات آماده
});