เอฟเฟกต์ภาพเคลื่อนไหวที่น่าประทับใจ ตัวอย่างการใช้ jQuery ตัวอย่างคำอธิบาย Jquery

JQuery เป็น JavaScript Framework ที่ยอดเยี่ยมที่สร้างความประทับใจด้วยการเข้าใจง่ายและใช้งานง่าย แต่การเรียนรู้ต้องเริ่มต้นที่ไหนสักแห่ง และความคิดเห็นส่วนตัวของฉันคือควรเริ่มต้นด้วยตัวอย่างที่ชัดเจนที่สุด แล้วมันจะดำเนินต่อไป...

เนื้อหาของบทความนี้รวมอยู่ในหนังสือเรียน "" หนังสือเรียนนี้แจกฟรีและมาพร้อมกับการโต้ตอบ

jQuery ทำงานอย่างไร?

ก่อนอื่นคุณจะต้องมีเฟรมเวิร์กเอง คุณสามารถดาวน์โหลดได้จากหน้าแรกของโปรเจ็กต์ จากนั้นเริ่มต้น:

แผนภาพต่อไปนี้จะช่วยให้คุณเข้าใจประเด็นหลัก:

วิธีรับองค์ประกอบโดยใช้ jQuery

เพื่อให้เข้าใจถึงวิธีการทำงานของ Selector คุณยังต้องมีความรู้พื้นฐานเกี่ยวกับ CSS เนื่องจาก... ตัวเลือก jQuery ขึ้นอยู่กับหลักการ CSS:

$(“#header”) – รับองค์ประกอบที่มี id="header"
$(“h3”) – รับองค์ประกอบทั้งหมด
$(“div#content .photo”) – รับองค์ประกอบทั้งหมดที่มี class =”photo” ซึ่งอยู่ในองค์ประกอบ div ด้วย id="content"
$("ul li") – รับทั้งหมด
องค์ประกอบจากรายการ
- $(“ul li:first”) – รับเฉพาะองค์ประกอบแรก
- จากรายการ แผงดึงออก
  เริ่มจากตัวอย่างง่ายๆ กันก่อน - แผงสไลด์ มันจะเลื่อนขึ้น/ลงเมื่อคุณคลิกที่ลิงค์ (ดู)
  
  เราจะดำเนินการดังนี้: โดยการคลิกที่ลิงก์ เราจะเปลี่ยนคลาส (ระหว่าง "ใช้งานอยู่" และ "btn-slide") และแผงที่มี id = "panel" จะเลื่อนออก/ซ่อน (คลาส “active” เปลี่ยนตำแหน่งของภาพพื้นหลัง โปรดดูไฟล์ CSS ในไฟล์แนบ)
  $(document).ready(function())( $(".btn-slide").click(function())( $("#panel").slideToggle("slow"); $(this).toggleClass (" คล่องแคล่ว"); )); ));
  การหายตัวไปอย่างมหัศจรรย์
  ตัวอย่างนี้จะแสดงให้เห็นว่าคุณสามารถลบองค์ประกอบที่ละลายได้อย่างสวยงามและง่ายดายเพียงใด (ดู):
  
  เมื่อเราคลิกที่ภาพ องค์ประกอบหลักจะพบได้และความทึบของมันจะค่อยๆ เปลี่ยนจาก opacity=1.0 เป็น opacity=hide:
  $(document).ready(function())( $(".pane .delete").click(function())( $(this).parents(".pane").animate(( ความทึบ: "hide" ), "ช้า");
  แอนิเมชั่นที่เกี่ยวข้อง
  ตอนนี้ตัวอย่างมีความซับซ้อนมากขึ้น แต่จะช่วยให้คุณเข้าใจ jQuery ได้ดีขึ้น โค้ดเพียงไม่กี่บรรทัดจะทำให้สี่เหลี่ยมจัตุรัสเคลื่อนที่ เปลี่ยนขนาด และความโปร่งใส (ซม. ):
  
  บรรทัด 0: เมื่อเพจโหลดแล้ว (DOM พร้อมสำหรับการจัดการ)
  บรรทัดที่ 1: เชื่อมโยงกับเหตุการณ์การคลิกขององค์ประกอบ
  บรรทัดที่ 2: จัดการองค์ประกอบ - ลดความโปร่งใสเป็น 0.1 เพิ่มตำแหน่งทางซ้ายอีก 400px ด้วยความเร็ว 1200 (มิลลิวินาที)
  บรรทัดที่ 3: จากนั้นค่อยๆ เปลี่ยนพารามิเตอร์ต่อไปนี้: ความทึบ=0.4, ด้านบน=160px, ความสูง=20, ความกว้าง=20; ความเร็วของภาพเคลื่อนไหวจะถูกระบุโดยพารามิเตอร์ตัวที่สอง: "ช้า", "ปกติ", "เร็ว" หรือหน่วยเป็นมิลลิวินาที
  บรรทัดที่ 4: จากนั้น ความทึบ=1, ซ้าย=0, สูง=100, ความกว้าง=100, ความเร็ว – “ช้า”
  บรรทัดที่ 5: จากนั้นบน=0 ความเร็ว – “เร็ว”
  บรรทัดที่ 6: จากนั้นเลื่อนขึ้น (ด้วยความเร็วแอนิเมชั่นเริ่มต้น - “ปกติ”)
  บรรทัดที่ 7: จากนั้นเลื่อนลง ความเร็ว – “ช้า”
  บรรทัดที่ 8: คืนค่าเท็จเพื่อให้เบราว์เซอร์ไม่ติดตามลิงก์
  $(document).ready(function())( $(".run").click(function())( $("#box").animate((ความทึบ: "0.1", ซ้าย: "+=400 ") , 1200) .animate((ความทึบ: "0.4", ด้านบน: "+=160", ความสูง: "20", ความกว้าง: "20"), "ช้า") .animate((ความทึบ: "1", ซ้าย: "0" ความสูง: "100" ความกว้าง: "100") "ช้า") .animate((top: "0"), "fast") .slideUp() .slideDown("slow") กลับ เท็จ; )); ));
  หีบเพลง #1
  ตัวอย่างการใช้งานหีบเพลง (ซม. )
  
  เรามาเริ่มการซักถามกันดีกว่า:
  บรรทัดแรกเราเพิ่มคลาส "active" ให้กับองค์ประกอบแรกภายใน (คลาส "active" มีหน้าที่รับผิดชอบในการวางตำแหน่งภาพพื้นหลัง - ไอคอนที่มีลูกศร) ในบรรทัดที่สองเราซ่อนทุกสิ่งที่ไม่ใช่บรรทัดแรก
  องค์ประกอบภายใน.
  เมื่อคลิกส่วนหัว องค์ประกอบถัดไปจะอยู่ในนั้น
  เอฟเฟกต์ SlideToggle จะถูกนำไปใช้ จากนั้นกับองค์ประกอบอื่นๆ ทั้งหมด
  เอฟเฟกต์ SlideUp จะถูกนำไปใช้ การดำเนินการต่อไปนี้จะเปลี่ยนคลาสส่วนหัวเป็น "active" จากนั้นเราจะค้นหาส่วนหัวอื่นๆ ทั้งหมดและลบคลาส "active" ออกจากส่วนหัวเหล่านั้น
  $(document).ready(function())( $(".accordion h3:first").addClass("active"); $(".accordion p:not(:first)").hide(); $ ( ".accordion h3").click(function())( $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("slow"); $( นี้).toggleClass("ใช้งานอยู่"); $(นี้).siblings("h3").removeClass("ใช้งานอยู่" ));
  หีบเพลง #2
  ตัวอย่างนี้คล้ายกับตัวอย่างก่อนหน้า ข้อแตกต่างเพียงอย่างเดียวคือเราระบุแผงที่เปิดตามค่าเริ่มต้น (ซม. )
  
  ใน CSS เราได้ระบุไว้สำหรับองค์ประกอบทั้งหมด
  จอแสดงผล:ไม่มี ตอนนี้เราต้องเปิดแผงที่สาม เพื่อทำเช่นนี้ เราสามารถเขียน $(“.accordion2 p”).eq(2).show() ต่อไปนี้ โดยที่ eq แสดงถึงความเท่าเทียมกัน โปรดจำไว้ว่าการจัดทำดัชนีเริ่มต้นจากศูนย์:
  $(document).ready(function())( $(".accordion2 h3").eq(2).addClass("active"); $(".accordion2 p").eq(2).show() ; $(".accordion2 h3").click(function())( $(this).next("p").slideToggle("slow") .siblings("p:visible").slideUp("ช้า" ); $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active" ));
  แอนิเมชันสำหรับเหตุการณ์โฮเวอร์ #1
  ตัวอย่างนี้จะช่วยคุณสร้างแอนิเมชั่นที่สวยงามมากสำหรับเหตุการณ์โฮเวอร์ (ฉันหวังว่าคุณจะรู้ว่ามันคืออะไร) (ดู):
  
  เมื่อคุณวางเมาส์เหนือรายการเมนู (วางเมาส์เหนือ) รายการนั้นจะค้นหารายการถัดไปและทำให้ความโปร่งใสและตำแหน่งของรายการเคลื่อนไหว:
  $(document).ready(function())( $(".menu a").hover(function() ( $(this).next("em").animate((ความทึบ: "show", top: " -75"), "slow"); ), function() ( $(this).next("em").animate((ความทึบ: "hide", top: "-85"), "fast") ; ) ));
  แอนิเมชันสำหรับเหตุการณ์โฮเวอร์ #2
  ตัวอย่างนี้ซับซ้อนกว่าตัวอย่างก่อนหน้านี้เล็กน้อย: แอตทริบิวต์ linktitle ใช้เพื่อสร้างคำแนะนำเครื่องมือ (ดู)
  
  ก่อนอื่น เรามาเพิ่มแท็กให้กับแต่ละองค์ประกอบกันก่อน - เมื่อเหตุการณ์การวางเมาส์โอเวอร์เกิดขึ้น เราจะนำข้อความจากแอตทริบิวต์ “thetitle” และเก็บไว้ในตัวแปร “hoverText” จากนั้นข้อความนี้จะถูกแทรกลงในแท็ก:
  $(document).ready(function())( $(".menu2 a").append(""); $(".menu2 a").hover(function() ( $(this).find(" em ").animate((ความทึบ: "show", top: "-75"), "slow"); var hoverText = $(this).attr("title"); $(this).find("em " ).text(hoverText); ), function() ( $(this).find("em").animate((ความทึบ: "hide", top: "-85"), "fast"); )) ; ));
  บล็อกที่คลิกได้
  ตัวอย่างนี้สาธิตวิธีทำให้บล็อกข้อความสามารถคลิกได้ ไม่ใช่แค่ลิงก์ (ดู):
  
  มาสร้างรายการกันเถอะ
  - คลิกได้ ขั้นแรก เรามาเชื่อมโยงกับเหตุการณ์การคลิกสำหรับองค์ประกอบ “.pane-list li” เมื่อผู้ใช้คลิกที่รายการ ฟังก์ชั่นของเราจะค้นหาแท็ก และจะเปลี่ยนเส้นทางไปยังหน้าที่ระบุในแอตทริบิวต์ href
    $(document).ready(function())( $(".pane-list li").click(function())( window.location=$(this).find("a").attr("href ") ; กลับเท็จ; ));
    แผงพับ
    ทีนี้มารวมตัวอย่างก่อนหน้านี้กันสักหน่อยและสร้างชุดแผงพับ (คล้ายกับวิธีจัดระเบียบกล่องจดหมายใน Gmail) (ซม. )
    - คลิกที่ – เรียกใช้เมธอด SlideUp สำหรับทุกคน
    - คลิกที่ เมธอด SlideDown ก็เรียกสำหรับทุกคนเช่นกัน
    - หลังจากที่ห้า
    - คลิกที่ – ซ่อนองค์ประกอบและแสดงมัน วิธี SlideUp ก็เรียกสำหรับทุกคนเช่นกัน
    - หลังจากที่ห้า
    $(document).ready(function())( //hide message_body หลังอันแรก $(".message_list .message_body:gt(0)").hide(); //ซ่อนข้อความหลังอันที่ 5 $(". message_list li:gt(4).hide(); //toggle message_body $(".message_head").click(function())( $(this).next(".message_body").slideToggle(500) กลับเท็จ ; )); //ยุบข้อความทั้งหมด $(".colpase_all_message").click(function())( $(".message_body").slideUp(500) return false; )); //แสดงข้อความทั้งหมด $(" .show_all_message").click(function())( $(this).hide() $(".show_recent_only").show() $(".message_list li:gt(4)").slideDown() กลับเท็จ ; )); //แสดงข้อความล่าสุดเท่านั้น $(".show_recent_only").click(function())( $(this).hide() $(".show_all_message").show() $(".message_list li :gt (4)").slideUp() กลับเท็จ; )); )); เลียนแบบแบ็กเอนด์ WordPress
    ฉันคิดว่าผู้อ่านหลายคนได้พบกับส่วนผู้ดูแลระบบของ WordPress หรือแก้ไขความคิดเห็น มาลองทำสิ่งที่คล้ายกันกัน เพื่อให้สีพื้นหลังเคลื่อนไหว เราจำเป็นต้องมีปลั๊กอิน jQuery ที่เหมาะสม (ซม. )
    - คลิกที่ เริ่มต้นการปรากฏตัวของข้อความ (การแจ้งเตือน) และภาพเคลื่อนไหวของสีพื้นหลังและความโปร่งใส (สีพื้นหลังและความทึบ) ก็เกิดขึ้นเช่นกัน
    - คลิกที่ – ทำให้เกิดภาพเคลื่อนไหวพื้นหลัง (สีเปลี่ยนเป็นสีเหลืองและด้านหลัง) และเพิ่มคลาส “สแปม”
    - คลิกที่ – ทำให้ภาพเคลื่อนไหวพื้นหลัง (สีเปลี่ยนเป็นสีเขียวและด้านหลัง) และลบคลาส "สแปม"
    - คลิกที่ – ทำให้พื้นหลังเคลื่อนไหว (สีเปลี่ยนเป็นสีแดง) และเปลี่ยนพารามิเตอร์ “ความทึบ” เป็น “ซ่อน”
    //อย่าลืมใส่ปลั๊กอิน Color Animations $(document).ready(function())( $(".pane:even").addClass("alt"); $(".pane .btn-delete " ).click(function())( alert("ความคิดเห็นนี้จะถูกลบ!"); $(this).parents(".pane").animate(( backgroundColor: "#fbc7c7" ), "fast") .animate (( ความทึบ: "hide" ), "slow") return false )); $(".pane .btn-unapprove").click(function())( $(this).parents(".pane" ). เคลื่อนไหว(( backgroundColor: "#fff568") .animate(( backgroundColor: "#ffffff" ), "slow") .addClass("spam") return false )); .click(function())( $(this).parents(".pane").animate(( backgroundColor: "#dafda5" ), "fast") .animate(( backgroundColor: "#ffffff" ), "ช้า ") .removeClass("spam") return false )); $(".pane .btn-spam").click(function())( $(this).parents(".pane"). เคลื่อนไหว(( backgroundColor : "#fbc7c7" ), "fast") .animate(( ความทึบ: "hide" ), "slow") ส่งคืน false ));
    ตัวอย่างที่ง่ายที่สุดของการใช้แกลเลอรีโดยไม่ต้องโหลดหน้าซ้ำ (ซม. )
    
    ขั้นแรก ให้เพิ่มแท็กที่ส่วนหัว
    โดยคลิกที่ภาพใน
    เราทำตามขั้นตอนต่อไปนี้
    
    การใช้ jQuery ช่วยให้คุณสร้างสคริปต์ได้เร็วและมีประสิทธิภาพยิ่งขึ้น
    เจคิวรีคืออะไร?
    jQuery เป็นไลบรารีที่ทำให้การเขียนโค้ด JavaScript ง่ายและรวดเร็วยิ่งขึ้น
    
    คำขวัญ jQuery "เขียนให้น้อยลง ทำมากขึ้น"(เขียนให้น้อยลง ทำมากขึ้น) สะท้อนถึงจุดประสงค์หลัก
    
    jQuery ช่วยให้คุณสร้างภาพเคลื่อนไหว ตัวจัดการเหตุการณ์ และทำให้การเลือกองค์ประกอบใน DOM และสร้างคำขอ AJAX ง่ายขึ้นมาก
    
    ไลบรารีนี้ใช้งานได้กับเบราว์เซอร์ทั้งหมด ( IE 6.0+, FF 2.0+, Safari 3.0+, Opera 9.0+, Chrome- ซึ่งหมายความว่าคุณไม่จำเป็นต้องกังวลเกี่ยวกับความเข้ากันได้ของโค้ด JavaScript ข้ามเบราว์เซอร์อีกต่อไป
    
    มีการเขียนปลั๊กอินจำนวนมากสำหรับ jQuery ซึ่งช่วยให้คุณสามารถขยายขีดความสามารถของมันให้ดียิ่งขึ้นไปอีก
    ตัวอย่าง jQuery
    $(document).ready(function())( $(":button").click(function())( $(":button").hide(); $("#wrap1").addClass(" เพิ่ม" ); $("#wrap1").animate((height:280),2000); $("#wrap1").animate((width:400),2000); $("#wrap1"). เคลื่อนไหว( (ช่องว่างภายใน:20),2000,function())( $("#text1").hide(2000,function())($("#text2").show(2000);) )) ; ));
    ดูด่วน
    การเพิ่ม jQuery ให้กับเพจ
    ในการเริ่มใช้ jQuery คุณต้องมี:
  - ดาวน์โหลดได้จากเว็บไซต์อย่างเป็นทางการ jQuery มีสองเวอร์ชัน: สำหรับใช้ในแอปพลิเคชันสำเร็จรูป (การผลิต) และสำหรับการพัฒนา (การพัฒนา) เวอร์ชันการพัฒนาประกอบด้วยความคิดเห็นและโค้ดที่มีโครงสร้าง เวอร์ชันย่อไม่มีความคิดเห็นและโค้ดไม่มีโครงสร้าง แต่ใช้พื้นที่น้อยกว่า ดังนั้นหน้าเว็บที่มีเวอร์ชันนี้จะโหลดเร็วขึ้น หลังจากที่คุณเลือกเวอร์ชันที่เหมาะสมแล้ว ให้คลิกที่ปุ่ม "ดาวน์โหลด (jQuery)"