ஜாவாஸ்கிரிப்ட் மூலம் வகுப்புகளைப் புதுப்பித்தல்
ஜாவாஸ்கிரிப்ட் HTML உறுப்புகளுடன் மாறும் வகையில் தொடர்பு கொள்ளவும் மற்றும் கையாளவும் சக்திவாய்ந்த கருவிகளை வழங்குகிறது. onclick போன்ற நிகழ்வுகளுக்கு பதிலளிக்கும் வகையில் HTML உறுப்புகளின் வகுப்பை மாற்றுவது ஒரு பொதுவான பணியாகும்.
உங்களின் வலைப்பக்கங்களில் டைனமிக் ஸ்டைலிங் மற்றும் நடத்தை மாற்றங்களை அனுமதிக்கும் வகையில், உறுப்பின் வகுப்பை மாற்றுவதற்கு JavaScript ஐ எவ்வாறு பயன்படுத்துவது என்பதை இந்த வழிகாட்டி விளக்கும். நீங்கள் ஒரு பட்டன் கிளிக் அல்லது வேறு நிகழ்விற்குப் பதிலளித்தாலும், இந்த நுட்பங்கள் உங்கள் இணைய மேம்பாட்டுத் திறனை மேம்படுத்தும்.
| கட்டளை | விளக்கம் |
|---|---|
| className | ஒரு உறுப்பின் வர்க்கப் பண்புக்கூறை அமைக்கிறது அல்லது திருப்பியளிக்கிறது. தனிமத்தின் வகுப்பை மாற்றப் பயன்படுகிறது. |
| getElementById | குறிப்பிட்ட மதிப்புடன் ஐடி பண்புக்கூறு கொண்ட உறுப்பை வழங்கும். பொத்தான் உறுப்பைத் தேர்ந்தெடுக்கப் பயன்படுகிறது. |
| onclick | உறுப்பு மீது கிளிக் நிகழ்வு நிகழும்போது செயல்படுத்த வேண்டிய செயல்பாட்டை அமைக்கிறது. |
| removeClass | jQuery இல் தேர்ந்தெடுக்கப்பட்ட உறுப்புகளிலிருந்து ஒன்று அல்லது அதற்கு மேற்பட்ட வகுப்புப் பெயர்களை நீக்குகிறது. |
| addClass | jQuery இல் தேர்ந்தெடுக்கப்பட்ட உறுப்புகளுக்கு ஒன்று அல்லது அதற்கு மேற்பட்ட வகுப்புப் பெயர்களைச் சேர்க்கிறது. |
| $ | jQueryக்கான மாற்றுப்பெயர், உறுப்புகளைத் தேர்ந்தெடுத்து அவற்றில் செயல்களைச் செய்யப் பயன்படுகிறது. |
ஜாவாஸ்கிரிப்ட் வகுப்பு கையாளுதலைப் புரிந்துகொள்வது
வழங்கப்பட்ட ஸ்கிரிப்ட்கள், ஒரு கிளிக் நிகழ்வுக்கு பதிலளிக்கும் வகையில் JavaScript மற்றும் jQuery ஐப் பயன்படுத்தி HTML உறுப்புகளின் வகுப்பை எவ்வாறு மாற்றுவது என்பதை விளக்குகிறது. முதல் ஸ்கிரிப்ட்டில், இந்த செயல்பாட்டை அடைய எளிய ஜாவாஸ்கிரிப்ட் பயன்படுத்தப்படுகிறது. தி getElementById 'myButton' ஐடியுடன் பொத்தான் உறுப்பைத் தேர்ந்தெடுக்கும் முறை பயன்படுத்தப்படுகிறது. தி onclick நிகழ்வானது இந்த உறுப்புக்கு ஒதுக்கப்படும், பொத்தானைக் கிளிக் செய்யும் போது செயல்படுத்தப்படும் செயல்பாட்டைக் குறிப்பிடுகிறது. இந்த செயல்பாட்டின் உள்ளே, பொத்தான்கள் className சொத்து 'மாற்றம்' என அமைக்கப்பட்டு, அதன் வகுப்பையும் அதன் பின்னர் CSSல் வரையறுக்கப்பட்ட பாணியையும் மாற்றுகிறது. இந்த ஸ்கிரிப்ட் DOM கையாளுதலுக்கு எளிய ஜாவாஸ்கிரிப்டைப் பயன்படுத்துவதன் எளிமை மற்றும் நேரடித்தன்மையை திறம்பட காட்டுகிறது.
இரண்டாவது ஸ்கிரிப்ட் jQuery ஐப் பயன்படுத்தி அதே செயல்பாட்டை விளக்குகிறது, இது ஒரு பிரபலமான ஜாவாஸ்கிரிப்ட் நூலகமாகும், இது HTML ஆவணம் டிராவர்சல் மற்றும் கையாளுதலை எளிதாக்குகிறது. இங்கே, jQuery மாற்றுப்பெயர் $ பொத்தான் உறுப்பைத் தேர்ந்தெடுக்கப் பயன்படுகிறது. தி click கிளிக் நிகழ்விற்கான நிகழ்வு கையாளுதலை அமைப்பதற்கு முறை பயன்படுத்தப்படுகிறது. இந்த ஹேண்ட்லருக்குள், பொத்தானின் வகுப்பு jQuery ஐப் பயன்படுத்தி மாற்றியமைக்கப்படுகிறது removeClass மற்றும் addClass முறைகள். இந்த முறைகள் உறுப்பின் வகுப்புகளைக் கையாள ஒரு வசதியான வழியை வழங்குகின்றன, எளிய ஜாவாஸ்கிரிப்ட்டுடன் ஒப்பிடும்போது மிகவும் படிக்கக்கூடிய மற்றும் சுருக்கமான அணுகுமுறையை வழங்குகிறது. இரண்டு ஸ்கிரிப்ட்களும் பயனர் தொடர்புகளின் அடிப்படையில் ஒரு தனிமத்தின் வகுப்பை மாறும் வகையில் மாற்றும் ஒரே இலக்கை வெவ்வேறு கருவிகள் எவ்வாறு அடைய முடியும் என்பதை நிரூபிப்பதை நோக்கமாகக் கொண்டுள்ளன.
ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி கிளிக் செய்வதில் ஒரு உறுப்பு வகுப்பை மாற்றுதல்
ஜாவாஸ்கிரிப்ட் மற்றும் HTML
// HTML<!DOCTYPE html><html><head><title>Change Class Example</title><style>.original { color: blue; }.changed { color: red; }</style></head><body><button id="myButton" class="original">Click me</button><script>document.getElementById('myButton').onclick = function() {this.className = 'changed';};</script></body></html>
jQuery ஐப் பயன்படுத்தி HTML உறுப்புகளின் வகுப்பைப் புதுப்பித்தல்
jQuery உடன் ஜாவாஸ்கிரிப்ட்
// HTML<!DOCTYPE html><html><head><title>Change Class with jQuery</title><style>.original { color: blue; }.changed { color: red; }</style></head><body><button id="myButton" class="original">Click me</button><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$('#myButton').click(function() {$(this).removeClass('original').addClass('changed');});</script></body></html>
ஜாவாஸ்கிரிப்டில் வகுப்பு கையாளுதலுக்கான மேம்பட்ட நுட்பங்கள்
நிகழ்வுகளுக்கு பதிலளிக்கும் வகையில் அடிப்படை வகுப்பு மாற்றங்களுக்கு அப்பால், ஜாவாஸ்கிரிப்ட் ஒரு உறுப்பின் வகுப்பு பட்டியலை கையாளுவதற்கு மிகவும் மேம்பட்ட நுட்பங்களை வழங்குகிறது. அத்தகைய ஒரு முறை உள்ளது classList சொத்து, இது வகுப்புகளுடன் பணிபுரிய மிகவும் நெகிழ்வான மற்றும் சக்திவாய்ந்த வழியை வழங்குகிறது. தி classList உறுப்பின் வர்க்க பண்புக்கூறுகளின் நேரடி DOMTokenList தொகுப்பை சொத்து வழங்கும். பயன்படுத்தி classList, உறுப்பில் பயன்படுத்தக்கூடிய பிற வகுப்புகளைப் பாதிக்காமல் வகுப்புகளைச் சேர்க்கலாம், அகற்றலாம், நிலைமாற்றலாம் மற்றும் சரிபார்க்கலாம்.
உதாரணமாக, தி add ஒரு உறுப்புக்கு ஒன்று அல்லது அதற்கு மேற்பட்ட வகுப்புகளைச் சேர்க்க முறை பயன்படுத்தப்படலாம் remove முறை ஒன்று அல்லது அதற்கு மேற்பட்ட குறிப்பிட்ட வகுப்புகளை நீக்க முடியும். தி toggle இந்த முறை மிகவும் பயனுள்ளதாக இருக்கும், ஏனெனில் அது வர்க்கம் இல்லை என்றால் அதைச் சேர்க்கிறது மற்றும் அது இருந்தால் அதை நீக்குகிறது, இது டார்க் மோட் டோக்கிள்களை செயல்படுத்துவது போன்ற பணிகளுக்கு ஏற்றதாக அமைகிறது. கூடுதலாக, தி contains உறுப்பு ஒரு குறிப்பிட்ட வகுப்பைக் கொண்டிருக்கிறதா என்பதை முறை சரிபார்க்கிறது, இது ஒரு உறுப்பின் தற்போதைய நிலையின் அடிப்படையில் பாணிகள் அல்லது நடத்தைகளை நிபந்தனையுடன் பயன்படுத்துவதற்கு பயனுள்ளதாக இருக்கும்.
JavaScript வகுப்பு கையாளுதல் பற்றி அடிக்கடி கேட்கப்படும் கேள்விகள்
- ஒரு உறுப்புக்கு பல வகுப்புகளைச் சேர்ப்பது எப்படி?
- பயன்படுத்த classList.add பல வாதங்களைக் கொண்ட முறை: element.classList.add('class1', 'class2').
- ஒரு உறுப்பிலிருந்து அனைத்து வகுப்புகளையும் அகற்ற முடியுமா?
- ஆம், நீங்கள் பயன்படுத்தலாம் className சொத்து மற்றும் அதை வெற்று சரமாக அமைக்கவும்: element.className = ''.
- என்ன வித்தியாசம் className மற்றும் classList?
- className முழு வகுப்பு பண்புக்கூறையும் அமைக்கிறது அல்லது பெறுகிறது, அதேசமயம் classList வகுப்புகளை மேலும் சிறுமணி கையாளுதலை அனுமதிக்கிறது.
- ஒரு உறுப்புக்கு ஒரு குறிப்பிட்ட வகுப்பு இருக்கிறதா என்பதை நான் எவ்வாறு சரிபார்க்க வேண்டும்?
- பயன்படுத்த classList.contains முறை: element.classList.contains('classname').
- ஒரு உறுப்பில் வகுப்பை எப்படி மாற்றுவது?
- பயன்படுத்த classList.toggle முறை: element.classList.toggle('classname').
- வகுப்புகளைக் கையாள jQuery ஐப் பயன்படுத்தலாமா?
- ஆம், jQuery போன்ற முறைகளை வழங்குகிறது addClass, removeClass, மற்றும் toggleClass.
- நேரடி DOMTokenList என்றால் என்ன?
- ஏ DOMTokenList உறுப்பின் வர்க்கப் பண்பு மாறும்போது தானாகவே புதுப்பிக்கப்படும் நேரடித் தொகுப்பு.
- இருக்கிறது classList எல்லா உலாவிகளிலும் ஆதரிக்கப்படுகிறதா?
- classList அனைத்து நவீன உலாவிகளிலும் ஆதரிக்கப்படுகிறது, ஆனால் Internet Explorer இன் பழைய பதிப்புகள் அதை முழுமையாக ஆதரிக்காது.
- நிபந்தனைகளின் அடிப்படையில் நான் எப்படி மாறும் வகையில் வகுப்புகளைச் சேர்ப்பது?
- நீங்கள் பயன்படுத்தலாம் if இணைந்து அறிக்கைகள் classList.add அல்லது classList.remove வகுப்புகளுக்கு நிபந்தனையுடன் விண்ணப்பிக்க வேண்டும்.
டைனமிக் கிளாஸ் மாற்றங்களுக்கான முக்கிய நுட்பங்கள்
வழங்கப்பட்ட ஸ்கிரிப்ட்கள், ஒரு கிளிக் நிகழ்வுக்கு பதிலளிக்கும் வகையில் JavaScript மற்றும் jQuery ஐப் பயன்படுத்தி HTML உறுப்புகளின் வகுப்பை எவ்வாறு மாற்றுவது என்பதை விளக்குகிறது. முதல் ஸ்கிரிப்ட்டில், இந்த செயல்பாட்டை அடைய எளிய ஜாவாஸ்கிரிப்ட் பயன்படுத்தப்படுகிறது. தி getElementById 'myButton' ஐடியுடன் பொத்தான் உறுப்பைத் தேர்ந்தெடுக்கும் முறை பயன்படுத்தப்படுகிறது. தி onclick நிகழ்வானது இந்த உறுப்புக்கு ஒதுக்கப்படும், பொத்தானைக் கிளிக் செய்யும் போது செயல்படுத்தப்படும் செயல்பாட்டைக் குறிப்பிடுகிறது. இந்த செயல்பாட்டின் உள்ளே, பொத்தான்கள் className சொத்து 'மாற்றம்' என அமைக்கப்பட்டு, அதன் வகுப்பையும் அதன் பின்னர் CSSல் வரையறுக்கப்பட்ட பாணியையும் மாற்றுகிறது. இந்த ஸ்கிரிப்ட் DOM கையாளுதலுக்கு எளிய ஜாவாஸ்கிரிப்டைப் பயன்படுத்துவதன் எளிமை மற்றும் நேரடித்தன்மையை திறம்பட காட்டுகிறது.
இரண்டாவது ஸ்கிரிப்ட் jQuery ஐப் பயன்படுத்தி அதே செயல்பாட்டை விளக்குகிறது, இது ஒரு பிரபலமான ஜாவாஸ்கிரிப்ட் நூலகமாகும், இது HTML ஆவணம் டிராவர்சல் மற்றும் கையாளுதலை எளிதாக்குகிறது. இங்கே, jQuery மாற்றுப்பெயர் $ பொத்தான் உறுப்பைத் தேர்ந்தெடுக்கப் பயன்படுகிறது. தி click கிளிக் நிகழ்விற்கான நிகழ்வு கையாளுதலை அமைப்பதற்கு முறை பயன்படுத்தப்படுகிறது. இந்த ஹேண்ட்லருக்குள், பொத்தானின் வகுப்பு jQuery ஐப் பயன்படுத்தி மாற்றியமைக்கப்படுகிறது removeClass மற்றும் addClass முறைகள். இந்த முறைகள் உறுப்பின் வகுப்புகளைக் கையாள ஒரு வசதியான வழியை வழங்குகின்றன, எளிய ஜாவாஸ்கிரிப்ட்டுடன் ஒப்பிடும்போது மிகவும் படிக்கக்கூடிய மற்றும் சுருக்கமான அணுகுமுறையை வழங்குகிறது. இரண்டு ஸ்கிரிப்ட்களும் பயனர் தொடர்புகளின் அடிப்படையில் ஒரு தனிமத்தின் வகுப்பை மாறும் வகையில் மாற்றும் ஒரே இலக்கை வெவ்வேறு கருவிகள் எவ்வாறு அடைய முடியும் என்பதை நிரூபிப்பதை நோக்கமாகக் கொண்டுள்ளன.
முக்கிய புள்ளிகளை சுருக்கவும்
ஜாவாஸ்கிரிப்ட் அல்லது jQuery ஐப் பயன்படுத்தி HTML உறுப்பின் வகுப்பைக் கையாளுவது, ஒரு உறுப்பின் ஸ்டைலிங் மற்றும் நடத்தையை மாறும் வகையில் புதுப்பிக்க நேரடியான வழியை வழங்குகிறது. போன்ற முறைகளைப் புரிந்துகொண்டு பயன்படுத்துவதன் மூலம் className, classList, மற்றும் jQuery இன் வகுப்பு கையாளுதல் முறைகள், டெவலப்பர்கள் தங்கள் வலைப்பக்கங்களின் ஊடாடும் தன்மை மற்றும் பதிலளிக்கும் தன்மையை மேம்படுத்தலாம், இதனால் அவை பயனர்களுக்கு அதிக ஈடுபாட்டை ஏற்படுத்துகின்றன.