jQuery என்பது Javascript-ஐ மையமாக வைத்து உருவாக்கப்பட்ட ஒரு framework ஆகும். வரிவரியாக நிரல்களை எழுதி Javascript செய்யும் ஒருசில வேலைகளை jQuery- ஆனது சுலபமாகச் செய்துவிடும். அதாவது ஒரு வேலையை செய்வதற்கு பக்கம் பக்கமாக javascript-ல் நிரல்கள் தேவைப்படின், அவை அனைத்தும் jQuery-ன் ஒரு method-க்குள் அடங்கிவிடும். எனவே அந்த method-ஐ மட்டும் அழைத்து இயக்கினால் போதுமானது. சுருங்க நிரல் அடித்து விரிவான வேலைகளை செய்து முடிக்கும் சிறப்பினை jQuery பெறுகிறது. இது வலைத்தளப் பக்கங்களின் html மொழியுடன் தொடர்புகொண்டு அதன்மீது methods-ஐ இயக்குவதன் மூலம் பயனர்கள் விரும்பும் மாற்றங்களை நிகழ்த்துகிறது. இதுவே jQuery போன்ற frameworks-ன் சிறப்பியல்பு ஆகும்.
SQL query-ஐப் பயன்படுத்தி எப்படி நம்மால் நமக்கு வேண்டிய தகவல்களை database-ல் இருந்து பெற்றுக்கொள்ள முடியுமோ, அவ்வாறே jQuery-யைப் பயன்படுத்தி, நமக்கு வேண்டிய html tags-ஐ வலைத்தளப் பக்கங்களிலிருந்து நம்மால் பெற்றுக்கொள்ள முடியும். எனவேதான் இதற்கு jQuery எனப் பெயர்வந்தது. அவ்வாறு எடுக்கப்பட்ட tags-ஐ நமக்கு விரும்பிய விதத்தில் மாற்றவோ இயக்கவோ செய்யலாம்.
எடுத்துக்காட்டுக்கு ஒரு பக்கத்தின் <p> tags-க்குள் வரையறுக்கப்பட்ட வரிகளை மட்டும் நீல நிற எழுத்துக்களில் மாற்ற விரும்பினால் அதற்கான நிரல்கள் பின்வருமாறு அமையும்.
சாதாரண வெளிப்பாடு:
Getting an identity is important
jQuery ஏற்படுத்திய மாற்றம்:
நிரலுக்கான விளக்கம்:
jQuery-யானது எப்போதும் <head>க்குள் உள்ள <script> tag-க்குள் எழுதப்பட்டிருக்கும். இதன் அம்சங்களை நமது program-ல் பயன்படுத்தத் துவங்குவதற்கு முன்னர், jQuery CDN-ஐ இந்த <script> tag மூலம் முதலில் இணைக்க வேண்டும். Google, Microsoft போன்றவை இத்தகைய CDNs (Content Delivery Network )-ஐ வழங்குகின்றன. இங்கு பயன்படுத்தியுள்ள ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js என்பது google-வழங்குகின்ற ஒன்றாகும்.
மேற்கண்ட எடுத்துக்காட்டில் <p> tags- க்குள் Getting an identity is important எனும் வரி கொடுக்கப்பட்டுள்ளது. jQuery(“p”) என்பது <p> tags- க்குள் வரையறுக்கப்பட்டுள்ளவற்றை எடுத்து x எனும் variable-ல் சேமித்து வைத்துக்கொள்கிறது. பின்னர் css() எனும் method மூலம் என்ன செய்ய வேண்டும் என்பது வலியுறுத்தப்படுகிறது. அதாவது x-ல் சேமிக்கப் பட்டுள்ளவற்றை நீல நிறத்தில் மாற்றுவதற்கு x.css(“color”,”blue”) என்று கொடுக்கப்பட்டுள்ளது. இங்கு நாம் நிகழ்த்த விரும்பும் மாற்றம் arguments-ஆக வழங்கப்பட்டுள்ளது.
நான் இவை அனைத்தையும் ஒரு function() {—} -க்குள் எழுதியுள்ளேன். பின்னர் Desired Changes எனும் பொத்தானை சொடுக்கும்போது இந்த function இயக்கப்படும் வகையில் அதனை அமைத்துள்ளேன். அதாவது jQuery(“button”).click()-க்குள் இந்த function-ஐ வைத்துள்ளேன். ஏனெனில் அப்போதுதான் உங்களால் சாதாரணமாக எப்படி இருந்தது, jQuery-என்ன மாற்றம் செய்தது எனும் வித்தியாசத்தை புரிந்து கொள்ள முடியும். வலைத்தளப் பக்கமானது முழுவதுமாக load செய்யப்பட்ட பின்னர் இவையெல்லாம் செயல்படத் துவங்கும் வகையில், இவை அனைத்தும் jQuery(document).ready()-க்குள் கொடுக்கப்பட்டுள்ளதை கவனிக்கவும். ஏனெனில் jQuery ஆனது முழுக்க முழுக்க html tags-ஐ அடிப்படையாகக் கொண்டு இயங்குவதால், jQuery செயல்படத் துவங்குவதற்கு முன்னர், இந்த html பக்கங்களானது ஒழுங்கான முறையான வடிவமைப்புகளுடன் load செய்யப்படுவது அவசியம். எனவேதான் இவை அனைத்தும் document.ready()-க்குள் கொடுக்கப்பட்டுள்ளன. அவ்வளவுதான்! இவையே அடிப்படையான விஷயங்கள்.
மேலும் jQuery() என்பது $ எனும் குறியீட்டின் மூலமும் குறிக்கப்படும். அதாவது jQuery(“p”) என்பதை $(“p”) என்றும் குறிப்பிடலாம். அவ்வாறே jQuery(“p”) மூலம் பெறப்படும் tags-ஐ ஒரு variable-ல் சேமித்து, பின்னர் அதன்மீது .css() – ஐப் பயன்படுத்துவதற்குப் பதிலாக $(“p”).css (“color”,”blue”) என்றும் குறிப்பிடலாம். இனிவரும் எடுத்துக்காட்டுகளில் இதுபோன்ற அமைப்புமுறைகளே பயன்படுத்தப்பட்டிருக்கும்.