ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ತರಗತಿಗಳನ್ನು ನವೀಕರಿಸಲಾಗುತ್ತಿದೆ
HTML ಅಂಶಗಳೊಂದಿಗೆ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಸಂವಹನ ಮಾಡಲು ಮತ್ತು ಕುಶಲತೆಯಿಂದ JavaScript ಪ್ರಬಲ ಸಾಧನಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಆನ್‌ಕ್ಲಿಕ್‌ನಂತಹ ಈವೆಂಟ್‌ಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ HTML ಅಂಶದ ವರ್ಗವನ್ನು ಬದಲಾಯಿಸುವುದು ಒಂದು ಸಾಮಾನ್ಯ ಕಾರ್ಯವಾಗಿದೆ.
ಈ ಮಾರ್ಗದರ್ಶಿಯು ನಿಮ್ಮ ವೆಬ್ ಪುಟಗಳಲ್ಲಿ ಡೈನಾಮಿಕ್ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ವರ್ತನೆಯ ಬದಲಾವಣೆಗಳನ್ನು ಅನುಮತಿಸುವ ಮೂಲಕ ಅಂಶದ ವರ್ಗವನ್ನು ಬದಲಾಯಿಸಲು JavaScript ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ. ನೀವು ಬಟನ್ ಕ್ಲಿಕ್ ಅಥವಾ ಇನ್ನೊಂದು ಈವೆಂಟ್‌ಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತಿರಲಿ, ಈ ತಂತ್ರಗಳು ನಿಮ್ಮ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಕೌಶಲ್ಯಗಳನ್ನು ಹೆಚ್ಚಿಸುತ್ತವೆ.
| ಆಜ್ಞೆ | ವಿವರಣೆ |
|---|---|
| className | ಅಂಶದ ವರ್ಗ ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿಸುತ್ತದೆ ಅಥವಾ ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಅಂಶದ ವರ್ಗವನ್ನು ಬದಲಾಯಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. |
| getElementById | ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಮೌಲ್ಯದೊಂದಿಗೆ ID ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿರುವ ಅಂಶವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ. ಬಟನ್ ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ. |
| onclick | ಅಂಶದ ಮೇಲೆ ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಸಂಭವಿಸಿದಾಗ ಕಾರ್ಯಗತಗೊಳಿಸಬೇಕಾದ ಕಾರ್ಯವನ್ನು ಹೊಂದಿಸುತ್ತದೆ. |
| removeClass | jQuery ನಲ್ಲಿ ಆಯ್ಕೆಮಾಡಿದ ಅಂಶಗಳಿಂದ ಒಂದು ಅಥವಾ ಹೆಚ್ಚಿನ ವರ್ಗ ಹೆಸರುಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ. |
| addClass | jQuery ನಲ್ಲಿ ಆಯ್ಕೆಮಾಡಿದ ಅಂಶಗಳಿಗೆ ಒಂದು ಅಥವಾ ಹೆಚ್ಚಿನ ವರ್ಗ ಹೆಸರುಗಳನ್ನು ಸೇರಿಸುತ್ತದೆ. |
| $ | jQuery ಗಾಗಿ ಅಲಿಯಾಸ್, ಅಂಶಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಮತ್ತು ಅವುಗಳ ಮೇಲೆ ಕ್ರಿಯೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. |
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕ್ಲಾಸ್ ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
ಕ್ಲಿಕ್ ಈವೆಂಟ್‌ಗೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ JavaScript ಮತ್ತು jQuery ಅನ್ನು ಬಳಸಿಕೊಂಡು HTML ಅಂಶದ ವರ್ಗವನ್ನು ಹೇಗೆ ಬದಲಾಯಿಸುವುದು ಎಂಬುದನ್ನು ಒದಗಿಸಿದ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಪ್ರದರ್ಶಿಸುತ್ತವೆ. ಮೊದಲ ಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ, ಈ ಕಾರ್ಯವನ್ನು ಸಾಧಿಸಲು ಸರಳ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ದಿ 'myButton' ID ಯೊಂದಿಗೆ ಬಟನ್ ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ವಿಧಾನವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ದಿ ಈವೆಂಟ್ ಅನ್ನು ನಂತರ ಈ ಅಂಶಕ್ಕೆ ನಿಯೋಜಿಸಲಾಗಿದೆ, ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಕಾರ್ಯಗತಗೊಳಿಸಬೇಕಾದ ಕಾರ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಈ ಕಾರ್ಯದ ಒಳಗೆ, ಬಟನ್ ನ ಆಸ್ತಿಯನ್ನು 'ಬದಲಾಯಿಸಲಾಗಿದೆ' ಎಂದು ಹೊಂದಿಸಲಾಗಿದೆ, ಅದರ ವರ್ಗವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ ಮತ್ತು ಅದರ ಶೈಲಿಯನ್ನು CSS ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ. ಈ ಸ್ಕ್ರಿಪ್ಟ್ DOM ಕುಶಲತೆಗಾಗಿ ಸರಳ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸುವ ಸರಳತೆ ಮತ್ತು ನೇರತೆಯನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ.
ಎರಡನೇ ಸ್ಕ್ರಿಪ್ಟ್ jQuery ಅನ್ನು ಬಳಸಿಕೊಂಡು ಅದೇ ಕಾರ್ಯವನ್ನು ವಿವರಿಸುತ್ತದೆ, ಇದು HTML ಡಾಕ್ಯುಮೆಂಟ್ ಟ್ರಾವರ್ಸಲ್ ಮತ್ತು ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್ ಅನ್ನು ಸರಳಗೊಳಿಸುವ ಜನಪ್ರಿಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಯಾಗಿದೆ. ಇಲ್ಲಿ, jQuery ಅಲಿಯಾಸ್ ಬಟನ್ ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ. ದಿ ಕ್ಲಿಕ್ ಈವೆಂಟ್‌ಗಾಗಿ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಹೊಂದಿಸಲು ವಿಧಾನವನ್ನು ನಂತರ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ. ಈ ಹ್ಯಾಂಡ್ಲರ್‌ನಲ್ಲಿ, ಬಟನ್‌ನ ವರ್ಗವನ್ನು jQuery ಬಳಸಿ ಮಾರ್ಪಡಿಸಲಾಗಿದೆ ಮತ್ತು 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>
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಕ್ಲಾಸ್ ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್‌ಗಾಗಿ ಸುಧಾರಿತ ತಂತ್ರಗಳು
ಘಟನೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ಮೂಲಭೂತ ವರ್ಗ ಬದಲಾವಣೆಗಳನ್ನು ಮೀರಿ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಂಶದ ವರ್ಗ ಪಟ್ಟಿಯನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸಲು ಹೆಚ್ಚು ಸುಧಾರಿತ ತಂತ್ರಗಳನ್ನು ನೀಡುತ್ತದೆ. ಅಂತಹ ಒಂದು ವಿಧಾನವೆಂದರೆ ಆಸ್ತಿ, ಇದು ತರಗತಿಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಶಕ್ತಿಯುತವಾದ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ದಿ ಆಸ್ತಿಯು ಅಂಶದ ವರ್ಗ ಗುಣಲಕ್ಷಣಗಳ ಲೈವ್ DOMTokenList ಸಂಗ್ರಹವನ್ನು ಹಿಂದಿರುಗಿಸುತ್ತದೆ. ಬಳಸಿ , ಅಂಶಕ್ಕೆ ಅನ್ವಯಿಸಬಹುದಾದ ಇತರ ವರ್ಗಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದಂತೆ ನೀವು ತರಗತಿಗಳನ್ನು ಸೇರಿಸಬಹುದು, ತೆಗೆದುಹಾಕಬಹುದು, ಟಾಗಲ್ ಮಾಡಬಹುದು ಮತ್ತು ಪರಿಶೀಲಿಸಬಹುದು.
ಉದಾಹರಣೆಗೆ, ದಿ ಒಂದು ಅಂಶಕ್ಕೆ ಒಂದು ಅಥವಾ ಹೆಚ್ಚಿನ ವರ್ಗಗಳನ್ನು ಸೇರಿಸಲು ವಿಧಾನವನ್ನು ಬಳಸಬಹುದು, ಆದರೆ ವಿಧಾನವು ಒಂದು ಅಥವಾ ಹೆಚ್ಚಿನ ನಿರ್ದಿಷ್ಟ ವರ್ಗಗಳನ್ನು ತೆಗೆದುಹಾಕಬಹುದು. ದಿ ವಿಧಾನವು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ ಏಕೆಂದರೆ ಅದು ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲದಿದ್ದರೆ ವರ್ಗವನ್ನು ಸೇರಿಸುತ್ತದೆ ಮತ್ತು ಅದು ಇದ್ದರೆ ಅದನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ, ಡಾರ್ಕ್ ಮೋಡ್ ಟಾಗಲ್‌ಗಳನ್ನು ಅಳವಡಿಸುವಂತಹ ಕಾರ್ಯಗಳಿಗೆ ಇದು ಸೂಕ್ತವಾಗಿದೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ದಿ contains ಅಂಶವು ನಿರ್ದಿಷ್ಟ ವರ್ಗವನ್ನು ಹೊಂದಿದೆಯೇ ಎಂದು ವಿಧಾನ ಪರಿಶೀಲಿಸುತ್ತದೆ, ಇದು ಅಂಶದ ಪ್ರಸ್ತುತ ಸ್ಥಿತಿಯನ್ನು ಆಧರಿಸಿ ಷರತ್ತುಬದ್ಧವಾಗಿ ಶೈಲಿಗಳು ಅಥವಾ ನಡವಳಿಕೆಗಳನ್ನು ಅನ್ವಯಿಸಲು ಉಪಯುಕ್ತವಾಗಿದೆ.
- ಒಂದು ಅಂಶಕ್ಕೆ ನಾನು ಬಹು ವರ್ಗಗಳನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು?
- ಬಳಸಿ ಬಹು ವಾದಗಳನ್ನು ಹೊಂದಿರುವ ವಿಧಾನ: .
- ಒಂದು ಅಂಶದಿಂದ ನಾನು ಎಲ್ಲಾ ವರ್ಗಗಳನ್ನು ತೆಗೆದುಹಾಕಬಹುದೇ?
- ಹೌದು, ನೀವು ಬಳಸಬಹುದು ಆಸ್ತಿ ಮತ್ತು ಅದನ್ನು ಖಾಲಿ ಸ್ಟ್ರಿಂಗ್‌ಗೆ ಹೊಂದಿಸಿ: .
- ಎರಡರ ನಡುವಿನ ವ್ಯತ್ಯಾಸವೇನು ಮತ್ತು ?
- ಸಂಪೂರ್ಣ ವರ್ಗ ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿಸುತ್ತದೆ ಅಥವಾ ಪಡೆಯುತ್ತದೆ, ಆದರೆ ತರಗತಿಗಳ ಹೆಚ್ಚು ಹರಳಿನ ಕುಶಲತೆಯನ್ನು ಅನುಮತಿಸುತ್ತದೆ.
- ಒಂದು ಅಂಶವು ನಿರ್ದಿಷ್ಟ ವರ್ಗವನ್ನು ಹೊಂದಿದೆಯೇ ಎಂದು ನಾನು ಹೇಗೆ ಪರಿಶೀಲಿಸುವುದು?
- ಬಳಸಿ ವಿಧಾನ: .
- ಅಂಶದ ಮೇಲೆ ವರ್ಗವನ್ನು ಟಾಗಲ್ ಮಾಡುವುದು ಹೇಗೆ?
- ಬಳಸಿ ವಿಧಾನ: .
- ತರಗತಿಗಳನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸಲು ನಾನು jQuery ಅನ್ನು ಬಳಸಬಹುದೇ?
- ಹೌದು, jQuery ನಂತಹ ವಿಧಾನಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ , , ಮತ್ತು .
- ಲೈವ್ DOMTokenList ಎಂದರೇನು?
- ಎ ಅಂಶದ ವರ್ಗ ಗುಣಲಕ್ಷಣವು ಬದಲಾದಾಗ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನವೀಕರಿಸುವ ಲೈವ್ ಸಂಗ್ರಹವಾಗಿದೆ.
- ಇದೆ ಎಲ್ಲಾ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಬೆಂಬಲಿತವಾಗಿದೆಯೇ?
- ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಬೆಂಬಲಿತವಾಗಿದೆ, ಆದರೆ ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್‌ನ ಹಳೆಯ ಆವೃತ್ತಿಗಳು ಇದನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.
- ಷರತ್ತುಗಳ ಆಧಾರದ ಮೇಲೆ ನಾನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ತರಗತಿಗಳನ್ನು ಹೇಗೆ ಸೇರಿಸಬಹುದು?
- ನೀವು ಬಳಸಬಹುದು ಸಂಯೋಜನೆಯಲ್ಲಿ ಹೇಳಿಕೆಗಳು ಅಥವಾ ಷರತ್ತುಬದ್ಧವಾಗಿ ತರಗತಿಗಳನ್ನು ಅನ್ವಯಿಸಲು.
ಡೈನಾಮಿಕ್ ವರ್ಗ ಬದಲಾವಣೆಗಳಿಗೆ ಪ್ರಮುಖ ತಂತ್ರಗಳು
ಕ್ಲಿಕ್ ಈವೆಂಟ್‌ಗೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ JavaScript ಮತ್ತು jQuery ಅನ್ನು ಬಳಸಿಕೊಂಡು HTML ಅಂಶದ ವರ್ಗವನ್ನು ಹೇಗೆ ಬದಲಾಯಿಸುವುದು ಎಂಬುದನ್ನು ಒದಗಿಸಿದ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಪ್ರದರ್ಶಿಸುತ್ತವೆ. ಮೊದಲ ಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ, ಈ ಕಾರ್ಯವನ್ನು ಸಾಧಿಸಲು ಸರಳ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ದಿ 'myButton' ID ಯೊಂದಿಗೆ ಬಟನ್ ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ವಿಧಾನವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ದಿ ಈವೆಂಟ್ ಅನ್ನು ನಂತರ ಈ ಅಂಶಕ್ಕೆ ನಿಯೋಜಿಸಲಾಗಿದೆ, ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಕಾರ್ಯಗತಗೊಳಿಸಬೇಕಾದ ಕಾರ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಈ ಕಾರ್ಯದ ಒಳಗೆ, ಬಟನ್ ನ ಆಸ್ತಿಯನ್ನು 'ಬದಲಾಯಿಸಲಾಗಿದೆ' ಎಂದು ಹೊಂದಿಸಲಾಗಿದೆ, ಅದರ ವರ್ಗವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ ಮತ್ತು ಅದರ ಶೈಲಿಯನ್ನು CSS ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ. ಈ ಸ್ಕ್ರಿಪ್ಟ್ DOM ಕುಶಲತೆಗಾಗಿ ಸರಳ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಬಳಸುವ ಸರಳತೆ ಮತ್ತು ನೇರತೆಯನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ.
ಎರಡನೇ ಸ್ಕ್ರಿಪ್ಟ್ jQuery ಅನ್ನು ಬಳಸಿಕೊಂಡು ಅದೇ ಕಾರ್ಯವನ್ನು ವಿವರಿಸುತ್ತದೆ, ಇದು HTML ಡಾಕ್ಯುಮೆಂಟ್ ಟ್ರಾವರ್ಸಲ್ ಮತ್ತು ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್ ಅನ್ನು ಸರಳಗೊಳಿಸುವ ಜನಪ್ರಿಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಯಾಗಿದೆ. ಇಲ್ಲಿ, jQuery ಅಲಿಯಾಸ್ ಬಟನ್ ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ. ದಿ ಕ್ಲಿಕ್ ಈವೆಂಟ್‌ಗಾಗಿ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಹೊಂದಿಸಲು ವಿಧಾನವನ್ನು ನಂತರ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ. ಈ ಹ್ಯಾಂಡ್ಲರ್‌ನಲ್ಲಿ, ಬಟನ್‌ನ ವರ್ಗವನ್ನು jQuery ಬಳಸಿ ಮಾರ್ಪಡಿಸಲಾಗಿದೆ ಮತ್ತು addClass ವಿಧಾನಗಳು. ಈ ವಿಧಾನಗಳು ಸರಳ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಗೆ ಹೋಲಿಸಿದರೆ ಹೆಚ್ಚು ಓದಬಲ್ಲ ಮತ್ತು ಸಂಕ್ಷಿಪ್ತ ವಿಧಾನವನ್ನು ನೀಡುವ ಅಂಶದ ವರ್ಗಗಳನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸಲು ಅನುಕೂಲಕರ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಎರಡೂ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಬಳಕೆದಾರರ ಪರಸ್ಪರ ಕ್ರಿಯೆಯ ಆಧಾರದ ಮೇಲೆ ಅಂಶದ ವರ್ಗವನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಬದಲಾಯಿಸುವ ಒಂದೇ ಗುರಿಯನ್ನು ವಿಭಿನ್ನ ಸಾಧನಗಳು ಹೇಗೆ ಸಾಧಿಸಬಹುದು ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸುವ ಗುರಿಯನ್ನು ಹೊಂದಿವೆ.
JavaScript ಅಥವಾ jQuery ಬಳಸಿಕೊಂಡು HTML ಅಂಶದ ವರ್ಗವನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸುವುದು ಅಂಶದ ಶೈಲಿ ಮತ್ತು ನಡವಳಿಕೆಯನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ನವೀಕರಿಸಲು ನೇರವಾದ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ವಿಧಾನಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮತ್ತು ಬಳಸಿಕೊಳ್ಳುವ ಮೂಲಕ , , ಮತ್ತು jQuery ನ ಕ್ಲಾಸ್ ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್ ವಿಧಾನಗಳು, ಡೆವಲಪರ್‌ಗಳು ತಮ್ಮ ವೆಬ್ ಪುಟಗಳ ಸಂವಾದಾತ್ಮಕತೆ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಹೆಚ್ಚಿಸಬಹುದು, ಇದರಿಂದಾಗಿ ಅವುಗಳನ್ನು ಬಳಕೆದಾರರಿಗೆ ಹೆಚ್ಚು ತೊಡಗಿಸಿಕೊಳ್ಳಬಹುದು.