เมื่อเทียบกับ Atter เสาใหม่ใน 1.6.1 ทั้งสองเข้าใจจากความหมายของจีนและเป็นวิธีการรับ/ตั้งค่าแอตทริบิวต์ (แอตทริบิวต์และคุณสมบัติ) เป็นเพียงการใช้วิธี. attr () ในหน้าต่างหรือเอกสารไม่สามารถทำงานได้ตามปกติก่อน jQuery 1.6 เนื่องจากไม่สามารถมีแอตทริบิวต์ในหน้าต่างและเอกสาร เสาเข้ามา
เนื่องจากเราต้องการทราบความแตกต่างระหว่างพวกเขาจึงเป็นการดีที่สุดที่จะดูซอร์สโค้ดของพวกเขาและไม่กลัวความยาวของรหัส ลองดูที่ประโยคสำคัญเท่านั้น:
attr: ฟังก์ชั่น (elem, ชื่อ, ค่า, ผ่าน) {var ret, hooks, notxml, ntype = elem.nodeType; // อย่าได้รับ/ตั้งค่าแอตทริบิวต์บนข้อความความคิดเห็นและโหนดแอตทริบิวต์ถ้า (! elem || ntype === 3 || ntype === 8 || ntype === 2) {return; } if (pass && jQuery.isfunction (jQuery.fn [ชื่อ])) {return jQuery (elem) [ชื่อ] (ค่า); } // ทางเลือกกลับไปยังเสาเมื่อไม่รองรับแอตทริบิวต์หาก (typeof elem.getAttribute === "undefined") {return jQuery.prop (elem, ชื่อ, ค่า); } notxml = ntype! == 1 || ! jQuery.isxmldoc (elem); // แอตทริบิวต์ทั้งหมดเป็นตัวพิมพ์เล็ก // คว้าตะขอที่จำเป็นหากมีการกำหนดไว้ถ้า (NOTXML) {name = name.ToLowerCase (); hooks = jQuery.attrhooks [ชื่อ] || (rboolean.test (ชื่อ)? boolhook: nodehook); } if (value! == undefined) {if (value === null) {jQuery.RemoveAtTr (elem, ชื่อ); กลับ; } อื่นถ้า (hooks && "set" ใน hooks && notxml && (ret = hooks.set (elem, value, name))! == undefined) {return return; } else {elem.setAttribute (ชื่อ, ค่า + ""); ค่าส่งคืน; }} อื่นถ้า (hooks && "get" ใน hooks && notxml && (ret = hooks.get (elem, name))! == null) {return ret; } else {ret = elem.getAttribute (ชื่อ); // แอตทริบิวต์ที่ไม่มีอยู่จริงส่งคืน null เราทำให้ปกติเป็น return ret reto ret === null? ไม่ได้กำหนด: ret; -รหัสวิธีการ (jQuery เวอร์ชัน 1.8.3)
Prop: ฟังก์ชั่น (elem, ชื่อ, ค่า) {var ret, hooks, notxml, ntype = elem.nodeType; // อย่าได้รับ/ตั้งค่าคุณสมบัติบนข้อความความคิดเห็นและโหนดแอตทริบิวต์ถ้า (! elem || ntype === 3 || ntype === 8 || ntype === 2) {return; } notxml = ntype! == 1 || ! jQuery.isxmldoc (elem); if (notxml) {// แก้ไขชื่อและแนบ hooks name = jQuery.propfix [ชื่อ] || ชื่อ; hooks = jQuery.prophooks [ชื่อ]; } if (value! == undefined) {ถ้า (hooks && "set" ใน hooks && (ret = hooks.set (elem, value, ชื่อ))! == undefined) {return ret; } else {return (elem [name] = value); }} else {ถ้า (hooks && "get" ใน hooks && (ret = hooks.get (elem, name))! == null) {return ret; } else {return elem [ชื่อ]; -ในวิธี Attt สองบรรทัดที่สำคัญที่สุดของรหัส Elem.setAttribute (ชื่อ, value + "") และ ret = elem.getAttribute (ชื่อ) เป็นที่ชัดเจนว่าวิธี DOM API SetAttribute และ GetAttribute ที่ดำเนินการโดยโหนดองค์ประกอบแอตทริบิวต์
ในวิธี Prop สองบรรทัดที่สำคัญที่สุดของรหัส, return (elem [name] = value) และ return elem [ชื่อ] คุณสามารถเข้าใจได้ว่าเป็น document.getElementById (EL) [ชื่อ] = ค่าซึ่งเป็นคุณสมบัติที่แปลงเป็นวัตถุ JS
เนื่องจากเราเข้าใจหลักการลองมาดูตัวอย่าง:
<อินพุต type = "ช่องทำเครื่องหมาย" id = "ทดสอบ" abc = "111" />
$ (function () {el = $ ("#test"); console.log (el.attr ("style")); // console.log ที่ไม่ได้กำหนด (el.prop ("style")); // cssstyledeclaration Object.log (document.getElementByIdid (El.attr ("Style") เอาต์พุตที่ไม่ได้กำหนดเนื่องจาก ATTR เป็นค่าของโหนดแอตทริบิวต์วัตถุที่ได้รับ เห็นได้ชัดว่าไม่มีโหนดแอตทริบิวต์ในเวลานี้ดังนั้นเอาต์พุตตามธรรมชาติจะไม่ได้กำหนด
el.prop ("สไตล์") ส่งออกวัตถุ csstyledeclaration สำหรับวัตถุ DOM มันมีแอตทริบิวต์วัตถุสไตล์ดั้งเดิมดังนั้นวัตถุสไตล์จึงเป็นเอาต์พุต
สำหรับ document.getElementById ("ทดสอบ") สไตล์เหมือนกับข้างบน
ดูต่อไป:
El.attr ("ABC", "111") console.log (el.attr ("ABC")); // 111 console.log (el.prop ("abc")); // ไม่ได้กำหนดขั้นแรกให้ใช้วิธี ATTT เพื่อเพิ่มแอตทริบิวต์ ABC Node ในวัตถุนี้ด้วยค่า 111 คุณจะเห็นว่าโครงสร้างของ HTML มีการเปลี่ยนแปลงเช่นกัน
El.attr ("ABC") เอาท์พุทคือ 111 ซึ่งเป็นเรื่องปกติ
El.Prop ("ABC") เอาท์พุทที่ไม่ได้กำหนดเนื่องจาก ABC อยู่ในโหนดคุณสมบัตินี้ดังนั้นจึงไม่สามารถเรียกคืนได้ผ่านเสา
El.Prop ("ABC", "222"); console.log (el.attr ("ABC")); // 111 console.log (el.prop ("abc")); // 222จากนั้นเราตั้งค่าแอตทริบิวต์ ABC สำหรับวัตถุนี้โดยใช้วิธี Prop ด้วยค่า 222 คุณจะเห็นว่าโครงสร้างของ HTML ไม่เปลี่ยนแปลง ผลลัพธ์ผลลัพธ์จะไม่ถูกอธิบาย
ข้างต้นได้อธิบายหลักการอย่างชัดเจนและคุณสามารถเข้าใจสิ่งที่คุณใช้ตัวเอง
มีการกล่าวถึงว่าเมื่อคุณพบคุณสมบัติเช่นการตรวจสอบการเลือกอ่านอย่างเดียวและปิดการใช้งานจะเป็นการดีกว่าที่จะใช้วิธี Prop เช่นสิ่งต่อไปนี้:
<อินพุต type = "ช่องทำเครื่องหมาย" id = "ทดสอบ" ตรวจสอบ = "ตรวจสอบ" />
console.log (el.attr ("ตรวจสอบ")); // ตรวจสอบ console.log (el.prop ("ตรวจสอบ")); // จริง console.log (el.attr ("ปิดใช้งาน")); // undefined console.log (el.prop ("ปิดใช้งาน")); //เท็จเห็นได้ชัดว่าค่าบูลีนทำให้การประมวลผลครั้งต่อไปมีเหตุผลมากกว่าค่าสตริง
ป.ล. หากคุณมีความสะอาดประสิทธิภาพของ JS เห็นได้ชัดว่าประสิทธิภาพของเสาจะสูงขึ้นเนื่องจาก ATTR จำเป็นต้องเข้าถึงโหนดแอตทริบิวต์ DOM การเข้าถึง DOM นั้นใช้เวลามากที่สุด สถานการณ์นี้ใช้กับหลายตัวเลือกและสถานการณ์ที่ไม่ได้เลือก
ทุกคนรู้ว่าเบราว์เซอร์บางตัวต้องเขียนและตรวจสอบในขณะที่คนอื่น ๆ ต้องเขียน disabled = "ปิดใช้งาน" ตรวจสอบ = "ตรวจสอบ" ตัวอย่างเช่นเมื่อใช้ attr ("ตรวจสอบ") เพื่อรับคุณสมบัติที่ตรวจสอบของช่องทำเครื่องหมายคุณสามารถรับค่าเมื่อคุณเลือก ค่าคือ "ตรวจสอบ" แต่ถ้าคุณไม่ได้เลือกมันจะไม่ได้กำหนด
JQ จัดเตรียมวิธีการใหม่ "prop" เพื่อให้ได้คุณสมบัติเหล่านี้ซึ่งคือการแก้ปัญหานี้ ในอดีตเราใช้ ATTR เพื่อรับคุณสมบัติที่ตรวจสอบและส่งคืน "ตรวจสอบ" และ "" แต่ตอนนี้เราใช้วิธี POP เพื่อรับคุณสมบัติและส่งคืนจริงและเท็จ
ดังนั้นเมื่อใดควรใช้ attr () และเมื่อใดควรใช้ prop ()?
1. เพิ่มชื่อแอตทริบิวต์ แอตทริบิวต์นี้จะมีผล คุณควรใช้ prop ();
2. มีคุณสมบัติสองประการที่มีการใช้งานจริงและเท็จ prop ();
3. ใช้ attr () สำหรับผู้อื่น;
ทุกคนควรให้ความสนใจกับสิ่งนี้เมื่ออัพเกรด jQuery ในโครงการ!
ต่อไปนี้เป็นคำแนะนำอย่างเป็นทางการสำหรับการใช้ attr () และ prop ():
ต่อไปนี้เป็นคำแนะนำอย่างเป็นทางการสำหรับการใช้ attr () และ prop ():