JQuery เป็นไลบรารี JavaScript นั่นคือส่วนขยายไปยัง JavaScript ซึ่งใช้เพื่อตอบสนองความต้องการเอฟเฟกต์พิเศษที่เพิ่มขึ้นต่าง ๆ มันคือ JavaScript
มาเขียนโปรแกรม JQ พื้นฐานเพื่อแสดง JQ
1. วัตถุประสงค์พื้นฐาน
มีสามปุ่มในหน้าเว็บหนึ่งสามารถซ่อนข้อความได้เท่านั้นหนึ่งสามารถแสดงข้อความและอีกปุ่มหนึ่งสามารถซ่อนและแสดงข้อความได้ในเวลาเดียวกัน คลิกเพื่อแสดงจากนั้นคลิกเพื่อซ่อนและวนลูปอย่างไม่สิ้นสุด
2. กระบวนการผลิต
1. ก่อนอื่นคุณต้องดาวน์โหลดไฟล์สนับสนุน JQ จากเว็บไซต์ทางการ JQ และใส่ลงในโฟลเดอร์ไซต์ของคุณ ไฟล์สนับสนุนนี้คือ jQuery1.11 คุณสามารถดาวน์โหลด jQuery1.11 ซึ่งเข้ากันได้กับเบราว์เซอร์เก่า IE6 จากเว็บไซต์ทางการของ JQuery แทนที่จะเป็น JQuery2 ซึ่งไม่สามารถใช้งานได้กับเบราว์เซอร์เก่า IE6
2. รหัสหน้าเว็บทั้งหมดมีดังนี้และจากนั้นอธิบายในแฟรกเมนต์:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script type = "text/javascript" $ (document) .ready (function () {$ ("#hide") คลิก (ฟังก์ชั่น () {$ ("#text"). ซ่อน ();}); $ ("#show"). คลิก (ฟังก์ชั่น () {$ ("#text");};}; </script> <!-<style type = "text/css"> #text {display: none} </style>-> <title> jq fade out และแสดง </title> </head> <body> <p id = "text"> tossed text </p> </html>(1) <body> ส่วนหนึ่ง
ชิ้นส่วน <head> ส่วนใหญ่ใช้ส่วนรหัสหลัก มาพูดถึงเรื่องนี้ในภายหลัง มาพูดคุยเกี่ยวกับ <body> ส่วน <body> <!-นี่คือข้อความที่มี ID เป็นข้อความสำหรับการควบคุมสคริปต์ง่าย ๆ-> <p id = "ข้อความ"> โยนข้อความ </p> <!-ตั้งปุ่มด้วย ids เพื่อซ่อนแสดง, สลับตามลำดับ-> <button = "ซ่อน"> ซ่อน </ปุ่ม>
(2) <head> ส่วนหนึ่ง
<head> <!-การเข้ารหัสหน้าเว็บประกาศว่าคุณควรใช้ jq-> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script type = "text/javaScript" src = "js/jquery-1.11.1.1.1.1.1. ด้วย $ (เอกสาร) .ready (function () {}); หากคุณไม่ต้องดำเนินการตามกรอบงานที่ได้จากฟังก์ชั่นนี้คุณไม่สามารถเรียกใช้งาน-> $ (เอกสาร). พร้อม (ฟังก์ชั่น () {<!-จากนั้นเขียนฟังก์ชั่นที่ต้องการในฟังก์ชั่นนี้-> <! $ ("#text"). ซ่อน ();}); </head>