บันทึกหน้านี้เพื่อทดสอบตัวอย่างด้านล่าง
ไลบรารี jQuery มีวิธีการพิเศษที่สะดวกสบายจำนวนหนึ่งที่ช่วยให้ทำงานด้วยได้ สไตล์ CSS- หนึ่งในวิธีการที่ใช้กันอย่างแพร่หลายประเภทนี้คือ วิธีการใช้ CSS(), คำอธิบายสั้น ๆซึ่งแสดงไว้ในตารางด้านล่าง:
เมื่อคุณอ่านค่าคุณสมบัติโดยใช้เมธอด css() คุณจะได้รับค่าคุณสมบัติที่องค์ประกอบแรกที่มีอยู่ในวัตถุ jQuery มี ในเวลาเดียวกัน เมื่อคุณตั้งค่าคุณสมบัติ การเปลี่ยนแปลงที่คุณทำจะถูกนำไปใช้กับองค์ประกอบทั้งหมดของชุด ตัวอย่างของการใช้ CSS() วิธีการที่ง่ายที่สุดมีดังต่อไปนี้:
$(function() ( var sizeVal = $("label").css("font-size"); console.log("ขนาดตัวอักษร: " + sizeVal); $("label").css("font- ขนาด", "1.5em"); ));
ในสคริปต์นี้ เราเลือกองค์ประกอบป้ายกำกับทั้งหมด รับค่าของคุณสมบัติขนาดแบบอักษรโดยใช้เมธอด css() และพิมพ์ลงในคอนโซล จากนั้นเราเลือกองค์ประกอบป้ายกำกับทั้งหมดอีกครั้ง และกำหนดค่าใหม่ของคุณสมบัติเดียวกันให้กับองค์ประกอบทั้งหมด
แม้ว่าสคริปต์จะใช้ชื่อจริงของคุณสมบัติ (ขนาดแบบอักษร) และไม่ใช่รูปแบบที่คำนึงถึงขนาดตัวพิมพ์ เช่น แบบฟอร์มรายการที่คุณสมบัตินี้ถูกกำหนดไว้ในวัตถุ HTMLElement (คุณสมบัติ FontSize) ก็ได้รับการยอมรับอย่างถูกต้องเช่นกัน เนื่องจาก jQuery รองรับทั้งสองตัวเลือก
จากการรันสคริปต์นี้ ผลลัพธ์ต่อไปนี้จะแสดงบนคอนโซล:
การตั้งค่าคุณสมบัติเป็นสตริงว่าง ("") เทียบเท่ากับการลบคุณสมบัตินั้นออกจากแอตทริบิวต์ style ขององค์ประกอบ
การตั้งค่าคุณสมบัติ CSS หลายรายการพร้อมกัน
มีสองวิธีในการตั้งค่าคุณสมบัติ CSS หลายรายการพร้อมกัน วิธีแรกคือการสร้างสายโซ่ของการเรียกเมธอด css() ดังที่แสดงด้านล่าง:
$(function() ( $("label").css("font-size", "1.5em").css("color", "blue"); ));
สคริปต์นี้ตั้งค่าคุณสมบัติขนาดตัวอักษรและสี คุณสามารถบรรลุเอฟเฟกต์เดียวกันนี้ได้โดยใช้วัตถุแสดงผล ดังที่แสดงในตัวอย่างด้านล่าง:
$(function() ( var cssVals = ( "font-size": "1.5em", "color": "blue" ); $("label").css(cssVals); ));
ทั้งสองสถานการณ์นำไปสู่ผลลัพธ์เดียวกัน ดังแสดงในรูป:
การตั้งค่าสัมพัทธ์
เมธอด css() ยังสามารถรับค่าสัมพัทธ์เป็นอาร์กิวเมนต์ได้ด้วย เป็นค่าตัวเลขที่นำหน้าด้วยเครื่องหมาย += และ -= และบวกหรือลบออกจากค่าปัจจุบัน เทคนิคนี้สามารถใช้ได้กับค่าตัวเลขเท่านั้น ตัวอย่างที่เกี่ยวข้องได้รับด้านล่าง:
$(function() ( $("label:odd").css("font-size", "+=5") $("label:even").css("font-size", "-=5) ") ));
ค่าสัมพัทธ์จะแสดงในหน่วยเดียวกับค่าคุณสมบัติ ในกรณีนี้ ขนาดแบบอักษรจะเพิ่มขึ้น 5 พิกเซลสำหรับองค์ประกอบป้ายกำกับคี่ และลดลงด้วยจำนวนเท่ากันสำหรับองค์ประกอบป้ายกำกับคู่ ผลลัพธ์จะแสดงในรูป:
การตั้งค่าคุณสมบัติโดยใช้ฟังก์ชัน
คุณสามารถตั้งค่าคุณสมบัติแบบไดนามิกโดยส่งฟังก์ชันไปยังเมธอด css() ตัวอย่างที่เกี่ยวข้องได้รับด้านล่าง:
$(function() ( $("label").css("border", function(index, currentValue) ( if ($(this).closest("#row1").length > 0) ( return " สีแดงทึบหนา"; ) else if (ดัชนี % 2 == 1) ( return "thick double blue"; ) )); ));
อาร์กิวเมนต์ที่ส่งผ่านไปยังฟังก์ชันคือดัชนีขององค์ประกอบในชุดและค่าปัจจุบันของคุณสมบัติ ตัวแปรนี้อ้างอิงถึงออบเจ็กต์ HTMLElement ที่สอดคล้องกับองค์ประกอบ และฟังก์ชันจะส่งกลับค่าที่จะตั้งค่า
ใช้วิธีการพิเศษในการทำงานกับคุณสมบัติ CSS
นอกเหนือจากเมธอด css() แล้ว jQuery ยังกำหนดวิธีการพิเศษอีกหลายวิธีในการรับหรือตั้งค่าของคุณสมบัติเฉพาะ รายการวิธีการเหล่านี้แสดงไว้ในตารางด้านล่าง:
| วิธี | คำอธิบาย |
|---|---|
| ความสูง() | ส่งกลับความสูง (เป็นพิกเซล) ขององค์ประกอบแรกที่มีอยู่ในวัตถุ jQuery |
| ความสูง(ค่า) | กำหนดความสูงขององค์ประกอบทั้งหมดที่มีอยู่ในวัตถุ jQuery |
| ความสูงภายใน() | ส่งกลับความสูงที่แท้จริง (นั่นคือความสูงขององค์ประกอบ รวมถึงช่องว่างภายใน แต่ไม่รวมเส้นขอบและระยะขอบ) ขององค์ประกอบแรกที่มีอยู่ในวัตถุ jQuery |
| ความกว้างภายใน() | ส่งกลับความกว้างที่แท้จริง (นั่นคือความกว้างขององค์ประกอบ รวมถึงช่องว่างภายใน แต่ไม่รวมเส้นขอบและระยะขอบ) ขององค์ประกอบแรกที่มีอยู่ในวัตถุ jQuery |
| ชดเชย() | ส่งกลับพิกัดขององค์ประกอบแรกที่มีอยู่ในวัตถุ jQuery สัมพันธ์กับจุดเริ่มต้นของเอกสาร |
| ความสูงด้านนอก (boolean_value) | ส่งกลับความสูงขององค์ประกอบแรกที่มีอยู่ในวัตถุ jQuery รวมทั้งช่องว่างภายในและเส้นขอบ อาร์กิวเมนต์กำหนดว่าควรคำนึงถึงขนาดของฟิลด์ในกรณีนี้หรือไม่ |
| ด้านนอกกว้าง (boolean_value) | รับความกว้างขององค์ประกอบแรกที่มีอยู่ในวัตถุ jQuery รวมถึงช่องว่างภายในและเส้นขอบ อาร์กิวเมนต์กำหนดว่าควรคำนึงถึงขนาดของฟิลด์ในกรณีนี้หรือไม่ |
| ตำแหน่ง() | ส่งกลับพิกัดขององค์ประกอบแรกที่มีอยู่ในวัตถุ jQuery สัมพันธ์กับองค์ประกอบนั้น องค์ประกอบหลักซึ่งมีการระบุประเภทตำแหน่งไว้ |
| scrollLeft(), scrollTop() | รับค่าเลื่อนด้านซ้ายหรือด้านบนสำหรับองค์ประกอบแรกที่มีอยู่ในวัตถุ jQuery |
| scrollLeft (ค่า), scrollTop (ค่า) | ตั้งค่าการเลื่อนเลื่อนด้านซ้ายหรือด้านบนสำหรับองค์ประกอบทั้งหมดที่มีอยู่ในวัตถุ jQuery |
| ความกว้าง() | รับความกว้างขององค์ประกอบแรกที่มีอยู่ในวัตถุ jQuery |
| ความกว้าง(ค่า) | กำหนดความกว้างสำหรับองค์ประกอบทั้งหมดที่มีอยู่ในวัตถุ jQuery |
| ความสูง(ฟังก์ชัน) ความกว้าง(ฟังก์ชัน) | ตั้งค่าความสูงหรือความกว้างขององค์ประกอบทั้งหมดที่มีอยู่ในวัตถุ jQuery โดยใช้ฟังก์ชัน |
ชื่อของวิธีการเหล่านี้ส่วนใหญ่อธิบายได้ในตัว แต่บางวิธีจำเป็นต้องมีคำอธิบายเพิ่มเติม วิธีการ ชดเชย()และ ตำแหน่ง()คืนวัตถุที่มีคุณสมบัติ สูงสุดและ ซ้ายซึ่งระบุตำแหน่งขององค์ประกอบ ตัวอย่างการใช้ตำแหน่ง () วิธีการได้รับด้านล่าง
ลองดูการเพิ่มคุณสมบัติโดยใช้ตัวอย่างบางส่วน ซีเอสเอสไปยังหน้าเว็บไซต์โดยใช้ jQuery- มาดูข้อดีข้อเสียของสองวิธีหลักในการเปลี่ยนสไตล์บนเพจกัน
หากต้องการเปลี่ยนการตั้งค่าเนื้อหาของหน้าโดยใช้ไลบรารี jQuery จาวาสคริปต์คุณสามารถใช้สองวิธี:
1. การเปลี่ยนแปลงคุณสมบัติส่วนบุคคล
มาเปลี่ยนองค์ประกอบด้วยคุณสมบัติกัน คลาสหนึ่งและ .คลาสสองเมื่อวางเมาส์เหนือองค์ประกอบที่มีคลาส .เว็บไซต์.
$(".ไซต์"). เมาส์โอเวอร์(ฟังก์ชั่น()( $(".class-one, .class-two") . css ("ความกว้าง" , "30%" ) ; $(".class-one, .class-two") . css("ความสูง", "240px"); } ) ; |
การเปลี่ยนชั้นเรียน
วิธีนี้เป็นวิธีที่ดีกว่าและสะดวกกว่าหากคุณต้องการเปลี่ยนคุณสมบัติต่างๆ มากมายโดยใช้ jQuery หากคุณสมบัติทั้งหมดนี้เขียนอยู่ใน ไฟล์ .jsจากนั้นคุณจะสามารถทำให้การอ่านและความเข้าใจโค้ดทั้งหมดซับซ้อนขึ้นได้อย่างมาก เป็นการดีกว่าถ้าเขียนสไตล์ทั้งหมดในไฟล์ CSS และใช้ jQuery เพื่อเปลี่ยนแปลง
เมื่อมีเหตุการณ์เกิดขึ้นเราจะเปลี่ยนรูปแบบ .คลาส-หนึ่งในรูปแบบ .คลาสหนึ่ง .คลาสสอง:
$(".ไซต์"). บน ("mouseover mousemove" , ฟังก์ชั่น () ( $(".คลาสหนึ่ง"). ลบคลาส() addClass("คลาสหนึ่งคลาสสอง"); } ) ; |
หากคุณดูโค้ดด้านบนอย่างละเอียด คุณอาจสงสัยว่าทำไมเราจึงลบคลาสออก คลาสหนึ่งแล้วเราก็คืนมันพร้อมกับอีกอัน
นี่เป็นสิ่งจำเป็นเนื่องจากมีการตัดสินใจในรหัสนี้ .คลาส-หนึ่งใช้เป็น "ทางลัด" เพื่อให้ในอนาคตคุณสามารถประมวลผลองค์ประกอบนี้ได้โดยไม่ต้องจดจำว่ามีคลาสใหม่อะไรบ้าง
ส่งคืนหรือเปลี่ยนแปลงค่า CSS ขององค์ประกอบของหน้าที่เลือก ฟังก์ชั่นนี้มีการใช้งานสี่อย่าง:
ส่งกลับค่า CSS สไตล์ชื่อที่องค์ประกอบที่เลือก หากเลือกหลายองค์ประกอบ ค่าจะถูกนำมาจากองค์ประกอบแรก
CSS-ค่า สไตล์ชื่อจะได้รับการกำหนดค่า ค่าสำหรับองค์ประกอบที่เลือกทั้งหมด
กลุ่มของค่า CSS styleName1, styleName2, ...จะได้รับการกำหนดค่า ค่า1, ค่า2, ...สำหรับองค์ประกอบที่เลือกทั้งหมด
CSS-ค่า สไตล์ชื่อจะได้รับการกำหนดค่าที่ส่งคืนโดยฟังก์ชันที่ผู้ใช้กำหนด ฟังก์ชันนี้ถูกเรียกแยกกันสำหรับแต่ละองค์ประกอบที่เลือก เมื่อเรียก พารามิเตอร์ต่อไปนี้จะถูกส่งไป: ดัชนี— ตำแหน่งขององค์ประกอบในชุด ค่า— ค่าปัจจุบันของค่า CSS สไตล์ชื่อที่องค์ประกอบ
ตัวอย่างการใช้งาน:
ความคิดเห็น: สิ่งสำคัญที่ควรทราบคือการใช้เมธอด .css(styleName) คุณจะได้รับเฉพาะค่า css ขององค์ประกอบแรกจากองค์ประกอบที่เลือกทั้งหมด หากคุณต้องการค่าขององค์ประกอบทั้งหมด คุณควรใช้โครงสร้างเช่น .map() หรือ .each()
ในการดำเนินการ
เรามาค้นหาโลกบ้านเกิดของเราในรายการดาวเคราะห์และไฮไลต์เป็นสีเขียว:
~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-latest.js"~gt~~ lt~/script~gt~ ~lt~style~gt~ #list( width:260px; ) .item( width: 250px; height: 20px; float: left; margin: 1px; padding: 3px; สีพื้นหลัง: # EEEEEE; list-style-type:none; ) ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~ul id = "รายการ"~gt~ ~lt~li class="item"~gt~Mercury~lt~/li ~gt~ ~lt~li class="item"~gt~Venus~lt~/li ~gt~ ~lt~li class="item"~gt~ Earth~lt~/li ~gt~ ~lt~li class="item"~gt~Mars~lt~/li ~gt~ ~lt~li class="item"~gt~Jupiter~lt~/li ~gt ~ ~lt~li class="item"~gt~Satrurn~lt~/li ~gt~ ~lt~li class="item"~gt~Uranus~lt~/li ~gt~ ~lt~li class=" รายการ"~gt~ดาวเนปจูน~lt~/li ~gt~ ~lt~li class="item"~gt~Pluto~lt~/li ~gt~ ~lt~/ul~gt~ ~lt~script~gt~ $("#list .item").css("พื้นหลัง-สี", function(i,val)( if($(this).text() == "Ground") return "#cceecc"; else return val ; )); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~
ไลบรารี jQuery ช่วยให้คุณสามารถจัดการคุณสมบัติและคุณลักษณะขององค์ประกอบของชุดที่ห่อได้โดยการเปลี่ยนค่าดั้งเดิม คุณสามารถตั้งค่าคุณสมบัติใหม่และรับและเปลี่ยนแปลงค่าของคุณสมบัติดั้งเดิมได้ คุณสามารถเปลี่ยนรูปแบบการแสดงผลขององค์ประกอบแบบไดนามิกได้โดยการลบหรือเพิ่มคลาส
การจัดการคุณสมบัติและคุณลักษณะขององค์ประกอบ
1. การเพิ่มและการลบคลาส
1.1. Method.addClass()
เพิ่มคลาสที่ระบุ (หรือหลายคลาส) ให้กับแต่ละองค์ประกอบของชุดที่ห่อ เพื่อให้วิธีนี้ใช้งานได้ คุณต้องสร้างสไตล์สำหรับคลาสที่เพิ่มก่อน วิธีการนี้ไม่ได้ลบคลาสเก่าออก แต่เพียงเพิ่มคลาสใหม่เข้าไป
AddClass(ชื่อคลาส) ชื่อชั้นเรียน— ชื่อคลาสตั้งแต่หนึ่งชื่อขึ้นไป คั่นด้วยช่องว่าง .addClass(ฟังก์ชัน)การทำงาน - ส่งคืนชื่อคลาสตั้งแต่หนึ่งชื่อขึ้นไป โดยคั่นด้วยช่องว่าง เพื่อนำไปต่อท้ายชื่อคลาสที่มีอยู่ รับดัชนีขององค์ประกอบในชุดเป็นอาร์กิวเมนต์และชื่อที่มีอยู่
คลาส (es)
1.2. Method.removeClass()
ลบชื่อคลาสที่ระบุออกจากองค์ประกอบทั้งหมดของชุดที่ห่อ ชื่อชั้นเรียน RemoveClass(ชื่อคลาส) .addClass(ฟังก์ชัน)— พารามิเตอร์ทางเลือก ชื่อคลาสอย่างน้อยหนึ่งชื่อคั่นด้วยช่องว่าง หากไม่ได้ระบุชื่อคลาส วิธีการลบคลาสที่มีอยู่ทั้งหมดออกจากองค์ประกอบของชุด หากมีการระบุชื่อคลาส ให้ลบเฉพาะคลาสที่ระบุ
.removeClass(ฟังก์ชัน)
- ส่งคืนชื่อคลาสอย่างน้อยหนึ่งชื่อโดยคั่นด้วยช่องว่างเพื่อลบออกจากชื่อที่มีอยู่ ใช้เป็นอาร์กิวเมนต์ดัชนีขององค์ประกอบในชุดและชื่อเก่าของคลาส
1.3. Method.toggleClass() ชื่อชั้นเรียนเพิ่มหรือลบคลาสตั้งแต่หนึ่งคลาสขึ้นไปออกจากแต่ละองค์ประกอบในชุด แต่ละองค์ประกอบของชุดที่ห่อจะถูกตรวจสอบแยกกัน วิธีการเพิ่มชื่อคลาสที่ระบุหากไม่มีอยู่ในองค์ประกอบ และลบออกจากองค์ประกอบที่มีอยู่ ใช้เพื่อสลับการแสดงภาพองค์ประกอบต่างๆ ชื่อชั้นเรียน ToggleClass(ชื่อคลาส) - ชื่อคลาสตั้งแต่หนึ่งชื่อขึ้นไป คั่นด้วยช่องว่าง ซึ่งจะถูกสลับสำหรับแต่ละองค์ประกอบของชุด.toggleClass(ชื่อคลาส, บูลีน) - ชื่อคลาสตั้งแต่หนึ่งชื่อขึ้นไป คั่นด้วยช่องว่าง ซึ่งจะถูกสลับสำหรับแต่ละองค์ประกอบของชุด- ชื่อคลาสตั้งแต่หนึ่งชื่อขึ้นไป คั่นด้วยช่องว่าง ซึ่งจะถูกสลับสำหรับแต่ละองค์ประกอบของชุด .addClass(ฟังก์ชัน)ค่าบูลีน - ชื่อคลาสตั้งแต่หนึ่งชื่อขึ้นไป คั่นด้วยช่องว่าง ซึ่งจะถูกสลับสำหรับแต่ละองค์ประกอบของชุด— ติดตั้ง เพิ่ม หรือลบคลาสที่ระบุ True เพิ่มคลาส false ลบคลาสออก
.toggleClass(บูลีน)
— พารามิเตอร์ทางเลือก กำหนดว่าจะสลับคลาสของแต่ละองค์ประกอบของชุดหรือไม่ .toggleClass(ฟังก์ชัน, บูลีน)คลาสสำหรับองค์ประกอบอย่างน้อยหนึ่งรายการในชุดที่เกี่ยวข้อง คืนค่าเป็นจริงหากองค์ประกอบอย่างน้อยหนึ่งรายการในชุดมีชื่อคลาสที่ถูกต้อง มิฉะนั้นจะคืนค่าเป็นเท็จ
HasClass(ชื่อคลาส) ชื่อชั้นเรียน— สตริงที่มีชื่อของคลาสที่ต้องการค้นหา
2. การเปลี่ยนคุณสมบัติขององค์ประกอบ
วิธีการรับค่าแอตทริบิวต์ขององค์ประกอบแรกของชุดหรือตั้งค่าแอตทริบิวต์ตั้งแต่หนึ่งค่าขึ้นไปสำหรับองค์ประกอบของชุด
2.1. วิธีการ.attr()
.attr(ชื่อแอตทริบิวต์) ชื่อแอตทริบิวต์- ส่งกลับค่าแอตทริบิวต์ขององค์ประกอบแรกในชุดที่ห่อ หากแอตทริบิวต์หายไปจะส่งกลับไม่ได้กำหนด ชื่อแอตทริบิวต์ .attr(ชื่อแอตทริบิวต์, ค่า)ความหมาย - สตริงหรือตัวเลขที่จะถูกเพิ่มเป็นค่าแอตทริบิวต์สำหรับองค์ประกอบทั้งหมดของชุดที่ห่อ.attr (คุณสมบัติ) ชื่อแอตทริบิวต์คุณลักษณะ .addClass(ฟังก์ชัน)- ค่าที่คัดลอกมาจากคุณสมบัติของวัตถุจะถูกตั้งค่าสำหรับองค์ประกอบทั้งหมดของชุดที่ห่อ.attr(ชื่อแอตทริบิวต์, ฟังก์ชัน)
— ระบุชื่อของแอตทริบิวต์ที่จะตั้งค่าที่ระบุ
— ใช้เป็นข้อโต้แย้งดัชนีขององค์ประกอบในชุดและค่าเก่าของแอตทริบิวต์ ค่าที่ส่งคืนจะถูกตั้งค่าเป็นค่าของแอตทริบิวต์ ชื่อแอตทริบิวต์ 2.2. Method.removeAttr()
ลบแอตทริบิวต์ที่ระบุออกจากแต่ละองค์ประกอบของชุดที่ห่อ
RemoveAttr(ชื่อแอตทริบิวต์)
— สตริงที่กำหนดแอตทริบิวต์ที่จะถูกลบ
3. การเปลี่ยนแปลงคุณสมบัติขององค์ประกอบ 3.1. วิธีการ.css()ส่งกลับค่าที่คำนวณได้ของคุณสมบัติสไตล์สำหรับองค์ประกอบแรกในชุดที่ห่อ หรือตั้งค่าคุณสมบัติ CSS หนึ่งรายการขึ้นไปสำหรับแต่ละองค์ประกอบในชุด CSS(ชื่อทรัพย์สิน)ชื่อคุณสมบัติ 3.1. วิธีการ.css() .attr(ชื่อแอตทริบิวต์, ค่า)— สตริงที่มีชื่อของคุณสมบัติ จะส่งกลับค่าที่คำนวณได้สำหรับองค์ประกอบแรกของชุด 3.1. วิธีการ.css().css(ชื่อคุณสมบัติ) .addClass(ฟังก์ชัน)ชื่อคุณสมบัติ — อาร์เรย์ของคุณสมบัติส่งคืนค่าที่คำนวณได้สำหรับองค์ประกอบแรกของชุด.css(ชื่อคุณสมบัติ, ค่า)
คือสตริงหรือตัวเลขที่จะถูกตั้งค่าเป็นค่าของคุณสมบัติที่ระบุสำหรับองค์ประกอบทั้งหมดของชุดที่ห่อ
.css(ชื่อคุณสมบัติ, ฟังก์ชัน)
ส่งกลับความกว้างปัจจุบันสำหรับองค์ประกอบแรกในชุด หรือตั้งค่าความกว้างสำหรับแต่ละองค์ประกอบในชุด หน่วยวัดเริ่มต้นคือ px สามารถใช้วิธีนี้ได้หากจะใช้ค่าที่ได้รับในการคำนวณทางคณิตศาสตร์ ขนาดคำนวณโดยไม่คำนึงถึงการเยื้องและความหนาของเฟรม โดยไม่ระบุหน่วยการวัด เมื่อคุณปรับขนาดหน้าต่างเบราว์เซอร์ ขนาดขององค์ประกอบอาจเปลี่ยนแปลง
width() วิธีการนี้ถูกเรียกโดยไม่มีพารามิเตอร์ ส่งกลับค่าความกว้างปัจจุบันสำหรับองค์ประกอบแรกในชุด โดยไม่ต้องระบุหน่วย .attr(ชื่อแอตทริบิวต์, ค่า).ความกว้าง(ค่า) .addClass(ฟังก์ชัน)- ค่าตัวเลขจำนวนเต็มหรือค่าสตริงของความกว้างที่จะตั้งค่าสำหรับแต่ละองค์ประกอบของชุด
.ความกว้าง(ฟังก์ชัน)
- ใช้เป็นอาร์กิวเมนต์ดัชนีขององค์ประกอบและค่าเก่าของคุณสมบัติ ค่าที่ส่งคืนจะถูกตั้งค่าเป็นความกว้างสำหรับองค์ประกอบทั้งหมด
4.2. วิธีการ.ความสูง() .attr(ชื่อแอตทริบิวต์, ค่า)ส่งกลับค่าความสูงปัจจุบันสำหรับองค์ประกอบแรกในชุด หรือตั้งค่าความสูงสำหรับแต่ละองค์ประกอบในชุด .addClass(ฟังก์ชัน) Height() วิธีการนี้ถูกเรียกโดยไม่มีพารามิเตอร์ ส่งกลับค่าความสูงปัจจุบันสำหรับองค์ประกอบแรกในชุด
.height(ค่า)
— ค่าตัวเลขจำนวนเต็มหรือค่าความสูงของสตริงที่จะถูกตั้งค่าสำหรับแต่ละองค์ประกอบของชุด
.height(ฟังก์ชัน) .attr(ชื่อแอตทริบิวต์, ค่า)- ใช้เป็นอาร์กิวเมนต์ดัชนีขององค์ประกอบและค่าเก่าของคุณสมบัติ ค่าที่ส่งคืนจะถูกตั้งค่าเป็นความสูงขององค์ประกอบทั้งหมด .addClass(ฟังก์ชัน)
4.3. Method.innerWidth()
ส่งกลับความกว้างขององค์ประกอบแรกในชุดที่ห่อ รวมทั้งช่องว่างภายใน หรือตั้งค่าให้กับแต่ละองค์ประกอบของชุดที่ห่อ
InnerWidth() วิธีการถูกเรียกโดยไม่มีพารามิเตอร์ ส่งกลับความกว้างภายในปัจจุบันสำหรับองค์ประกอบแรกในชุด .attr(ชื่อแอตทริบิวต์, ค่า).innerWidth(ค่า) .addClass(ฟังก์ชัน)— ค่าตัวเลขจำนวนเต็มที่จะตั้งค่าให้กับแต่ละองค์ประกอบของชุด
.innerWidth(ฟังก์ชัน)
4.4. Method.innerHeight()
OuterWidth (บูลีน) - ชื่อคลาสตั้งแต่หนึ่งชื่อขึ้นไป คั่นด้วยช่องว่าง ซึ่งจะถูกสลับสำหรับแต่ละองค์ประกอบของชุด
4.6. Method.outerHeight()
ส่งกลับความสูงขององค์ประกอบแรกในชุดที่ห่อไว้ ขนาดเหล่านี้รวมถึงความหนาของเฟรมและความกว้างของรอยเยื้อง
OuterHeight (บูลีน) - ชื่อคลาสตั้งแต่หนึ่งชื่อขึ้นไป คั่นด้วยช่องว่าง ซึ่งจะถูกสลับสำหรับแต่ละองค์ประกอบของชุด— ค่าเผื่อเลือก หากตั้งค่าเป็น true ค่ามาร์จิ้นจะถูกนำมาพิจารณาด้วย มิฉะนั้นจะไม่พิจารณา
4.7. วิธีการชดเชย()
รับพิกัดปัจจุบันขององค์ประกอบแรกหรือตั้งค่าพิกัดสำหรับแต่ละองค์ประกอบ การส่งคืน วัตถุจาวาสคริปต์ด้วยคุณสมบัติด้านซ้ายและด้านบนที่มีพิกัด px ขององค์ประกอบแรกของชุดที่ห่อซึ่งสัมพันธ์กับจุดเริ่มต้นของเอกสาร วิธีการนี้ใช้กับองค์ประกอบที่มองเห็นได้เท่านั้น
Offset() วิธีการนี้ถูกเรียกโดยไม่มีพารามิเตอร์
4.8. วิธีการตำแหน่ง()
ส่งกลับวัตถุ JavaScript ที่มีคุณสมบัติด้านซ้ายและด้านบนที่มีพิกัด px ขององค์ประกอบแรกของชุดที่ห่อซึ่งสัมพันธ์กับองค์ประกอบหลักที่ใกล้เคียงที่สุด วิธีการนี้ใช้กับองค์ประกอบที่มองเห็นได้เท่านั้น
Position() วิธีการถูกเรียกโดยไม่มีพารามิเตอร์
เป็นเวลานานแล้วที่ฉันมีบทความเกี่ยวกับ JQuery ในบล็อกของฉัน ไม่ แน่นอนว่ามีบทความต่างๆ ที่ใช้มันอยู่ แต่มันทำหน้าที่เป็นเครื่องมือเสริม และในระหว่างนี้ ส่วน “การเรียนรู้ JQuery” ก็เต็มไปด้วยฝุ่น ในขณะเดียวกันก็ถึงเวลาที่จะก้าวไปสู่ส่วนที่น่าสนใจที่สุดของการฝึกอบรม - การเพิ่มเอฟเฟกต์ต่าง ๆ ซึ่งเป็นเหตุผลว่าทำไมหลายคนถึงเริ่มศึกษามัน และในบทความวันนี้ คุณจะได้เรียนรู้วิธีเปลี่ยนคุณสมบัติ CSS ได้ทันที
ก่อนที่เราจะพูดถึงเอฟเฟกต์นั้น เรามาสำรองข้อมูลเล็กน้อยและดูที่ CSS กันก่อน ในบทความก่อนหน้านี้ เราเปลี่ยนแปลง รูปร่างโดยการเพิ่มหรือลบคลาส CSS ต่างๆ ซึ่งแน่นอนว่าจะต้องสร้างในไฟล์ CSS ก่อน โดยปกตินี้ วิธีที่ถูกต้องเพราะคำนึงถึงบทบาทของ CSS ในการสร้างเพจ
อย่างไรก็ตาม มีบางครั้งที่คุณต้องเปลี่ยนสไตล์ CSS ที่ไม่ได้อยู่ในสไตล์ชีตหรือที่ไม่สามารถอธิบายได้ ในกรณีดังกล่าว JQuery มีเมธอด .css()
เพื่อที่จะรับค่าของคุณสมบัติ CSS เราต้องส่งชื่อคุณสมบัติเป็นสตริง อะไรทำนองนี้ css('สีพื้นหลัง') .
คุณสมบัติที่ประกอบด้วยคำหลายคำสามารถเขียนด้วยยติภังค์ได้ เช่น ในไฟล์ CSS (สีพื้นหลัง) หรือตัวพิมพ์ต่าง ๆ ตามที่เขียนใน DOM (สีพื้นหลัง) ในการตั้งค่าคุณสมบัติ CSS นั้น .css() วิธีการใช้สองวิธี วิธีแรกคือพารามิเตอร์สองตัว ชื่อของคุณสมบัติ CSS และค่า โดยคั่นด้วยเครื่องหมายจุลภาค ประการที่สองคือแผนที่ที่ประกอบด้วยคู่มูลค่าทรัพย์สิน
Css("คุณสมบัติ","ค่า") .css((property1: "value1", "property-2": "value2"))
เราจะใช้วิธีการ css() เช่นเดียวกับที่เราใช้ .addClass() - เรารวมมันเข้ากับตัวเลือกและผูกเหตุการณ์ ลองดูที่วิธีการ .css() โดยใช้ตัวอย่างที่เฉพาะเจาะจง เราจะต้องมีมาร์กอัป HTML ต่อไปนี้:
และ CSS บางส่วน:
#กล่องข้อความ ( เส้นขอบ: 1px solid #000; พื้นหลัง: #DFECFF; ระยะขอบ: 20px อัตโนมัติ; การจัดตำแหน่งข้อความ: ซ้าย; การขยาย: 10px; ความกว้าง: 400px; สี: #0000a0; รูปแบบแบบอักษร: ตัวเอียง; ชัดเจน: ทั้งสอง; )
ด้วยเหตุนี้เราจะได้หน้าดังนี้:
มีสองปุ่มบนหน้า - เพื่อเพิ่มและลดแบบอักษร โดยหลักการแล้ว ที่นี่เราสามารถใช้เมธอด .addClass() ที่อธิบายไว้ในบทความที่แล้ว แต่มาทำให้งานซับซ้อนขึ้นอีกหน่อย และลองจินตนาการว่าเราจำเป็นต้องลดหรือเพิ่มข้อความทุกครั้งที่กดปุ่มที่เกี่ยวข้อง แน่นอนว่าสิ่งนี้สามารถนำไปใช้ได้โดยการอธิบายคลาสแยกต่างหากสำหรับการคลิกแต่ละครั้ง แต่จะง่ายกว่ามากในการรับขนาดข้อความปัจจุบันและเพิ่ม (ลด) ตามค่าที่กำหนด
โค้ดของเรามักจะเริ่มต้นด้วย $(document).ready() และตัวจัดการเหตุการณ์ของปุ่ม $("#increase").click() :
$(document).ready(function())( $("#increase").click(function())( ));
จากนั้น คุณสามารถรับขนาดตัวอักษรได้อย่างง่ายดายผ่าน $(“#textbox”).css("fontSize") อย่างไรก็ตาม ค่าที่ส่งคืนจะมีทั้งตัวเลขและหน่วย ดังนั้นเราจำเป็นต้องจัดเก็บแต่ละส่วนไว้ในตัวแปรของตัวเอง หลังจากนั้นเราจะเพิ่มตัวเลขและแนบหน่วยกลับเข้าไปใหม่ได้ นอกจากนี้ เราวางแผนที่จะใช้วัตถุ JQuery มากกว่าหนึ่งครั้ง ดังนั้นจึงเป็นความคิดที่ดีที่จะเก็บไว้ในตัวแปรเช่นกัน
$(document).ready(function() ( $("#increase").click(function() ( var $speech = $("div.speech"); var currentSize = $speech.css("fontSize") ; var num = parseFloat(ขนาดปัจจุบัน, 10); var unit = currentSize.slice(-2); $speech.css("fontSize", num + หน่วย ));
บรรทัดแรกภายในฟังก์ชัน .click() จะจัดเก็บตัวแปรพร้อมกับบล็อก #textblock
โปรดทราบว่าเราใช้สัญลักษณ์ $ ในชื่อตัวแปร $speech เนื่องจาก $ เป็นอักขระที่ถูกต้องสำหรับ ตัวแปรจาวาสคริปต์เราสามารถใช้เป็นเครื่องเตือนใจว่าตัวแปรนี้เก็บวัตถุ JQuery บรรทัดถัดไปจะบันทึกขนาดแบบอักษรของบล็อก #textblock ลงในตัวแปร เช่น 12px
หลังจากนั้นเราใช้ parseFloat() และ Slice() ฟังก์ชัน parseFloat() ใช้ในการแปลงค่าสตริงให้เป็นค่าตัวเลข (ทศนิยม) ตัวอย่างเช่น สตริง 12 จะถูกแปลงเป็นตัวเลข 12 หากสตริงขึ้นต้นด้วยอักขระที่ไม่ใช่ตัวเลข parseFloat() จะส่งกลับ NaN ซึ่งหมายความว่า: "ไม่ใช่ค่าตัวเลข" ( ไม่ใช่ตัวเลข).อาร์กิวเมนต์ที่สองของฟังก์ชัน parseFloat() ทำให้แน่ใจว่าตัวเลขจะถูกแปลงเป็นค่าทศนิยม
.sice() วิธีการส่งกลับสตริงย่อยที่เริ่มต้นด้วย ตัวละครบางตัวเส้น เนื่องจากชื่อของหน่วยที่เราใช้มีความยาวอักขระสองตัว (px) เราจึงระบุว่าสตริงย่อยต้องขึ้นต้นด้วยอักขระสองตัวสุดท้ายของสตริงหลัก
สิ่งที่เราต้องทำคือคูณค่าผลลัพธ์ของตัวแปร num ด้วย 1.4 จากนั้นตั้งค่าขนาดตัวอักษรโดยเชื่อมตัวแปรสองตัว num และหน่วยเข้าด้วยกัน:
$(document).ready(function())( $("#increase").click(function())( var $speech = $("#textbox"); var currentSize = $speech.css("fontSize" var num = parseFloat(ขนาดปัจจุบัน, 10); var unit = currentSize.slice(-2); $speech.css("fontSize", num + หน่วย ));
ตอนนี้หลังจากคลิกที่ปุ่ม "ขยาย" ข้อความในบล็อกจะเพิ่มขึ้นดังที่แสดงในภาพหน้าจอ:
การคลิกปุ่มเดิมครั้งถัดไปจะยังคงเพิ่มข้อความในบล็อก
เพื่อให้ปุ่ม "ลด" ทำงานได้ เราจะแบ่งค่าของตัวแปร – num/=1.4 และเพื่อไม่ให้เพิ่มขนาดโค้ด เราสามารถรวมตัวจัดการเหตุการณ์ .click() สองตัวเข้าด้วยกันเป็นอันเดียวผ่านคลาสปุ่ม จากนั้นหลังจากตั้งค่าตัวแปรแล้ว เราก็สามารถคูณหรือหารตาม ID ของปุ่มที่กดได้อย่างง่ายดาย นี่คือลักษณะของโค้ดที่ควรจะเป็น:
$(document).ready(function())( $("input").click(function())( var $speech = $("#textbox"); var currentSize = $speech.css("fontSize") ; var num = parseFloat(currentSize, 10); var unit = currentSize.slice(-2); if (this.id=="increase")( num*=1.4; ) อื่น ๆ ถ้า(this.id=="ลดลง ") ( num/=1.4; ) $speech.css("fontSize", num + หน่วย ));
ข้างต้นได้รับ ตัวอย่างที่ง่ายที่สุดโดยใช้วิธี .css() ในทางปฏิบัติ สามารถยกตัวอย่างการใช้วิธีนี้ได้อีกตัวอย่างหนึ่ง
แยกรายการเมนู
บ่อยครั้งในการออกแบบมีเทคนิคเช่นการแบ่งรายการเมนูด้วยเส้นแนวตั้งและรายการเมนูแรกและรายการสุดท้ายไม่ควรมีเส้นข้าง
เมนูดังกล่าวจะต้องมีมาร์กอัป HTML ต่อไปนี้:
Ul( list-style: none; ) ul li( list-style: none; float: left; พื้นหลัง: #DFECFF; display: block; padding: 10px; border-right: 1px grey solid; ) ul li a( text- ตกแต่ง: ไม่มี; สี: #000;
เมนูของเราจะเป็นดังนี้:
และเพื่อลบตัวคั่นที่ถูกต้องออกจากรายการเมนูสุดท้าย (รายการที่สี่) คุณสามารถใช้รหัสนี้:
$(document).ready(function())( $("#menu ul li:last").css("border-right", "none"); ));
และด้วยเหตุนี้เราจึงได้เมนูนี้:
อย่างที่คุณเห็นการใช้วิธีนี้ค่อนข้างง่ายและสะดวก แต่ก็ยังพยายามอย่าใช้ในทางที่ผิด แต่ใช้เฉพาะในกรณีที่ไม่สามารถเพิ่มสไตล์ที่ต้องการลงในไฟล์ CSS ได้