jQuery - คู่มือฉบับย่อ

jQuery คืออะไร?

jQuery เป็นไลบรารี JavaScript ที่รวดเร็วและรัดกุมซึ่งสร้างโดย John Resig ในปี 2549 พร้อมคำขวัญที่ดี: Write less, do more. jQuery ช่วยลดความซับซ้อนในการข้ามเอกสาร HTML การจัดการเหตุการณ์การเคลื่อนไหวและการโต้ตอบ Ajax เพื่อการพัฒนาเว็บอย่างรวดเร็ว jQuery เป็นชุดเครื่องมือ JavaScript ที่ออกแบบมาเพื่อลดความซับซ้อนของงานต่างๆโดยการเขียนโค้ดน้อยลง นี่คือรายการคุณสมบัติหลักที่สำคัญที่สนับสนุนโดย jQuery -

  • DOM manipulation - jQuery ทำให้ง่ายต่อการเลือกองค์ประกอบ DOM เจรจาต่อรองและแก้ไขเนื้อหาโดยใช้เครื่องมือเลือกโอเพ่นซอร์สข้ามเบราว์เซอร์ที่เรียกว่า Sizzle.

  • Event handling - jQuery นำเสนอวิธีที่ยอดเยี่ยมในการจับภาพเหตุการณ์ที่หลากหลายเช่นผู้ใช้คลิกที่ลิงก์โดยไม่จำเป็นต้องยุ่งกับโค้ด HTML ด้วยตัวจัดการเหตุการณ์

  • AJAX Support - jQuery ช่วยคุณได้มากในการพัฒนาไซต์ที่ตอบสนองและมีคุณลักษณะโดยใช้เทคโนโลยี AJAX

  • Animations - jQuery มาพร้อมกับเอฟเฟกต์ภาพเคลื่อนไหวในตัวมากมายที่คุณสามารถใช้ในเว็บไซต์ของคุณ

  • Lightweight - jQuery เป็นไลบรารีที่มีน้ำหนักเบามาก - มีขนาดประมาณ 19KB (Minified และ gzipped)

  • Cross Browser Support - jQuery รองรับข้ามเบราว์เซอร์และทำงานได้ดีใน IE 6.0+, FF 2.0+, Safari 3.0+, Chrome และ Opera 9.0+

  • Latest Technology - jQuery รองรับตัวเลือก CSS3 และไวยากรณ์ XPath พื้นฐาน

วิธีใช้ jQuery

มีสองวิธีในการใช้ jQuery

  • Local Installation - คุณสามารถดาวน์โหลดไลบรารี jQuery บนเครื่องของคุณและรวมไว้ในโค้ด HTML ของคุณ

  • CDN Based Version - คุณสามารถรวมไลบรารี jQuery ลงในโค้ด HTML ของคุณได้โดยตรงจาก Content Delivery Network (CDN)

การติดตั้งภายในเครื่อง

  • ไปที่ไฟล์ https://jquery.com/download/ เพื่อดาวน์โหลดเวอร์ชันล่าสุดที่มี

  • ตอนนี้ใส่ดาวน์โหลด jquery-2.1.3.min.js ไฟล์ในไดเรกทอรีของเว็บไซต์ของคุณเช่น / jquery

ตัวอย่าง

ตอนนี้คุณสามารถรวมไลบรารีjqueryไว้ในไฟล์ HTML ของคุณได้ดังนี้ -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

เวอร์ชันที่ใช้ CDN

คุณสามารถรวมไลบรารี jQuery ไว้ในโค้ด HTML ของคุณได้โดยตรงจาก Content Delivery Network (CDN) Google และ Microsoft นำเสนอเนื้อหาสำหรับเวอร์ชันล่าสุด

เราใช้ไลบรารีเวอร์ชัน Google CDN ตลอดบทช่วยสอนนี้

ตัวอย่าง

ตอนนี้ให้เราเขียนตัวอย่างข้างต้นใหม่โดยใช้ไลบรารี jQuery จาก Google CDN

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

วิธีการเรียกใช้ฟังก์ชันห้องสมุด jQuery

เกือบทุกอย่างเราทำเมื่อใช้ jQuery อ่านหรือจัดการรูปแบบวัตถุเอกสาร (DOM) เราต้องแน่ใจว่าเราเริ่มเพิ่มเหตุการณ์ ฯลฯ ทันทีที่ DOM พร้อม

หากคุณต้องการให้เหตุการณ์ทำงานบนเพจของคุณคุณควรเรียกใช้ในฟังก์ชัน $ (document) .ready () ทุกสิ่งที่อยู่ภายในจะโหลดทันทีที่โหลด DOM และก่อนที่จะโหลดเนื้อหาของหน้า

ในการดำเนินการนี้เราจะลงทะเบียนเหตุการณ์ที่พร้อมสำหรับเอกสารดังนี้ -

$(document).ready(function() {
   // do stuff when DOM is ready
});

หากต้องการเรียกใช้ฟังก์ชันไลบรารี jQuery ให้ใช้แท็กสคริปต์ HTML ดังที่แสดงด้านล่าง -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

วิธีใช้สคริปต์ที่กำหนดเอง

การเขียนโค้ดที่กำหนดเองในไฟล์ JavaScript ที่กำหนดเองจะดีกว่า: custom.jsดังต่อไปนี้ -

/* Filename: custom.js */
$(document).ready(function() { $("div").click(function() {
      alert("Hello, world!");
   });
});

ตอนนี้เราสามารถรวม custom.js ไฟล์ในไฟล์ HTML ของเราดังนี้ -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" src = "/jquery/custom.js">
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

การใช้หลายไลบรารี

คุณสามารถใช้หลายไลบรารีร่วมกันได้โดยไม่ขัดแย้งกัน ตัวอย่างเช่นคุณสามารถใช้ไลบรารี jQuery และ MooTool javascript ร่วมกันได้ คุณสามารถตรวจสอบวิธีjQuery noConflictเพื่อดูรายละเอียดเพิ่มเติม

Next คืออะไร?

อย่ากังวลมากเกินไปหากคุณไม่เข้าใจตัวอย่างข้างต้น คุณจะเข้าใจพวกเขาเร็ว ๆ นี้ในบทต่อ ๆ ไป

บทต่อไปจะพยายามพูดถึงแนวคิดพื้นฐานบางประการซึ่งมาจาก JavaScript ทั่วไป

jQuery เป็นเฟรมเวิร์กที่สร้างขึ้นโดยใช้ความสามารถของ JavaScript ดังนั้นคุณสามารถใช้ฟังก์ชันและความสามารถอื่น ๆ ทั้งหมดที่มีใน JavaScript บทนี้จะอธิบายแนวคิดพื้นฐานส่วนใหญ่ แต่ใช้บ่อยใน jQuery

สตริง

สตริงใน JavaScript เป็นอ็อบเจ็กต์ที่ไม่เปลี่ยนรูปซึ่งไม่มีอักขระหนึ่งตัวหรือหลายตัว ต่อไปนี้เป็นตัวอย่างที่ถูกต้องของสตริง JavaScript -

"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"

ตัวเลข

ตัวเลขใน JavaScript เป็นค่า IEEE 754 รูปแบบ 64 บิตที่มีความแม่นยำสองเท่า พวกมันไม่เปลี่ยนรูปเช่นเดียวกับสตริง ต่อไปนี้เป็นตัวอย่างที่ถูกต้องของ JavaScript Numbers -

5350
120.27
0.26

บูลีน

บูลีนใน JavaScript สามารถเป็นได้ true หรือ false. ถ้าตัวเลขเป็นศูนย์จะมีค่าเริ่มต้นเป็นเท็จ หากสตริงว่างมีค่าเริ่มต้นเป็นเท็จ

ต่อไปนี้เป็นตัวอย่างที่ถูกต้องของ JavaScript Boolean -

true      // true
false     // false
0         // false
1         // true
""        // false
"hello"   // true

วัตถุ

JavaScript รองรับแนวคิด Object ได้เป็นอย่างดี คุณสามารถสร้างวัตถุโดยใช้ตัวอักษรของวัตถุได้ดังนี้ -

var emp = {
   name: "Zara",
   age: 10
};

คุณสามารถเขียนและอ่านคุณสมบัติของวัตถุโดยใช้สัญกรณ์จุดดังนี้ -

// Getting object properties
emp.name  // ==> Zara
emp.age   // ==> 10

// Setting object properties
emp.name = "Daisy"  // <== Daisy
emp.age  =  20      // <== 20

อาร์เรย์

คุณสามารถกำหนดอาร์เรย์โดยใช้ลิเทอรัลอาร์เรย์ดังนี้ -

var x = [];
var y = [1, 2, 3, 4, 5];

อาร์เรย์มีไฟล์ length คุณสมบัติที่มีประโยชน์สำหรับการทำซ้ำ -

var x = [1, 2, 3, 4, 5];

for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

ฟังก์ชั่น

ฟังก์ชันใน JavaScript สามารถตั้งชื่อหรือไม่ระบุชื่อก็ได้ ฟังก์ชันที่ตั้งชื่อสามารถกำหนดได้โดยใช้คำสำคัญของฟังก์ชันดังนี้ -

function named(){
   // do some stuff here
}

ฟังก์ชันนิรนามสามารถกำหนดได้ในลักษณะเดียวกันกับฟังก์ชันปกติ แต่จะไม่มีชื่อใด ๆ

ฟังก์ชันนิรนามสามารถกำหนดให้กับตัวแปรหรือส่งผ่านไปยังวิธีการดังที่แสดงด้านล่าง

var handler = function (){
   // do some stuff here
}

JQuery ใช้ฟังก์ชันที่ไม่ระบุชื่อบ่อยมากดังนี้ -

$(document).ready(function(){
   // do some stuff here
});

อาร์กิวเมนต์

อาร์กิวเมนต์ตัวแปร JavaScript คืออาร์เรย์ชนิดหนึ่งที่มีคุณสมบัติความยาว ตัวอย่างต่อไปนี้อธิบายได้เป็นอย่างดี -

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

วัตถุอาร์กิวเมนต์ยังมีคุณสมบัติcalleeซึ่งหมายถึงฟังก์ชันที่คุณอยู่ภายใน ตัวอย่างเช่น -

function func() {
   return arguments.callee; 
}

func();                // ==> func

บริบท

คำหลักที่มีชื่อเสียงของ JavaScript thisอ้างถึงบริบทปัจจุบันเสมอ ภายในฟังก์ชันthis บริบทสามารถเปลี่ยนแปลงได้ขึ้นอยู่กับวิธีการเรียกใช้ฟังก์ชัน -

$(document).ready(function() {
   // this refers to window.document
});

$("div").click(function() {
   // this refers to a div DOM element
});

คุณสามารถระบุบริบทสำหรับการเรียกใช้ฟังก์ชันโดยใช้วิธีการในตัวฟังก์ชัน call() และ apply() วิธีการ

ความแตกต่างระหว่างพวกเขาคือวิธีที่พวกเขาส่งผ่านข้อโต้แย้ง การโทรส่งผ่านอาร์กิวเมนต์ทั้งหมดเป็นอาร์กิวเมนต์ของฟังก์ชันในขณะที่ใช้ยอมรับอาร์เรย์เป็นอาร์กิวเมนต์

function scope() {
   console.log(this, arguments.length);
}

scope() // window, 0
scope.call("foobar", [1,2]);  //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2

ขอบเขต

ขอบเขตของตัวแปรคือขอบเขตของโปรแกรมของคุณที่กำหนดไว้ ตัวแปร JavaScript จะมีเพียงสองขอบเขต

  • Global Variables - ตัวแปรส่วนกลางมีขอบเขตทั่วโลกซึ่งหมายความว่ามีการกำหนดทุกที่ในโค้ด JavaScript ของคุณ

  • Local Variables- ตัวแปรโลคัลจะมองเห็นได้เฉพาะในฟังก์ชันที่กำหนดไว้ พารามิเตอร์ของฟังก์ชันอยู่ในพื้นที่ของฟังก์ชันนั้นเสมอ

ภายในเนื้อความของฟังก์ชันตัวแปรโลคัลจะมีความสำคัญเหนือตัวแปรส่วนกลางที่มีชื่อเดียวกัน -

var myVar = "global";     // ==> Declare a global variable

function ( ) {
   var myVar = "local";   // ==> Declare a local variable
   document.write(myVar); // ==> local
}

โทรกลับ

การเรียกกลับเป็นฟังก์ชัน JavaScript ธรรมดาที่ส่งผ่านไปยังเมธอดบางอย่างเป็นอาร์กิวเมนต์หรือตัวเลือก การเรียกกลับบางรายการเป็นเพียงเหตุการณ์ที่เรียกเพื่อให้ผู้ใช้มีโอกาสตอบสนองเมื่อมีการเรียกใช้สถานะบางอย่าง

ระบบเหตุการณ์ของ jQuery ใช้การเรียกกลับดังกล่าวทุกที่เช่น -

$("body").click(function(event) {
   console.log("clicked: " + event.target);
});

การเรียกกลับส่วนใหญ่ให้อาร์กิวเมนต์และบริบท ในตัวอย่างตัวจัดการเหตุการณ์การเรียกกลับจะถูกเรียกด้วยอาร์กิวเมนต์เดียวคือเหตุการณ์

จำเป็นต้องมีการเรียกกลับบางอย่างเพื่อส่งคืนบางสิ่งบางอย่างบางรายการจะกำหนดให้ค่าส่งคืนนั้นเป็นทางเลือก เพื่อป้องกันการส่งแบบฟอร์มตัวจัดการเหตุการณ์ที่ส่งสามารถส่งคืนเท็จได้ดังนี้ -

$("#myform").submit(function() {
   return false;
});

การปิด

การปิดจะถูกสร้างขึ้นเมื่อใดก็ตามที่มีการเข้าถึงตัวแปรที่กำหนดนอกขอบเขตปัจจุบันจากภายในขอบเขตภายในบางส่วน

ตัวอย่างต่อไปนี้แสดงให้เห็นว่าตัวแปร counter สามารถมองเห็นได้ภายในฟังก์ชันการสร้างการเพิ่มและการพิมพ์ แต่จะมองไม่เห็นภายนอก -

function create() {
   var counter = 0;
	
   return {
      increment: function() {
         counter++;
      },
	   print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print();     // ==> 1

รูปแบบนี้ช่วยให้คุณสร้างวัตถุด้วยวิธีการที่ดำเนินการกับข้อมูลที่โลกภายนอกมองไม่เห็น ควรสังเกตว่าdata hiding เป็นพื้นฐานของการเขียนโปรแกรมเชิงวัตถุ

รูปแบบพร็อกซี

พร็อกซีคืออ็อบเจ็กต์ที่สามารถใช้เพื่อควบคุมการเข้าถึงอ็อบเจ็กต์อื่น มันใช้อินเทอร์เฟซเดียวกับออบเจ็กต์อื่น ๆ และส่งต่อการเรียกใช้เมธอดใด ๆ วัตถุอื่น ๆ นี้มักเรียกว่าวัตถุจริง

พร็อกซีสามารถสร้างอินสแตนซ์แทนหัวเรื่องจริงและอนุญาตให้เข้าถึงได้จากระยะไกล เราสามารถบันทึกเมธอด setArray ของ jQuery ในการปิดและเขียนทับได้ดังนี้ -

(function() {
   // log all calls to setArray
   var proxied = jQuery.fn.setArray;

   jQuery.fn.setArray = function() {
      console.log(this, arguments);
      return proxied.apply(this, arguments);
   };
	
})();

ด้านบนรวมโค้ดไว้ในฟังก์ชันเพื่อซ่อนตัวแปรพร็อกซี จากนั้นพร็อกซีจะบันทึกการโทรทั้งหมดไปยังเมธอดและมอบหมายการโทรไปยังเมธอดดั้งเดิม การใช้ใช้ (อาร์กิวเมนต์นี้) จะรับประกันได้ว่าผู้โทรจะไม่สามารถสังเกตเห็นความแตกต่างระหว่างวิธีดั้งเดิมและวิธีการพร็อกซีได้

ฟังก์ชั่นในตัว

JavaScript มาพร้อมกับชุดฟังก์ชันที่มีประโยชน์ในตัว วิธีการเหล่านี้สามารถใช้เพื่อจัดการกับสตริงตัวเลขและวันที่

ต่อไปนี้เป็นฟังก์ชัน JavaScript ที่สำคัญ -

ซีเนียร์ วิธีการและคำอธิบาย
1

charAt()

ส่งกลับอักขระที่ดัชนีที่ระบุ
2

concat()

รวมข้อความของสองสตริงและส่งคืนสตริงใหม่
3

forEach()

เรียกใช้ฟังก์ชันสำหรับแต่ละองค์ประกอบในอาร์เรย์
4

indexOf()

ส่งคืนดัชนีภายในอ็อบเจ็กต์สตริงการเรียกของการเกิดขึ้นครั้งแรกของค่าที่ระบุหรือ -1 หากไม่พบ
5

length()

ส่งกลับความยาวของสตริง
6

pop()

ลบองค์ประกอบสุดท้ายออกจากอาร์เรย์และส่งคืนองค์ประกอบนั้น
7

push()

เพิ่มองค์ประกอบอย่างน้อยหนึ่งรายการที่ส่วนท้ายของอาร์เรย์และส่งกลับความยาวใหม่ของอาร์เรย์
8

reverse()

กลับลำดับขององค์ประกอบของอาร์เรย์ - อันแรกกลายเป็นลำดับสุดท้ายและสุดท้ายจะกลายเป็นลำดับแรก
9

sort()

จัดเรียงองค์ประกอบของอาร์เรย์
10

substr()

ส่งคืนอักขระในสตริงที่เริ่มต้นที่ตำแหน่งที่ระบุผ่านจำนวนอักขระที่ระบุ
11

toLowerCase()

ส่งคืนค่าสตริงการโทรที่แปลงเป็นตัวพิมพ์เล็ก
12

toString()

ส่งกลับการแสดงสตริงของค่าของตัวเลข
13

toUpperCase()

ส่งกลับค่าสตริงการโทรที่แปลงเป็นตัวพิมพ์ใหญ่

Document Object Model

Document Object Model คือโครงสร้างต้นไม้ขององค์ประกอบต่างๆของ HTML ดังนี้ -

<html>
   <head>
      <title>The jQuery Example</title>
   </head>
	
   <body>
      <div>
         <p>This is a paragraph.</p>
         <p>This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ต่อไปนี้เป็นประเด็นสำคัญเกี่ยวกับโครงสร้างต้นไม้ข้างต้น -

  • <html> เป็นบรรพบุรุษขององค์ประกอบอื่น ๆ ทั้งหมด กล่าวอีกนัยหนึ่งองค์ประกอบอื่น ๆ ทั้งหมดเป็นลูกหลานของ <html>

  • องค์ประกอบ <head> และ <body> ไม่ได้เป็นเพียงลูกหลานเท่านั้น แต่ยังเป็นลูก ๆ ของ <html> ด้วย

  • ในทำนองเดียวกันนอกจากจะเป็นบรรพบุรุษของ <head> และ <body> แล้ว <html> ยังเป็นพ่อแม่ของพวกเขาด้วย

  • องค์ประกอบ <p> คือลูก ๆ (และลูกหลาน) ของ <div> ลูกหลานของ <body> และ <html> และพี่น้องของกันและกัน <p> องค์ประกอบ

ในขณะที่การเรียนรู้แนวคิด jQuery ก็จะเป็นประโยชน์ที่จะมีการทำความเข้าใจเกี่ยวกับ DOM ถ้าคุณไม่ได้ตระหนักถึง DOM แล้วฉันขอแนะนำให้ไปผ่านการกวดวิชาที่เรียบง่ายของเราในDOM กวดวิชา

ไลบรารี jQuery ใช้ประโยชน์จากตัวเลือก Cascading Style Sheets (CSS) เพื่อให้เราเข้าถึงองค์ประกอบหรือกลุ่มขององค์ประกอบใน Document Object Model (DOM) ได้อย่างรวดเร็วและง่ายดาย

jQuery Selector เป็นฟังก์ชันที่ใช้นิพจน์เพื่อค้นหาองค์ประกอบที่ตรงกันจาก DOM ตามเกณฑ์ที่กำหนด คุณสามารถพูดได้ว่าตัวเลือกใช้เพื่อเลือกองค์ประกอบ HTML อย่างน้อยหนึ่งรายการโดยใช้ jQuery เมื่อเลือกองค์ประกอบแล้วเราสามารถดำเนินการต่างๆกับองค์ประกอบที่เลือกนั้นได้

ฟังก์ชันโรงงาน $ ()

ตัวเลือก jQuery เริ่มต้นด้วยเครื่องหมายดอลลาร์และวงเล็บ - $(). ฟังก์ชั่นโรงงาน$() ใช้ประโยชน์จากสิ่งปลูกสร้างสามแบบต่อไปนี้ในขณะที่เลือกองค์ประกอบในเอกสารที่กำหนด -

ซีเนียร์ ตัวเลือกและคำอธิบาย
1

Tag Name

แสดงชื่อแท็กที่มีอยู่ใน DOM ตัวอย่างเช่น$('p') เลือกย่อหน้าทั้งหมด <p> ในเอกสาร
2

Tag ID

แสดงแท็กที่พร้อมใช้งานกับ ID ที่ระบุใน DOM ตัวอย่างเช่น$('#some-id') เลือกองค์ประกอบเดียวในเอกสารที่มี ID ของ some-id
3

Tag Class

แสดงแท็กที่มีอยู่ในคลาสที่กำหนดใน DOM ตัวอย่างเช่น$('.some-class') เลือกองค์ประกอบทั้งหมดในเอกสารที่มีคลาสบางคลาส

รายการทั้งหมดข้างต้นสามารถใช้ด้วยตัวเองหรือใช้ร่วมกับตัวเลือกอื่น ๆ ตัวเลือก jQuery ทั้งหมดใช้หลักการเดียวกันยกเว้นการปรับแต่งบางอย่าง

NOTE - ฟังก์ชั่นโรงงาน $() เป็นคำพ้องความหมายของ jQuery()ฟังก์ชัน ดังนั้นในกรณีที่คุณใช้ไลบรารี JavaScript อื่นอยู่ที่ไหน$ เครื่องหมายขัดแย้งกับสิ่งอื่นคุณสามารถแทนที่ได้ $ ลงชื่อโดย jQuery ชื่อและคุณสามารถใช้ฟังก์ชัน jQuery() แทน $().

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างง่ายๆที่ใช้ประโยชน์จากตัวเลือกแท็ก สิ่งนี้จะเลือกองค์ประกอบทั้งหมดที่มีชื่อแท็กp.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

วิธีใช้ Selectors?

ตัวเลือกมีประโยชน์มากและจะต้องใช้ในทุกขั้นตอนขณะใช้ jQuery พวกเขาได้รับองค์ประกอบที่แน่นอนที่คุณต้องการจากเอกสาร HTML ของคุณ

ตารางต่อไปนี้แสดงรายการตัวเลือกพื้นฐานสองสามตัวและอธิบายด้วยตัวอย่าง

ซีเนียร์ ตัวเลือกและคำอธิบาย
1 ชื่อ

เลือกองค์ประกอบทั้งหมดที่ตรงกับองค์ประกอบที่กำหนด Name.
2 #ID

เลือกองค์ประกอบเดียวที่ตรงกับที่กำหนด ID.
3 . ชั้น

เลือกองค์ประกอบทั้งหมดที่ตรงกับที่กำหนด Class.
4 สากล (*)

เลือกองค์ประกอบทั้งหมดที่มีอยู่ใน DOM
5 หลายองค์ประกอบ E, F, G

เลือกผลลัพธ์รวมของตัวเลือกที่ระบุทั้งหมด E, F หรือ G.

ตัวอย่างตัวเลือก

คล้ายกับไวยากรณ์และตัวอย่างข้างต้นตัวอย่างต่อไปนี้จะช่วยให้คุณเข้าใจเกี่ยวกับการใช้ตัวเลือกที่มีประโยชน์ประเภทต่างๆ -

ซีเนียร์ ตัวเลือกและคำอธิบาย
1

$('*')

ตัวเลือกนี้จะเลือกองค์ประกอบทั้งหมดในเอกสาร
2

$("p > *")

ตัวเลือกนี้จะเลือกองค์ประกอบทั้งหมดที่เป็นลูกขององค์ประกอบย่อหน้า
3

$("#specialID")

ฟังก์ชันตัวเลือกนี้รับองค์ประกอบที่มี id = "specialID"
4

$(".specialClass")

ตัวเลือกนี้ได้รับองค์ประกอบทั้งหมดที่มีระดับของspecialClass
5

$("li:not(.myclass)")

เลือกองค์ประกอบทั้งหมดที่ตรงกับ <li> ที่ไม่มี class = "myclass"
6

$("a#specialID.specialClass")

ตัวเลือกนี้ตรงกับการเชื่อมโยงที่มี ID ของspecialIDและชั้นของspecialClass
7

$("p a.specialClass")

ตัวเลือกนี้จับคู่ลิงก์กับคลาสspecialClass ที่ประกาศไว้ภายใน <p> องค์ประกอบ
8

$("ul li:first")

ตัวเลือกนี้ได้รับเฉพาะองค์ประกอบ <li> แรกของ <ul>
9

$("#container p")

เลือกองค์ประกอบทั้งหมดจับคู่โดย <p> ที่เป็นลูกหลานขององค์ประกอบที่มี ID ของภาชนะ
10

$("li > ul")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <ul> ซึ่งเป็นลูกขององค์ประกอบที่จับคู่โดย <li>
11

$("strong + em")

เลือกองค์ประกอบทั้งหมดที่ตรงกับ <em> ที่ตามด้วยองค์ประกอบพี่น้องที่จับคู่โดย <strong> ทันที
12

$("p ~ ul")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <ul> ตามองค์ประกอบพี่น้องที่จับคู่โดย <p>
13

$("code, em, strong")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <code> หรือ <em> หรือ <strong>
14

$("p strong, .myclass")

เลือกองค์ประกอบทั้งหมดจับคู่โดย <strong> ที่เป็นลูกหลานขององค์ประกอบจับคู่โดย <p> เช่นเดียวกับองค์ประกอบทั้งหมดที่มีระดับของMyClass
15

$(":empty")

เลือกองค์ประกอบทั้งหมดที่ไม่มีลูก
16

$("p:empty")

เลือกองค์ประกอบทั้งหมดที่ตรงกับ <p> ที่ไม่มีลูก
17

$("div[p]")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <div> ที่มีองค์ประกอบที่ตรงกับ <p>
18

$("p[.myclass]")

เลือกองค์ประกอบทั้งหมดจับคู่โดย <p> ที่มีองค์ประกอบที่มีระดับของMyClass
19

$("a[@rel]")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <a> ที่มีแอตทริบิวต์ rel
20

$("input[@name = myname]")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <input> ซึ่งมีค่าชื่อเท่ากับmyname ทุกประการ
21

$("input[@name^=myname]")

เลือกองค์ประกอบทั้งหมดจับคู่โดย <input> ที่มีค่าชื่อขึ้นต้นด้วยmyname
22

$("a[@rel$=self]")

เลือกองค์ประกอบทั้งหมดที่ตรงกับ <a> ที่มี relค่าแอตทริบิวต์ที่ลงท้ายด้วยตนเอง
23

$("a[@href*=domain.com]")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <a> ที่มีค่า href ที่มี domain.com
24

$("li:even")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <li> ที่มีค่าดัชนีคู่
25

$("tr:odd")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <tr> ที่มีค่าดัชนีคี่
26

$("li:first")

เลือกองค์ประกอบ <li> แรก
27

$("li:last")

เลือกองค์ประกอบ <li> สุดท้าย
28

$("li:visible")

เลือกองค์ประกอบทั้งหมดที่ตรงกับ <li> ที่มองเห็นได้
29

$("li:hidden")

เลือกองค์ประกอบทั้งหมดที่ตรงกับ <li> ที่ซ่อนอยู่
30

$(":radio")

เลือกปุ่มตัวเลือกทั้งหมดในแบบฟอร์ม
31

$(":checked")

เลือกกล่องกาเครื่องหมายทั้งหมดในแบบฟอร์ม
32

$(":input")

เลือกเฉพาะองค์ประกอบของฟอร์ม (อินพุตเลือกพื้นที่ข้อความปุ่ม)
33

$(":text")

เลือกเฉพาะองค์ประกอบข้อความ (input [type = text])
34

$("li:eq(2)")

เลือกองค์ประกอบ <li> ที่สาม
35

$("li:eq(4)")

เลือกองค์ประกอบ <li> ที่ห้า
36

$("li:lt(2)")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <li> องค์ประกอบก่อนองค์ประกอบที่สาม กล่าวอีกนัยหนึ่งคือสอง <li> องค์ประกอบแรก
37

$("p:lt(3)")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <p> องค์ประกอบก่อนองค์ประกอบที่สี่ กล่าวอีกนัยหนึ่งคือสาม <p> องค์ประกอบแรก
38

$("li:gt(1)")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <li> หลังจากองค์ประกอบที่สอง
39

$("p:gt(2)")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <p> หลังจากองค์ประกอบที่สาม
40

$("div/p")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <p> ซึ่งเป็นลูกขององค์ประกอบที่จับคู่โดย <div>
41

$("div//code")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <code> ซึ่งเป็นลูกหลานขององค์ประกอบที่จับคู่โดย <div>
42

$("//p//a")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <a> ซึ่งเป็นลูกหลานขององค์ประกอบที่จับคู่โดย <p>
43

$("li:first-child")

เลือกองค์ประกอบทั้งหมดที่ตรงกับ <li> ซึ่งเป็นลูกคนแรกของพาเรนต์
44

$("li:last-child")

เลือกองค์ประกอบทั้งหมดที่ตรงกับ <li> ซึ่งเป็นลูกคนสุดท้ายของพาเรนต์
45

$(":parent")

เลือกองค์ประกอบทั้งหมดที่เป็นพาเรนต์ขององค์ประกอบอื่นรวมทั้งข้อความ
46

$("li:contains(second)")

เลือกองค์ประกอบทั้งหมดที่จับคู่โดย <li> ที่มีข้อความที่สอง

คุณสามารถใช้ตัวเลือกทั้งหมดข้างต้นกับองค์ประกอบ HTML / XML ในลักษณะทั่วไป ตัวอย่างเช่นถ้าตัวเลือก$("li:first") ใช้ได้กับ <li> องค์ประกอบแล้ว $("p:first") ยังใช้งานได้กับ <p> องค์ประกอบ

ส่วนประกอบพื้นฐานที่สุดบางส่วนที่เราสามารถจัดการได้เมื่อพูดถึงองค์ประกอบ DOM คือคุณสมบัติและแอตทริบิวต์ที่กำหนดให้กับองค์ประกอบเหล่านั้น

แอตทริบิวต์เหล่านี้ส่วนใหญ่พร้อมใช้งานผ่าน JavaScript เป็นคุณสมบัติโหนด DOM คุณสมบัติทั่วไปบางประการ ได้แก่ -

  • className
  • tagName
  • id
  • href
  • title
  • rel
  • src

พิจารณามาร์กอัป HTML ต่อไปนี้สำหรับองค์ประกอบรูปภาพ -

<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass" 
   title = "This is an image"/>

ในมาร์กอัปขององค์ประกอบนี้ชื่อแท็กคือ img และมาร์กอัปสำหรับ id, src, alt, คลาสและหัวเรื่องแสดงถึงแอตทริบิวต์ขององค์ประกอบซึ่งแต่ละรายการประกอบด้วยชื่อและค่า

jQuery ช่วยให้เราสามารถจัดการกับคุณลักษณะขององค์ประกอบได้อย่างง่ายดายและช่วยให้เราสามารถเข้าถึงองค์ประกอบเพื่อให้เราสามารถเปลี่ยนคุณสมบัติได้

รับค่าคุณสมบัติ

attr() สามารถใช้วิธีการดึงค่าของแอตทริบิวต์จากองค์ประกอบแรกในชุดที่ตรงกันหรือกำหนดค่าแอตทริบิวต์ไปยังองค์ประกอบที่ตรงกันทั้งหมด

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างง่ายๆที่ดึงแอตทริบิวต์ title ของ <em> แท็กและตั้งค่า <div id = "divid"> ด้วยค่าเดียวกัน -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { var title = $("em").attr("title");
            $("#divid").text(title);
         });
      </script>
   </head>
	
   <body>
      <div>
         <em title = "Bold and Brave">This is first paragraph.</em>
         <p id = "myid">This is second paragraph.</p>
         <div id = "divid"></div>
      </div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตั้งค่าคุณสมบัติ

attr(name, value) สามารถใช้วิธีการตั้งชื่อแอตทริบิวต์ให้กับองค์ประกอบทั้งหมดในชุดที่ห่อโดยใช้ค่าที่ผ่าน

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างง่ายๆที่ชุด src แอตทริบิวต์ของแท็กรูปภาพไปยังตำแหน่งที่ถูกต้อง -

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.tutorialspoint.com" />
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>
	
   <body>
      <div>
         <img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
      </div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

การใช้สไตล์

addClass( classes )สามารถใช้วิธีการเพื่อนำสไตล์ชีตที่กำหนดไปใช้กับองค์ประกอบที่ตรงกันทั้งหมด คุณสามารถระบุหลายชั้นเรียนโดยคั่นด้วยช่องว่าง

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างง่ายๆที่กำหนด class แอตทริบิวต์ของพารา <p> แท็ก -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("em").addClass("selected"); $("#myid").addClass("highlight");
         });
      </script>
		
      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>	
   </head>
	
   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

วิธีการระบุคุณสมบัติ

ตารางต่อไปนี้แสดงวิธีการที่มีประโยชน์บางอย่างซึ่งคุณสามารถใช้เพื่อจัดการแอตทริบิวต์และคุณสมบัติ -

ซีเนียร์ วิธีการและคำอธิบาย
1 attr (คุณสมบัติ)

ตั้งค่าออบเจ็กต์คีย์ / ค่าเป็นคุณสมบัติให้กับองค์ประกอบที่ตรงกันทั้งหมด
2 attr (คีย์ fn)

ตั้งค่าคุณสมบัติเดียวเป็นค่าที่คำนวณบนองค์ประกอบที่ตรงกันทั้งหมด
3 removeAttr (ชื่อ)

ลบแอตทริบิวต์จากแต่ละองค์ประกอบที่ตรงกัน
4 hasClass (คลาส)

ส่งคืนจริงหากคลาสที่ระบุมีอยู่อย่างน้อยหนึ่งชุดขององค์ประกอบที่ตรงกัน
5 removeClass (คลาส)

ลบคลาสทั้งหมดหรือคลาสที่ระบุออกจากชุดขององค์ประกอบที่ตรงกัน
6 toggleClass (คลาส)

เพิ่มคลาสที่ระบุหากไม่มีอยู่ให้ลบคลาสที่ระบุหากมีอยู่
7 html ()

รับเนื้อหา html (innerHTML) ขององค์ประกอบแรกที่ตรงกัน
8 html (วาล)

ตั้งค่าเนื้อหา html ของทุกองค์ประกอบที่ตรงกัน
9 ข้อความ ()

รับเนื้อหาข้อความรวมขององค์ประกอบที่ตรงกันทั้งหมด
10 ข้อความ (วาล)

ตั้งค่าเนื้อหาข้อความขององค์ประกอบที่ตรงกันทั้งหมด
11 วาล ()

รับค่าอินพุตขององค์ประกอบแรกที่ตรงกัน
12 val (วาล)

ตั้งค่าแอตทริบิวต์ค่าของทุกองค์ประกอบที่ตรงกันถ้ามันถูกเรียกบน <input> แต่ถ้ามันถูกเรียกบน <select> ด้วยค่า <option> ที่ผ่านจะถูกเลือกตัวเลือกที่ผ่านถ้ามันถูกเรียกในกล่องกาเครื่องหมายหรือกล่องวิทยุแล้ว จะมีการเลือกช่องทำเครื่องหมายและกล่องวิทยุที่ตรงกันทั้งหมด

ตัวอย่าง

คล้ายกับไวยากรณ์และตัวอย่างข้างต้นตัวอย่างต่อไปนี้จะช่วยให้คุณเข้าใจในการใช้วิธีการแอตทริบิวต์ต่างๆในสถานการณ์ที่แตกต่างกัน -

ซีเนียร์ ตัวเลือกและคำอธิบาย
1

$("#myID").attr("custom")

สิ่งนี้จะส่งคืนค่าของแอตทริบิวต์ที่กำหนดเองสำหรับองค์ประกอบแรกที่ตรงกับ ID myID
2

$("img").attr("alt", "Sample Image")

สิ่งนี้จะตั้งค่า alt แอตทริบิวต์ของรูปภาพทั้งหมดเป็นค่าใหม่ "รูปภาพตัวอย่าง"
3

$("input").attr({ value: "", title: "Please enter a value" });

ตั้งค่าทั้งหมด <input> องค์ประกอบเป็นสตริงที่ว่างเปล่าเช่นเดียวกับชุดตัวอย่าง jQuery สตริงโปรดป้อนค่า
4

$("a[href^=https://]").attr("target","_blank")

เลือกการเชื่อมโยงทั้งหมดที่มีแอตทริบิวต์ href เริ่มต้นด้วยhttps: //และการตั้งค่าแอตทริบิวต์เป้าหมายในการ_ blank
5

$("a").removeAttr("target")

การดำเนินการนี้จะลบแอตทริบิวต์เป้าหมายของลิงก์ทั้งหมด
6

$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");});

การดำเนินการนี้จะแก้ไขแอตทริบิวต์ที่ปิดใช้งานเป็นค่า "ปิดใช้งาน" ในขณะที่คลิกปุ่มส่ง
7

$("p:last").hasClass("selected")

ผลตอบแทนนี้จริงถ้า <p> แท็กที่ผ่านมามีระดับความสัมพันธ์ที่เลือก
8

$("p").text()

ส่งคืนสตริงที่มีเนื้อหาข้อความรวมของ <p> องค์ประกอบที่ตรงกันทั้งหมด
9

$("p").text("<i>Hello World</i>")

สิ่งนี้จะตั้งค่า "<I> Hello World </I>" เป็นเนื้อหาข้อความขององค์ประกอบ <p> ที่ตรงกัน
10

$("p").html()

สิ่งนี้ส่งคืนเนื้อหา HTML ของย่อหน้าที่ตรงกันทั้งหมด
11

$("div").html("Hello World")

นี้จะกำหนดเนื้อหา HTML ของการจับคู่ทั้งหมด <div> เพื่อHello World
12

$("input:checkbox:checked").val()

รับค่าแรกจากช่องทำเครื่องหมายที่เลือก
13

$("input:radio[name=bar]:checked").val()

รับค่าแรกจากชุดปุ่มตัวเลือก
14

$("button").val("Hello")

ตั้งค่าแอตทริบิวต์ค่าของทุกองค์ประกอบที่ตรงกัน <button>
15

$("input").val("on")

การดำเนินการนี้จะทำเครื่องหมายที่ปุ่มวิทยุหรือช่องทำเครื่องหมายทั้งหมดที่มีค่าเป็น "เปิด"
16

$("select").val("Orange")

นี่จะเป็นการเลือกตัวเลือก Orange ในกล่องแบบเลื่อนลงที่มีตัวเลือก Orange, Mango และ Banana
17

$("select").val("Orange", "Mango")

นี่จะเป็นการเลือกตัวเลือก Orange และ Mango ในกล่องแบบเลื่อนลงที่มีตัวเลือก Orange, Mango และ Banana

jQuery เป็นเครื่องมือที่มีประสิทธิภาพมากซึ่งมีวิธีการส่งผ่าน DOM ที่หลากหลายเพื่อช่วยให้เราเลือกองค์ประกอบในเอกสารแบบสุ่มและในวิธีการตามลำดับ DOM Traversal Methods ส่วนใหญ่ไม่ได้ปรับเปลี่ยนอ็อบเจ็กต์ jQuery และใช้เพื่อกรององค์ประกอบออกจากเอกสารตามเงื่อนไขที่กำหนด

ค้นหาองค์ประกอบตามดัชนี

พิจารณาเอกสารง่ายๆที่มีเนื้อหา HTML ต่อไปนี้ -

<html>
   <head>
      <title>The JQuery Example</title>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

  • ด้านบนทุกรายการมีดัชนีของตัวเองและสามารถระบุตำแหน่งได้โดยตรงโดยใช้ eq(index) วิธีการดังตัวอย่างด้านล่าง

  • ทุกองค์ประกอบย่อยเริ่มต้นดัชนีจากศูนย์ดังนั้นรายการ 2จะเข้าถึงได้โดยใช้$("li").eq(1) และอื่น ๆ

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างง่ายๆที่เพิ่มสีให้กับรายการที่สอง

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

การกรององค์ประกอบออก

filter( selector )วิธีนี้สามารถใช้เพื่อกรององค์ประกอบทั้งหมดออกจากชุดขององค์ประกอบที่ตรงกันซึ่งไม่ตรงกับตัวเลือกที่ระบุ เลือกสามารถเขียนได้โดยใช้ไวยากรณ์เลือกใด ๆ

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างง่ายๆที่ใช้สีกับรายการที่เกี่ยวข้องกับชนชั้นกลาง -

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").filter(".middle").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li class = "top">list item 1</li>
            <li class = "top">list item 2</li>
            <li class = "middle">list item 3</li>
            <li class = "middle">list item 4</li>
            <li class = "bottom">list item 5</li>
            <li class = "bottom">list item 6</li>
         </ul>
      </div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ค้นหาองค์ประกอบลูกหลาน

find( selector )สามารถใช้วิธีการเพื่อค้นหาองค์ประกอบที่สืบทอดทั้งหมดขององค์ประกอบบางประเภท เลือกสามารถเขียนได้โดยใช้ไวยากรณ์เลือกใด ๆ

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่เลือก <span> องค์ประกอบทั้งหมดที่มีอยู่ใน <p> องค์ประกอบต่างๆ -

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").find("span").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <p>This is 1st paragraph and <span>THIS IS RED</span></p>
      <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

วิธีการกรอง JQuery DOM

ตารางต่อไปนี้แสดงวิธีการที่มีประโยชน์ซึ่งคุณสามารถใช้เพื่อกรององค์ประกอบต่างๆออกจากรายการองค์ประกอบ DOM -

ซีเนียร์ วิธีการและคำอธิบาย
1 eq (ดัชนี)

ลดชุดขององค์ประกอบที่ตรงกันให้เหลือเพียงองค์ประกอบเดียว
2 ตัวกรอง (ตัวเลือก)

ลบองค์ประกอบทั้งหมดออกจากชุดขององค์ประกอบที่ตรงกันซึ่งไม่ตรงกับตัวเลือกที่ระบุ
3 ตัวกรอง (fn)

ลบองค์ประกอบทั้งหมดออกจากชุดขององค์ประกอบที่ตรงกันซึ่งไม่ตรงกับฟังก์ชันที่ระบุ
4 คือ (ตัวเลือก)

ตรวจสอบการเลือกปัจจุบันเทียบกับนิพจน์และส่งกลับค่าจริงหากองค์ประกอบของการเลือกอย่างน้อยหนึ่งรายการตรงกับตัวเลือกที่กำหนด
5 แผนที่ (โทรกลับ)

แปลชุดขององค์ประกอบในวัตถุ jQuery เป็นชุดของค่าอื่นในอาร์เรย์ jQuery (ซึ่งอาจมีหรือไม่มีองค์ประกอบก็ได้)
6 ไม่ (ตัวเลือก)

ลบองค์ประกอบที่ตรงกับตัวเลือกที่ระบุออกจากชุดขององค์ประกอบที่ตรงกัน
7 ชิ้น (เริ่ม, [จบ])

เลือกส่วนย่อยขององค์ประกอบที่ตรงกัน

วิธีการข้าม JQuery DOM

ตารางต่อไปนี้แสดงวิธีการที่มีประโยชน์อื่น ๆ ซึ่งคุณสามารถใช้เพื่อค้นหาองค์ประกอบต่างๆใน DOM -

ซีเนียร์ วิธีการและคำอธิบาย
1 เพิ่ม (ตัวเลือก)

เพิ่มองค์ประกอบที่จับคู่โดยตัวเลือกที่กำหนดให้กับชุดขององค์ประกอบที่ตรงกัน
2 และตนเอง ()

เพิ่มการเลือกก่อนหน้าในการเลือกปัจจุบัน
3 เด็ก ๆ ([ตัวเลือก])

รับชุดขององค์ประกอบที่มีชายด์ที่ไม่ซ้ำกันทั้งหมดของชุดองค์ประกอบที่ตรงกัน
4 ใกล้เคียงที่สุด (ตัวเลือก)

รับชุดองค์ประกอบที่มีองค์ประกอบหลักที่ใกล้เคียงที่สุดซึ่งตรงกับตัวเลือกที่ระบุซึ่งรวมองค์ประกอบเริ่มต้น
5 เนื้อหา ()

ค้นหาโหนดลูกทั้งหมดภายในองค์ประกอบที่ตรงกัน (รวมถึงโหนดข้อความ) หรือเอกสารเนื้อหาหากองค์ประกอบนั้นเป็น iframe
6 จบ ()

เปลี่ยนกลับการดำเนินการ 'ทำลายล้าง' ล่าสุดโดยเปลี่ยนชุดขององค์ประกอบที่ตรงกันเป็นสถานะก่อนหน้า
7 ค้นหา (ตัวเลือก)

ค้นหาองค์ประกอบลูกหลานที่ตรงกับตัวเลือกที่ระบุ
8 ถัดไป ([ตัวเลือก])

รับชุดองค์ประกอบที่มีพี่น้องถัดไปที่ไม่ซ้ำกันของแต่ละชุดองค์ประกอบที่กำหนด
9 ถัดไปทั้งหมด ([ตัวเลือก])

ค้นหาองค์ประกอบพี่น้องทั้งหมดหลังองค์ประกอบปัจจุบัน
10 ชดเชยผู้ปกครอง ()

ส่งคืนคอลเล็กชัน jQuery พร้อมกับพาเรนต์ที่อยู่ในตำแหน่งขององค์ประกอบแรกที่ตรงกัน
11 ผู้ปกครอง ([ตัวเลือก])

รับผู้ปกครองโดยตรงขององค์ประกอบ หากเรียกชุดขององค์ประกอบพาเรนต์จะส่งกลับชุดขององค์ประกอบหลักโดยตรงที่ไม่ซ้ำกัน
12 ผู้ปกครอง ([ตัวเลือก])

รับชุดองค์ประกอบที่มีบรรพบุรุษที่ไม่ซ้ำกันของชุดองค์ประกอบที่ตรงกัน (ยกเว้นองค์ประกอบราก)
13 ก่อนหน้า ([ตัวเลือก])

รับชุดองค์ประกอบที่มีพี่น้องก่อนหน้าที่ไม่ซ้ำกันของแต่ละชุดขององค์ประกอบที่ตรงกัน
14 ก่อนหน้าทั้งหมด ([ตัวเลือก])

ค้นหาองค์ประกอบพี่น้องทั้งหมดด้านหน้าองค์ประกอบปัจจุบัน
15 พี่น้อง ([ตัวเลือก])

รับชุดองค์ประกอบที่มีพี่น้องที่ไม่ซ้ำกันทั้งหมดของชุดองค์ประกอบที่ตรงกัน

ไลบรารี jQuery สนับสนุนตัวเลือกเกือบทั้งหมดที่รวมอยู่ในข้อกำหนด Cascading Style Sheet (CSS) 1 ถึง 3 ตามที่ระบุไว้ในไซต์ของ World Wide Web Consortium

การใช้นักพัฒนาไลบรารี JQuery สามารถปรับปรุงเว็บไซต์ของตนได้โดยไม่ต้องกังวลเกี่ยวกับเบราว์เซอร์และเวอร์ชันตราบเท่าที่เบราว์เซอร์เปิดใช้งาน JavaScript

วิธีการ CSS ของ JQuery ส่วนใหญ่ไม่ได้แก้ไขเนื้อหาของวัตถุ jQuery และใช้เพื่อใช้คุณสมบัติ CSS กับองค์ประกอบ DOM

ใช้คุณสมบัติ CSS

นี่เป็นเรื่องง่ายมากที่จะใช้คุณสมบัติ CSS ใด ๆ โดยใช้วิธี JQuery css( PropertyName, PropertyValue ).

นี่คือไวยากรณ์สำหรับวิธีการ -

selector.css( PropertyName, PropertyValue );

ที่นี่คุณสามารถส่งPropertyNameเป็นสตริงจาวาสคริปต์และขึ้นอยู่กับค่าของมันPropertyValueอาจเป็นสตริงหรือจำนวนเต็ม

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่เพิ่มสีแบบอักษรให้กับรายการที่สอง

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css("color", "red");
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ใช้คุณสมบัติ CSS หลายรายการ

คุณสามารถใช้คุณสมบัติ CSS หลายรายการโดยใช้วิธี JQuery เดียว CSS( {key1:val1, key2:val2....). คุณสามารถใช้คุณสมบัติได้มากเท่าที่คุณต้องการในการโทรครั้งเดียว

นี่คือไวยากรณ์สำหรับวิธีการ -

selector.css( {key1:val1, key2:val2....keyN:valN})

ที่นี่คุณสามารถส่งผ่านคีย์เป็นคุณสมบัติและค่าตามที่อธิบายไว้ข้างต้น

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่เพิ่มสีแบบอักษรและสีพื้นหลังให้กับรายการที่สอง

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css({"color":"red", "background-color":"green"});
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

การตั้งค่าความกว้างและความสูงขององค์ประกอบ

width( val ) และ height( val ) สามารถใช้วิธีการตั้งค่าความกว้างและความสูงตามลำดับขององค์ประกอบใด ๆ

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างง่ายๆที่กำหนดความกว้างขององค์ประกอบการหารแรกโดยที่องค์ประกอบที่เหลือมีความกว้างที่กำหนดโดยสไตล์ชีต

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div:first").width(100); $("div:first").css("background-color", "blue");
         });
      </script>
		
      <style>
         div { 
            width:70px; height:50px; float:left; 
            margin:5px; background:red; cursor:pointer; 
         }
      </style>
   </head>
	
   <body>
      <div></div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

วิธีการ jQuery CSS

ตารางต่อไปนี้แสดงวิธีการทั้งหมดที่คุณสามารถใช้เพื่อเล่นกับคุณสมบัติ CSS -

ซีเนียร์ วิธีการและคำอธิบาย
1 css (ชื่อ)

ส่งคืนคุณสมบัติสไตล์ในองค์ประกอบแรกที่ตรงกัน
2 css (ชื่อค่า)

ตั้งค่าคุณสมบัติสไตล์เดียวเป็นค่าขององค์ประกอบที่ตรงกันทั้งหมด
3 css (คุณสมบัติ)

ตั้งค่าออบเจ็กต์คีย์ / ค่าเป็นคุณสมบัติสไตล์ให้กับองค์ประกอบที่ตรงกันทั้งหมด
4 ความสูง (วาล)

ตั้งค่าความสูง CSS ของทุกองค์ประกอบที่ตรงกัน
5 ความสูง ()

รับพิกเซลความสูงที่คำนวณในปัจจุบันขององค์ประกอบแรกที่ตรงกัน
6 ด้านในความสูง ()

รับความสูงภายใน (ไม่รวมเส้นขอบและรวมช่องว่างภายใน) สำหรับองค์ประกอบแรกที่ตรงกัน
7 innerWidth ()

รับความกว้างด้านใน (ไม่รวมเส้นขอบและรวมช่องว่างภายใน) สำหรับองค์ประกอบแรกที่ตรงกัน
8 ชดเชย ()

รับค่าชดเชยปัจจุบันขององค์ประกอบแรกที่ตรงกันเป็นพิกเซลที่สัมพันธ์กับเอกสาร
9 ชดเชยผู้ปกครอง ()

ส่งคืนคอลเล็กชัน jQuery พร้อมกับพาเรนต์ที่อยู่ในตำแหน่งขององค์ประกอบแรกที่ตรงกัน
10 ด้านนอกความสูง ([ระยะขอบ])

รับความสูงภายนอก (รวมถึงเส้นขอบและช่องว่างตามค่าเริ่มต้น) สำหรับองค์ประกอบแรกที่ตรงกัน
11 outerWidth ([ระยะขอบ])

รับความกว้างด้านนอก (รวมถึงเส้นขอบและช่องว่างตามค่าเริ่มต้น) สำหรับองค์ประกอบแรกที่ตรงกัน
12 ตำแหน่ง ()

รับตำแหน่งด้านบนและด้านซ้ายขององค์ประกอบที่สัมพันธ์กับแม่แบบออฟเซ็ต
13 scrollLeft (วาล)

เมื่อมีการส่งผ่านค่าออฟเซ็ตเลื่อนด้านซ้ายจะถูกกำหนดเป็นค่านั้นในองค์ประกอบที่ตรงกันทั้งหมด
14 scrollLeft ()

รับค่าชดเชยการเลื่อนซ้ายขององค์ประกอบแรกที่ตรงกัน
15 scrollTop (วาล)

เมื่อค่าถูกส่งเข้าค่าออฟเซ็ตด้านบนของการเลื่อนจะถูกกำหนดเป็นค่านั้นในองค์ประกอบที่ตรงกันทั้งหมด
16 scrollTop ()

รับค่าออฟเซ็ตเลื่อนด้านบนขององค์ประกอบแรกที่ตรงกัน
17 ความกว้าง (วาล)

ตั้งค่าความกว้าง CSS ของทุกองค์ประกอบที่ตรงกัน
18 ความกว้าง ()

รับความกว้างพิกเซลที่คำนวณในปัจจุบันขององค์ประกอบแรกที่ตรงกัน

JQuery มีวิธีการจัดการ DOM อย่างมีประสิทธิภาพ คุณไม่จำเป็นต้องเขียนโค้ดขนาดใหญ่เพื่อแก้ไขค่าแอตทริบิวต์ขององค์ประกอบใด ๆ หรือดึงโค้ด HTML ออกจากย่อหน้าหรือการหาร

JQuery มีเมธอดเช่น .attr (), .html () และ .val () ซึ่งทำหน้าที่เป็น getters ดึงข้อมูลจากองค์ประกอบ DOM เพื่อใช้ในภายหลัง

การจัดการเนื้อหา

html( ) วิธีการรับเนื้อหา html (innerHTML) ขององค์ประกอบแรกที่ตรงกัน

นี่คือไวยากรณ์สำหรับวิธีการ -

selector.html( )

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่ใช้เมธอด. html () และ. text (val) ที่นี่. html () ดึงเนื้อหา HTML จากอ็อบเจ็กต์จากนั้นเมธอด. text (val) กำหนดค่าของอ็อบเจ็กต์โดยใช้พารามิเตอร์ที่ผ่าน -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("div").click(function () {
               var content = $(this).html(); $("#result").text( content );
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

การเปลี่ยนองค์ประกอบ DOM

คุณสามารถแทนที่องค์ประกอบ DOM ที่สมบูรณ์ด้วยองค์ประกอบ HTML หรือ DOM ที่ระบุ replaceWith( content ) วิธีนี้ตอบสนองจุดประสงค์นี้ได้เป็นอย่างดี

นี่คือไวยากรณ์สำหรับวิธีการ -

selector.replaceWith( content )

เนื้อหาคือสิ่งที่คุณต้องการมีแทนองค์ประกอบดั้งเดิม ซึ่งอาจเป็น HTML หรือข้อความธรรมดา

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่จะแทนที่องค์ประกอบการหารด้วย "<h1> JQuery is Great </h1>" -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("div").click(function () {
               $(this).replaceWith("<h1>JQuery is Great</h1>");
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

การลบองค์ประกอบ DOM

อาจมีสถานการณ์เมื่อคุณต้องการลบองค์ประกอบ DOM อย่างน้อยหนึ่งรายการออกจากเอกสาร JQuery มีสองวิธีในการจัดการกับสถานการณ์

empty( ) วิธีลบโหนดลูกทั้งหมดออกจากชุดขององค์ประกอบที่ตรงกันโดยที่เป็นวิธีการ remove( expr ) วิธีลบองค์ประกอบที่ตรงกันทั้งหมดออกจาก DOM

นี่คือไวยากรณ์สำหรับวิธีการ -

selector.remove( [ expr ])

or 

selector.empty( )

คุณสามารถส่งผ่านพารามิเตอร์ตัวexprเพื่อกรองชุดขององค์ประกอบที่จะถูกลบออก

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่จะนำองค์ประกอบออกทันทีที่คลิก -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () { $(this).remove( );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

การแทรกองค์ประกอบ DOM

อาจมีสถานการณ์เกิดขึ้นเมื่อคุณต้องการแทรกองค์ประกอบ DOM ใหม่ในเอกสารที่มีอยู่ของคุณ JQuery มีวิธีการต่างๆในการแทรกองค์ประกอบในตำแหน่งต่างๆ

after( content ) วิธีการแทรกเนื้อหาหลังจากแต่ละองค์ประกอบที่ตรงกันโดยที่เป็นวิธีการ before( content ) วิธีการแทรกเนื้อหาก่อนแต่ละองค์ประกอบที่ตรงกัน

นี่คือไวยากรณ์สำหรับวิธีการ -

selector.after( content )

or

selector.before( content )

นี่คือเนื้อหาที่คุณต้องการแทรก ซึ่งอาจเป็น HTML หรือข้อความธรรมดา

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างที่มีการแทรกองค์ประกอบ <div> ก่อนองค์ประกอบที่คลิก -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("div").click(function () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

วิธีการจัดการ DOM

ตารางต่อไปนี้แสดงวิธีการทั้งหมดที่คุณสามารถใช้เพื่อจัดการองค์ประกอบ DOM -

ซีเนียร์ วิธีการและคำอธิบาย
1 หลัง (เนื้อหา)

แทรกเนื้อหาหลังจากแต่ละองค์ประกอบที่ตรงกัน
2 ผนวก (เนื้อหา)

เพิ่มเนื้อหาที่ด้านในของทุกองค์ประกอบที่ตรงกัน
3 appendTo (ตัวเลือก)

ผนวกองค์ประกอบที่ตรงกันทั้งหมดเข้ากับชุดขององค์ประกอบอื่นที่ระบุไว้
4 ก่อน (เนื้อหา)

แทรกเนื้อหาก่อนองค์ประกอบที่ตรงกันแต่ละรายการ
5 โคลน (บูล)

โคลนจับคู่องค์ประกอบ DOM และตัวจัดการเหตุการณ์ทั้งหมดแล้วเลือกโคลน
6 โคลน ()

โคลนจับคู่องค์ประกอบ DOM และเลือกโคลน
7 ว่างเปล่า ()

ลบโหนดลูกทั้งหมดออกจากชุดขององค์ประกอบที่ตรงกัน
8 html (วาล)

ตั้งค่าเนื้อหา html ของทุกองค์ประกอบที่ตรงกัน
9 html ()

รับเนื้อหา html (innerHTML) ขององค์ประกอบแรกที่ตรงกัน
10 insertAfter (ตัวเลือก)

แทรกองค์ประกอบที่ตรงกันทั้งหมดหลังจากที่ระบุไว้ชุดขององค์ประกอบอื่น
11 insertBefore (ตัวเลือก)

แทรกองค์ประกอบที่ตรงกันทั้งหมดก่อนชุดองค์ประกอบอื่นที่ระบุ
12 นำหน้า (เนื้อหา)

ใส่เนื้อหาไว้ข้างในของทุกองค์ประกอบที่ตรงกัน
13 prependTo (ตัวเลือก)

นำหน้าองค์ประกอบที่ตรงกันทั้งหมดกับชุดขององค์ประกอบอื่นที่ระบุไว้
14 ลบ (expr)

ลบองค์ประกอบที่ตรงกันทั้งหมดออกจาก DOM
15 แทนที่ทั้งหมด (ตัวเลือก)

แทนที่องค์ประกอบที่จับคู่โดยตัวเลือกที่ระบุด้วยองค์ประกอบที่ตรงกัน
16 แทนที่ด้วย (เนื้อหา)

แทนที่องค์ประกอบที่ตรงกันทั้งหมดด้วยองค์ประกอบ HTML หรือ DOM ที่ระบุ
17 ข้อความ (วาล)

ตั้งค่าเนื้อหาข้อความขององค์ประกอบที่ตรงกันทั้งหมด
18 ข้อความ ()

รับเนื้อหาข้อความรวมขององค์ประกอบที่ตรงกันทั้งหมด
19 ห่อ (elem)

ห่อองค์ประกอบที่ตรงกันแต่ละรายการด้วยองค์ประกอบที่ระบุ
20 ห่อ (html)

รวมองค์ประกอบที่ตรงกันแต่ละรายการด้วยเนื้อหา HTML ที่ระบุ
21 ห่อทั้งหมด (elem)

รวมองค์ประกอบทั้งหมดในชุดที่ตรงกันให้เป็นองค์ประกอบ Wrapper เดียว
22 wrapAll (html)

รวมองค์ประกอบทั้งหมดในชุดที่ตรงกันให้เป็นองค์ประกอบ Wrapper เดียว
23 wrapInner (องค์ประกอบ)

รวมเนื้อหาย่อยภายในของแต่ละองค์ประกอบที่ตรงกัน (รวมถึงโหนดข้อความ) ด้วยองค์ประกอบ DOM
24 wrapInner (html)

รวมเนื้อหาย่อยภายในของแต่ละองค์ประกอบที่ตรงกัน (รวมถึงโหนดข้อความ) ด้วยโครงสร้าง HTML

เรามีความสามารถในการสร้างเว็บเพจแบบไดนามิกโดยใช้เหตุการณ์ เหตุการณ์คือการกระทำที่สามารถตรวจพบได้โดย Web Application ของคุณ

ต่อไปนี้เป็นตัวอย่างเหตุการณ์ -

  • คลิกเมาส์
  • การโหลดหน้าเว็บ
  • การวางเมาส์เหนือองค์ประกอบ
  • การส่งแบบฟอร์ม HTML
  • การกดแป้นพิมพ์บนแป้นพิมพ์ของคุณ ฯลฯ

เมื่อเหตุการณ์เหล่านี้ถูกทริกเกอร์คุณสามารถใช้ฟังก์ชันที่กำหนดเองเพื่อทำอะไรก็ได้ที่คุณต้องการกับเหตุการณ์ ฟังก์ชันแบบกำหนดเองเหล่านี้เรียกตัวจัดการเหตุการณ์

ตัวจัดการเหตุการณ์ที่มีผลผูกพัน

การใช้ jQuery Event Model เราสามารถสร้างตัวจัดการเหตุการณ์บนองค์ประกอบ DOM ด้วยไฟล์ bind() วิธีการดังนี้ -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

รหัสนี้จะทำให้องค์ประกอบการแบ่งตอบสนองต่อเหตุการณ์การคลิก เมื่อผู้ใช้คลิกภายในส่วนนี้หลังจากนั้นการแจ้งเตือนจะแสดงขึ้น

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ไวยากรณ์แบบเต็มของคำสั่ง bind () มีดังนี้ -

selector.bind( eventType[, eventData], handler)

ต่อไปนี้เป็นคำอธิบายของพารามิเตอร์ -

  • eventType- สตริงที่มีประเภทเหตุการณ์ JavaScript เช่นคลิกหรือส่ง อ้างถึงส่วนถัดไปสำหรับรายการประเภทเหตุการณ์ทั้งหมด

  • eventData - พารามิเตอร์นี้เป็นทางเลือกคือแผนที่ของข้อมูลที่จะส่งต่อไปยังตัวจัดการเหตุการณ์

  • handler - ฟังก์ชั่นที่จะดำเนินการทุกครั้งที่เกิดเหตุการณ์

การลบตัวจัดการเหตุการณ์

โดยทั่วไปเมื่อสร้างตัวจัดการเหตุการณ์แล้วจะยังคงมีผลในช่วงที่เหลือของอายุการใช้งานของเพจ อาจมีความจำเป็นเมื่อคุณต้องการลบตัวจัดการเหตุการณ์

jQuery ให้ไฟล์ unbind()คำสั่งเพื่อลบตัวจัดการเหตุการณ์ที่ออก ไวยากรณ์ของ unbind () มีดังนี้ -

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

ต่อไปนี้เป็นคำอธิบายของพารามิเตอร์ -

  • eventType- สตริงที่มีประเภทเหตุการณ์ JavaScript เช่นคลิกหรือส่ง อ้างถึงส่วนถัดไปสำหรับรายการประเภทเหตุการณ์ทั้งหมด

  • handler - หากมีให้ระบุผู้ฟังเฉพาะที่จะลบออก

ประเภทเหตุการณ์

ซีเนียร์ ประเภทเหตุการณ์และคำอธิบาย
1

blur

เกิดขึ้นเมื่อองค์ประกอบสูญเสียโฟกัส
2

change

เกิดขึ้นเมื่อองค์ประกอบเปลี่ยนไป
3

click

เกิดขึ้นเมื่อคลิกเมาส์
4

dblclick

เกิดขึ้นเมื่อคลิกเมาส์สองครั้ง
5

error

เกิดขึ้นเมื่อมีข้อผิดพลาดในการขนถ่ายเป็นต้น
6

focus

เกิดขึ้นเมื่อองค์ประกอบได้รับโฟกัส
7

keydown

เกิดขึ้นเมื่อกดปุ่ม
8

keypress

เกิดขึ้นเมื่อกดและปล่อยปุ่ม
9

keyup

เกิดขึ้นเมื่อปล่อยคีย์
10

load

เกิดขึ้นเมื่อโหลดเอกสาร
11

mousedown

เกิดขึ้นเมื่อกดปุ่มเมาส์
12

mouseenter

เกิดขึ้นเมื่อเมาส์เข้าสู่พื้นที่องค์ประกอบ
13

mouseleave

เกิดขึ้นเมื่อเมาส์ออกจากพื้นที่องค์ประกอบ
14

mousemove

เกิดขึ้นเมื่อตัวชี้เมาส์เคลื่อนที่
15

mouseout

เกิดขึ้นเมื่อตัวชี้เมาส์เคลื่อนออกจากองค์ประกอบ
16

mouseover

เกิดขึ้นเมื่อตัวชี้เมาส์เลื่อนไปที่องค์ประกอบ
17

mouseup

เกิดขึ้นเมื่อปล่อยปุ่มเมาส์
18

resize

เกิดขึ้นเมื่อมีการปรับขนาดหน้าต่าง
19

scroll

เกิดขึ้นเมื่อเลื่อนหน้าต่าง
20

select

เกิดขึ้นเมื่อเลือกข้อความ
21

submit

เกิดขึ้นเมื่อส่งแบบฟอร์ม
22

unload

เกิดขึ้นเมื่อเอกสารถูกยกเลิกการโหลด

วัตถุเหตุการณ์

ฟังก์ชันเรียกกลับใช้พารามิเตอร์เดียว เมื่อตัวจัดการถูกเรียกว่าวัตถุเหตุการณ์ JavaScript จะถูกส่งผ่านไป

อ็อบเจ็กต์เหตุการณ์มักไม่จำเป็นและพารามิเตอร์ถูกละไว้เนื่องจากโดยปกติบริบทที่เพียงพอจะพร้อมใช้งานเมื่อตัวจัดการถูกผูกไว้เพื่อทราบว่าต้องทำอะไรเมื่อตัวจัดการถูกทริกเกอร์อย่างไรก็ตามมีแอตทริบิวต์บางอย่างที่คุณจะต้องเข้าถึง

คุณสมบัติของเหตุการณ์

ซีเนียร์ คุณสมบัติและคำอธิบาย
1

altKey

ตั้งค่าเป็นจริงหากกดปุ่ม Alt เมื่อเหตุการณ์ถูกทริกเกอร์เป็นเท็จถ้าไม่ แป้น Alt มีข้อความว่า Option บนแป้นพิมพ์ Mac ส่วนใหญ่
2

ctrlKey

ตั้งค่าเป็นจริงหากกดแป้น Ctrl เมื่อเหตุการณ์ถูกทริกเกอร์เป็นเท็จถ้าไม่
3

data

ค่าถ้ามีจะส่งผ่านเป็นพารามิเตอร์ที่สองไปยังคำสั่ง bind () เมื่อสร้างตัวจัดการ
4

keyCode

สำหรับเหตุการณ์คีย์อัพและคีย์ดาวน์ค่านี้จะส่งคืนคีย์ที่ถูกกด
5

metaKey

ตั้งค่าเป็นจริงหากกดคีย์ Meta เมื่อเหตุการณ์ถูกทริกเกอร์เป็นเท็จถ้าไม่ คีย์ Meta คือปุ่ม Ctrl บนพีซีและปุ่ม Command บน Macs
6

pageX

สำหรับเหตุการณ์ของเมาส์ระบุพิกัดแนวนอนของเหตุการณ์ที่สัมพันธ์กับจุดเริ่มต้นของเพจ
7

pageY

สำหรับเหตุการณ์ของเมาส์ให้ระบุพิกัดแนวตั้งของเหตุการณ์ที่สัมพันธ์กับจุดเริ่มต้นของเพจ
8

relatedTarget

สำหรับเหตุการณ์ของเมาส์ให้ระบุองค์ประกอบที่เคอร์เซอร์ซ้ายหรือป้อนเมื่อเหตุการณ์ถูกทริกเกอร์
9

screenX

สำหรับเหตุการณ์ของเมาส์ให้ระบุพิกัดแนวนอนของเหตุการณ์ที่สัมพันธ์กับจุดเริ่มต้นของหน้าจอ
10

screenY

สำหรับเหตุการณ์ของเมาส์ระบุพิกัดแนวตั้งของเหตุการณ์ที่สัมพันธ์กับจุดเริ่มต้นของหน้าจอ
11

shiftKey

ตั้งค่าเป็นจริงหากกดแป้น Shift เมื่อเหตุการณ์ถูกทริกเกอร์เป็นเท็จถ้าไม่
12

target

ระบุองค์ประกอบที่เหตุการณ์ถูกทริกเกอร์
13

timeStamp

การประทับเวลา (ในหน่วยมิลลิวินาที) เมื่อสร้างเหตุการณ์
14

type

สำหรับเหตุการณ์ทั้งหมดระบุประเภทของเหตุการณ์ที่ทริกเกอร์ (ตัวอย่างเช่นคลิก)
15

which

สำหรับเหตุการณ์แป้นพิมพ์ระบุรหัสตัวเลขสำหรับคีย์ที่ทำให้เกิดเหตุการณ์และสำหรับเหตุการณ์ของเมาส์ระบุว่าปุ่มใดถูกกด (1 สำหรับซ้าย 2 สำหรับกลาง 3 สำหรับขวา)

 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

วิธีการจัดกิจกรรม

มีรายการวิธีการที่สามารถเรียกใช้บนวัตถุเหตุการณ์ -

ซีเนียร์ วิธีการและคำอธิบาย
1 PreventDefault ()

ป้องกันไม่ให้เบราว์เซอร์ดำเนินการตามค่าเริ่มต้น
2 isDefaultPrevented ()

ส่งคืนว่าเคยเรียก event.preventDefault () บนอ็อบเจ็กต์เหตุการณ์นี้หรือไม่
3 stopPropagation ()

หยุดการเดือดของเหตุการณ์ไปยังองค์ประกอบหลักป้องกันไม่ให้ตัวจัดการพาเรนต์ได้รับแจ้งเกี่ยวกับเหตุการณ์
4 isPropagationStopped ()

ส่งคืนว่าเคยเรียก event.stopPropagation () บนอ็อบเจ็กต์เหตุการณ์นี้หรือไม่
5 stopImmediatePropagation ()

หยุดตัวจัดการที่เหลือจากการดำเนินการ
6 isImmediatePropagationStopped ()

ส่งคืนว่าเคยเรียก event.stopImmediatePropagation () บนวัตถุเหตุการณ์นี้หรือไม่

วิธีการจัดการเหตุการณ์

ตารางต่อไปนี้แสดงวิธีการที่เกี่ยวข้องกับเหตุการณ์ที่สำคัญ -

ซีเนียร์ วิธีการและคำอธิบาย
1 ผูก (ประเภท, [ข้อมูล], fn)

เชื่อมโยงตัวจัดการกับเหตุการณ์อย่างน้อยหนึ่งเหตุการณ์ (เช่นการคลิก) สำหรับแต่ละองค์ประกอบที่ตรงกัน ยังสามารถผูกเหตุการณ์ที่กำหนดเอง
2 ปิด (เหตุการณ์ [ตัวเลือก] [ตัวจัดการ (eventObject)])

สิ่งนี้ตรงข้ามกับการถ่ายทอดสดโดยจะลบเหตุการณ์สดที่ถูกผูกไว้
3 โฮเวอร์ (เหนือออก)

จำลองการวางเมาส์เช่นการเลื่อนเมาส์เปิดและปิดวัตถุ
4 บน (เหตุการณ์ [ตัวเลือก] [ข้อมูล] ตัวจัดการ)

เชื่อมโยงตัวจัดการกับเหตุการณ์ (เช่นคลิก) สำหรับองค์ประกอบที่จับคู่ในปัจจุบันและอนาคตทั้งหมด ยังสามารถผูกเหตุการณ์ที่กำหนดเอง
5 หนึ่ง (ประเภท, [ข้อมูล], fn)

เชื่อมโยงตัวจัดการกับเหตุการณ์อย่างน้อยหนึ่งเหตุการณ์ที่จะดำเนินการหนึ่งครั้งสำหรับแต่ละองค์ประกอบที่ตรงกัน
6 พร้อม (fn)

ผูกฟังก์ชันที่จะดำเนินการเมื่อใดก็ตามที่ DOM พร้อมที่จะข้ามผ่านและจัดการ
7 ทริกเกอร์ (เหตุการณ์ [ข้อมูล])

ทริกเกอร์เหตุการณ์ในทุกองค์ประกอบที่ตรงกัน
8 triggerHandler (เหตุการณ์ [ข้อมูล])

ทริกเกอร์ตัวจัดการเหตุการณ์ที่ถูกผูกไว้ทั้งหมดบนองค์ประกอบ
9 เลิกผูก ([type], [fn])

สิ่งนี้ตรงกันข้ามกับการผูกมันจะลบเหตุการณ์ที่ถูกผูกไว้ออกจากแต่ละองค์ประกอบที่ตรงกัน

วิธีการช่วยเหลือเหตุการณ์

jQuery ยังมีชุดของฟังก์ชันตัวช่วยเหตุการณ์ซึ่งสามารถใช้เพื่อทริกเกอร์เหตุการณ์เพื่อเชื่อมโยงประเภทเหตุการณ์ที่กล่าวถึงข้างต้น

วิธีการทริกเกอร์

ต่อไปนี้เป็นตัวอย่างที่จะทำให้เกิดเหตุการณ์เบลอในทุกย่อหน้า -

$("p").blur();

วิธีการผูก

ต่อไปนี้เป็นตัวอย่างที่จะผูกไฟล์ click เหตุการณ์ใน <div> ทั้งหมด -

$("div").click( function () { 
   // do something here
});
ซีเนียร์ วิธีการและคำอธิบาย
1

blur( )

ทริกเกอร์เหตุการณ์เบลอของแต่ละองค์ประกอบที่ตรงกัน
2

blur( fn )

ผูกฟังก์ชันเข้ากับเหตุการณ์เบลอของแต่ละองค์ประกอบที่ตรงกัน
3

change( )

ทริกเกอร์เหตุการณ์การเปลี่ยนแปลงของแต่ละองค์ประกอบที่ตรงกัน
4

change( fn )

ผูกฟังก์ชันกับเหตุการณ์การเปลี่ยนแปลงของแต่ละองค์ประกอบที่ตรงกัน
5

click( )

ทริกเกอร์เหตุการณ์การคลิกของแต่ละองค์ประกอบที่ตรงกัน
6

click( fn )

เชื่อมโยงฟังก์ชันกับเหตุการณ์การคลิกของแต่ละองค์ประกอบที่ตรงกัน
7

dblclick( )

ทริกเกอร์เหตุการณ์ dblclick ของแต่ละองค์ประกอบที่ตรงกัน
8

dblclick( fn )

ผูกฟังก์ชันเข้ากับเหตุการณ์ dblclick ของแต่ละองค์ประกอบที่ตรงกัน
9

error( )

ทริกเกอร์เหตุการณ์ข้อผิดพลาดของแต่ละองค์ประกอบที่ตรงกัน
10

error( fn )

ผูกฟังก์ชันกับเหตุการณ์ข้อผิดพลาดของแต่ละองค์ประกอบที่ตรงกัน
11

focus( )

ทริกเกอร์เหตุการณ์โฟกัสของแต่ละองค์ประกอบที่ตรงกัน
12

focus( fn )

ผูกฟังก์ชันเข้ากับเหตุการณ์โฟกัสของแต่ละองค์ประกอบที่ตรงกัน
13

keydown( )

ทริกเกอร์เหตุการณ์คีย์ดาวน์ของแต่ละองค์ประกอบที่ตรงกัน
14

keydown( fn )

ผูกฟังก์ชันเข้ากับเหตุการณ์คีย์ดาวน์ของแต่ละองค์ประกอบที่ตรงกัน
15

keypress( )

ทริกเกอร์เหตุการณ์การกดแป้นพิมพ์ของแต่ละองค์ประกอบที่ตรงกัน
16

keypress( fn )

ผูกฟังก์ชันเข้ากับเหตุการณ์การกดแป้นของแต่ละองค์ประกอบที่ตรงกัน
17

keyup( )

ทริกเกอร์เหตุการณ์คีย์อัพของแต่ละองค์ประกอบที่ตรงกัน
18

keyup( fn )

ผูกฟังก์ชันเข้ากับเหตุการณ์คีย์อัพของแต่ละองค์ประกอบที่ตรงกัน
19

load( fn )

ผูกฟังก์ชันเข้ากับเหตุการณ์โหลดของแต่ละองค์ประกอบที่ตรงกัน
20

mousedown( fn )

ผูกฟังก์ชันเข้ากับเหตุการณ์ที่มีการเลื่อนของแต่ละองค์ประกอบที่ตรงกัน
21

mouseenter( fn )

ผูกฟังก์ชันเข้ากับเหตุการณ์ที่อยู่ตรงกลางของเมาส์ของแต่ละองค์ประกอบที่ตรงกัน
22

mouseleave( fn )

ผูกฟังก์ชันเข้ากับเหตุการณ์การปล่อยเมาส์ของแต่ละองค์ประกอบที่ตรงกัน
23

mousemove( fn )

ผูกฟังก์ชันเข้ากับเหตุการณ์ mousemove ของแต่ละองค์ประกอบที่ตรงกัน
24

mouseout( fn )

ผูกฟังก์ชันเข้ากับเหตุการณ์ mouseout ของแต่ละองค์ประกอบที่ตรงกัน
25

mouseover( fn )

ผูกฟังก์ชันเข้ากับเหตุการณ์การวางเมาส์ของแต่ละองค์ประกอบที่ตรงกัน
26

mouseup( fn )

ผูกฟังก์ชันเข้ากับเหตุการณ์การวางเมาส์ของแต่ละองค์ประกอบที่ตรงกัน
27

resize( fn )

ผูกฟังก์ชันเข้ากับเหตุการณ์การปรับขนาดของแต่ละองค์ประกอบที่ตรงกัน
28

scroll( fn )

ผูกฟังก์ชันเข้ากับเหตุการณ์เลื่อนของแต่ละองค์ประกอบที่ตรงกัน
29

select( )

ทริกเกอร์เหตุการณ์ที่เลือกของแต่ละองค์ประกอบที่ตรงกัน
30

select( fn )

ผูกฟังก์ชันเข้ากับเหตุการณ์ที่เลือกของแต่ละองค์ประกอบที่ตรงกัน
31

submit( )

ทริกเกอร์เหตุการณ์ส่งของแต่ละองค์ประกอบที่ตรงกัน
32

submit( fn )

ผูกฟังก์ชันเข้ากับเหตุการณ์ส่งของแต่ละองค์ประกอบที่ตรงกัน
33

unload( fn )

ผูกฟังก์ชันกับเหตุการณ์ยกเลิกการโหลดของแต่ละองค์ประกอบที่ตรงกัน

AJAX เป็นคำย่อที่ย่อมาจาก Asynchronous JavaScript และ XML และเทคโนโลยีนี้ช่วยให้เราโหลดข้อมูลจากเซิร์ฟเวอร์โดยไม่ต้องรีเฟรชหน้าเบราว์เซอร์

หากคุณยังใหม่กับ AJAX ฉันขอแนะนำให้คุณอ่านบทแนะนำ Ajaxของเราก่อนดำเนินการต่อ

JQuery เป็นเครื่องมือที่ยอดเยี่ยมซึ่งมีชุดวิธีการ AJAX มากมายเพื่อพัฒนาเว็บแอปพลิเคชันรุ่นต่อไป

กำลังโหลดข้อมูลอย่างง่าย

การโหลดข้อมูลแบบคงที่หรือไดนามิกโดยใช้ JQuery AJAX ทำได้ง่ายมาก JQuery ให้load() วิธีการทำงาน -

ไวยากรณ์

นี่คือไวยากรณ์ง่ายๆสำหรับ load() วิธีการ -

[selector].load( URL, [data], [callback] );

นี่คือคำอธิบายของพารามิเตอร์ทั้งหมด -

  • URL- URL ของทรัพยากรฝั่งเซิร์ฟเวอร์ที่ส่งคำขอ อาจเป็นสคริปต์ CGI, ASP, JSP หรือ PHP ซึ่งสร้างข้อมูลแบบไดนามิกหรือจากฐานข้อมูล

  • data- พารามิเตอร์ทางเลือกนี้แสดงถึงออบเจ็กต์ที่มีคุณสมบัติเป็นอนุกรมเป็นพารามิเตอร์ที่เข้ารหัสอย่างเหมาะสมเพื่อส่งต่อไปยังคำขอ หากระบุไว้คำขอจะทำโดยใช้POSTวิธี. หากละเว้นไฟล์GET ใช้วิธีการ

  • callback- เรียกใช้ฟังก์ชันการโทรกลับหลังจากโหลดข้อมูลการตอบกลับลงในองค์ประกอบของชุดที่ตรงกัน พารามิเตอร์แรกที่ส่งไปยังฟังก์ชันนี้คือข้อความตอบกลับที่ได้รับจากเซิร์ฟเวอร์และพารามิเตอร์ที่สองคือรหัสสถานะ

ตัวอย่าง

พิจารณาไฟล์ HTML ต่อไปนี้ด้วยการเข้ารหัส JQuery ขนาดเล็ก -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){ $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load /jquery/result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

ที่นี่ load() เริ่มการร้องขอ Ajax ไปยัง URL ที่ระบุ /jquery/result.htmlไฟล์. หลังจากโหลดไฟล์นี้เนื้อหาทั้งหมดจะมีประชากรภายใน <div> ที่ติดแท็กที่มี ID เวที สมมติว่าไฟล์ /jquery/result.html ของเรามี HTML เพียงบรรทัดเดียว -

<h1>THIS IS RESULT...</h1>

เมื่อคุณคลิกปุ่มที่กำหนดไฟล์ result.html จะถูกโหลด

รับข้อมูล JSON

จะมีสถานการณ์เมื่อเซิร์ฟเวอร์ส่งคืนสตริง JSON ตามคำขอของคุณ ฟังก์ชันยูทิลิตี้ jQuerygetJSON() แยกวิเคราะห์สตริง JSON ที่ส่งคืนและทำให้สตริงผลลัพธ์พร้อมใช้งานสำหรับฟังก์ชันเรียกกลับเป็นพารามิเตอร์แรกเพื่อดำเนินการเพิ่มเติม

ไวยากรณ์

นี่คือไวยากรณ์ง่ายๆสำหรับ getJSON() วิธีการ -

[selector].getJSON( URL, [data], [callback] );

นี่คือคำอธิบายของพารามิเตอร์ทั้งหมด -

  • URL - URL ของทรัพยากรฝั่งเซิร์ฟเวอร์ที่ติดต่อผ่านเมธอด GET

  • data - ออบเจ็กต์ที่มีคุณสมบัติเป็นคู่ชื่อ / ค่าที่ใช้ในการสร้างสตริงการสืบค้นที่จะต่อท้าย URL หรือสตริงการสืบค้นที่มีการจัดรูปแบบและเข้ารหัสไว้ล่วงหน้า

  • callback- ฟังก์ชั่นที่เรียกใช้เมื่อคำขอเสร็จสมบูรณ์ ค่าข้อมูลที่เกิดจากการย่อยเนื้อหาการตอบสนองเป็นสตริง JSON จะถูกส่งผ่านเป็นพารามิเตอร์แรกไปยังการเรียกกลับนี้และสถานะเป็นตัวที่สอง

ตัวอย่าง

พิจารณาไฟล์ HTML ต่อไปนี้ด้วยการเข้ารหัส JQuery ขนาดเล็ก -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("#driver").click(function(event){
				
               $.getJSON('/jquery/result.json', function(jd) { $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>'); $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
					
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load result.json file −</p>
		
      <div id = "stage" style = "background-color:#eee;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

นี่คือวิธียูทิลิตี้ JQuery getJSON() เริ่มการร้องขอ Ajax ไปยัง URL ที่ระบุ result.jsonไฟล์. หลังจากโหลดไฟล์นี้เนื้อหาทั้งหมดจะถูกส่งผ่านไปยังฟังก์ชันการเรียกกลับซึ่งในที่สุดก็จะมีประชากรภายใน <div> ที่ติดแท็กที่มี ID เวที สมมติว่าไฟล์ result.json ของเรามีเนื้อหาตามรูปแบบ json -

{
   "name": "Zara Ali",
   "age" : "67",
   "sex": "female"
}

เมื่อคุณคลิกปุ่มที่กำหนดไฟล์ result.json จะถูกโหลด

การส่งผ่านข้อมูลไปยังเซิร์ฟเวอร์

หลายครั้งที่คุณรวบรวมอินพุตจากผู้ใช้และคุณส่งอินพุตนั้นไปยังเซิร์ฟเวอร์เพื่อประมวลผลต่อไป JQuery AJAX ทำให้ง่ายพอที่จะส่งข้อมูลที่รวบรวมไปยังเซิร์ฟเวอร์โดยใช้ไฟล์data พารามิเตอร์ของเมธอด Ajax ที่มีอยู่

ตัวอย่าง

ตัวอย่างนี้แสดงให้เห็นถึงวิธีการส่งผ่านอินพุตของผู้ใช้ไปยังสคริปต์ของเว็บเซิร์ฟเวอร์ซึ่งจะส่งผลลัพธ์เดียวกันกลับมาและเราจะพิมพ์ -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("#driver").click(function(event){
               var name = $("#name").val(); $("#stage").load('/jquery/result.php', {"name":name} );
            });
         });
      </script>
   </head>
	
   <body>
      <p>Enter your name and click on the button:</p>
      <input type = "input" id = "name" size = "40" /><br />
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Show Result" />
   </body>
</html>

นี่คือรหัสที่เขียนใน result.php สคริปต์ -

<?php
   if( $_REQUEST["name"] ){ $name = $_REQUEST['name']; echo "Welcome ". $name;
   }
?>

ตอนนี้คุณสามารถป้อนข้อความใดก็ได้ในช่องป้อนข้อมูลที่กำหนดจากนั้นคลิกปุ่ม "แสดงผลลัพธ์" เพื่อดูสิ่งที่คุณป้อนในช่องป้อนข้อมูล

วิธี JQuery AJAX

คุณได้เห็นแนวคิดพื้นฐานของ AJAX โดยใช้ JQuery ตารางต่อไปนี้แสดงวิธีการ JQuery AJAX ที่สำคัญทั้งหมดซึ่งคุณสามารถใช้ได้ตามความต้องการในการเขียนโปรแกรมของคุณ -

ซีเนียร์ วิธีการและคำอธิบาย
1 jQuery.ajax (ตัวเลือก)

โหลดเพจระยะไกลโดยใช้คำร้องขอ HTTP
2 jQuery.ajaxSetup (ตัวเลือก)

ตั้งค่าการตั้งค่าส่วนกลางสำหรับคำขอ AJAX
3 jQuery.get (url, [data], [callback], [type])

โหลดเพจระยะไกลโดยใช้คำขอ HTTP GET
4 jQuery.getJSON (url, [data], [callback])

โหลดข้อมูล JSON โดยใช้คำขอ HTTP GET
5 jQuery.getScript (url, [โทรกลับ])

โหลดและเรียกใช้ไฟล์ JavaScript โดยใช้คำขอ HTTP GET
6 jQuery.post (url, [data], [callback], [type])

โหลดเพจระยะไกลโดยใช้คำขอ HTTP POST
7 โหลด (url, [data], [callback])

โหลด HTML จากไฟล์ระยะไกลและฉีดลงใน DOM
8 ทำให้เป็นอนุกรม ()

ทำให้ชุดขององค์ประกอบอินพุตเป็นชุดข้อมูลเป็นชุดข้อมูล
9 ซีเรียลไลซ์อาร์เรย์ ()

ทำให้ฟอร์มและองค์ประกอบของฟอร์มทั้งหมดเป็นอนุกรมเช่นเมธอด. serialize () แต่ส่งคืนโครงสร้างข้อมูล JSON เพื่อให้คุณใช้งานได้

เหตุการณ์ JQuery AJAX

คุณสามารถเรียกใช้วิธีการ JQuery ต่างๆในระหว่างวงจรชีวิตของความคืบหน้าการโทร AJAX ขึ้นอยู่กับเหตุการณ์ / ขั้นตอนที่แตกต่างกันวิธีการดังต่อไปนี้ -

คุณสามารถผ่านกิจกรรม AJAXทั้งหมดได้

ซีเนียร์ วิธีการและคำอธิบาย
1 ajaxComplete (โทรกลับ)

แนบฟังก์ชันที่จะดำเนินการเมื่อใดก็ตามที่คำขอ AJAX เสร็จสมบูรณ์
2 ajaxStart (โทรกลับ)

แนบฟังก์ชันที่จะดำเนินการเมื่อใดก็ตามที่คำขอ AJAX เริ่มต้นขึ้นและไม่มีการใช้งานอยู่แล้ว
3 ajaxError (โทรกลับ)

แนบฟังก์ชันที่จะดำเนินการเมื่อใดก็ตามที่คำขอ AJAX ล้มเหลว
4 ajaxSend (โทรกลับ)

แนบฟังก์ชันที่จะดำเนินการก่อนที่จะส่งคำขอ AJAX
5 ajaxStop (โทรกลับ)

แนบฟังก์ชันที่จะดำเนินการเมื่อใดก็ตามที่คำขอ AJAX ทั้งหมดสิ้นสุดลง
6 ajaxSuccess (โทรกลับ)

แนบฟังก์ชันที่จะดำเนินการเมื่อใดก็ตามที่คำขอ AJAX ดำเนินการสำเร็จ

jQuery มีอินเทอร์เฟซที่เรียบง่ายเล็กน้อยสำหรับการทำเอฟเฟกต์ที่น่าทึ่งประเภทต่างๆ วิธีการ jQuery ช่วยให้เราใช้เอฟเฟกต์ที่ใช้กันทั่วไปได้อย่างรวดเร็วด้วยการกำหนดค่าขั้นต่ำ บทช่วยสอนนี้ครอบคลุมวิธีการ jQuery ที่สำคัญทั้งหมดในการสร้างเอฟเฟ็กต์ภาพ

การแสดงและการซ่อนองค์ประกอบ

คำสั่งสำหรับการแสดงและซ่อนองค์ประกอบเป็นสิ่งที่เราคาดหวัง - show() เพื่อแสดงองค์ประกอบในชุดรวมและ hide() เพื่อซ่อนพวกเขา

ไวยากรณ์

นี่คือไวยากรณ์ง่ายๆสำหรับ show() วิธีการ -

[selector].show( speed, [callback] );

นี่คือคำอธิบายของพารามิเตอร์ทั้งหมด -

  • speed - สตริงที่แสดงถึงหนึ่งในสามความเร็วที่กำหนดไว้ล่วงหน้า ("ช้า" "ปกติ" หรือ "เร็ว") หรือจำนวนมิลลิวินาทีในการเรียกใช้ภาพเคลื่อนไหว (เช่น 1,000)

  • callback- พารามิเตอร์ทางเลือกนี้แสดงถึงฟังก์ชันที่จะดำเนินการเมื่อใดก็ตามที่ภาพเคลื่อนไหวเสร็จสิ้น ดำเนินการหนึ่งครั้งสำหรับแต่ละองค์ประกอบที่เคลื่อนไหว

ต่อไปนี้เป็นไวยากรณ์ง่ายๆสำหรับ hide() วิธีการ -

[selector].hide( speed, [callback] );

นี่คือคำอธิบายของพารามิเตอร์ทั้งหมด -

  • speed - สตริงที่แสดงถึงหนึ่งในสามความเร็วที่กำหนดไว้ล่วงหน้า ("ช้า" "ปกติ" หรือ "เร็ว") หรือจำนวนมิลลิวินาทีในการเรียกใช้ภาพเคลื่อนไหว (เช่น 1,000)

  • callback- พารามิเตอร์ทางเลือกนี้แสดงถึงฟังก์ชันที่จะดำเนินการเมื่อใดก็ตามที่ภาพเคลื่อนไหวเสร็จสิ้น ดำเนินการหนึ่งครั้งสำหรับแต่ละองค์ประกอบที่เคลื่อนไหว

ตัวอย่าง

พิจารณาไฟล์ HTML ต่อไปนี้ด้วยการเข้ารหัส JQuery ขนาดเล็ก -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("#show").click(function () {
               $(".mydiv").show( 1000 ); }); $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });
				
         });
      </script>
		
      <style>
         .mydiv{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:100px;
         }
      </style>
   </head>
	
   <body>
      <div class = "mydiv">
         This is a SQUARE
      </div>

      <input id = "hide" type = "button" value = "Hide" />   
      <input id = "show" type = "button" value = "Show" />
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

การสลับองค์ประกอบ

jQuery มีวิธีการในการสลับสถานะการแสดงผลขององค์ประกอบระหว่างเปิดเผยหรือซ่อน หากองค์ประกอบถูกแสดงในตอนแรกองค์ประกอบนั้นจะถูกซ่อนไว้ หากซ่อนไว้ระบบจะแสดง

ไวยากรณ์

นี่คือไวยากรณ์ง่ายๆสำหรับหนึ่งใน toggle() วิธีการ -

[selector]..toggle([speed][, callback]);

นี่คือคำอธิบายของพารามิเตอร์ทั้งหมด -

  • speed - สตริงที่แสดงถึงหนึ่งในสามความเร็วที่กำหนดไว้ล่วงหน้า ("ช้า" "ปกติ" หรือ "เร็ว") หรือจำนวนมิลลิวินาทีในการเรียกใช้ภาพเคลื่อนไหว (เช่น 1,000)

  • callback- พารามิเตอร์ทางเลือกนี้แสดงถึงฟังก์ชันที่จะดำเนินการเมื่อใดก็ตามที่ภาพเคลื่อนไหวเสร็จสิ้น ดำเนินการหนึ่งครั้งสำหรับแต่ละองค์ประกอบที่เคลื่อนไหว

ตัวอย่าง

เราสามารถทำให้องค์ประกอบใด ๆ เคลื่อนไหวได้เช่น <div> ธรรมดาที่มีรูปภาพ -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $(".clickme").click(function(event){ $(".target").toggle('slow', function(){
                  $(".log").text('Transition Complete');
               });
            });
         });
      </script>
		
      <style>
         .clickme{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:50px;
         }
      </style>
   </head>
	
   <body>
      <div class = "content">
         <div class = "clickme">Click Me</div>
         <div class = "target">
            <img src = "./images/jquery.jpg" alt = "jQuery" />
         </div>
         <div class = "log"></div>
      </div>
   </body>
</html>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

วิธีการ JQuery Effect

คุณได้เห็นแนวคิดพื้นฐานของ jQuery Effects แล้ว ตารางต่อไปนี้แสดงวิธีการที่สำคัญทั้งหมดในการสร้างเอฟเฟกต์ประเภทต่างๆ -

ซีเนียร์ วิธีการและคำอธิบาย
1 ภาพเคลื่อนไหว (พารามิเตอร์ [ระยะเวลาการค่อยๆเปลี่ยนการโทรกลับ])

ฟังก์ชันสำหรับสร้างภาพเคลื่อนไหวแบบกำหนดเอง
2 fadeIn (ความเร็ว [โทรกลับ])

จางหายไปในองค์ประกอบที่ตรงกันทั้งหมดโดยการปรับความทึบและเริ่มการเรียกกลับเพิ่มเติมหลังจากเสร็จสิ้น
3 fadeOut (ความเร็ว [โทรกลับ])

ลบองค์ประกอบที่ตรงกันทั้งหมดโดยปรับความทึบเป็น 0 จากนั้นตั้งค่าการแสดงผลเป็น "ไม่มี" และเริ่มการเรียกกลับเพิ่มเติมหลังจากเสร็จสิ้น
4 fadeTo (ความเร็วความทึบการโทรกลับ)

ลดความทึบขององค์ประกอบที่ตรงกันทั้งหมดให้เป็นความทึบที่ระบุและเริ่มการเรียกกลับเพิ่มเติมหลังจากเสร็จสิ้น
5 ซ่อน ()

ซ่อนชุดขององค์ประกอบที่ตรงกันแต่ละชุดหากมีการแสดง
6 ซ่อน (ความเร็ว [โทรกลับ])

ซ่อนองค์ประกอบที่ตรงกันทั้งหมดโดยใช้ภาพเคลื่อนไหวที่สวยงามและเริ่มการเรียกกลับที่เป็นตัวเลือกหลังจากเสร็จสิ้น
7 แสดง ()

แสดงชุดขององค์ประกอบที่ตรงกันหากซ่อนอยู่
8 แสดง (ความเร็ว [โทรกลับ])

แสดงองค์ประกอบที่ตรงกันทั้งหมดโดยใช้ภาพเคลื่อนไหวที่สวยงามและเริ่มการเรียกกลับที่เป็นทางเลือกหลังจากเสร็จสิ้น
9 slideDown (ความเร็ว [โทรกลับ])

เปิดเผยองค์ประกอบที่ตรงกันทั้งหมดโดยปรับความสูงและเริ่มการเรียกกลับเพิ่มเติมหลังจากเสร็จสิ้น
10 slideToggle (ความเร็ว [โทรกลับ])

สลับการมองเห็นขององค์ประกอบที่ตรงกันทั้งหมดโดยปรับความสูงและเริ่มการเรียกกลับเพิ่มเติมหลังจากเสร็จสิ้น
11 slideUp (ความเร็ว [โทรกลับ])

ซ่อนองค์ประกอบที่ตรงกันทั้งหมดโดยปรับความสูงและเริ่มการเรียกกลับเพิ่มเติมหลังจากเสร็จสิ้น
12 หยุด ([clearQueue, gotoEnd])

หยุดภาพเคลื่อนไหวทั้งหมดที่กำลังทำงานอยู่ในองค์ประกอบที่ระบุทั้งหมด
13 สลับ ()

สลับการแสดงชุดองค์ประกอบที่ตรงกันแต่ละชุด
14 สลับ (ความเร็ว [โทรกลับ])

สลับการแสดงชุดขององค์ประกอบที่ตรงกันแต่ละชุดโดยใช้ภาพเคลื่อนไหวที่สวยงามและเริ่มการเรียกกลับเพิ่มเติมหลังจากเสร็จสิ้น
15 สลับ (สวิตช์)

สลับการแสดงชุดขององค์ประกอบที่ตรงกันแต่ละชุดตามสวิตช์ (true แสดงองค์ประกอบทั้งหมดส่วน false จะซ่อนองค์ประกอบทั้งหมด)
16 jQuery.fx.off

ปิดใช้งานภาพเคลื่อนไหวทั้งหมดทั่วโลก

ผลกระทบจากไลบรารี UI

ในการใช้เอฟเฟกต์เหล่านี้คุณสามารถดาวน์โหลด jQuery UI Library ล่าสุดได้ jquery-ui-1.11.4.custom.zipจากjQuery UI Libraryหรือใช้ Google CDN เพื่อใช้ในลักษณะเดียวกับที่เราทำกับ jQuery

เราใช้ Google CDN สำหรับ jQuery UI โดยใช้ข้อมูลโค้ดต่อไปนี้ในหน้า HTML เพื่อให้เราสามารถใช้ jQuery UI -

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>
ซีเนียร์ วิธีการและคำอธิบาย
1 ตาบอด

บังองค์ประกอบออกไปหรือแสดงโดยทำให้ไม่เห็น
2 ตีกลับ

ตีกลับองค์ประกอบในแนวตั้งหรือแนวนอน n ครั้ง
3 คลิป

เปิดหรือปิดองค์ประกอบในแนวตั้งหรือแนวนอน
4 วาง

ปล่อยองค์ประกอบออกไปหรือแสดงโดยการวางองค์ประกอบ
5 ระเบิด

ระเบิดองค์ประกอบออกเป็นชิ้น ๆ
6 พับ

พับองค์ประกอบเหมือนกระดาษ
7 ไฮไลต์

เน้นพื้นหลังด้วยสีที่กำหนด
8 พัฟ

ปรับขนาดและเลือนภาพเคลื่อนไหวสร้างเอฟเฟกต์พัฟ
9 กระตุ้น

กระตุ้นความทึบขององค์ประกอบหลาย ๆ ครั้ง
10 มาตราส่วน

ลดขนาดหรือขยายองค์ประกอบตามปัจจัยเปอร์เซ็นต์
11 เขย่า

เขย่าองค์ประกอบในแนวตั้งหรือแนวนอน n ครั้ง
12 ขนาด

ปรับขนาดองค์ประกอบตามความกว้างและความสูงที่ระบุ
13 สไลด์

เลื่อนองค์ประกอบออกจากวิวพอร์ต
14 โอน

โอนโครงร่างขององค์ประกอบไปยังอีกองค์ประกอบหนึ่ง

การโต้ตอบสามารถเพิ่มพฤติกรรมพื้นฐานของเมาส์ให้กับองค์ประกอบใด ๆ เมื่อใช้กับการโต้ตอบเราสามารถสร้างรายการที่เรียงลำดับได้องค์ประกอบที่ปรับขนาดได้การลากและวางพฤติกรรมการโต้ตอบยังสร้างบล็อคส่วนประกอบที่ยอดเยี่ยมสำหรับวิดเจ็ตและแอปพลิเคชันที่ซับซ้อนมากขึ้น

ซีเนียร์ การโต้ตอบและคำอธิบาย
1 ลากได้

เปิดใช้งานฟังก์ชันการลากบนองค์ประกอบ DOM ใด ๆ
2 วางได้

เปิดใช้งานองค์ประกอบ DOM ใด ๆ ที่จะสามารถวางได้
3 ปรับขนาดได้

เปิดใช้งานองค์ประกอบ DOM ใด ๆ ที่สามารถปรับขนาดได้
4 เลือกสามารถ

เปิดใช้งานองค์ประกอบ DOM (หรือกลุ่มขององค์ประกอบ) เพื่อเลือกได้
5 เรียงลำดับได้

เปิดใช้งานกลุ่มขององค์ประกอบ DOM เพื่อจัดเรียง

วิดเจ็ต jQuery UI เป็นปลั๊กอิน jQuery พิเศษเมื่อใช้ปลั๊กอินเราสามารถใช้พฤติกรรมกับองค์ประกอบได้ อย่างไรก็ตามปลั๊กอินไม่มีความสามารถในตัวบางอย่างเช่นวิธีเชื่อมโยงข้อมูลกับองค์ประกอบแสดงวิธีการผสานตัวเลือกกับค่าเริ่มต้นและควบคุมอายุการใช้งานของปลั๊กอิน

ซีเนียร์ วิดเจ็ตและคำอธิบาย
1 หีบเพลง

เปิดใช้งานเพื่อยุบเนื้อหาที่แบ่งออกเป็นส่วนตรรกะ
2 เติมข้อความอัตโนมัติ

เปิดใช้งานเพื่อให้คำแนะนำในขณะที่คุณพิมพ์ลงในฟิลด์
3 ปุ่ม

ปุ่มคืออินพุตประเภท submit และ Anchor
4 เลือกวันที่

เป็นการเปิดปฏิทินแบบโต้ตอบในภาพซ้อนทับขนาดเล็ก
5 กล่องโต้ตอบ

กล่องโต้ตอบเป็นหนึ่งในวิธีที่ดีในการนำเสนอข้อมูลบนหน้า HTML
6 เมนู

เมนูแสดงรายการ
7 แถบความคืบหน้า

จะแสดงข้อมูลความคืบหน้า
8 เลือกเมนู

เปิดใช้งานสไตล์สามารถเลือกองค์ประกอบ / องค์ประกอบ
9 ตัวเลื่อน

แถบเลื่อนพื้นฐานเป็นแนวนอนและมีที่จับเดียวที่สามารถเคลื่อนย้ายได้ด้วยเมาส์หรือโดยใช้ปุ่มลูกศร
10 ตัวหมุน

เป็นวิธีที่รวดเร็วในการเลือกค่าหนึ่งจากชุด
11 แท็บ

ใช้เพื่อสลับระหว่างเนื้อหาที่แบ่งออกเป็นส่วนตรรกะ
12 คำแนะนำเครื่องมือ

ให้คำแนะนำสำหรับผู้ใช้

Jquery มีธีมสไตล์ที่แตกต่างกันสองแบบคือ A และ B แต่ละแบบมีสีที่แตกต่างกันสำหรับปุ่มแถบบล็อกเนื้อหาและอื่น ๆ

ไวยากรณ์ของการค้นหา J ตามที่แสดงด้านล่าง -

<div data-role = "page" data-theme = "a|b">

ตัวอย่างง่ายๆของ A ตามที่แสดงด้านล่าง -

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" 
         href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
			
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script 
         src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
      </script>
   </head>
	
   <body>
      <div data-role = "page" id = "pageone" data-theme = "a">
        <div data-role = "header">
            <h1>Tutorials Point</h1>
         </div>

         <div data-role = "main" class = "ui-content">
			
            <p>Text link</p>
            <a href = "#">A Standard Text Link</a>
            <a href = "#" class = "ui-btn">Link Button</a>
            <p>A List View:</p>
				
            <ul data-role = "listview" data-autodividers = "true" data-inset = "true">
               <li><a href = "#">Android </a></li>
               <li><a href = "#">IOS</a></li>
            </ul>
				
            <label for = "fullname">Input Field:</label>
            <input type = "text" name = "fullname" id = "fullname" 
               placeholder = "Name..">    
            <label for = "switch">Toggle Switch:</label>
				
            <select name = "switch" id = "switch" data-role = "slider">
               <option value = "on">On</option>
               <option value = "off" selected>Off</option>
            </select>
				
         </div>

         <div data-role = "footer">
            <h1>Tutorials point</h1>
         </div>
      </div>
   </body>
</html>

สิ่งนี้ควรให้ผลลัพธ์ดังต่อไปนี้ -

ตัวอย่างง่ายๆของ B ตามที่แสดงด้านล่าง -

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" 
         href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script 
         src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
      </script>
   </head>
	
   <body>
      <div data-role = "page" id = "pageone" data-theme = "b">
        <div data-role = "header">
            <h1>Tutorials Point</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <p>Text link</p>
            <a href = "#">A Standard Text Link</a>
            <a href = "#" class = "ui-btn">Link Button</a>
            <p>A List View:</p>
				
            <ul data-role = "listview" data-autodividers = "true" data-inset = "true">
               <li><a href = "#">Android </a></li>
               <li><a href = "#">IOS</a></li>
            </ul>
				
            <label for = "fullname">Input Field:</label>
            <input type = "text" name = "fullname" id = "fullname" 
               placeholder = "Name..">    
            <label for = "switch">Toggle Switch:</label>
				
            <select name = "switch" id = "switch" data-role = "slider">
               <option value = "on">On</option>
               <option value = "off" selected>Off</option>
            </select>
				
         </div>

         <div data-role = "footer">
            <h1>Tutorials point</h1>
         </div>
      </div>
   </body>
</html>

สิ่งนี้ควรให้ผลลัพธ์ดังต่อไปนี้ -

Jquery มียูทิลิตี้ที่ให้บริการในรูปแบบของ $ (name space) วิธีการเหล่านี้มีประโยชน์ในการทำงานเขียนโปรแกรมให้เสร็จสิ้นวิธียูทิลิตี้บางวิธีมีดังที่แสดงด้านล่าง

$ .trim ()

$ .trim () ใช้เพื่อลบช่องว่างที่นำหน้าและต่อท้าย

$.trim( "    lots of extra whitespace    " );

$ .each ()

$ .each () ใช้เพื่อทำซ้ำบนอาร์เรย์และวัตถุ

$.each([ "foo", "bar", "baz" ], function( idx, val ) {
   console.log( "element " + idx + " is " + val );
});
 
$.each({ foo: "bar", baz: "bim" }, function( k, v ) {
   console.log( k + " : " + v );
});

.each () สามารถเรียกได้จากการเลือกเพื่อวนซ้ำองค์ประกอบที่มีอยู่ในการเลือก ควรใช้ .each () ไม่ใช่ $ .each () สำหรับการวนซ้ำองค์ประกอบในส่วนที่เลือก

$ .inArray ()

$ .inArray () ใช้เพื่อส่งกลับดัชนีของค่าในอาร์เรย์หรือ -1 หากค่าไม่อยู่ในอาร์เรย์

var myArray = [ 1, 2, 3, 5 ];
 
if ( $.inArray( 4, myArray ) !== -1 ) {
   console.log( "found it!" );
}

$ .extend ()

$ .extend () ใช้เพื่อเปลี่ยนคุณสมบัติของอ็อบเจ็กต์แรกโดยใช้คุณสมบัติของอ็อบเจ็กต์ที่ตามมา

var firstObject = { foo: "bar", a: "b" };
var secondObject = { foo: "baz" };
 
var newObject = $.extend( firstObject, secondObject );
 
console.log( firstObject.foo ); 
console.log( newObject.foo );

$ .proxy ()

$ .proxy () ใช้เพื่อส่งคืนฟังก์ชันที่จะทำงานในขอบเขตที่กำหนดไว้เสมอนั่นคือกำหนดความหมายของสิ่งนี้ภายในฟังก์ชันที่ผ่านไปเป็นอาร์กิวเมนต์ที่สอง

var myFunction = function() {
   console.log( this );
};

var myObject = {
   foo: "bar"
};
 
myFunction(); // window
 
var myProxyFunction = $.proxy( myFunction, myObject );
 
myProxyFunction();

$ .browser

$ .browser ใช้เพื่อให้ข้อมูลเกี่ยวกับเบราว์เซอร์

jQuery.each( jQuery.browser, function( i, val ) {
   $( "<div>" + i + " : <span>" + val + "</span>" )
   .appendTo( document.body );
});

$ .contains ()

$ .contains () ใช้เพื่อคืนค่า true หากองค์ประกอบ DOM ที่จัดเตรียมโดยอาร์กิวเมนต์ที่สองเป็นลูกหลานขององค์ประกอบ DOM ที่จัดเตรียมโดยอาร์กิวเมนต์แรกไม่ว่าจะเป็นลูกโดยตรงหรือซ้อนกันลึกกว่า

$.contains( document.documentElement, document.body ); $.contains( document.body, document.documentElement );

$ .data ()

$ .data () ใช้เพื่อให้ข้อมูลเกี่ยวกับข้อมูล

<html lang = "en">
   <head>
      <title>jQuery.data demo</title>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      <div>
         The values stored were <span></span>
            and <span></span>
      </div>
 
      <script>
         var div = $( "div" )[ 0 ]; jQuery.data( div, "test", { first: 25, last: "tutorials" }); $( "span:first" ).text( jQuery.data( div, "test" ).first );
         $( "span:last" ).text( jQuery.data( div, "test" ).last );
      </script>
   </body>
</html>

ผลลัพธ์จะเป็นดังนี้ 

The values stored were 25 and tutorials

$ .fn.extend ()

$ .fn.extend () ใช้เพื่อขยาย jQuery ต้นแบบ

<html lang = "en">
   <head>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      <label><input type = "checkbox" name = "android"> 
         Android</label>
      <label><input type = "checkbox" name = "ios"> IOS</label>
 
      <script>
         jQuery.fn.extend({
			
            check: function() {
               return this.each(function() {
                  this.checked = true;
               });
            },
            uncheck: function() {
               return this.each(function() {
                  this.checked = false;
               });
            }
         });
 
         // Use the newly created .check() method
         $( "input[type = 'checkbox']" ).check();
			
      </script>
   </body>
</html>

ให้ผลลัพธ์ตามที่แสดงด้านล่าง -

$ .isWindow ()

$ .isWindow () ใช้เพื่อจดจำหน้าต่าง

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery.isWindow demo</title>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      Is 'window' a window? <b></b>
 
      <script>
         $( "b" ).append( "" + $.isWindow( window ) );
      </script>
   </body>
</html>

ให้ผลลัพธ์ตามที่แสดงด้านล่าง -

$ .now ()

ส่งคืนตัวเลขที่แสดงเวลาปัจจุบัน

(new Date).getTime()

$ .isXMLDoc ()

$ .isXMLDoc () ตรวจสอบว่าไฟล์เป็น xml หรือไม่

jQuery.isXMLDoc( document )
jQuery.isXMLDoc( document.body )

$ .globalEval ()

$ .globalEval () ใช้เพื่อเรียกใช้งานจาวาสคริปต์ทั่วโลก

function test() {
   jQuery.globalEval( "var newVar = true;" )
}
test();

$ .dequeue ()

$ .dequeue () ใช้เพื่อเรียกใช้ฟังก์ชันถัดไปในคิว

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery.dequeue demo</title>
		
      <style>
         div {
            margin: 3px;
            width: 50px;
            position: absolute;
            height: 50px;
            left: 10px;
            top: 30px;
            background-color: green;
            border-radius: 50px;
         }
         div.red {
            background-color: blue;
         }
      </style>
		
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
   </head>

   <body>
      <button>Start</button>
      <div></div>
 
      <script>
         $( "button" ).click(function() {
            $( "div" ) .animate({ left: '+ = 400px' }, 2000 ) .animate({ top: '0px' }, 600 ) .queue(function() { $( this ).toggleClass( "red" );
               $.dequeue( this );
            })
				
            .animate({ left:'10px', top:'30px' }, 700 );
         });
      </script>
   </body>
</html>

ให้ผลลัพธ์ตามที่แสดงด้านล่าง -

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved