jQuery மூலம் வலைத்தளப் பக்கங்களில் உள்ளவற்றை மாற்றி அமைக்க முடியும். படங்கள், படிவங்கள், செய்திகள் போன்ற அனைத்து விதமான விஷயங்களையும் jQuery-மூலம் அணுகவோ மாற்றி அமைக்கவோ முடியும். இவை ஒவ்வொன்றும் விவரமாகக் கீழே கொடுக்கப்பட்டுள்ளன.
attr( ) மூலம் பண்புகளை மாற்றியமைத்தல்
jQuery மூலம் தேர்ந்தெடுக்கப்பட்ட ஒரு object-ஐ attr() எனும் பண்பின் மூலம் நாம் விரும்பிய வகையில் மாற்றி அமைக்க முடியும். கீழ்க்கண்ட எடுத்துக்காட்டில் “Modify Image” பொத்தானை சொடுக்கும்போது வேறொரு படம் திரையில் வெளிப்படுமாறும், “Modify sizing” -ஐ சொடுக்கும்போது அதன் நீள அகலம் மாறும் வகையிலும், “Remove sizing” –ஐ சொடுக்கும்போது அந்த மாற்றங்கள் நீங்கும் வகையிலும் நிரல்கள் கொடுக்கப்பட்டுள்ளன.
இங்கு 1 எனும் பெயர் கொண்ட “Modify Image” பொத்தானை சொடுக்கும்போது flower எனும் பெயர் கொண்ட <img> tag-ன் மூலமாக வேறு ஒரு படம் கொடுக்கப்பட்டுள்ளது. இதற்கு attr() function பயன்பட்டுள்ளது. எனவே Modify Image என்பதைச் சொடுக்கும்போது ஏற்கனவே உள்ள படம் மறைந்து நாம் கொடுத்துள்ள two.jpg எனும் படம் தென்படும்.
அவ்வாறே 2 எனும் பெயர் கொண்ட “Modify sizing” பொத்தானை சொடுக்கும்போது திரையில் உள்ள படத்தின் நீள அகலம் மாறுமாறு attr() மூலம் மீண்டும் மதிப்புகள் கொடுக்கப்பட்டுள்ளன.
removeAttr(“width height”) என்பது படத்தின் நீளம் மற்றும் அகலத்தில் செய்யப்பட்ட மாற்றங்களை நீக்கி அதனை பழைய நிலைக்குக் கொண்டுவரும். 3 எனும் பெயர் கொண்ட “Remove sizing” பொத்தானை சொடுக்கும்போது, இந்த மாற்றம் நிகழும் வகையில் நிரல் கொடுக்கப்பட்டுள்ளது.
சாதாரண வெளிப்பாடு:
Modify Image-ஐ சொடுக்கினால் ஏற்படும் மாற்றம்:
Modify sizing-ஐ சொடுக்கினால் ஏற்படும் மாற்றம்:
text( ) அல்லது html( ) மூலம் content-ஐ மாற்றியமைத்தல்
jQuery object- ன் மீது .text() என்று கொடுத்தால் அதன் text content-ம், .html() என்று கொடுத்தால் அதன் html content-ம் வெளிப்படும். அவ்வாறே .text(“ ******* ”)-க்குள் நாம் கொடுக்கும் விஷயத்தை அந்த jquery object-ன் மீது மாற்றி அமைக்கும். அதையே .html(“ ******* ”)-க்குள் கொடுத்தால், அது html மொழியின் அர்த்தங்களைப் புரிந்துகொண்டு அதன்படி மாற்றி அமைக்கும்.
கீழ்க்கண்ட எடுத்துக்காட்டில் <b>All the glitters are not gold </b> -famous proverb என்பது text( )-க்குள் கொடுக்கப்படும் போது அது அப்படியே திரையில் வெளிப்படுவதையும், அதையே html( )-க்குள் கொடுத்தால் <b> </b>- ன் அர்த்தத்தைப் புரிந்துகொண்டு கொடுக்கப்பட்ட வரியை பெரிய எழுத்துக்களில் வெளிப்படுத்துவதையும் காணலாம்.
சாதாரண வெளிப்பாடு:
Reading content – text & html -ஐ சொடுக்கினால் வெளிப்படுவது:
Modify Content – text() -ஐ சொடுக்கினால் மாறுவது:
Modify Content – html() -ஐ சொடுக்கினால் மாறுவது:
Offset() மூலம் content-ஐ இடம் மாற்றுதல்
Offset() எனும் method-ஆனது jQuery object-ஆல் குறிக்கப்படும் element வலைத்தளப் பக்கத்தில் சரியாக எந்த இடத்தில் உள்ளது என்பதை pixel வடிவில் வெளிப்படுத்தும். offset({****, ***})- க்குள் கொடுக்கப்படும் மதிப்புகளுக்கு ஏற்ப அந்த element-ஐ இடம் மாற்றியும் அமைக்கும்.
கீழ்க்கண்ட எடுத்துக்காட்டில் $(“#dv1”)- ஆல் குறிக்கப்படும் element இடது பக்கத்திலிருந்து எவ்வளவு தொலைவில் உள்ளது என்பதையும், மேற்புறத்திலிருந்து எவ்வளவு தொலைவில் உள்ளது என்பதையும் pixel வடிவில் வெளிப்படுத்தும். பின்னர் அந்த element-ஐ {“left”:50, “top”:100} என்பதற்கேற்ப இடம் மாற்றி அமைக்கும்.
சாதாரண வெளிப்பாடு:
Reading the current position-ஐ சொடுக்கினால் வெளிப்படுத்துவது:
Modifying the position-ஐ சொடுக்கினால் மாற்றுவது:
val() மூலம் படிவங்களை நிரப்புதல்
val() எனும் method-ஆனது விண்ணப்பப் படிவங்களில் பூர்த்தி செய்யப்பட்ட மதிப்புகளை வெளிப்படுத்த உதவுகிறது. அவ்வாறே val(“ “)-க்குள் உள்ள மதிப்புகளை விண்ணப்பப் படிவங்களின் மதிப்புகளாக படிவப் பெட்டிகளுக்குள் செலுத்தவும் செய்கிறது.
கீழ்க்கண்ட எடுத்துக்காட்டில் 1 எனும் பொத்தானை சொடுக்கும்போது படிவங்களில் நாம் பூர்த்தி செய்த மதிப்புகள் வெளிப்படுமாறும், 2 எனும் பொத்தானை சொடுக்கும்போது India, Green, male ஆகிய மதிப்புகள் படிவங்களின் மதிப்புகளாக மாற்றி அமைக்கப்படுமாறும் நிரல்கள் கொடுக்கப்பட்டுள்ளன.
சாதாரண வெளிப்பாடு:
பயணர்கள் கொடுக்கும் மதிப்புகள்
Reading the values-ஐ சொடுக்கினால் வெளிப்படுத்துவது:
இதைத் தொடர்ந்து அடுத்தடுத்த மதிப்புகள் வெளிப்படும்.
Modifying the values-ஐ சொடுக்கினால் மாற்றுவது:
data() மூலம் comments-ஆக ஒருசில வரிகளை இணைத்தல்
data(“ “)-க்குள் கொடுக்கப்படும் வரிகள் ஒரு popup பெட்டி மூலம் comment-ஆகத் தென்படும். கீழ்க்கண்ட எடுத்துக்காட்டில் p1 எனும் id-ஐக் கொண்ட paragraph மீது சொடுக்கும்போது comments வெளிப்படுமாறு நிரல்கள் கொடுக்கப்பட்டுள்ளன. இந்த comments-ஆனது மறைமுகமாக p1- வுடன் இணைந்திருக்கும். p1-ன் மீது சொடுக்கினால் மட்டுமே அது தென்படும். ‘Remove Comment’ -ன் மீது சொடுக்கும்போது p1- வுடன் மறைமுகமாக இணைந்திருக்கும் comments நீங்குமாறு நிரல்கள் எழுதப்பட்டுள்ளன.
சாதாரண வெளிப்பாடு:
Finally the girl எனத் துவங்கும் வரியின் மீது சொடுக்கினால் தென்படும் comment:
Remove comment பொத்தானை சொடுக்கியபின் Finally the girl எனத் துவங்கும் வரியின் மீது சொடுக்கினால் தென்படுவது:
வலைத்தளப் பக்கத்தின் content-ஐ மாற்றியமைத்தல்
வலைத்தளப் பக்கங்களில் உள்ள வரிகளை மேலும் கீழுமாக இடம் மாற்றம் செய்தல், புதிய வரிகளை இணைத்தல், ஏற்கனவே உள்ள வரிகளை நகலெடுத்து மீண்டும் இணைத்தல், ஒருசில வரிகளை நீக்குதல் போன்ற பல்வேறு வேலைகளை செய்வதற்கு உதவும் jQuery methods-ஐ இந்தப் பகுதியில் பார்க்கலாம்.
நிரலுக்கான விளக்கம்:
before() -ஆனது p2-எனும் id-ஐக் கொண்ட வரியை p1-க்கு முன்னால் அமைக்கிறது.
insertBefore() -ஆனது All the leaves are falling down எனும் புதிய வரியை p3-க்கு முன்னால் இணைக்கிறது. இந்தப் புதிய வரியானது $(“ “) -க்குள் சாதாரண html tag-ஐ கொடுப்பதன் மூலம் உருவாக்கப்படும்.
Clone() -ஆனது p3 id-ஐக் கொண்ட வரியை நகலெடுத்து உடனடியாக .attr() மூலம் அதன் id-ஐ மட்டும் மாற்றி விடுகிறது. ஏனெனில் ஒரே id-ல் இரண்டு elements இருப்பது பல குழப்பங்களை விளைவிக்கும். பின்னர் நகலெடுக்கப்பட்ட வரியை dv1-க்குப் பின்னால் appendTo() மூலம் இணைக்கிறது.
wrap() என்பது p4, p5 எனும் இரண்டையும் ஒன்றாக இணைக்கிறது.
replacewith() என்பது dv2-ஐ நீக்கிவிட்டு p5-ஐ அந்த இடத்தில் அமைக்கிறது. அவ்வாறு அமைக்கப்படும்போது p5-வுடன் சேர்ந்து p4-ம் இடம்பெறுவதை கவனிக்கவும். ஏனெனில் இதற்கு முந்தைய வரியில் p4,p5 இரண்டும் wrap செய்யப்பட்டதே இதற்குக் காரணம் ஆகும்.
remove() -ஆனது f1-எனும் id-ஐக் கொண்ட படிவத்தை நீக்குகிறது.
$.parseHTML(“ “) –ஆனது இதற்குள் கொடுக்கப்பட்டுள்ள html-மொழியினைப் புரிந்துகொண்டு அதற்கேற்ற வடிவில் வெளிப்படுத்தும்.$( )-க்குள் parseHTML() வழியே கொடுக்காமல் வெறுமென கொடுத்தோமானால் All the leaves எனும் வரி மட்டுமே வெளிப்படும். are falling down எனும் வரி விடுபட்டுவிடும். இவை அனைத்தும் desired changes-ஐ சொடுக்கினால் நடைபெறும்.
இதன் சாதாரண வெளிப்பாடு:
Desired Changes – ஐ சொடுக்கினால் மாறுவது:
