متدهای پرکاربرد دیگر

متدهای noConflict، data، clone، index و متدهای کاربردی دیگر

متد noConflict()

برخی کتابخانه‌ها (مثل Prototype) هم از علامت $ استفاده می‌کنند. متد noConflict() کنترل $ را آزاد می‌کند تا تداخل پیش نیاید:

// آزاد کردن $
$.noConflict();

// حالا باید از jQuery کامل استفاده کنید
jQuery(document).ready(function() {
    jQuery("button").click(function() {
        jQuery("p").text("jQuery هنوز کار می‌کند!");
    });
});

// یا با نام مستعار دلخواه
var jq = $.noConflict();
jq(document).ready(function() {
    jq("p").hide();
});

متد data(): ذخیره داده روی عنصر

متد data() اجازه می‌دهد داده دلخواه را روی عنصر ذخیره و بخوانید — بدون نیاز به متغیر سراسری:

// ذخیره داده
$("#product").data("price", 250000);
$("#product").data("name", "کتاب jQuery");

// خواندن داده
var price = $("#product").data("price");
console.log(price);  // 250000

// خواندن از data-attribute های HTML
// <div id="user" data-user-id="42" data-role="admin"></div>
var userId = $("#user").data("userId");   // 42
var role = $("#user").data("role");       // "admin"

// حذف داده
$("#product").removeData("price");
ترکیب data-* در HTML با متد .data() در jQuery الگوی بسیار رایجی است: اطلاعات هر عنصر را در HTML همان عنصر نگه دارید و در جاوااسکریپت بخوانید.

متد clone(): کپی کردن عنصر

// کپی عنصر (بدون رویدادها)
var $copy = $("#original").clone();
$("#target").append($copy);

// کپی با رویدادها و داده‌ها
$("#original").clone(true, true).appendTo("#target");

متد index(): موقعیت عنصر

// ایندکس عنصر بین خواهربرادرهاش
var idx = $("li.active").index();
console.log("موقعیت: " + idx);

// ایندکس نسبت به مجموعه
var idx2 = $("li").index($("#special"));

متد is(): بررسی وضعیت

// بررسی کلاس
if ($(this).is(".active")) { ... }

// بررسی حالت مخفی بودن
if ($("#panel").is(":hidden")) { ... }

// بررسی تیک خوردن
if ($("#agree").is(":checked")) { ... }

متدهای آرایه‌ای کاربردی

// grep: فیلتر آرایه
var numbers = [1, 5, 10, 15, 20];
var big = $.grep(numbers, function(n) { return n > 9; });
// نتیجه: [10, 15, 20]

// inArray: جست‌وجو در آرایه
var pos = $.inArray(10, numbers);  // 2 (ایندکس)

// merge: ادغام دو آرایه
var combined = $.merge([1, 2], [3, 4]);  // [1, 2, 3, 4]

// makeArray: تبدیل به آرایه واقعی
var arr = $.makeArray(document.getElementsByTagName("p"));

متد delay(): مکث در صف انیمیشن

// مکث ۱ ثانیه بین انیمیشن‌ها
$("#box").slideUp(400)
         .delay(1000)
         .slideDown(400);

جمع‌بندی

این مبحث بخشی از دوره آموزش کامل jQuery است.

ابزارهای مرتبط