JavaScript ਨਾਲ ਕਲਾਸਾਂ ਨੂੰ ਅੱਪਡੇਟ ਕਰਨਾ
JavaScript HTML ਤੱਤਾਂ ਨਾਲ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਪਰਸਪਰ ਪ੍ਰਭਾਵ ਪਾਉਣ ਅਤੇ ਹੇਰਾਫੇਰੀ ਕਰਨ ਲਈ ਸ਼ਕਤੀਸ਼ਾਲੀ ਟੂਲ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਇੱਕ ਆਮ ਕੰਮ ਔਨਕਲਿਕ ਵਰਗੀਆਂ ਘਟਨਾਵਾਂ ਦੇ ਜਵਾਬ ਵਿੱਚ ਇੱਕ HTML ਤੱਤ ਦੀ ਸ਼੍ਰੇਣੀ ਨੂੰ ਬਦਲ ਰਿਹਾ ਹੈ।
ਇਹ ਗਾਈਡ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੇਗੀ ਕਿ ਤੁਹਾਡੇ ਵੈੱਬ ਪੰਨਿਆਂ 'ਤੇ ਗਤੀਸ਼ੀਲ ਸਟਾਈਲਿੰਗ ਅਤੇ ਵਿਵਹਾਰ ਵਿੱਚ ਤਬਦੀਲੀਆਂ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹੋਏ, ਕਿਸੇ ਤੱਤ ਦੀ ਸ਼੍ਰੇਣੀ ਨੂੰ ਬਦਲਣ ਲਈ JavaScript ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ। ਭਾਵੇਂ ਤੁਸੀਂ ਇੱਕ ਬਟਨ ਕਲਿੱਕ ਜਾਂ ਕਿਸੇ ਹੋਰ ਇਵੈਂਟ ਦਾ ਜਵਾਬ ਦੇ ਰਹੇ ਹੋ, ਇਹ ਤਕਨੀਕਾਂ ਤੁਹਾਡੇ ਵੈੱਬ ਵਿਕਾਸ ਦੇ ਹੁਨਰ ਨੂੰ ਵਧਾਉਣਗੀਆਂ।
| ਹੁਕਮ | ਵਰਣਨ |
|---|---|
| className | ਕਿਸੇ ਐਲੀਮੈਂਟ ਦੀ ਕਲਾਸ ਐਟਰੀਬਿਊਟ ਸੈੱਟ ਜਾਂ ਵਾਪਸ ਕਰਦਾ ਹੈ। ਤੱਤ ਦੀ ਸ਼੍ਰੇਣੀ ਨੂੰ ਬਦਲਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। |
| getElementById | ਨਿਰਧਾਰਤ ਮੁੱਲ ਦੇ ਨਾਲ ID ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲਾ ਤੱਤ ਵਾਪਸ ਕਰਦਾ ਹੈ। ਬਟਨ ਤੱਤ ਨੂੰ ਚੁਣਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। |
| onclick | ਫੰਕਸ਼ਨ ਨੂੰ ਐਗਜ਼ੀਕਿਊਟ ਕਰਨ ਲਈ ਸੈੱਟ ਕਰਦਾ ਹੈ ਜਦੋਂ ਐਲੀਮੈਂਟ 'ਤੇ ਕਲਿੱਕ ਇਵੈਂਟ ਵਾਪਰਦਾ ਹੈ। |
| removeClass | jQuery ਵਿੱਚ ਚੁਣੇ ਗਏ ਤੱਤਾਂ ਵਿੱਚੋਂ ਇੱਕ ਜਾਂ ਇੱਕ ਤੋਂ ਵੱਧ ਕਲਾਸ ਦੇ ਨਾਮਾਂ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ। |
| addClass | jQuery ਵਿੱਚ ਚੁਣੇ ਗਏ ਤੱਤਾਂ ਵਿੱਚ ਇੱਕ ਜਾਂ ਇੱਕ ਤੋਂ ਵੱਧ ਕਲਾਸ ਦੇ ਨਾਮ ਜੋੜਦਾ ਹੈ। |
| $ | jQuery ਲਈ ਉਪਨਾਮ, ਤੱਤ ਚੁਣਨ ਅਤੇ ਉਹਨਾਂ 'ਤੇ ਕਾਰਵਾਈਆਂ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। |
JavaScript ਕਲਾਸ ਹੇਰਾਫੇਰੀ ਨੂੰ ਸਮਝਣਾ
ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਸਕ੍ਰਿਪਟਾਂ ਦਰਸਾਉਂਦੀਆਂ ਹਨ ਕਿ ਇੱਕ ਕਲਿੱਕ ਇਵੈਂਟ ਦੇ ਜਵਾਬ ਵਿੱਚ JavaScript ਅਤੇ jQuery ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ HTML ਤੱਤ ਦੀ ਸ਼੍ਰੇਣੀ ਨੂੰ ਕਿਵੇਂ ਬਦਲਣਾ ਹੈ। ਪਹਿਲੀ ਸਕ੍ਰਿਪਟ ਵਿੱਚ, ਇਸ ਕਾਰਜਸ਼ੀਲਤਾ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਸਾਦੀ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਦ getElementById ID 'myButton' ਦੇ ਨਾਲ ਬਟਨ ਤੱਤ ਦੀ ਚੋਣ ਕਰਨ ਲਈ ਵਿਧੀ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਦ onclick ਇਵੈਂਟ ਫਿਰ ਇਸ ਐਲੀਮੈਂਟ ਨੂੰ ਨਿਰਧਾਰਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਬਟਨ ਨੂੰ ਕਲਿੱਕ ਕੀਤੇ ਜਾਣ 'ਤੇ ਐਗਜ਼ੀਕਿਊਟ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਫੰਕਸ਼ਨ ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰਦੇ ਹੋਏ। ਇਸ ਫੰਕਸ਼ਨ ਦੇ ਅੰਦਰ, ਬਟਨ ਦਾ className ਪ੍ਰਾਪਰਟੀ ਨੂੰ 'ਬਦਲਿਆ' 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ, ਇਸਦੀ ਕਲਾਸ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਇਸਦੀ ਸ਼ੈਲੀ ਨੂੰ CSS ਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ। ਇਹ ਸਕ੍ਰਿਪਟ DOM ਹੇਰਾਫੇਰੀ ਲਈ ਸਾਦੇ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸਾਦਗੀ ਅਤੇ ਪ੍ਰਤੱਖਤਾ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੀ ਹੈ।
ਦੂਜੀ ਸਕ੍ਰਿਪਟ jQuery ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਉਸੇ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ, ਇੱਕ ਪ੍ਰਸਿੱਧ JavaScript ਲਾਇਬ੍ਰੇਰੀ ਜੋ HTML ਦਸਤਾਵੇਜ਼ ਟ੍ਰਾਵਰਸਲ ਅਤੇ ਹੇਰਾਫੇਰੀ ਨੂੰ ਸਰਲ ਬਣਾਉਂਦੀ ਹੈ। ਇੱਥੇ, jQuery ਉਰਫ $ ਬਟਨ ਤੱਤ ਨੂੰ ਚੁਣਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਦ click ਵਿਧੀ ਨੂੰ ਫਿਰ ਕਲਿੱਕ ਇਵੈਂਟ ਲਈ ਇੱਕ ਇਵੈਂਟ ਹੈਂਡਲਰ ਸਥਾਪਤ ਕਰਨ ਲਈ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਸ ਹੈਂਡਲਰ ਦੇ ਅੰਦਰ, ਬਟਨ ਦੀ ਕਲਾਸ ਨੂੰ jQuery ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੋਧਿਆ ਗਿਆ ਹੈ removeClass ਅਤੇ addClass ਢੰਗ. ਇਹ ਵਿਧੀਆਂ ਸਾਦੇ JavaScript ਦੇ ਮੁਕਾਬਲੇ ਇੱਕ ਵਧੇਰੇ ਪੜ੍ਹਨਯੋਗ ਅਤੇ ਸੰਖੇਪ ਪਹੁੰਚ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦੇ ਹੋਏ, ਤੱਤ ਦੀਆਂ ਕਲਾਸਾਂ ਵਿੱਚ ਹੇਰਾਫੇਰੀ ਕਰਨ ਦਾ ਇੱਕ ਸੁਵਿਧਾਜਨਕ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ। ਦੋਵੇਂ ਸਕ੍ਰਿਪਟਾਂ ਦਾ ਉਦੇਸ਼ ਇਹ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਹੈ ਕਿ ਕਿਵੇਂ ਵੱਖ-ਵੱਖ ਟੂਲ ਉਪਭੋਗਤਾ ਇੰਟਰੈਕਸ਼ਨ ਦੇ ਆਧਾਰ 'ਤੇ ਐਲੀਮੈਂਟ ਦੀ ਕਲਾਸ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਬਦਲਣ ਦੇ ਇੱਕੋ ਟੀਚੇ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਨ।
JavaScript ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਐਲੀਮੈਂਟ ਦੀ ਕਲਾਸ ਨੂੰ ਬਦਲਣਾ
JavaScript ਅਤੇ 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 ਨਾਲ JavaScript
// 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>
ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਵਿੱਚ ਕਲਾਸ ਹੇਰਾਫੇਰੀ ਲਈ ਉੱਨਤ ਤਕਨੀਕਾਂ
ਇਵੈਂਟਾਂ ਦੇ ਜਵਾਬ ਵਿੱਚ ਬੁਨਿਆਦੀ ਕਲਾਸ ਤਬਦੀਲੀਆਂ ਤੋਂ ਪਰੇ, JavaScript ਇੱਕ ਤੱਤ ਦੀ ਕਲਾਸ ਸੂਚੀ ਵਿੱਚ ਹੇਰਾਫੇਰੀ ਕਰਨ ਲਈ ਵਧੇਰੇ ਉੱਨਤ ਤਕਨੀਕਾਂ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦਾ ਹੈ। ਅਜਿਹਾ ਹੀ ਇੱਕ ਤਰੀਕਾ ਹੈ 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 ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਸਮਰਥਿਤ ਹੈ, ਪਰ ਹੋ ਸਕਦਾ ਹੈ ਕਿ ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ ਦੇ ਪੁਰਾਣੇ ਸੰਸਕਰਣ ਇਸਦਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਰਥਨ ਨਾ ਕਰਨ।
- ਮੈਂ ਸ਼ਰਤਾਂ ਦੇ ਅਧਾਰ ਤੇ ਕਲਾਸਾਂ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਕਿਵੇਂ ਜੋੜ ਸਕਦਾ ਹਾਂ?
- ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ if ਦੇ ਨਾਲ ਸੁਮੇਲ ਵਿੱਚ ਬਿਆਨ classList.add ਜਾਂ classList.remove ਕਲਾਸਾਂ ਨੂੰ ਸ਼ਰਤ ਅਨੁਸਾਰ ਲਾਗੂ ਕਰਨ ਲਈ।
ਡਾਇਨਾਮਿਕ ਕਲਾਸ ਬਦਲਾਅ ਲਈ ਮੁੱਖ ਤਕਨੀਕਾਂ
ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਸਕ੍ਰਿਪਟਾਂ ਦਰਸਾਉਂਦੀਆਂ ਹਨ ਕਿ ਇੱਕ ਕਲਿੱਕ ਇਵੈਂਟ ਦੇ ਜਵਾਬ ਵਿੱਚ JavaScript ਅਤੇ jQuery ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ HTML ਤੱਤ ਦੀ ਸ਼੍ਰੇਣੀ ਨੂੰ ਕਿਵੇਂ ਬਦਲਣਾ ਹੈ। ਪਹਿਲੀ ਸਕ੍ਰਿਪਟ ਵਿੱਚ, ਇਸ ਕਾਰਜਸ਼ੀਲਤਾ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਸਾਦੀ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਦ getElementById ID 'myButton' ਦੇ ਨਾਲ ਬਟਨ ਤੱਤ ਦੀ ਚੋਣ ਕਰਨ ਲਈ ਵਿਧੀ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਦ onclick ਇਵੈਂਟ ਫਿਰ ਇਸ ਐਲੀਮੈਂਟ ਨੂੰ ਨਿਰਧਾਰਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਬਟਨ ਨੂੰ ਕਲਿੱਕ ਕੀਤੇ ਜਾਣ 'ਤੇ ਐਗਜ਼ੀਕਿਊਟ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਫੰਕਸ਼ਨ ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰਦੇ ਹੋਏ। ਇਸ ਫੰਕਸ਼ਨ ਦੇ ਅੰਦਰ, ਬਟਨ ਦਾ className ਪ੍ਰਾਪਰਟੀ ਨੂੰ 'ਬਦਲਿਆ' 'ਤੇ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ, ਇਸਦੀ ਕਲਾਸ ਅਤੇ ਬਾਅਦ ਵਿੱਚ ਇਸਦੀ ਸ਼ੈਲੀ ਨੂੰ CSS ਵਿੱਚ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਗਿਆ ਹੈ। ਇਹ ਸਕ੍ਰਿਪਟ DOM ਹੇਰਾਫੇਰੀ ਲਈ ਸਾਦੇ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸਾਦਗੀ ਅਤੇ ਪ੍ਰਤੱਖਤਾ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੀ ਹੈ।
ਦੂਜੀ ਸਕ੍ਰਿਪਟ jQuery ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਉਸੇ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ, ਇੱਕ ਪ੍ਰਸਿੱਧ JavaScript ਲਾਇਬ੍ਰੇਰੀ ਜੋ HTML ਦਸਤਾਵੇਜ਼ ਟ੍ਰਾਵਰਸਲ ਅਤੇ ਹੇਰਾਫੇਰੀ ਨੂੰ ਸਰਲ ਬਣਾਉਂਦੀ ਹੈ। ਇੱਥੇ, jQuery ਉਰਫ $ ਬਟਨ ਤੱਤ ਨੂੰ ਚੁਣਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਦ click ਵਿਧੀ ਨੂੰ ਫਿਰ ਕਲਿੱਕ ਇਵੈਂਟ ਲਈ ਇੱਕ ਇਵੈਂਟ ਹੈਂਡਲਰ ਸਥਾਪਤ ਕਰਨ ਲਈ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਇਸ ਹੈਂਡਲਰ ਦੇ ਅੰਦਰ, ਬਟਨ ਦੀ ਕਲਾਸ ਨੂੰ jQuery ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੋਧਿਆ ਗਿਆ ਹੈ removeClass ਅਤੇ addClass ਢੰਗ. ਇਹ ਵਿਧੀਆਂ ਸਾਦੇ JavaScript ਦੇ ਮੁਕਾਬਲੇ ਇੱਕ ਵਧੇਰੇ ਪੜ੍ਹਨਯੋਗ ਅਤੇ ਸੰਖੇਪ ਪਹੁੰਚ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਦੇ ਹੋਏ, ਤੱਤ ਦੀਆਂ ਕਲਾਸਾਂ ਵਿੱਚ ਹੇਰਾਫੇਰੀ ਕਰਨ ਦਾ ਇੱਕ ਸੁਵਿਧਾਜਨਕ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕਰਦੀਆਂ ਹਨ। ਦੋਵੇਂ ਸਕ੍ਰਿਪਟਾਂ ਦਾ ਉਦੇਸ਼ ਇਹ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਹੈ ਕਿ ਕਿਵੇਂ ਵੱਖ-ਵੱਖ ਟੂਲ ਉਪਭੋਗਤਾ ਇੰਟਰੈਕਸ਼ਨ ਦੇ ਆਧਾਰ 'ਤੇ ਐਲੀਮੈਂਟ ਦੀ ਕਲਾਸ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਬਦਲਣ ਦੇ ਇੱਕੋ ਟੀਚੇ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹਨ।
ਮੁੱਖ ਬਿੰਦੂਆਂ ਦਾ ਸੰਖੇਪ
JavaScript ਜਾਂ jQuery ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ HTML ਐਲੀਮੈਂਟ ਦੀ ਕਲਾਸ ਵਿੱਚ ਹੇਰਾਫੇਰੀ ਕਰਨਾ ਇੱਕ ਤੱਤ ਦੀ ਸ਼ੈਲੀ ਅਤੇ ਵਿਵਹਾਰ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਅੱਪਡੇਟ ਕਰਨ ਦਾ ਇੱਕ ਸਿੱਧਾ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਵਰਗੇ ਤਰੀਕਿਆਂ ਨੂੰ ਸਮਝ ਕੇ ਅਤੇ ਵਰਤ ਕੇ className, classList, ਅਤੇ jQuery ਦੇ ਕਲਾਸ ਹੇਰਾਫੇਰੀ ਵਿਧੀਆਂ, ਡਿਵੈਲਪਰ ਆਪਣੇ ਵੈਬ ਪੇਜਾਂ ਦੀ ਪਰਸਪਰ ਪ੍ਰਭਾਵਸ਼ੀਲਤਾ ਅਤੇ ਜਵਾਬਦੇਹੀ ਨੂੰ ਵਧਾ ਸਕਦੇ ਹਨ, ਉਹਨਾਂ ਨੂੰ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਵਧੇਰੇ ਰੁਝੇਵੇਂ ਬਣਾ ਸਕਦੇ ਹਨ।