القائمة الرئيسية

الصفحات

jQuery - السمات


بعض المكونات الأساسية التي يمكننا معالجتها عندما يتعلق الأمر بعناصر DOM هي الخصائص والسمات المخصصة لتلك العناصر. تتوفر معظم هذه السمات من خلال JavaScript كخصائص عقدة DOM. بعض الخصائص الأكثر شيوعًا هي -

  • className
  • tagName
  • id
  • href
  • title
  • rel
  • src

Consider the following HTML markup for an image element −

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

في ترميز هذا العنصر ، يكون اسم العلامة هو img ، ويمثل ترميز id و src و alt و class والعنوان سمات العنصر ، والتي يتكون كل منها من اسم وقيمة. يمنحنا jQuery وسيلة للتعامل بسهولة مع سمات العنصر ويمنحنا الوصول إلى العنصر حتى نتمكن أيضًا من تغيير خصائصه.


الحصول على قيمة السمة يمكن استخدام طريقة attr () إما لجلب قيمة سمة من العنصر الأول في المجموعة المتطابقة أو لتعيين قيم السمات على جميع العناصر المتطابقة. المثال التالي هو مثال بسيط يقوم بجلب سمة العنوان لـ <em> علامة وتعيين قيمة <div id = "أقسام"> بنفس القيمة -


<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>

تعيين قيمة السمة يمكن استخدام طريقة Attr (الاسم والقيمة) لتعيين السمة المسماة على جميع العناصر في المجموعة الملتفة باستخدام القيمة التي تم تمريرها. المثال التالي هو مثال بسيط يقوم بتعيين سمة 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>

تطبيق الأنماط يمكن استخدام طريقة addClass (الفئات) لتطبيق أوراق الأنماط المحددة على جميع العناصر المتطابقة. يمكنك تحديد فئات متعددة مفصولة بمسافة. المثال التالي هو مثال بسيط يحدد سمة الفئة لعلامة 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>

طرق السمات يسرد الجدول التالي بعض الطرق المفيدة التي يمكنك استخدامها لمعالجة السمات والخصائص -

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

Set a key/value object as properties to all matched elements.

2attr( key, fn )

Set a single property to a computed value, on all matched elements.

3removeAttr( name )

Remove an attribute from each of the matched elements.

4hasClass( class )

Returns true if the specified class is present on at least one of the set of matched elements.

5removeClass( class )

Removes all or the specified class(es) from the set of matched elements.

6toggleClass( class )

Adds the specified class if it is not present, removes the specified class if it is present.

7html( )

Get the html contents (innerHTML) of the first matched element.

8html( val )

Set the html contents of every matched element.

9text( )

Get the combined text contents of all matched elements.

10text( val )

Set the text contents of all matched elements.

11val( )

Get the input value of the first matched element.

12val( val )

Set the value attribute of every matched element if it is called on <input> but if it is called on <select> with the passed <option> value then passed option would be selected, if it is called on check box or radio box then all the matching check box and radiobox would be checked.


أمثلة مشابهة لما ورد أعلاه من بناء الجملة والأمثلة ، من شأن الأمثلة التالية أن تمنحك فهمًا لاستخدام طرق السمات المختلفة في مواقف مختلفة -

Sr.No.Selector & Description
1

$("#myID").attr("custom")

This would return value of attribute custom for the first element matching with ID myID.

2

$("img").attr("alt", "Sample Image")

This sets the alt attribute of all the images to a new value "Sample Image".

3

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

Sets the value of all <input> elements to the empty string, as well as sets The jQuery Example to the string Please enter a value.

4

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

Selects all links with an href attribute starting with https:// and set its target attribute to _blank.

5

$("a").removeAttr("target")

This would remove target attribute of all the links.

6

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

This would modify the disabled attribute to the value "disabled" while clicking Submit button.

7

$("p:last").hasClass("selected")

This return true if last <p> tag has associated classselected.

8

$("p").text()

Returns string that contains the combined text contents of all matched <p> elements.

9

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

This would set "<I>Hello World</I>" as text content of the matching <p> elements.

10

$("p").html()

This returns the HTML content of the all matching paragraphs.

11

$("div").html("Hello World")

This would set the HTML content of all matching <div> to Hello World.

12

$("input:checkbox:checked").val()

Get the first value from a checked checkbox.

13

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

Get the first value from a set of radio buttons.

14

$("button").val("Hello")

Sets the value attribute of every matched element <button>.

15

$("input").val("on")

This would check all the radio or check box button whose value is "on".

16

$("select").val("Orange")

This would select Orange option in a dropdown box with options Orange, Mango and Banana.

17

$("select").val("Orange", "Mango")

This would select Orange and Mango options in a dropdown box with options Orange, Mango and Banana.

هل اعجبك الموضوع :

تعليقات