jQuery டுடோரியல் - தொடங்குதல்: அடிப்படைகள் & தேர்வர்கள்

jQuery டுடோரியல் - தொடங்குதல்: அடிப்படைகள் & தேர்வர்கள்

கடந்த வாரம், எந்த நவீன வலை டெவலப்பருக்கும் jQuery எவ்வளவு முக்கியமானது மற்றும் அது ஏன் அருமை என்பதைப் பற்றி பேசினேன். இந்த வாரம், சில குறியீடுகளுடன் நம் கைகளை அழுக்கடையச் செய்து, எங்கள் திட்டங்களில் jQuery ஐ எவ்வாறு பயன்படுத்துவது என்பதை கற்றுக்கொள்ள வேண்டிய நேரம் இது என்று நான் நினைக்கிறேன்.





நான் இதை இப்போது சொல்கிறேன் - jQuery ஐப் பயன்படுத்த நீங்கள் ஜாவாஸ்கிரிப்ட் கற்கத் தேவையில்லை. JQuery யை ஜாவாஸ்கிரிப்ட்டின் பரிணாமம் என்று நீங்கள் நினைத்தால் அது சிறந்தது - அதைச் செய்வதற்கான ஒரு சிறந்த வழி - வெறுமனே செயல்பாட்டைச் சேர்க்கும் ஒரு நூலகத்தை விட. உங்களுக்குத் தேவையான எந்த ஜாவாஸ்கிரிப்டும் வழியில் எடுக்கப்படும். இருப்பினும், ஒரு வலை டெவலப்பராக உங்களுக்கு HTML மற்றும் CSS பற்றிய நல்ல அறிவு உள்ளது என்று கருதப்படுகிறது (மற்றும் இல்லையென்றால் இங்கே இலவச xHTML வழிகாட்டி உள்ளது!).





ஆவண பொருள் மாதிரி

jQuery என்பது பயணத்தின் மற்றும் கையாளுதல் பற்றியது தீர்ப்பு - தி டி ஆவணம் அல்லது பொருள் எம் ஓடெல் DOM என்பது அனைத்து HTML குறியீடுகளையும் படித்த பிறகு உலாவிகளால் கட்டப்பட்ட பக்கத்தின் படிநிலை மர பிரதிநிதித்துவம் ஆகும். JQuery இல், நாம் போன்ற சொற்களைப் பயன்படுத்துவோம் பெற்றோர் , குழந்தைகள் , மற்றும் உடன்பிறப்புகள் அடிக்கடி, எனவே DOM உடன் இது என்ன அர்த்தம் என்று உங்களுக்கு ஒரு யோசனை இருக்க வேண்டும்.





இந்த எளிய வரைபடம்w3 பள்ளிகள்கருத்துக்களை நன்றாக விளக்குகிறது. உறுப்பின் பெற்றோர் இருப்பதை நீங்கள் பார்க்க முடியும் உறுப்பு உடனடியாக உள்ளது

உடன்பிறப்பு.

தொடங்குதல்: jQuery சேர்த்தல்

சுருக்கப்பட்ட போது jQuery இன் சமீபத்திய பதிப்பு 91KB ஆகும், எனவே இது ஒரு சிறிய புகைப்படம் அல்லது ஸ்கிரீன்ஷாட்டின் அதே பக்க எடையைச் சேர்க்கிறது. உங்கள் திட்டத்தில் jQuery ஐச் சேர்ப்பதற்கான மிகச் சுலபமான வழி, மிகச் சமீபத்திய ஹோஸ்ட் செய்யப்பட்ட பதிப்பிற்கான குறிப்பை உங்கள் தள தலைப்புப் பிரிவில் ஒட்டுவது:



இருப்பினும், நீங்கள் வேர்ட்பிரஸ் இயக்குகிறீர்கள் என்றால், இது ஏற்கனவே jQuery நூலகத்தின் சொந்த நகலைக் கொண்டிருப்பதால் இது சிக்கல்களை ஏற்படுத்தலாம். செருகுநிரல்கள் இதை ஏற்றுமாறு கோரலாம், மேலும் எத்தனை செருகுநிரல்கள் கேட்டாலும் வேர்ட்பிரஸ் புத்திசாலித்தனமாக jQuery ஐ ஒரு முறை மட்டுமே ஏற்றும்.

உங்கள் வரியில் பின்வரும் வரியைச் சேர்த்தால் செயல்பாடுகள். php தீம் கோப்பு, அதைச் சேர்க்க மற்றொரு கோரிக்கையைச் சேர்ப்பீர்கள். உங்கள் தீம் செயலில் இருந்தால் அதை எப்போதும் ஏற்றுவதை வேர்ட்பிரஸ் அறியும்.







துவக்கக்கூடிய விண்டோஸ் 7 டிவிடியை எப்படி உருவாக்குவது
wp_enqueue_script('jquery');

மனதில் கொள்ள வேண்டிய இரண்டாவது விஷயம், நிலையான முறையைப் பயன்படுத்தி jQuery சேர்க்கப்படும் போது, ​​அது இவ்வாறு ஏற்றப்படும் $ . JQuery யில் நீங்கள் எதைச் செய்தாலும் அதற்கு முன்னதாக இந்த $, அதாவது:

$.ajax

அல்லது





$('#header')

இருப்பினும், வேர்ட்பிரஸ் மூலம் jQuery ஏற்றப்படும்போது, ​​எல்லாம் $ க்கு பதிலாக jQuery மாறி பயன்படுத்தி செய்யப்படுகிறது, எனவே உதாரணமாக:

jQuery('#header')

உங்கள் சொந்த குறியீட்டை எழுதும் போது இது ஒரு பெரிய பிரச்சனையாக இல்லாவிட்டாலும், இணையத்தில் நீங்கள் காணும் jQuery இன் துணுக்குகளை வெட்டி ஒட்டுவது jQuery க்கு பதிலாக மொழிபெயர்க்கப்பட வேண்டும் என்று அர்த்தம். $ - அவ்வளவுதான்.

இதைச் சுற்றியுள்ள ஒரு வழி, $ ஸ்டைல் ​​குறியீட்டை போர்த்துவது:

(function($) {
// paste $ code in here
})(jQuery);

இது எடுக்கும் jQuery மாறி மற்றும் அதை ஒரு அநாமதேய செயல்பாட்டிற்கு அனுப்புகிறது $ . அடுத்த முறை அநாமதேய செயல்பாடுகளை நான் விளக்குகிறேன் - இப்போதைக்கு, jQuery குறியீட்டின் ஒரு பிட் அடிப்படைக் கட்டமைப்பைக் கற்றுக்கொள்வோம்.

உங்கள் குறியீட்டை ஒரு HTML அல்லது PHP பக்கத்தில் சேர்க்க, குறிச்சொற்களில் உள்ள அனைத்தையும் இணைக்கவும்:


// jQuery code codes here

$ ('தேர்வாளர்')முறை();

அது தான், மேலே உள்ள தலைப்பில். DOM கையாளுவதற்கு jQuery குறியீட்டின் ஒற்றை துண்டுக்கான அடிப்படை அமைப்பு அது. எளிதானது, இல்லையா?

திதேர்வாளர்இந்த விதியுடன் பொருந்தக்கூடிய விஷயங்களைக் கண்டுபிடிக்க jQuery க்கு சொல்கிறது, மற்றும் CSS தேர்வாளர்களைப் போன்றது (பின்னர் இன்னும் சில மேலே). எனவே, CSS இல் உள்ளதைப் போலவே நீங்கள் அனைத்து இணைப்புகளையும் பாணியாக்குவீர்கள்

a { }

அதே போல் jQuery இல் செய்யப்படும்

$('a')

இதை எந்த HTML கூறுகளுக்கும் செய்யலாம் - div, h1, span - எதுவாக இருந்தாலும். நீங்கள் CSS வகுப்புகள் மற்றும் ஐடிகளை மேலும் குறிப்பிட்டதாகப் பயன்படுத்தலாம்.

எடுத்துக்காட்டாக, 'findme' வகுப்பிற்கான அனைத்து இணைப்புகளையும் கண்டுபிடிக்க, நீங்கள் இதைப் பயன்படுத்தலாம்:

$('a.findme')

ஒவ்வொரு முறையும் உறுப்பு வகையை நீங்கள் குறிப்பிட தேவையில்லை - ஆனால் நீங்கள் செய்தால், அது விதியை இன்னும் குறிப்பிட்டதாக ஆக்குகிறது. நீங்கள் தான் சொல்லியிருக்கலாம்

$('.findme')

இது அனைத்தும் வகுப்போடு பொருந்தும் கண்டுபிடி , அது இணைப்பாக இருந்தாலும் இல்லாவிட்டாலும்.

பெயரிடப்பட்ட அடையாள உறுப்பைப் பயன்படுத்த, இதைப் பயன்படுத்தவும் # அதற்கு பதிலாக கையொப்பமிடுங்கள். இங்கே உள்ள முக்கிய வேறுபாடு என்னவென்றால், ஒரு ஐடி தேர்வாளர் ஒரு பொருளை மட்டுமே தேர்ந்தெடுப்பார், அதே நேரத்தில் ஒரு வகுப்பு தேர்வாளர் ஒன்றுக்கு மேற்பட்டவற்றைக் காணலாம்.

டெஸ்க்டாப் குறுக்குவழிகள் விண்டோஸ் 10 இல் வேலை செய்யவில்லை
$('#something')

அடிப்படையில் நீங்கள் CSS இல் செய்ய முடிந்தால் jQuery அதையும் செய்யும். உண்மையில், நீங்கள் சில சிக்கலான CSS3 பாணி போலி தேர்வாளர்களையும் செய்யலாம்: முதலில்

$('body p:first')

இது பக்கத்தின் பத்தியைப் பிடிக்கும். சில பண்புகளைக் கொண்ட உறுப்புகளையும் நீங்கள் காணலாம். இந்த உதாரணத்தைக் கவனியுங்கள்; பக்கத்தில் உள்ள அனைத்து இணைப்புகளையும் நாங்கள் கண்டுபிடிக்க விரும்புகிறோம் உபயோகபடுத்து மற்றும் சில வழிகளில் அவற்றை முன்னிலைப்படுத்தவும். நாம் அவர்களை எப்படி கண்டுபிடிக்க முடியும் என்பது இங்கே:

$('a[href*='makeuseof']')

அது நன்றாக இல்லையா? சரி, நான் நினைக்கிறேன்.

உங்கள் அடுத்த போர்ட் போர்ட் இருக்க வேண்டும் தேர்வர்களுக்கான jQuery API ஆவணங்கள் . இது பல்வேறு வகையான தேர்வாளர்களின் பெரிய பட்டியலாகும், மேலும் நீங்கள் அவற்றைக் கற்றுக்கொள்வீர்கள் என்று யாரும் எதிர்பார்க்க மாட்டார்கள்.

சமன்பாட்டின் அடுத்த பகுதிமுறைநீங்கள் எல்லாவற்றையும் கண்டுபிடித்தவுடன் என்ன செய்வது - ஆனால் அடுத்த பாடத்திற்கு நாங்கள் அதை விட்டுவிடுவோம். நீங்கள் இப்போது பல்வேறு தேர்வாளர்களை முயற்சி செய்யத் தொடங்க விரும்பினால், பின்வரும் css முறையைக் கடைப்பிடிக்க பரிந்துரைக்கிறேன். இது இரண்டு அளவுருக்கள் எடுக்கும் - ஒரு CSS சொத்தின் பெயர் , மற்றும் ஒரு புதிய மதிப்பு அந்த சொத்துக்கு ஒதுக்க. எனவே, அனைத்து இணைப்புகளுக்கும் சிவப்பு பின்னணி வண்ணம் கொடுக்க, நீங்கள்:

$('a').css('background-color','red');

போதுமான எளிமை! இது எந்த நடைமுறை பயன்பாடும் இல்லாவிட்டாலும், உங்கள் தேர்வாளர்களைப் பயன்படுத்தி அமைந்துள்ள எந்த உறுப்புகளையும் இது எளிதாகப் பார்க்க அனுமதிக்கும். இப்போது மேலே சென்று தேர்ந்தெடுக்கவும் - DOM உங்களுக்கு காத்திருக்கிறது.

இந்த பயிற்சி உங்களுக்கு பயனுள்ளதாக இருந்தது என்று நம்புகிறேன்; என்னால் முடிந்தவரை எளிமையாக புரிந்து கொள்ள முயற்சித்தேன். உங்களிடம் ஏதேனும் கேள்விகள் கேட்கவும் அல்லது பின்னூட்டம் இடுங்கள், ஆனால் நான் நிச்சயமாக உயரடுக்கு jQuery நிஞ்ஜா இல்லை என்பதை அறிந்து கொள்ளுங்கள்

பகிர் பகிர் ட்வீட் மின்னஞ்சல் உங்கள் மெய்நிகர் பாக்ஸ் லினக்ஸ் இயந்திரங்களை சூப்பர்சார்ஜ் செய்ய 5 குறிப்புகள்

மெய்நிகர் இயந்திரங்களால் வழங்கப்படும் மோசமான செயல்திறனால் சோர்வாக இருக்கிறதா? உங்கள் VirtualBox செயல்திறனை அதிகரிக்க நீங்கள் என்ன செய்ய வேண்டும் என்பது இங்கே.

அடுத்து படிக்கவும்
தொடர்புடைய தலைப்புகள்
  • வலை கலாச்சாரம்
  • இணைய மேம்பாடு
  • ஜாவாஸ்கிரிப்ட்
  • நிரலாக்க
  • jQuery
எழுத்தாளர் பற்றி ஜேம்ஸ் புரூஸ்(707 கட்டுரைகள் வெளியிடப்பட்டன)

ஜேம்ஸ் செயற்கை நுண்ணறிவில் பிஎஸ்சி பெற்றுள்ளார் மற்றும் அவருக்கு CompTIA A+ மற்றும் நெட்வொர்க்+ சான்றிதழ் உள்ளது. அவர் ஹார்ட்வேர் ரிவியூஸ் எடிட்டராக பிஸியாக இல்லாதபோது, ​​அவர் லெகோ, விஆர் மற்றும் போர்டு கேம்களை ரசிக்கிறார். MakeUseOf இல் சேருவதற்கு முன்பு, அவர் ஒரு லைட்டிங் டெக்னீஷியன், ஆங்கில ஆசிரியர் மற்றும் தரவு மைய பொறியாளர்.

ஜேம்ஸ் புரூஸின் மேலும்

எங்கள் செய்திமடலுக்கு குழுசேரவும்

தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

குழுசேர இங்கே சொடுக்கவும்