การสร้างแอปพลิเคชันที่ใช้ Ajax กลายเป็นเรื่องง่ายและรวดเร็วด้วย jQuery
jQuery เดิมสร้างโดย John Resig ในต้นปี 2006 ปัจจุบันโครงการ jQuery ได้รับการดูแลและบำรุงรักษาโดยกลุ่มนักพัฒนาแบบกระจายเป็นโครงการโอเพ่นซอร์ส
คุณสามารถประหยัดเวลาและความพยายามได้มากด้วย jQuery ดังนั้นเพิ่มเว็บไซต์นี้ในรายการโปรดของคุณและอ่านต่อ
มีหลายสิ่งที่คุณสามารถทำได้ด้วย jQuery
รายการยังไม่จบเพียงเท่านี้ ยังมีสิ่งดีๆ อีกมากมายที่คุณสามารถทำได้ด้วย jQuery
มีข้อดีหลายประการที่เราควรเลือกใช้ jQuery:
ในการเริ่มต้น ขั้นแรกให้ดาวน์โหลดสำเนาของ jQuery แล้วจึงรวมไว้ในโครงการของเรา มี jQuery สองเวอร์ชันให้ดาวน์โหลด: อย่างเร่งรีบ e ไม่บีบอัด .
ไฟล์ที่ไม่บีบอัดนั้นเหมาะสมกว่าสำหรับการพัฒนาหรือการดีบัก แนะนำให้ใช้ไฟล์ที่ย่อขนาดและบีบอัดสำหรับการผลิต เนื่องจากจะช่วยประหยัดแบนด์วิธและปรับปรุงประสิทธิภาพเนื่องจากขนาดไฟล์ที่เล็กลง
เราสามารถดาวน์โหลด jQuery ได้จากที่นี่: https://jquery.com/download/
เมื่อคุณดาวน์โหลดไฟล์ jQuery คุณจะเห็นว่ามันมีนามสกุลเป็น js นั่นคือมันเป็นไฟล์ JavaScript ในความเป็นจริง JQuery ไม่ได้เป็นเพียงแค่ไลบรารี JavaScript ดังนั้นคุณสามารถรวมไฟล์ jQuery ไว้ในเอกสาร HTML ด้วยองค์ประกอบ เช่นเดียวกับที่คุณรวมไฟล์ JavaScript ทั่วไป
<head>
<title>Simple HTML Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>อย่าลืมรวมไฟล์ jQuery ก่อนสคริปต์ที่กำหนดเองเสมอ มิฉะนั้น jQuery API จะไม่สามารถใช้งานได้เมื่อโค้ด jQuery ของคุณพยายามเข้าถึง
ดังที่คุณอาจสังเกตเห็น เราได้ข้ามแอตทริบิวต์ในตัวอย่างก่อนหน้า type="text/javascript" ภายในแท็ก . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiเสร็จสิ้นใน HTML5 และในเบราว์เซอร์สมัยใหม่ทั้งหมด
อีกทางเลือกหนึ่ง คุณสามารถฝัง jQuery ลงในเอกสารของคุณผ่านลิงก์ CDN (เครือข่ายการส่งเนื้อหา) ที่ให้บริการฟรี หากคุณไม่ต้องการดาวน์โหลดไฟล์
CDN สามารถนำเสนอข้อได้เปรียบด้านประสิทธิภาพโดยลดเวลาในการโหลด เนื่องจากโฮสต์ jQuery บนเซิร์ฟเวอร์หลายแห่งทั่วโลก และเมื่อผู้ใช้ร้องขอไฟล์ ไฟล์นั้นจะให้บริการจากเซิร์ฟเวอร์ที่ใกล้ที่สุด
นอกจากนี้ยังมีข้อได้เปรียบที่ว่าหากผู้เยี่ยมชมหน้าเว็บของคุณดาวน์โหลดสำเนาของ jQuery จาก CDN เดียวกันในขณะที่เยี่ยมชมไซต์อื่น ๆ พวกเขาจะไม่ต้องดาวน์โหลดอีกครั้งเนื่องจากอยู่ในแคชของเบราว์เซอร์แล้ว
ในกรณีนี้คุณจะต้องเขียน:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>นอกเหนือจาก CDN ที่จัดทำโดยโปรเจกต์ jquery แล้ว คุณสามารถรวม jQuery ผ่าน Google e ไมโครซอฟท์ ซีดีเอ็น.
เมื่อได้เห็นเป้าหมายของไลบรารี jQuery และวิธีรวมไว้ในเอกสารของคุณแล้ว ตอนนี้เป็นเวลาที่จะนำ jQuery มาใช้งานจริง
ตอนนี้เรามาดำเนินการ jQuery ง่ายๆ โดยการเปลี่ยนสีข้อความส่วนหัวจากสีก่อนdefiมีสีดำถึงเขียว
<head>
<title>My First jQuery Web Page</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("h1").css("color", "#00ff00");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>ในโค้ด เราได้ดำเนินการ jQuery อย่างง่ายด้วยการเปลี่ยนสีของส่วนหัว เช่น องค์ประกอบ ใช้ตัวเลือกองค์ประกอบ jQuery และเมธอด css() เมื่อเอกสารพร้อม เรียกว่าเหตุการณ์พร้อมเอกสาร
คำสั่ง jQuery มักจะเริ่มต้นด้วยเครื่องหมายดอลลาร์ ( $) และลงท้ายด้วยเครื่องหมายอัฒภาค ( ;).
ใน jQuery เครื่องหมายดอลลาร์ ( $) เป็นเพียงนามแฝงสำหรับ jQuery พิจารณาโค้ดตัวอย่างต่อไปนี้ที่แสดงคำสั่ง jQuery ที่ง่ายที่สุด
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>ตัวอย่างแสดงข้อความเตือน “Hello I'm a JQuery sign” ให้กับผู้ใช้ มาดูคุณสมบัติบางอย่าง:
<script>: jQuery เป็นเพียงไลบรารี JavaScript รหัส jQuery สามารถวางไว้ในองค์ประกอบ <script>หรือคุณสามารถวางไว้ในไฟล์ JavaScript ภายนอก$(document).ready(handler); เรียกได้ว่าเป็นเหตุการณ์ที่พร้อม มันอยู่ที่ไหน handler เป็นฟังก์ชันที่ส่งผ่านไปยังเมธอดที่จะดำเนินการ ทันทีที่เอกสารพร้อม เช่น เมื่อลำดับชั้น DOM ถูกสร้างขึ้นอย่างสมบูรณ์วิธีการ jQuery ready() มักใช้กับฟังก์ชันนิรนาม ดังนั้น ตัวอย่างข้างต้นสามารถเขียนเป็นสัญกรณ์ชวเลขได้ดังนี้:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>ภายในฟังก์ชัน คุณสามารถเขียนคำสั่ง jQuery เพื่อดำเนินการตามไวยากรณ์พื้นฐาน เช่น:
$(selector).action();นกพิราบ $(selector) โดยพื้นฐานแล้วจะเลือกองค์ประกอบ HTML จากแผนผัง DOM เพื่อให้สามารถจัดการและ action() ใช้การดำเนินการบางอย่างกับองค์ประกอบที่เลือก เช่น การเปลี่ยนค่าของคุณสมบัติ CSS หรือการตั้งค่าเนื้อหาขององค์ประกอบ เป็นต้น
ตอนนี้ มาดูตัวอย่างอื่นที่ตั้งค่าข้อความย่อหน้า:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("p").text("Hello World!");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>ตัวอย่าง jQuery อ้างถึงตัวเลือก pและนี่จะเป็นการเลือกย่อหน้าทั้งหมด จากนั้นเลือกเมธอด text() กำหนดเนื้อหาข้อความของย่อหน้าด้วย “Hello World!"
ข้อความย่อหน้าในตัวอย่างก่อนหน้านี้จะถูกแทนที่โดยอัตโนมัติเมื่อเอกสารพร้อม แต่เรามาดูวิธีการทำในกรณีที่คุณต้องการดำเนินการก่อนรันโค้ด jQuery เพื่อแทนที่ข้อความของย่อหน้า
ลองพิจารณาตัวอย่างสุดท้าย:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello World!");
});
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
<button type="button">Replace Text</button>
</body>
</html>ในตัวอย่างนี้ ข้อความในย่อหน้าจะถูกแทนที่เฉพาะเมื่อเหตุการณ์การคลิกเกิดขึ้นที่ปุ่ม "Replace Text“ ซึ่งหมายถึงเมื่อผู้ใช้คลิกปุ่มนี้
คุณสามารถใช้ตัวเลือกรหัสเพื่อเลือกรายการเดียวที่มีรหัสเฉพาะบนหน้า
ตัวอย่างเช่น โค้ด jQuery ต่อไปนี้จะเลือกและเน้นองค์ประกอบที่มีแอตทริบิวต์ ID id="markid"เมื่อเอกสารพร้อม
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>สามารถใช้ตัวเลือกคลาสเพื่อเลือกองค์ประกอบที่มีคลาสเฉพาะได้
ตัวอย่างเช่น โค้ด jQuery ต่อไปนี้จะเลือกและเน้นองค์ประกอบที่มีแอตทริบิวต์ class class="markclass"เมื่อเอกสารพร้อม
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>สามารถใช้ตัวเลือกรายการเพื่อเลือกรายการตามชื่อรายการ
ตัวอย่างเช่น โค้ด jQuery ต่อไปนี้จะเลือกและเน้นย่อหน้าทั้งหมด เช่น องค์ประกอบ "<p>" ของเอกสารเมื่อพร้อม
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>คุณสามารถใช้ตัวเลือกแอตทริบิวต์เพื่อเลือกองค์ประกอบตามหนึ่งในแอตทริบิวต์ HTML เช่น แอตทริบิวต์ลิงก์ targetหรือแอตทริบิวต์ของอินพุต typeฯลฯ
ตัวอย่างเช่น โค้ด jQuery ต่อไปนี้จะเลือกและเน้นการป้อนข้อความทั้งหมด เช่น องค์ประกอบ "<input>" กับ type="text"เมื่อเอกสารพร้อม
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>คุณยังสามารถรวมตัวเลือก CSS เพื่อให้การเลือกของคุณแม่นยำยิ่งขึ้น
ตัวอย่างเช่น คุณสามารถรวมตัวเลือกคลาสเข้ากับตัวเลือกองค์ประกอบเพื่อค้นหาองค์ประกอบในเอกสารที่มีประเภทและคลาสที่แน่นอน
<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "red");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "yellow");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>นอกจากตัวเลือกแล้ว defiนิติ, jQuery มีตัวเลือกที่กำหนดเองเพื่อเพิ่มความสามารถในการเลือกองค์ประกอบบนเพจ
<script>
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");
// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>เหตุการณ์ต่างๆ มักจะเกิดขึ้นจากการโต้ตอบของผู้ใช้กับหน้าเว็บ เช่น เมื่อคลิกลิงก์หรือปุ่ม ป้อนข้อความลงในช่องป้อนหรือพื้นที่ข้อความ ทำการเลือกในช่องเลือก กดปุ่มบนแป้นพิมพ์ เลื่อนพอยเตอร์เมาส์ ฯลฯ ในบางกรณี เบราว์เซอร์สามารถทริกเกอร์เหตุการณ์ต่างๆ เช่น เหตุการณ์การโหลดหน้าเว็บและการดาวน์โหลด
jQuery ปรับปรุงกลไกการจัดการเหตุการณ์พื้นฐานโดยเสนอวิธีการเหตุการณ์สำหรับเหตุการณ์เบราว์เซอร์เนทีฟส่วนใหญ่ วิธีการเหล่านี้บางส่วนได้แก่ ready(), click(), keypress(), focus(), blur(), change()ฯลฯ
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>โดยทั่วไป เหตุการณ์สามารถแบ่งออกเป็นสี่กลุ่มหลัก:
เหตุการณ์ของเมาส์จะถูกเรียกใช้เมื่อผู้ใช้คลิกที่รายการ เลื่อนตัวชี้เมาส์ ฯลฯ
ต่อไปนี้เป็นวิธี jQuery ที่ใช้กันทั่วไปเพื่อจัดการกับเหตุการณ์ของเมาส์
click()วิธีการ click() แนบฟังก์ชันตัวจัดการเหตุการณ์กับองค์ประกอบที่เลือกสำหรับเหตุการณ์ “click“. ฟังก์ชันที่เชื่อมโยงจะดำเนินการเมื่อผู้ใช้คลิกที่รายการนั้น ตัวอย่างต่อไปนี้จะซ่อนองค์ประกอบ <p> ในหน้าเมื่อคลิก
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()วิธีการ dblclick() แนบฟังก์ชันตัวจัดการเหตุการณ์กับองค์ประกอบที่เลือกสำหรับเหตุการณ์ “dblclick“. ฟังก์ชันที่เชื่อมโยงจะดำเนินการเมื่อผู้ใช้คลิกสองครั้งที่รายการนั้น ตัวอย่างต่อไปนี้จะซ่อนองค์ประกอบ <p> เมื่อคุณคลิกสองครั้ง
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()วิธีการ hover() แนบฟังก์ชันตัวจัดการเหตุการณ์หนึ่งหรือสองฟังก์ชันกับองค์ประกอบที่เลือกซึ่งดำเนินการเมื่อตัวชี้เมาส์เลื่อนเข้าและออกจากองค์ประกอบ ฟังก์ชันแรกจะทำงานเมื่อผู้ใช้วางตัวชี้เมาส์ไว้บนรายการ ขณะที่ฟังก์ชันที่สองจะทำงานเมื่อผู้ใช้เอาตัวชี้เมาส์ออกจากรายการนั้น
ตัวอย่างต่อไปนี้จะเน้นรายการ <p> เมื่อคุณวางเคอร์เซอร์ไว้ การไฮไลท์จะถูกลบออกเมื่อคุณลบเคอร์เซอร์
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()วิธีการ mouseenter() แนบฟังก์ชันตัวจัดการเหตุการณ์กับองค์ประกอบที่เลือกซึ่งจะดำเนินการเมื่อเมาส์เข้าสู่องค์ประกอบ ตัวอย่างต่อไปนี้จะเพิ่มการเน้นคลาสให้กับองค์ประกอบ <p> เมื่อคุณวางเคอร์เซอร์ไว้บนนั้น
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()วิธีการ mouseleave() แนบฟังก์ชันตัวจัดการเหตุการณ์กับรายการที่เลือกซึ่งทำงานเมื่อเมาส์ออกจากรายการ ตัวอย่างต่อไปนี้จะลบการเน้นคลาสออกจากองค์ประกอบ <p> เมื่อคุณเอาเคอร์เซอร์ออก
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>เหตุการณ์แป้นพิมพ์เกิดขึ้นเมื่อผู้ใช้กดหรือปล่อยแป้นบนแป้นพิมพ์ มาดูวิธี jQuery ที่ใช้กันทั่วไปเพื่อจัดการกับเหตุการณ์แป้นพิมพ์
keypress()วิธีการ keypress() แนบฟังก์ชันการจัดการเหตุการณ์กับองค์ประกอบที่เลือก (โดยทั่วไปคือตัวควบคุมฟอร์ม) ซึ่งจะทำงานเมื่อเบราว์เซอร์ได้รับอินพุตจากแป้นพิมพ์จากผู้ใช้ ตัวอย่างต่อไปนี้จะแสดงข้อความเมื่อมีการทริกเกอร์เหตุการณ์ keypress และกี่ครั้งที่มันถูกเรียกใช้เมื่อคุณกดปุ่มบนแป้นพิมพ์ของคุณ
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>เหตุการณ์การกดแป้นจะคล้ายกับเหตุการณ์การกดแป้น ยกเว้นตัวปรับแต่งและแป้นที่ไม่พิมพ์ เช่น Shift, Esc, Backspace หรือ Delete, แป้นลูกศร เป็นต้น พวกเขาเริ่มเหตุการณ์การกดปุ่ม แต่ไม่ใช่เหตุการณ์การกดปุ่ม
keydown()วิธีการ keydown() แนบฟังก์ชันการจัดการเหตุการณ์กับรายการที่เลือก (โดยทั่วไปคือการควบคุมแบบฟอร์ม) ซึ่งจะดำเนินการเมื่อผู้ใช้กดปุ่มบนแป้นพิมพ์เป็นครั้งแรก ตัวอย่างต่อไปนี้จะแสดงข้อความเมื่อมีการทริกเกอร์เหตุการณ์ keydown และกี่ครั้งที่มันถูกเรียกใช้เมื่อคุณกดปุ่มบนแป้นพิมพ์ของคุณ
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()วิธีการ keyup() แนบฟังก์ชันการจัดการเหตุการณ์กับองค์ประกอบที่เลือก (โดยทั่วไปคือการควบคุมรูปแบบ) ที่ดำเนินการเมื่อผู้ใช้ปล่อยปุ่มบนแป้นพิมพ์ ตัวอย่างต่อไปนี้จะแสดงข้อความเมื่อมีการทริกเกอร์เหตุการณ์ keyup และจำนวนครั้งที่เรียกใช้เมื่อคุณกดและปล่อยปุ่มบนแป้นพิมพ์ของคุณ
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>เหตุการณ์ฟอร์มจะถูกทริกเกอร์เมื่อตัวควบคุมฟอร์มได้รับหรือสูญเสียโฟกัส หรือเมื่อผู้ใช้เปลี่ยนค่าการควบคุมฟอร์ม เช่น การพิมพ์ข้อความลงในช่องป้อนข้อความ การเลือกตัวเลือกในกล่องเลือก เป็นต้น ต่อไปนี้เป็นวิธี jQuery ที่ใช้กันทั่วไปเพื่อจัดการกับเหตุการณ์ในฟอร์ม
change()วิธีการ change() แนบฟังก์ชันตัวจัดการเหตุการณ์กับองค์ประกอบ <input> และดำเนินการเมื่อค่าเปลี่ยนแปลง ตัวอย่างต่อไปนี้จะแสดงข้อความเตือนเมื่อเลือกตัวเลือกในกล่องตัวเลือกแบบเลื่อนลง
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>สำหรับคลิกบ็อกซ์ กล่องกาเครื่องหมาย และปุ่มตัวเลือก เหตุการณ์จะเริ่มทำงานทันทีเมื่อผู้ใช้เลือกเมาส์ แต่สำหรับการป้อนข้อความและพื้นที่ข้อความ เหตุการณ์จะเริ่มทำงานหลังจากองค์ประกอบสูญเสียโฟกัส
focus()วิธีการ focus() แนบฟังก์ชันตัวจัดการเหตุการณ์กับองค์ประกอบที่เลือก (โดยทั่วไปคือการควบคุมและการผูกแบบฟอร์ม) ซึ่งจะดำเนินการเมื่อได้รับการโฟกัส ตัวอย่างต่อไปนี้จะแสดงข้อความเมื่อการป้อนข้อความได้รับโฟกัส
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()วิธีการ blur() แนบฟังก์ชันตัวจัดการเหตุการณ์เพื่อสร้างองค์ประกอบต่างๆ เช่น <input>, <textarea>, <select> ซึ่งจะดำเนินการเมื่อสูญเสียโฟกัส ตัวอย่างต่อไปนี้จะแสดงข้อความเมื่อการป้อนข้อความหลุดโฟกัส
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()วิธีการ submit() แนบฟังก์ชันตัวจัดการเหตุการณ์กับองค์ประกอบ <form> ซึ่งทำงานเมื่อผู้ใช้พยายามส่งแบบฟอร์ม ตัวอย่างต่อไปนี้จะแสดงข้อความตามค่าที่ป้อนเมื่อพยายามส่งแบบฟอร์ม
<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>เหตุการณ์ยังเริ่มทำงานในสถานการณ์ที่หน้า DOM (Document Object Model) พร้อมหรือเมื่อผู้ใช้ปรับขนาดหรือเลื่อนหน้าต่างเบราว์เซอร์ เป็นต้น ต่อไปนี้เป็นวิธี jQuery ที่ใช้กันทั่วไปเพื่อจัดการกับเหตุการณ์ประเภทนี้
ready()วิธีการ ready() ระบุฟังก์ชันที่จะดำเนินการเมื่อโหลด DOM เต็ม
ตัวอย่างต่อไปนี้จะแทนที่ข้อความในย่อหน้าทันทีที่สร้างลำดับชั้น DOM อย่างสมบูรณ์และพร้อมที่จะจัดการ
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()วิธีการ resize() แนบฟังก์ชันตัวจัดการเหตุการณ์กับองค์ประกอบหน้าต่างที่ทำงานเมื่อขนาดของหน้าต่างเบราว์เซอร์เปลี่ยนแปลง
ตัวอย่างต่อไปนี้จะแสดงความกว้างและความสูงปัจจุบันของหน้าต่างเบราว์เซอร์เมื่อคุณพยายามปรับขนาดโดยการลากมุม
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()วิธีการ scroll() แนบฟังก์ชันตัวจัดการเหตุการณ์กับหน้าต่างหรือกับ iframe และรายการเลื่อนที่ทำงานเมื่อใดก็ตามที่ตำแหน่งการเลื่อนของรายการเปลี่ยนแปลง
ตัวอย่างต่อไปนี้จะแสดงข้อความเมื่อเลื่อนหน้าต่างเบราว์เซอร์
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
ผู้คนนับล้านชำระค่าบริการสตรีมมิ่ง โดยจ่ายค่าธรรมเนียมการสมัครสมาชิกรายเดือน เป็นความเห็นทั่วไปที่คุณ...
Coveware by Veeam จะยังคงให้บริการตอบสนองต่อเหตุการณ์การขู่กรรโชกทางไซเบอร์ต่อไป Coveware จะนำเสนอความสามารถในการนิติเวชและการแก้ไข...
การบำรุงรักษาเชิงคาดการณ์กำลังปฏิวัติภาคส่วนน้ำมันและก๊าซ ด้วยแนวทางเชิงรุกและนวัตกรรมในการจัดการโรงงาน...
UK CMA ได้ออกคำเตือนเกี่ยวกับพฤติกรรมของ Big Tech ในตลาดปัญญาประดิษฐ์ ที่นั่น…