jQuery - แอตทริบิวต์

ส่วนประกอบพื้นฐานที่สุดบางส่วนที่เราสามารถจัดการได้เมื่อพูดถึงองค์ประกอบ DOM คือคุณสมบัติและแอตทริบิวต์ที่กำหนดให้กับองค์ประกอบเหล่านั้น

แอตทริบิวต์เหล่านี้ส่วนใหญ่พร้อมใช้งานผ่าน JavaScript เป็นคุณสมบัติโหนด 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, class และ title แทนแอตทริบิวต์ขององค์ประกอบซึ่งแต่ละรายการประกอบด้วยชื่อและค่า

jQuery ช่วยให้เราสามารถจัดการกับคุณลักษณะขององค์ประกอบได้อย่างง่ายดายและช่วยให้เราสามารถเข้าถึงองค์ประกอบเพื่อให้เราสามารถเปลี่ยนคุณสมบัติได้

รับค่าคุณสมบัติ

attr() สามารถใช้วิธีการดึงค่าของแอตทริบิวต์จากองค์ประกอบแรกในชุดที่ตรงกันหรือกำหนดค่าแอตทริบิวต์ไปยังองค์ประกอบที่ตรงกันทั้งหมด

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างง่ายๆที่ดึงแอตทริบิวต์ title ของ <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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งค่าคุณสมบัติ

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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

การใช้สไตล์

addClass( classes )สามารถใช้วิธีการเพื่อใช้สไตล์ชีตที่กำหนดไว้กับองค์ประกอบที่ตรงกันทั้งหมด คุณสามารถระบุหลายคลาสโดยคั่นด้วยช่องว่าง

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างง่ายๆที่กำหนด class แอตทริบิวต์ของพารา <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>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

วิธีการระบุคุณสมบัติ

ตารางต่อไปนี้แสดงวิธีการที่มีประโยชน์บางอย่างซึ่งคุณสามารถใช้เพื่อจัดการแอตทริบิวต์และคุณสมบัติ -

ซีเนียร์	วิธีการและคำอธิบาย
1	attr (คุณสมบัติ) ตั้งค่าออบเจ็กต์คีย์ / ค่าเป็นคุณสมบัติให้กับองค์ประกอบที่ตรงกันทั้งหมด
2	attr (คีย์ fn) ตั้งค่าคุณสมบัติเดียวเป็นค่าที่คำนวณบนองค์ประกอบที่ตรงกันทั้งหมด
3	removeAttr (ชื่อ) ลบแอตทริบิวต์จากแต่ละองค์ประกอบที่ตรงกัน
4	hasClass (คลาส) ส่งคืนค่าจริงหากคลาสที่ระบุอยู่ในชุดขององค์ประกอบที่ตรงกันอย่างน้อยหนึ่งชุด
5	removeClass (คลาส) ลบคลาสทั้งหมดหรือคลาสที่ระบุออกจากชุดขององค์ประกอบที่ตรงกัน
6	toggleClass (คลาส) เพิ่มคลาสที่ระบุหากไม่มีอยู่ให้ลบคลาสที่ระบุหากมีอยู่
7	html () รับเนื้อหา html (innerHTML) ขององค์ประกอบแรกที่ตรงกัน
8	html (วาล) ตั้งค่าเนื้อหา html ของทุกองค์ประกอบที่ตรงกัน
9	ข้อความ () รับเนื้อหาข้อความรวมขององค์ประกอบที่ตรงกันทั้งหมด
10	ข้อความ (วาล) ตั้งค่าเนื้อหาข้อความขององค์ประกอบที่ตรงกันทั้งหมด
11	วาล () รับค่าอินพุตขององค์ประกอบแรกที่ตรงกัน
12	val (วาล) ตั้งค่าแอตทริบิวต์ค่าของทุกองค์ประกอบที่ตรงกันถ้ามันถูกเรียกบน <input> แต่ถ้ามันถูกเรียกบน <select> ด้วยค่า <option> ที่ผ่านจะถูกเลือกตัวเลือกที่ผ่านถ้ามันถูกเรียกในกล่องกาเครื่องหมายหรือกล่องวิทยุแล้ว จะมีการเลือกช่องทำเครื่องหมายและกล่องวิทยุที่ตรงกันทั้งหมด

ตัวอย่าง

คล้ายกับไวยากรณ์และตัวอย่างข้างต้นตัวอย่างต่อไปนี้จะช่วยให้คุณเข้าใจในการใช้วิธีการแอตทริบิวต์ต่างๆในสถานการณ์ที่แตกต่างกัน -

นี่คือรายการวิธีการแอตทริบิวต์ทั้งหมดในสถานการณ์ต่างๆ -

ซีเนียร์	ตัวเลือกและคำอธิบาย
1	$("#myID").attr("custom") สิ่งนี้จะส่งคืนค่าของแอตทริบิวต์ที่กำหนดเองสำหรับองค์ประกอบแรกที่ตรงกับ ID 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> Hello World </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") การดำเนินการนี้จะทำเครื่องหมายที่ปุ่มวิทยุหรือช่องทำเครื่องหมายทั้งหมดที่มีค่าเป็น "เปิด"
16	$("select").val("Orange") นี่จะเป็นการเลือกตัวเลือก Orange ในกล่องแบบเลื่อนลงที่มีตัวเลือกส้มมะม่วงและกล้วย
17	$("select").val("Orange", "Mango") นี่จะเป็นการเลือกตัวเลือก Orange และ Mango ในกล่องแบบเลื่อนลงที่มีตัวเลือก Orange, Mango และ Banana