لوگو دویکس
ورود / ثبت نام
خاصیت-ها-در-جی-کوئری

خاصیت ها در جی کوئری – jQuery Attributes

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

خاصیت ها در جی کوئری (Attributes) بسیار مهم و اساسی هستند و در بسیاری از مراحل کاری برای توسعه دهنده مورد استفاه قرار می گیرند. در این مقاله بصورت کامل و جامع به jQuery Attributes پرداخته ایم.

خاصیت ها در جی کوئری (jQuery Attributes)

برخی از اساسی ترین مؤلفه هایی که می توانیم هنگام استفاده از عناصر DOM دستکاری کنیم ، خواص و ویژگیهایی است که به این عناصر اختصاص داده شده است.

بسیاری از این ویژگی ها از طریق جاوا اسکریپت به عنوان خصوصیات گره DOM در دسترس هستند. برخی از خواص متداول:

  • نام کلاس   className       
  • برچسب نام tagName
  • شناسه id
  • لینک یا Href
  • عنوان title
  • نسبت rel
  • آدرس فایل src                      

نشانه گذاری HTML زیر را برای یک عنصر تصویر در نظر بگیرید.

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

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

جی کوئری به ما این امکان را می دهد تا بتوانیم به راحتی عناصر یک عنصر را دستکاری کنیم و به ما دسترسی می دهیم تا بتوانیم خصوصیات آن را نیز تغییر دهیم.

به دست آوردن مقدار یک ویژگی (Get Attribute Value)

از روش  attr() می توان برای بدست آوردن مقدار یک صفت از عنصر اول در مجموعه همسان استفاده کرد و یا مقادیر ویژگی را بر روی همه عناصر مطابقت تنظیم کرد.

مثال

در زیر یک مثال ساده است که عنوان را از برچسب <em> دریافت کرده و مقدار <div id = “divid”> را با همان مقدار تنظیم می کند.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            var title = $("em").attr("title");
            $("#divid").text(title);
         });
      </script>
   </head>
	
   <body>
      <div>
         <em title = "Bold and Brave">This is first paragraph.</em>
         <p id = "myid">This is second paragraph.</p>
         <div id = "divid"></div>
      </div>
   </body>
</html>

این نتیجه زیر را خواهد داد:

This is first paragraph.
This is second paragraph.

Bold and Brave

تغییر و یا تعیین مقدار یک ویژگی (Set Attribute Value)

ازروش  attr(name, value) می توان برای تعیین ویژگی مشخص شده بر روی تمام عناصر موجود در مجموعه بسته بندی شده با استفاده از مقدار عبور داده شده استفاده کرد.

مثال

در زیر مثال ساده ای است که ویژگی src یک برچسب تصویر را در یک مکان صحیح تنظیم می کند.

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.tutorialspoint.com" />
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>
	
   <body>
      <div>
         <img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
      </div>
   </body>
</html>

این نتیجه زیر را خواهد داد .

jquery-1

اضافه کردن یک کلاس با جی کوئری

از روش addClass( classes ) می توان برای استفاده از برگه های سبک تعریف شده بر روی تمام عناصر همسان استفاده کرد. می توانید چندین کلاس را که به وسیله فضا از هم جدا شده اند ، مشخص کنید.

مثال

در زیر مثال ساده ای است که ویژگی class یک برچسب para <p> را تعیین می کند.این نتیجه زیر را خواهد داد

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("em").addClass("selected");
            $("#myid").addClass("highlight");
         });
      </script>
		
      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>	
   </head>
	
   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

این نتیجه زیر را خواهد داد

This is first paragraph.

This is second paragraph.

لیست کامل متدهای ویژگی در جی کوئری (Attribute Methods)

در جدول زیر چند روش مفید وجود دارد که می توانید از آنها برای دستکاری صفات و خصوصیات استفاده کنید :

Sr.No. Methods & Description
1 attr( properties )

یک عنصر کلید / مقدار را به عنوان خصوصیات برای همه عناصر همسان تنظیم کنید.
2 attr( key, fn )

روی تمام عناصر همسان یک ویژگی واحد را روی یک مقدار محاسبه شده تنظیم کنید.
3 removeAttr( name )

یک ویژگی را از هر یک از عناصر مطابق حذف کنید.
4 hasClass( class )

اگر کلاس مشخص شده روی حداقل یکی از مجموعه عناصر همسان وجود داشته باشد ، true برمی گردد.
5 removeClass( class )

همه یا کلاس (های) مشخص شده را از مجموعه عناصر همسان حذف می کند.
6 toggleClass( class )

اگر کلاس مشخصی وجود نداشته باشد ، کلاس مشخص شده را در صورت وجود حذف می کند.
7 html( )

محتوای html (innerHTML) اولین عنصر همسان را دریافت کنید.
8 html( val )

محتوای html هر عنصر همسان را تنظیم کنید.
9 text( )

محتوای متن ترکیبی از همه عناصر همسان را دریافت کنید.
10 text( val )

محتوای متن همه عناصر همسان را تنظیم کنید.
11 val( )

مقدار ورودی اولین عنصر همسان را بدست آورید.
12 val( val )

مشخصه مقدار هر عنصر همسان را اگر در <input> فراخوانی شود تنظیم کنید اما اگر در <select> با مقدار <option> عبور داده شود فراخوانی شود سپس گزینه عبور انتخاب می شود ، اگر در کادر تأیید یا جعبه رادیو فراخوانی شود همه کادر تأیید مطابقت و radiobox علامت گذاری می شود.

مثال ها

مثالهای زیر مانند مثالهای زیر و مثالها ، شما را در استفاده از روشهای مختلف ویژگی در موقعیتهای مختلف درک می کند.

Sr.No. Selector & Description
1

$(“#myID”).attr(“custom”)

این مقدار ویژگی سفارشی برای اولین عنصر مطابق با شناسه myID است.
2

$(“img”).attr(“alt”, “Sample Image”)

با استفاده از این ویژگی ، ویژگی alt تصاویر را به مقدار جدید “تصویر نمونه” تبدیل می کند.
3

$(“input”).attr({ value: “”, title: “Please enter a value” });

مقدار همه عناصر <input> را در رشته خالی تنظیم می کند ، همچنین مثال jQuery را روی رشته تنظیم می کند لطفاً یک مقدار وارد کنید.
4

$(“a[href^=https://]”).attr(“target”,”_blank”)

همه پیوندها را با ویژگی href با https: // انتخاب می کند و ویژگی هدف خود را روی _blank تنظیم می کند.
5

$(“a”).removeAttr(“target”)

با این کار مشخصه هدف همه پیوندها حذف می شود.
6

$(“form”).submit(function() {$(“:submit”,this).attr(“disabled”, “disabled”);});

با این کار هنگام کلیک بر روی دکمه ارسال ، ویژگی غیرفعال شده به مقدار “غیرفعال” تغییر می یابد.
7

$(“p:last”).hasClass(“selected”)

اگر آخرین برچسب <p> مربوط به کلاس باشد ، این بازگشت درست است.
8

$(“p”).text()

رشته ای را که حاوی متن ترکیبی تمام عناصر <p> مطابقت دارد برمی گرداند.
9

$(“p”).text(“<i>Hello World</i>”)

با این کار “<I> سلام جهان </I>” به عنوان محتوای متن عناصر مطابق <p> تنظیم می شود.
10

$(“p”).html()

این محتوای HTML تمام پاراگرافهای منطبق را برمی گرداند.
11

$(“div”).html(“Hello World”)

این می تواند محتوای HTML همه تطبیق <div> را با Hello World تنظیم کند.
12

$(“input:checkbox:checked”).val()

اولین مقدار را از یک کادر تأیید دریافت کنید.
13

$(“input:radio[name=bar]:checked”).val()

مقدار اول را از مجموعه دکمه های رادیویی دریافت کنید.
14

$(“button”).val(“Hello”)

ویژگی مقدار هر عنصر همسان <button> را تنظیم می کند.
15

$(“input”).val(“on”)

با این کار تمام دکمه های رادیو یا جعبه چک که مقدار آنها “on” است را علامت می زنند.
16

$(“select”).val(“Orange”)

این گزینه نارنجی را در یک کادر کشویی با گزینه های نارنجی ، انبه و موز انتخاب می کند.
17

$(“select”).val(“Orange”, “Mango”)

این گزینه های نارنجی و انبه را در یک کادر کشویی با گزینه های نارنجی ، انبه و موز انتخاب می کند.

خاصیت ها در جی کوئری (Attributes) را باهم بررسی کردیم و با تمام جزییات آن آشنا شدیم ، با تمرین چند نمونه به راحتی می توانید به این موضوع مسلط شوید.

آموزش رایگان جی کوئری را در دویکس دنبال کنید.

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

میانگین رتبه : 5/5 - تعداد رای : 2