دستکاری ویژگی ها در jQuery

دسته بندی : آموزش jQuery سطح مقاله : متوسط زمان مطالعه : 5 دقیقه آخرین بروز رسانی: 12 مرداد 1401

دستکاری ویژگی ها در jQuery در این مقاله از سری مقالات آموزش جی کوئری دویکس بررسی می‌شود. jQuery در دستکاری ویژگی‌های مختلف مرتبط با عناصر HTML استفاده می‌شود. هر عنصر HTML می‌تواند ویژگی‌های استاندارد و سفارشی مختلفی داشته باشد که برای تعریف ویژگی‌های آن عنصر HTML استفاده می‌شود. جی کوئری ابزاری را در اختیار ما قرار می‌دهد تا به راحتی ویژگی‌های یک عنصر را دستکاری کنیم (Get and Set).

ویژگی های استاندارد

برخی از ویژگی‌های رایج تر عبارتند از:

className
tagName
id
href
title
rel
src
style

مثال – دستکاری ویژگی ها در jQuery

بیایید نگاهی به قطعه کد زیر برای نشانه گذاری HTML برای یک عنصر تصویر بیاندازیم:

<img id="id" src="image.gif" alt="Image" class="class" title="This is an image"/>

در نشانه گذاری این عنصر، نام تگ img است و نشانه گذاری برای id ،src ،alt ،class و title نشان دهنده ویژگی‌های عنصر است که هر کدام از یک نام و یک مقدار تشکیل شده است.

داده های سفارشی – ویژگی ها

مشخصات HTML به ما اجازه می‌دهند تا ویژگی‌های سفارشی خود را با عناصر DOM اضافه کنیم تا جزئیات بیشتری در مورد عنصر ارائه دهیم. نام این ویژگی‌ها با data- شروع می‌شود.

مثال

در زیر نمونه‌ای وجود دارد که در آن اطلاعاتی در مورد حق چاپ (copyright) تصویر با استفاده از حق چاپ داده، که یک ویژگی سفارشی است ارائه کردیم:

<img data-copyright="Tutorials Point" id="imageid" src="image.gif" alt="Image"/>

جی کوئری – دریافت ویژگی‌های استاندارد

متد attr() برای واکشی مقدار هر ویژگی استاندارد از عنصر(های) HTML منطبق استفاده می‌شود. از انتخابگرهای jQuery برای مطابقت با عنصر(های) مورد نظر استفاده می‌کنیم و سپس از متد attr() برای بدست آوردن مقدار مشخصه برای عنصر استفاده می‌کنیم.

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

مثال – دستکاری ویژگی ها در jQuery

در زیر یک برنامه jQuery برای دریافت ویژگی‌های href و title یک عنصر <a> آورده شده است:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         alert( "Href = " + $("#home").attr("href"));
         alert( "Title = " + $("#home").attr("title"));
      });
   });
</script>
</head>
<body>
   <p>Click the below button to see the result:</p>
   
   <p><a id="home" href="index.htm" title="Tutorials Point">Home</a></p>
   <button>Get Attribute</button>
</body>
</html>

جی کوئری – دریافت ویژگی‌های داده

متد data() برای واکشی مقدار هر صفت داده سفارشی از عنصر(های) HTML منطبق استفاده می‌شود. ما از انتخابگرهای jQuery برای مطابقت با عنصر(های) مورد نظر استفاده می‌کنیم و سپس از متد data() برای بدست آوردن مقدار ویژگی برای عنصر استفاده می‌کنیم.

مثال

در زیر یک برنامه jQuery برای دریافت ویژگی‌های نام نویسنده و سال یک عنصر <div> آمده است:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         alert( "Author = " + $("#home").data("author-name"));
         alert( "Year = " + $("#home").data("year"));
      });
   });
</script>
</head>
<body>
   <p>Click the below button to see the result:</p>
   
   <div id="home" data-author-name="Zara Ali" data-year="2022">
      Just an Example Content
   </div>
   <br>
   <button>Get Attribute</button>
</body>
</html>

jQuery – تنظیم ویژگی‌های استاندارد

متد attr(name, value) برای تنظیم مقدار هر ویژگی استاندارد عنصر(های) HTML منطبق استفاده می‌شود. ما از انتخابگرهای jQuery برای مطابقت با عنصر(های) مورد نظر استفاده می‌کنیم و سپس از متد attr(key, value) برای تنظیم مقدار ویژگی برای عنصر استفاده می‌کنیم. اگر انتخابگر داده شده با بیش از یک عنصر مطابقت داشته باشد، مقدار ویژگی را برای همه عناصر مطابقت داده شده تعیین می‌شود.

مثال – دستکاری ویژگی ها در jQuery

در زیر یک برنامه jQuery برای تنظیم ویژگی عنوان یک عنصر <a> آورده شده است:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("#home").attr("title", "New Anchor Title");
         
         /* Let's get and display changed title */
         alert( "Changed Title = " + $("#home").attr("title"));
      });
   });
</script>
</head>
<body>
   <p>Click the below button to see the result:</p>
   
   <p><a id="home" href="index.htm" title="Tutorials Point">Home</a></p>
   <button>Set Attribute</button>
   <p>You can hover the Home link to verify the title before and after the change.</p>
</body>
</html>

jQuery – تنظیم ویژگی‌های سفارشی

روش data(name, value) برای تنظیم مقدار هر ویژگی سفارشی عنصر(های) HTML منطبق استفاده می‌شود. ما از انتخابگرهای jQuery برای مطابقت با عنصر(های) مورد نظر استفاده می‌کنیم و سپس از متد attr(key, value) برای تنظیم مقدار ویژگی برای عنصر استفاده می‌کنیم. اگر انتخابگر داده شده با بیش از یک عنصر مطابقت داشته باشد، مقدار ویژگی را برای همه عناصر مطابقت داده شده تعیین می‌شود.

مثال

در زیر یک برنامه jQuery برای تنظیم ویژگی نام نویسنده عنصر <div> آمده است:

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("button").click(function(){
         $("#home").data("author-name", "Nuha Ali");

         /* Let's get and display changed author name */
         alert( "Changed Name = " + $("#home").data("author-name"));
      });
   });
</script>
</head>
<body>
   <p>Click the below button to see the result:</p>
   
   <div id="home" data-author-name="Zara Ali" data-year="2022">
      Just an Example Content
   </div>
   <br>
   <button>Set Attribute</button>
</body>
</html>

شما می‌توانید یک مرجع کامل از تمام روش های جی کوئری برای دستکاری محتوای CSS و HTML را در مقاله مرجع Html/Css در jQuery مشاهده کنید. مقاله دستکاری ویژگی ها در jQuery در اینجا به پایان رسید، نظرات خود را با ما به اشتراک بگذارید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊