หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

jQuery - นิวเวฟ JavaScript

การประชุมจะจัดขึ้นบนแพลตฟอร์ม matrix.org

นาทีการประชุมสามารถดูได้ที่ meesling.jquery.org

jQuery เวอร์ชันล่าสุดมีให้ที่ https://jquery.com/download/

การสนับสนุนเวอร์ชัน

รุ่น สาขา สถานะ
4.x หลัก เบต้า
3.x 3.x เสถียร คล่องแคล่ว
2.x 2.x เสถียร ไม่ทำงาน
1.x 1.x เสถียร ไม่ทำงาน

เมื่อ 4.0.0 รอบชิงชนะเลิศมีการเปิดตัวสาขา 3.x จะยังคงได้รับการอัปเดตต่อไปในเวลา จำกัด ไม่รองรับสาขา 2.x และ 1.x อีกต่อไป

การสนับสนุนเชิงพาณิชย์สำหรับเวอร์ชันที่ไม่ได้ใช้งานมีให้บริการจาก Herodevs

เรียนรู้เพิ่มเติมเกี่ยวกับการสนับสนุนเวอร์ชันของเรา

คู่มือการบริจาค

ด้วยจิตวิญญาณของการพัฒนาซอฟต์แวร์โอเพ่นซอร์ส jQuery มักจะส่งเสริมการมีส่วนร่วมของรหัสชุมชน เพื่อช่วยให้คุณเริ่มต้นและก่อนที่คุณจะข้ามรหัสการเขียนให้แน่ใจว่าได้อ่านแนวทางการสนับสนุนที่สำคัญเหล่านี้อย่างละเอียด:

  1. เข้าร่วม
  2. คู่มือสไตล์หลัก
  3. การเขียนรหัสสำหรับโครงการ jQuery

การอ้างอิงถึงปัญหา/PRS

ปัญหา GitHub/PRS มักจะถูกอ้างอิงผ่าน gh-NUMBER โดยที่ NUMBER คือ ID ตัวเลขของปัญหา/PR คุณสามารถค้นหาปัญหา/PR ดังกล่าวได้ภายใต้ https://github.com/jquery/jquery/issues/NUMBER

jQuery ได้ใช้ตัวติดตามบั๊กที่แตกต่างกัน - ตาม TRAC - ในอดีตมีอยู่ภายใต้ bugs.jquery.com มันจะถูกเก็บไว้ในโหมดอ่านเท่านั้นเพื่อที่จะอ้างถึงการสนทนาที่ผ่านมาเป็นไปได้ เมื่อแหล่งข้อมูล jQuery อ้างอิงหนึ่งในปัญหาเหล่านั้นจะใช้รูปแบบ trac-NUMBER ซึ่ง NUMBER คือ ID ตัวเลขของปัญหา คุณสามารถค้นหาปัญหาดังกล่าวได้ภายใต้ https://bugs.jquery.com/ticket/NUMBER

สภาพแวดล้อมที่จะใช้ jQuery

  • การสนับสนุนเบราว์เซอร์
  • JQuery ยังรองรับโหนดส่วนขยายเบราว์เซอร์และสภาพแวดล้อมอื่น ๆ ที่ไม่ใช่เบราว์เซอร์

สิ่งที่คุณต้องการในการสร้าง jQuery ของคุณเอง

ในการสร้าง jQuery คุณต้องมี node.js/npm ล่าสุดและ Git 1.7 หรือใหม่กว่า รุ่นก่อนหน้าอาจใช้งานได้ แต่ไม่รองรับ

สำหรับ Windows คุณต้องดาวน์โหลดและติดตั้ง git และ node.js

ผู้ใช้ MacOS ควรติดตั้ง Homebrew เมื่อติดตั้ง Homebrew แล้วให้ Run brew install git เพื่อติดตั้ง Git และ brew install node เพื่อติดตั้ง Node.js.

ผู้ใช้ Linux/BSD ควรใช้ผู้จัดการแพ็คเกจที่เหมาะสมเพื่อติดตั้ง Git และ Node.js หรือสร้างจากแหล่งที่มาหากคุณแกว่งด้วยวิธีนั้น Easy-Peasy

วิธีสร้าง jQuery ของคุณเอง

ก่อนอื่นโคลน jquery git repo

จากนั้นป้อนไดเรกทอรี jQuery ติดตั้งการพึ่งพาและเรียกใช้สคริปต์บิลด์: 

 cd jquery
npm install
npm run build

jQuery เวอร์ชันที่สร้างขึ้นจะถูกวางไว้ในไดเรกทอรี dist/ Directory พร้อมกับสำเนาที่เล็กและไฟล์แผนที่ที่เกี่ยวข้อง

สร้างไฟล์ jQuery release ทั้งหมด

ในการสร้างตัวแปรทั้งหมดของ jQuery ให้เรียกใช้คำสั่งต่อไปนี้: 

npm run build:all

สิ่งนี้จะสร้างตัวแปรทั้งหมดที่ jQuery รวมอยู่ในการเปิดตัวรวมถึง jquery.js , jquery.slim.js , jquery.module.js และ jquery.slim.module.js ตามไฟล์และ sourcemaps ที่เกี่ยวข้อง

jquery.module.js และ jquery.slim.module.js เป็นโมดูล ecmascript ที่ส่งออก jQuery และ $ ตามชื่อการส่งออกที่มีชื่ออยู่ใน dist-module/ Directory มากกว่า dist/ DIRECTORY

การสร้าง jQuery ที่กำหนดเอง

สคริปต์บิลด์สามารถใช้เพื่อสร้าง jQuery รุ่นที่กำหนดเองซึ่งมีเฉพาะโมดูลที่คุณต้องการ

โมดูลใด ๆ อาจถูกแยกออกยกเว้น core เมื่อไม่รวม selector จะไม่ถูกลบออก แต่แทนที่ด้วยเสื้อคลุมขนาดเล็กรอบ ๆ querySelectorAll ดั้งเดิม (ดูข้อมูลเพิ่มเติมด้านล่าง)

สร้างความช่วยเหลือสคริปต์

หากต้องการดูรายการตัวเลือกที่มีอยู่ทั้งหมดสำหรับการสร้างสคริปต์ให้เรียกใช้สิ่งต่อไปนี้: 

npm run build -- --help

โมดูล

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

โมดูลตัวอย่างบางอย่างที่สามารถยกเว้นหรือรวมได้คือ:

  • AJAX : ฟังก์ชั่น AJAX ทั้งหมด: $.ajax() , $.get() , $.post() , $.ajaxSetup() , .load() , การขนส่งและการจดชวเลขเหตุการณ์ AJAX เช่น .ajaxStart()

  • AJAX/XHR : XMLHTTTPREQUEST AJAX Transport เท่านั้น

  • AJAX/SCRIPT : <script> AJAX Transport เท่านั้น; ใช้เพื่อดึงสคริปต์

  • AJAX/JSONP : JSONP AJAX Transport เท่านั้น; ขึ้นอยู่กับการขนส่ง AJAX/SCRIPT

  • CSS : วิธี .css() นอกจากนี้ยังลบโมดูล ทั้งหมด ขึ้นอยู่กับ CSS (รวมถึง เอฟเฟกต์ ขนาด และ ชดเชย )

  • CSS/showhide : ไม่เคลื่อนไหว .show() , .hide() และ .toggle() ; สามารถยกเว้นได้หากคุณใช้คลาสหรือการโทร .css() ที่ชัดเจนเพื่อตั้งค่าคุณสมบัติ display ยังลบโมดูล เอฟเฟกต์

  • เลิกใช้แล้ว : วิธีการที่บันทึกไว้ว่าเลิกใช้แล้ว แต่ยังไม่ได้ลบออก

  • มิติ : วิธี. .width() และ .height() รวมถึงการเปลี่ยนแปลง inner- และ outer-

  • เอฟเฟกต์ : วิธี .animate() และการจดชวเลขเช่น .slideUp() หรือ .hide("slow")

  • เหตุการณ์ : วิธี .on() และ .off() และฟังก์ชั่นเหตุการณ์ทั้งหมด

  • เหตุการณ์/ทริกเกอร์ : วิธี. .trigger() และ .triggerHandler()

  • ออฟเซ็ต : .offset() , .position() , .offsetParent() , .scrollLeft() และ .scrollTop()

  • Wrap : .wrap() , .wrapAll() , .wrapInner() และ .unwrap()

  • Core/Ready : ไม่รวมโมดูลพร้อมหากคุณวางสคริปต์ไว้ที่ส่วนท้ายของร่างกาย การเรียกกลับพร้อมที่ผูกพันกับ jQuery() จะถูกเรียกทันที อย่างไรก็ตาม jQuery(document).ready() จะไม่เป็นฟังก์ชันและ .on("ready", ...) หรือที่คล้ายกันจะไม่ถูกเรียกใช้

  • รอการตัดบัญชี : ยกเว้น jQuery.deverred นอกจากนี้ยังไม่รวมโมดูลทั้งหมดที่พึ่งพาการรอการตัดบัญชีรวมถึง Ajax , เอฟเฟกต์ และ คิว แต่แทนที่ Core/พร้อม ด้วย Core/Ready-No-deverred

  • การส่งออก/ทั่วโลก : ไม่รวมสิ่งที่แนบมาของตัวแปร jQuery ทั่วโลก ($ และ jQuery) ไปที่หน้าต่าง

  • การส่งออก/AMD : ไม่รวมคำจำกัดความของ AMD

  • ตัวเลือก : เอ็นจิ้นตัวเลือก jQuery แบบเต็ม เมื่อไม่รวมโมดูลนี้จะถูกแทนที่ด้วยเอ็นจิ้นตัวเลือกพื้นฐานตามวิธี querySelectorAll ของเบราว์เซอร์ที่ไม่รองรับส่วนขยายตัวเลือก jQuery หรือความหมายที่เพิ่มขึ้น ดูไฟล์ selector-native.js สำหรับรายละเอียด

หมายเหตุ : การไม่รวมโมดูล selector แบบเต็มจะไม่รวมส่วนขยาย jQuery Selector ทั้งหมด (เช่น effects/animatedSelector และ css/hiddenVisibleSelectors )

ชื่อ AMD

คุณสามารถตั้งค่าชื่อโมดูลสำหรับคำจำกัดความ AMD ของ JQuery โดยค่าเริ่มต้นจะถูกตั้งค่าเป็น "jQuery" ซึ่งเล่นได้ดีกับปลั๊กอินและไลบรารีของบุคคลที่สาม แต่อาจมีกรณีที่คุณต้องการเปลี่ยนสิ่งนี้ ส่งผ่านไปยังพารามิเตอร์ --amd : 

npm run build -- --amd= " custom-name "

หรือเพื่อกำหนดโดยไม่ระบุชื่อให้ทิ้งชื่อไว้ว่าง 

npm run build -- --amd
ชื่อไฟล์และไดเรกทอรี

ชื่อเริ่มต้นสำหรับไฟล์ jQuery ที่สร้างขึ้นคือ jquery.js ; มันถูกวางไว้ใต้ไดเรกทอรี dist/ เป็นไปได้ที่จะเปลี่ยนชื่อไฟล์โดยใช้ --filename และไดเรกทอรีโดยใช้ --dir --dir สัมพันธ์กับรูทโครงการ 

npm run build -- --slim --filename= " jquery.slim.js " --dir= " /tmp "

สิ่งนี้จะสร้าง jQuery เวอร์ชันบางและวางไว้ภายใต้ tmp/jquery.slim.js

โหมด Ecmascript Module (ESM)

โดยค่าเริ่มต้น jQuery จะสร้างไฟล์ JavaScript สคริปต์ปกติ นอกจากนี้คุณยังสามารถสร้างโมดูล ECMASCRIPT ที่ส่งออก jQuery เป็นการส่งออกเริ่มต้นโดยใช้พารามิเตอร์ --esm : 

npm run build -- --filename=jquery.module.js --esm
โหมดโรงงาน

โดยค่าเริ่มต้น jQuery ขึ้นอยู่กับ window ทั่วโลก สำหรับสภาพแวดล้อมที่ไม่มีคุณสามารถสร้างบิลด์โรงงานที่เปิดเผยฟังก์ชั่นการยอมรับ window เป็นพารามิเตอร์ที่คุณสามารถให้ภายนอก (ดู README ของแพ็คเกจที่เผยแพร่สำหรับคำแนะนำการใช้งาน) คุณสามารถสร้างโรงงานดังกล่าวโดยใช้พารามิเตอร์ --factory : 

npm run build -- --filename=jquery.factory.js --factory

ตัวเลือกนี้สามารถผสมกับผู้อื่นเช่น --esm หรือ --slim : 

npm run build -- --filename=jquery.factory.slim.module.js --factory --esm --slim --dir= " /dist-module "

ตัวอย่างการสร้างที่กำหนดเอง

สร้างบิลด์แบบกำหนดเองโดยใช้การเรียกใช้ npm run build โดยแสดงรายการโมดูลที่จะแยกออก ไม่รวมโมดูลระดับบนสุดยังไม่รวมไดเรกทอรีที่สอดคล้องกันของโมดูล

ไม่รวมฟังก์ชั่น AJAX ทั้งหมด: 

npm run build -- --exclude=ajax

ไม่รวม CSS ลบโมดูลขึ้นอยู่กับ CSS: เอฟเฟกต์ , ชดเชย , ขนาด 

npm run build -- --exclude=css

ไม่รวมกลุ่มของโมดูล ( -e เป็นนามแฝงสำหรับ --exclude ): 

npm run build -- -e ajax/jsonp -e css -e deprecated -e dimensions -e effects -e offset -e wrap

มีนามแฝงพิเศษในการสร้างงานสร้างที่มีการกำหนดค่าเช่นเดียวกับการสร้าง jQuery Slim อย่างเป็นทางการ: 

npm run build -- --filename=jquery.slim.js --slim

หรือเพื่อสร้างการสร้างเพรียวบางเป็นโมดูล ESM: 

npm run build -- --filename=jquery.slim.module.js --slim --esm

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

รันการทดสอบหน่วย

ตรวจสอบให้แน่ใจว่าคุณมีการพึ่งพาที่จำเป็น: 

npm install

เริ่ม npm start ต้นสร้าง jQuery อัตโนมัติในขณะที่คุณทำงาน: 

npm start

เรียกใช้การทดสอบหน่วยด้วยเซิร์ฟเวอร์ท้องถิ่นที่รองรับ PHP ตรวจสอบให้แน่ใจว่าคุณเรียกใช้เว็บไซต์จากไดเรกทอรีรูทไม่ใช่ไดเรกทอรี "ทดสอบ" ไม่จำเป็นต้องมีฐานข้อมูล เซิร์ฟเวอร์ท้องถิ่น PHP ที่กำหนดค่าล่วงหน้ามีให้สำหรับ Windows และ Mac นี่คือตัวเลือกบางอย่าง:

  • Windows: Wamp Download
  • MAC: ดาวน์โหลด MAMP
  • Linux: การตั้งค่าหลอดไฟ
  • พังพอน (แพลตฟอร์มส่วนใหญ่)

Git ที่จำเป็น

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

การทำความสะอาด

หากคุณต้องการล้างไดเรกทอรีการทำงานของคุณกลับไปที่สถานะของต้นน้ำสามารถใช้คำสั่งต่อไปนี้ได้ (จำทุกสิ่งที่คุณทำงานได้หายไปหลังจากสิ่งเหล่านี้): 

git reset --hard upstream/main
git clean -fdx

การทำใหม่

สำหรับสาขาฟีเจอร์/หัวข้อคุณควรใช้ --rebase Flag เพื่อ git pull หรือหากคุณมักจะจัดการชั่วคราว "เพื่ออยู่ในสาขา GitHub Pull Request" 

git config branch.autosetuprebase local

(ดู man git-config สำหรับข้อมูลเพิ่มเติม)

การจัดการความขัดแย้งแบบผสาน

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

ต่อไปนี้เป็นคำสั่งบางอย่างที่สามารถใช้ได้ที่นั่น:

  • Ctrl + Alt + M - อัตโนมัติให้มากที่สุด
  • b - ข้ามไปสู่ความขัดแย้งแบบผสานครั้งต่อไป
  • s - เปลี่ยนลำดับของบรรทัดที่ขัดแย้งกัน
  • u - เลิกทำการรวม
  • left mouse button - ทำเครื่องหมายบล็อกเพื่อเป็นผู้ชนะ
  • middle mouse button - ทำเครื่องหมายบรรทัดเป็นผู้ชนะ
  • Ctrl + S - บันทึก
  • Ctrl + Q - เลิก

การอ้างอิง QUNIT

วิธีทดสอบ 

 expect ( numAssertions ) ;
stop ( ) ;
start ( ) ;

หมายเหตุ : การเพิ่มอาร์กิวเมนต์ในที่สุดของ Qunit เพื่อหยุด/เริ่มต้นจะถูกละเว้นในชุดทดสอบนี้เพื่อให้การเริ่มต้นและหยุดสามารถผ่านการโทรกลับโดยไม่ต้องกังวลเกี่ยวกับพารามิเตอร์ของพวกเขา

ทดสอบการทดสอบ 

 ok ( value , [ message ] ) ;
equal ( actual , expected , [ message ] ) ;
notEqual ( actual , expected , [ message ] ) ;
deepEqual ( actual , expected , [ message ] ) ;
notDeepEqual ( actual , expected , [ message ] ) ;
strictEqual ( actual , expected , [ message ] ) ;
notStrictEqual ( actual , expected , [ message ] ) ;
throws ( block , [ expected ] , [ message ] ) ;

Test Suite วิธีการใช้วิธีการอำนวยความสะดวก

ดูการทดสอบ/data/testinit.js

ส่งคืนอาร์เรย์ขององค์ประกอบด้วยรหัสที่กำหนด 

 q ( ... ) ;

ตัวอย่าง: 

 q ( "main" , "foo" , "bar" ) ;

=> [ div # main , span # foo , input # bar ]

ยืนยันว่าการเลือกตรงกับรหัสที่กำหนด 

 t ( testName , selector , [ "array" , "of" , "ids" ] ) ;

ตัวอย่าง: 

 t ( "Check for something" , "//[a]" , [ "foo" , "bar" ] ) ;

ยิงเหตุการณ์ DOM พื้นเมืองโดยไม่ต้องผ่าน jQuery 

 fireNative ( node , eventType ) ;

ตัวอย่าง: 

 fireNative ( jQuery ( "#elem" ) [ 0 ] , "click" ) ;

เพิ่มหมายเลขสุ่มลงใน URL เพื่อหยุดแคช 

 url ( "some/url" ) ;

ตัวอย่าง: 

 url ( "index.html" ) ;

=> "data/index.html?10538358428943"


url ( "mock.php?foo=bar" ) ;

=> "data/mock.php?foo=bar&10538358345554"

เรียกใช้การทดสอบใน iframe

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

 testIframe ( testName , fileName ,
  function testCallback (
      assert , jQuery , window , document ,
	  [ additional args ] ) {
	...
  } ) ;

สิ่งนี้จะโหลดหน้าหนึ่งโดยสร้าง URL ด้วยชื่อไฟล์ "./data/" + fileName หน้า iframed กำหนดว่าการโทรกลับเกิดขึ้นในการทดสอบโดยรวมถึงสคริปต์ "/test/data/iframetest.js" และการเรียก startIframeTest( [ additional args ] ) เมื่อเหมาะสม บ่อยครั้งที่สิ่งนี้จะเป็นหลังจากเอกสารทั้งพร้อมหรือ window.onload ไฟ

testCallback ได้รับวัตถุ QUNIT assert ที่สร้างขึ้นโดย testIframe สำหรับการทดสอบนี้ตามด้วย jQuery , window และ document ทั่วโลกจาก iFRAME หากรหัส iframe ผ่านอาร์กิวเมนต์ใด ๆ ไปยัง startIframeTest พวกเขาจะทำตามอาร์กิวเมนต์ document

คำถาม?

หากคุณมีคำถามใด ๆ โปรดอย่าลังเลที่จะถามเกี่ยวกับการพัฒนา JQuery Core Forum หรือใน #JQUERY บน Libera

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด