Ajax-ਅਧਾਰਿਤ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣਾ jQuery ਨਾਲ ਬਹੁਤ ਸਰਲ ਅਤੇ ਤੇਜ਼ ਹੋ ਜਾਂਦਾ ਹੈ।
jQuery ਨੂੰ ਅਸਲ ਵਿੱਚ ਜੌਨ ਰੇਸਿਗ ਦੁਆਰਾ 2006 ਦੇ ਸ਼ੁਰੂ ਵਿੱਚ ਬਣਾਇਆ ਗਿਆ ਸੀ। jQuery ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਵਰਤਮਾਨ ਵਿੱਚ ਇੱਕ ਓਪਨ ਸੋਰਸ ਪ੍ਰੋਜੈਕਟ ਦੇ ਰੂਪ ਵਿੱਚ ਡਿਵੈਲਪਰਾਂ ਦੇ ਇੱਕ ਵੰਡੇ ਸਮੂਹ ਦੁਆਰਾ ਸੰਭਾਲਿਆ ਅਤੇ ਸੰਭਾਲਿਆ ਜਾਂਦਾ ਹੈ।
ਤੁਸੀਂ jQuery ਨਾਲ ਬਹੁਤ ਸਾਰਾ ਸਮਾਂ ਅਤੇ ਮਿਹਨਤ ਬਚਾ ਸਕਦੇ ਹੋ। ਇਸ ਲਈ ਇਸ ਸਾਈਟ ਨੂੰ ਆਪਣੇ ਮਨਪਸੰਦ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਪੜ੍ਹਨਾ ਜਾਰੀ ਰੱਖੋ
ਇੱਥੇ ਬਹੁਤ ਸਾਰੀਆਂ ਹੋਰ ਚੀਜ਼ਾਂ ਹਨ ਜੋ ਤੁਸੀਂ jQuery ਨਾਲ ਕਰ ਸਕਦੇ ਹੋ।
ਸੂਚੀ ਇੱਥੇ ਖਤਮ ਨਹੀਂ ਹੁੰਦੀ, ਇੱਥੇ ਬਹੁਤ ਸਾਰੀਆਂ ਹੋਰ ਵਧੀਆ ਚੀਜ਼ਾਂ ਹਨ ਜੋ ਤੁਸੀਂ jQuery ਨਾਲ ਕਰ ਸਕਦੇ ਹੋ।
ਇੱਥੇ ਕਈ ਫਾਇਦੇ ਹਨ ਕਿ ਕਿਸੇ ਨੂੰ jQuery ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਚੋਣ ਕਿਉਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ:
ਸ਼ੁਰੂ ਕਰਨ ਲਈ, ਆਓ ਪਹਿਲਾਂ jQuery ਦੀ ਇੱਕ ਕਾਪੀ ਡਾਊਨਲੋਡ ਕਰੀਏ ਅਤੇ ਫਿਰ ਇਸਨੂੰ ਸਾਡੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੀਏ। jQuery ਦੇ ਦੋ ਸੰਸਕਰਣ ਡਾਊਨਲੋਡ ਕਰਨ ਲਈ ਉਪਲਬਧ ਹਨ: ਜਲਦੀ 'ਚ e ਸੰਕੁਚਿਤ ਨਹੀਂ .
ਸੰਕੁਚਿਤ ਫਾਈਲ ਵਿਕਾਸ ਜਾਂ ਡੀਬੱਗਿੰਗ ਲਈ ਬਿਹਤਰ ਅਨੁਕੂਲ ਹੈ; ਜਦੋਂ ਕਿ, ਉਤਪਾਦਨ ਲਈ ਮਿੰਨੀਫਾਈਡ ਅਤੇ ਕੰਪਰੈੱਸਡ ਫਾਈਲ ਦੀ ਸਿਫ਼ਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਕਿਉਂਕਿ ਇਹ ਬੈਂਡਵਿਡਥ ਨੂੰ ਬਚਾਉਂਦੀ ਹੈ ਅਤੇ ਛੋਟੇ ਫਾਈਲ ਸਾਈਜ਼ ਕਾਰਨ ਕਾਰਗੁਜ਼ਾਰੀ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦੀ ਹੈ।
ਅਸੀਂ ਇੱਥੋਂ jQuery ਨੂੰ ਡਾਊਨਲੋਡ ਕਰ ਸਕਦੇ ਹਾਂ: https://jquery.com/download/
ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ jQuery ਫਾਈਲ ਨੂੰ ਡਾਉਨਲੋਡ ਕਰ ਲੈਂਦੇ ਹੋ ਤਾਂ ਤੁਸੀਂ ਦੇਖ ਸਕਦੇ ਹੋ ਕਿ ਇਸ ਵਿੱਚ ਇੱਕ js ਐਕਸਟੈਂਸ਼ਨ ਹੈ, ਭਾਵ ਇਹ ਇੱਕ JavaScript ਫਾਈਲ ਹੈ। ਅਸਲ ਵਿੱਚ JQuery ਇੱਕ JavaScript ਲਾਇਬ੍ਰੇਰੀ ਤੋਂ ਇਲਾਵਾ ਕੁਝ ਨਹੀਂ ਹੈ, ਇਸਲਈ ਤੁਸੀਂ ਐਲੀਮੈਂਟ ਦੇ ਨਾਲ HTML ਦਸਤਾਵੇਜ਼ ਵਿੱਚ jQuery ਫਾਈਲ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਤੁਸੀਂ ਨਿਯਮਤ JavaScript ਫਾਈਲਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦੇ ਹੋ।
<head>
<title>Simple HTML Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>ਕਸਟਮ ਸਕ੍ਰਿਪਟਾਂ ਤੋਂ ਪਹਿਲਾਂ ਹਮੇਸ਼ਾਂ jQuery ਫਾਈਲ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਯਾਦ ਰੱਖੋ; ਨਹੀਂ ਤਾਂ, jQuery API ਉਪਲਬਧ ਨਹੀਂ ਹੋਣਗੇ ਜਦੋਂ ਤੁਹਾਡਾ jQuery ਕੋਡ ਉਹਨਾਂ ਤੱਕ ਪਹੁੰਚ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹੈ।
ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਦੇਖਿਆ ਹੋਵੇਗਾ, ਅਸੀਂ ਪਿਛਲੀ ਉਦਾਹਰਨ ਵਿੱਚ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਛੱਡ ਦਿੱਤਾ ਹੈ type="text/javascript" ਟੈਗ ਦੇ ਅੰਦਰ . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiHTML5 ਅਤੇ ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਮੁਕੰਮਲ ਹੋ ਗਿਆ।
ਇੱਕ ਵਿਕਲਪ ਦੇ ਤੌਰ 'ਤੇ, ਜੇਕਰ ਤੁਸੀਂ ਫਾਈਲ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰਨ ਤੋਂ ਬਚਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ CDN (ਸਮੱਗਰੀ ਡਿਲਿਵਰੀ ਨੈੱਟਵਰਕ) ਲਿੰਕਾਂ ਰਾਹੀਂ ਆਪਣੇ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ jQuery ਨੂੰ ਏਮਬੈਡ ਕਰ ਸਕਦੇ ਹੋ।
CDN ਲੋਡ ਸਮੇਂ ਨੂੰ ਘਟਾ ਕੇ ਇੱਕ ਪ੍ਰਦਰਸ਼ਨ ਲਾਭ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰ ਸਕਦੇ ਹਨ, ਕਿਉਂਕਿ ਉਹ ਦੁਨੀਆ ਭਰ ਦੇ ਕਈ ਸਰਵਰਾਂ 'ਤੇ jQuery ਦੀ ਮੇਜ਼ਬਾਨੀ ਕਰਦੇ ਹਨ, ਅਤੇ ਜਦੋਂ ਕੋਈ ਉਪਭੋਗਤਾ ਫਾਈਲ ਦੀ ਬੇਨਤੀ ਕਰਦਾ ਹੈ, ਤਾਂ ਇਹ ਸਭ ਤੋਂ ਨਜ਼ਦੀਕੀ ਸਰਵਰ ਤੋਂ ਸੇਵਾ ਕੀਤੀ ਜਾਵੇਗੀ।
ਇਸਦਾ ਇਹ ਵੀ ਫਾਇਦਾ ਹੈ ਕਿ ਜੇਕਰ ਤੁਹਾਡੇ ਵੈਬ ਪੇਜ ਵਿਜ਼ਟਰ ਨੇ ਦੂਜੀਆਂ ਸਾਈਟਾਂ 'ਤੇ ਜਾਣ ਵੇਲੇ ਉਸੇ CDN ਤੋਂ jQuery ਦੀ ਇੱਕ ਕਾਪੀ ਪਹਿਲਾਂ ਹੀ ਡਾਊਨਲੋਡ ਕੀਤੀ ਹੈ, ਤਾਂ ਉਹਨਾਂ ਨੂੰ ਇਸਨੂੰ ਦੁਬਾਰਾ ਡਾਊਨਲੋਡ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੋਵੇਗੀ ਕਿਉਂਕਿ ਇਹ ਪਹਿਲਾਂ ਹੀ ਉਹਨਾਂ ਦੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਕੈਸ਼ ਵਿੱਚ ਹੈ।
ਇਸ ਸਥਿਤੀ ਵਿੱਚ ਤੁਹਾਨੂੰ ਇਹ ਲਿਖਣਾ ਪਏਗਾ:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>jquery ਪ੍ਰੋਜੈਕਟ ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕੀਤੇ ਗਏ CDN ਤੋਂ ਇਲਾਵਾ, ਤੁਸੀਂ jQuery ਦੁਆਰਾ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ ਗੂਗਲ e Microsoft ਦੇ cdn.
jQuery ਲਾਇਬ੍ਰੇਰੀ ਦੇ ਟੀਚਿਆਂ ਨੂੰ ਦੇਖਣ ਤੋਂ ਬਾਅਦ ਅਤੇ ਇਸਨੂੰ ਤੁਹਾਡੇ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਕਿਵੇਂ ਸ਼ਾਮਲ ਕਰਨਾ ਹੈ, ਹੁਣ jQuery ਨੂੰ ਅਭਿਆਸ ਵਿੱਚ ਲਿਆਉਣ ਦਾ ਸਮਾਂ ਆ ਗਿਆ ਹੈ।
ਹੁਣ ਹੈਡਰ ਟੈਕਸਟ ਕਲਰ ਨੂੰ ਪ੍ਰੀ ਕਲਰ ਤੋਂ ਬਦਲ ਕੇ ਇੱਕ ਸਧਾਰਨ jQuery ਓਪਰੇਸ਼ਨ ਕਰੀਏdefiਕਾਲੇ ਤੋਂ ਹਰੇ ਰੰਗ ਦੇ ਨਿਸ਼ਾਨ.
<head>
<title>My First jQuery Web Page</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("h1").css("color", "#00ff00");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>ਕੋਡ ਵਿੱਚ ਅਸੀਂ ਸਿਰਲੇਖ ਦਾ ਰੰਗ ਬਦਲ ਕੇ ਇੱਕ ਸਧਾਰਨ jQuery ਕਾਰਵਾਈ ਕੀਤੀ ਹੈ ਯਾਨੀ ਐਲੀਮੈਂਟ ਦਸਤਾਵੇਜ਼ ਤਿਆਰ ਹੋਣ 'ਤੇ jQuery ਐਲੀਮੈਂਟ ਦੇ ਚੋਣਕਾਰ ਅਤੇ css() ਵਿਧੀ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਦਸਤਾਵੇਜ਼ ਤਿਆਰ ਇਵੈਂਟ ਵਜੋਂ ਜਾਣਿਆ ਜਾਂਦਾ ਹੈ।
ਇੱਕ jQuery ਸਟੇਟਮੈਂਟ ਆਮ ਤੌਰ 'ਤੇ ਡਾਲਰ ਦੇ ਚਿੰਨ੍ਹ ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ ( $) ਅਤੇ ਇੱਕ ਸੈਮੀਕੋਲਨ ਨਾਲ ਖਤਮ ਹੁੰਦਾ ਹੈ ( ;).
jQuery ਵਿੱਚ, ਡਾਲਰ ਦਾ ਚਿੰਨ੍ਹ ( $) jQuery ਲਈ ਸਿਰਫ਼ ਇੱਕ ਉਪਨਾਮ ਹੈ। ਸਰਲ jQuery ਸਟੇਟਮੈਂਟ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਵਾਲੇ ਹੇਠਾਂ ਦਿੱਤੇ ਨਮੂਨਾ ਕੋਡ 'ਤੇ ਵਿਚਾਰ ਕਰੋ।
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>ਉਦਾਹਰਣ ਸਿਰਫ਼ ਇੱਕ ਚੇਤਾਵਨੀ ਸੁਨੇਹਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੀ ਹੈ "Hello I'm a JQuery sign"ਉਪਭੋਗਤਾ ਨੂੰ. ਆਓ ਕੁਝ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਵੇਖੀਏ:
<script>: jQuery ਸਿਰਫ਼ ਇੱਕ JavaScript ਲਾਇਬ੍ਰੇਰੀ ਹੈ, jQuery ਕੋਡ ਨੂੰ ਤੱਤ ਦੇ ਅੰਦਰ ਰੱਖਿਆ ਜਾ ਸਕਦਾ ਹੈ <script>, ਜਾਂ ਤੁਸੀਂ ਇਸਨੂੰ ਇੱਕ ਬਾਹਰੀ JavaScript ਫਾਈਲ ਵਿੱਚ ਪਾ ਸਕਦੇ ਹੋ;$(document).ready(handler); ਇੱਕ ਤਿਆਰ ਘਟਨਾ ਵਜੋਂ ਜਾਣਿਆ ਜਾਂਦਾ ਹੈ। ਉਹ ਕਿਥੇ ਹੈ handler ਇਹ ਇੱਕ ਫੰਕਸ਼ਨ ਹੈ ਜਿਸ ਨੂੰ ਐਗਜ਼ੀਕਿਊਟ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਤਰੀਕੇ ਵਿੱਚ ਪਾਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਜਿਵੇਂ ਹੀ ਦਸਤਾਵੇਜ਼ ਤਿਆਰ ਹੁੰਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਜਦੋਂ DOM ਲੜੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਬਣਾਈ ਜਾਂਦੀ ਹੈ।jQuery ਵਿਧੀ ready() ਇਹ ਆਮ ਤੌਰ 'ਤੇ ਇੱਕ ਅਗਿਆਤ ਫੰਕਸ਼ਨ ਨਾਲ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਇਸ ਲਈ, ਉਪਰੋਕਤ ਉਦਾਹਰਣ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਸ਼ਾਰਟਹੈਂਡ ਨੋਟੇਸ਼ਨ ਵਿੱਚ ਵੀ ਲਿਖਿਆ ਜਾ ਸਕਦਾ ਹੈ:
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>ਇੱਕ ਫੰਕਸ਼ਨ ਦੇ ਅੰਦਰ ਤੁਸੀਂ ਬੁਨਿਆਦੀ ਸੰਟੈਕਸ ਦੇ ਬਾਅਦ ਕੋਈ ਵੀ ਕਾਰਵਾਈ ਕਰਨ ਲਈ jQuery ਸਟੇਟਮੈਂਟ ਲਿਖ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ:
$(selector).action();ਉਹ ਕਿਥੇ ਹੈ, $(selector) ਇਹ ਮੂਲ ਰੂਪ ਵਿੱਚ DOM ਟ੍ਰੀ ਤੋਂ HTML ਤੱਤਾਂ ਦੀ ਚੋਣ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਇਸਨੂੰ ਹੇਰਾਫੇਰੀ ਕੀਤਾ ਜਾ ਸਕੇ ਅਤੇ action() ਚੁਣੇ ਹੋਏ ਤੱਤਾਂ 'ਤੇ ਕੁਝ ਕਾਰਵਾਈਆਂ ਲਾਗੂ ਕਰੋ, ਜਿਵੇਂ ਕਿ CSS ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਮੁੱਲ ਨੂੰ ਬਦਲਣਾ, ਜਾਂ ਤੱਤ ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਸੈੱਟ ਕਰਨਾ, ਆਦਿ।
ਆਉ ਹੁਣ ਇੱਕ ਹੋਰ ਉਦਾਹਰਨ ਵੇਖੀਏ ਜੋ ਪੈਰਾਗ੍ਰਾਫ ਟੈਕਸਟ ਸੈਟ ਕਰਦਾ ਹੈ:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("p").text("Hello World!");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>jQuery ਉਦਾਹਰਨ ਚੋਣਕਾਰ ਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ p, ਅਤੇ ਇਹ ਸਾਰੇ ਪੈਰੇ ਚੁਣਦਾ ਹੈ, ਫਿਰ ਵਿਧੀ text() ਪੈਰਾ ਦੀ ਟੈਕਸਟ ਸਮੱਗਰੀ ਨੂੰ “ਦੇ ਨਾਲ ਸੈੱਟ ਕਰੋHello World!".
ਜਦੋਂ ਦਸਤਾਵੇਜ਼ ਤਿਆਰ ਹੁੰਦਾ ਹੈ ਤਾਂ ਪਿਛਲੀ ਉਦਾਹਰਨ ਵਿੱਚ ਪੈਰਾਗ੍ਰਾਫ ਟੈਕਸਟ ਆਪਣੇ ਆਪ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ। ਪਰ ਆਓ ਦੇਖੀਏ ਕਿ ਜੇ ਤੁਸੀਂ ਪੈਰਾਗ੍ਰਾਫ ਦੇ ਟੈਕਸਟ ਨੂੰ ਬਦਲਣ ਲਈ jQuery ਕੋਡ ਨੂੰ ਚਲਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਕੋਈ ਕਾਰਵਾਈ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਇਸਨੂੰ ਕਿਵੇਂ ਕਰਨਾ ਹੈ।
ਆਉ ਇੱਕ ਆਖਰੀ ਉਦਾਹਰਣ ਤੇ ਵਿਚਾਰ ਕਰੀਏ:
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello World!");
});
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
<button type="button">Replace Text</button>
</body>
</html>ਇਸ ਉਦਾਹਰਨ ਵਿੱਚ ਪੈਰਾਗ੍ਰਾਫ ਟੈਕਸਟ ਨੂੰ ਸਿਰਫ਼ ਉਦੋਂ ਹੀ ਬਦਲਿਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਬਟਨ 'ਤੇ ਇੱਕ ਕਲਿੱਕ ਘਟਨਾ ਵਾਪਰਦੀ ਹੈ "Replace Text", ਜਿਸਦਾ ਸਿੱਧਾ ਮਤਲਬ ਹੈ ਜਦੋਂ ਕੋਈ ਉਪਭੋਗਤਾ ਇਸ ਬਟਨ ਨੂੰ ਕਲਿਕ ਕਰਦਾ ਹੈ।
ਤੁਸੀਂ ਪੰਨੇ 'ਤੇ ਵਿਲੱਖਣ ID ਵਾਲੀ ਇੱਕ ਆਈਟਮ ਨੂੰ ਚੁਣਨ ਲਈ ID ਚੋਣਕਾਰ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।
ਉਦਾਹਰਨ ਲਈ, ਹੇਠਾਂ ਦਿੱਤਾ jQuery ਕੋਡ ID ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਇੱਕ ਤੱਤ ਨੂੰ ਚੁਣੇਗਾ ਅਤੇ ਹਾਈਲਾਈਟ ਕਰੇਗਾ id="markid", ਜਦੋਂ ਦਸਤਾਵੇਜ਼ ਤਿਆਰ ਹੁੰਦਾ ਹੈ।
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>ਕਲਾਸ ਸਿਲੈਕਟਰ ਦੀ ਵਰਤੋਂ ਕਿਸੇ ਖਾਸ ਕਲਾਸ ਵਾਲੇ ਤੱਤਾਂ ਦੀ ਚੋਣ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ।
ਉਦਾਹਰਨ ਲਈ, ਹੇਠਾਂ ਦਿੱਤਾ jQuery ਕੋਡ ਕਲਾਸ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਐਲੀਮੈਂਟਸ ਨੂੰ ਚੁਣੇਗਾ ਅਤੇ ਹਾਈਲਾਈਟ ਕਰੇਗਾ class="markclass", ਜਦੋਂ ਦਸਤਾਵੇਜ਼ ਤਿਆਰ ਹੁੰਦਾ ਹੈ।
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>ਆਈਟਮ ਚੋਣਕਾਰ ਦੀ ਵਰਤੋਂ ਆਈਟਮ ਦੇ ਨਾਮ ਦੁਆਰਾ ਆਈਟਮਾਂ ਦੀ ਚੋਣ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ।
ਉਦਾਹਰਨ ਲਈ, ਹੇਠਾਂ ਦਿੱਤਾ jQuery ਕੋਡ ਸਾਰੇ ਪੈਰਾਗ੍ਰਾਫ ਨੂੰ ਚੁਣੇਗਾ ਅਤੇ ਉਜਾਗਰ ਕਰੇਗਾ, ਭਾਵ ਤੱਤ "<p>" ਦਸਤਾਵੇਜ਼ ਦੇ ਤਿਆਰ ਹੋਣ 'ਤੇ।
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>ਤੁਸੀਂ ਐਟਰੀਬਿਊਟ ਸਿਲੈਕਟਰ ਦੀ ਵਰਤੋਂ ਇਸ ਦੇ HTML ਗੁਣਾਂ ਵਿੱਚੋਂ ਕਿਸੇ ਇੱਕ ਦੇ ਆਧਾਰ 'ਤੇ ਕਰਨ ਲਈ ਕਰ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ ਲਿੰਕ ਵਿਸ਼ੇਸ਼ਤਾ targetਜਾਂ ਇੱਕ ਇੰਪੁੱਟ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ type, ਆਦਿ.
ਉਦਾਹਰਨ ਲਈ, ਹੇਠਾਂ ਦਿੱਤਾ jQuery ਕੋਡ ਸਾਰੇ ਟੈਕਸਟ ਇਨਪੁਟਸ ਨੂੰ ਚੁਣੇਗਾ ਅਤੇ ਉਜਾਗਰ ਕਰੇਗਾ, ਜਿਵੇਂ ਕਿ ਤੱਤ "<input>" ਨਾਲ type="text", ਜਦੋਂ ਦਸਤਾਵੇਜ਼ ਤਿਆਰ ਹੁੰਦਾ ਹੈ।
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>ਤੁਸੀਂ ਆਪਣੀ ਚੋਣ ਨੂੰ ਹੋਰ ਵੀ ਸਟੀਕ ਬਣਾਉਣ ਲਈ CSS ਚੋਣਕਾਰਾਂ ਨੂੰ ਜੋੜ ਸਕਦੇ ਹੋ।
ਉਦਾਹਰਨ ਲਈ, ਤੁਸੀਂ ਇੱਕ ਖਾਸ ਕਿਸਮ ਅਤੇ ਕਲਾਸ ਵਾਲੇ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਤੱਤ ਲੱਭਣ ਲਈ ਇੱਕ ਐਲੀਮੈਂਟ ਚੋਣਕਾਰ ਨਾਲ ਕਲਾਸ ਚੋਣਕਾਰ ਨੂੰ ਜੋੜ ਸਕਦੇ ਹੋ।
<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "red");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "yellow");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>ਚੋਣਕਾਰਾਂ ਤੋਂ ਇਲਾਵਾ ਸੀ definiti, jQuery ਇੱਕ ਪੰਨੇ 'ਤੇ ਤੱਤ ਚੁਣਨ ਦੀਆਂ ਸਮਰੱਥਾਵਾਂ ਨੂੰ ਹੋਰ ਵਧਾਉਣ ਲਈ ਆਪਣਾ ਖੁਦ ਦਾ ਕਸਟਮ ਚੋਣਕਾਰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
<script>
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");
// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>ਇਵੈਂਟਸ ਅਕਸਰ ਵੈਬ ਪੇਜ ਦੇ ਨਾਲ ਉਪਭੋਗਤਾ ਇੰਟਰੈਕਸ਼ਨ ਦੁਆਰਾ ਸ਼ੁਰੂ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਜਿਵੇਂ ਕਿ ਜਦੋਂ ਇੱਕ ਲਿੰਕ ਜਾਂ ਬਟਨ ਤੇ ਕਲਿਕ ਕਰਨਾ, ਇੱਕ ਇਨਪੁਟ ਬਾਕਸ ਜਾਂ ਟੈਕਸਟ ਖੇਤਰ ਵਿੱਚ ਟੈਕਸਟ ਦਰਜ ਕਰਨਾ, ਇੱਕ ਚੋਣ ਬਾਕਸ ਵਿੱਚ ਇੱਕ ਚੋਣ ਕਰਨਾ, ਕੀਬੋਰਡ ਤੇ ਇੱਕ ਕੁੰਜੀ ਦਬਾਓ, ਮਾਊਸ ਪੁਆਇੰਟਰ ਨੂੰ ਹਿਲਾਓ , ਆਦਿ ਕੁਝ ਮਾਮਲਿਆਂ ਵਿੱਚ, ਬ੍ਰਾਊਜ਼ਰ ਖੁਦ ਈਵੈਂਟਾਂ ਨੂੰ ਟਰਿੱਗਰ ਕਰ ਸਕਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਪੰਨਾ ਲੋਡ ਕਰਨਾ ਅਤੇ ਇਵੈਂਟਾਂ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰਨਾ।
jQuery ਜ਼ਿਆਦਾਤਰ ਮੂਲ ਬ੍ਰਾਊਜ਼ਰ ਇਵੈਂਟਾਂ ਲਈ ਇਵੈਂਟ ਵਿਧੀਆਂ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰਕੇ ਬੁਨਿਆਦੀ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਵਿਧੀਆਂ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦਾ ਹੈ, ਇਹਨਾਂ ਵਿੱਚੋਂ ਕੁਝ ਵਿਧੀਆਂ ਹਨ ready(), click(), keypress(), focus(), blur(), change(), ਆਦਿ.
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>ਆਮ ਤੌਰ 'ਤੇ, ਘਟਨਾਵਾਂ ਨੂੰ ਚਾਰ ਮੁੱਖ ਸਮੂਹਾਂ ਵਿੱਚ ਵੰਡਿਆ ਜਾ ਸਕਦਾ ਹੈ:
ਇੱਕ ਮਾਊਸ ਇਵੈਂਟ ਉਦੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਉਪਭੋਗਤਾ ਕਿਸੇ ਆਈਟਮ 'ਤੇ ਕਲਿੱਕ ਕਰਦਾ ਹੈ, ਮਾਊਸ ਪੁਆਇੰਟਰ ਨੂੰ ਹਿਲਾਉਂਦਾ ਹੈ, ਆਦਿ।
ਇੱਥੇ ਮਾਊਸ ਇਵੈਂਟਸ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਕੁਝ ਆਮ ਤੌਰ 'ਤੇ ਵਰਤੇ ਜਾਂਦੇ jQuery ਢੰਗ ਹਨ।
click().ੰਗ click() ਇਵੈਂਟ ਲਈ ਚੁਣੇ ਗਏ ਤੱਤਾਂ ਨਾਲ ਇੱਕ ਇਵੈਂਟ ਹੈਂਡਲਰ ਫੰਕਸ਼ਨ ਜੋੜੋ "click". ਲਿੰਕਡ ਫੰਕਸ਼ਨ ਉਦੋਂ ਚੱਲਦਾ ਹੈ ਜਦੋਂ ਉਪਭੋਗਤਾ ਉਸ ਆਈਟਮ 'ਤੇ ਕਲਿਕ ਕਰਦਾ ਹੈ। ਹੇਠ ਦਿੱਤੀ ਉਦਾਹਰਨ ਤੱਤਾਂ ਨੂੰ ਲੁਕਾ ਦੇਵੇਗੀ <p> ਇੱਕ ਪੰਨੇ 'ਤੇ ਜਦੋਂ ਕਲਿੱਕ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick().ੰਗ dblclick() ਇਵੈਂਟ ਲਈ ਚੁਣੇ ਗਏ ਤੱਤਾਂ ਨਾਲ ਇੱਕ ਇਵੈਂਟ ਹੈਂਡਲਰ ਫੰਕਸ਼ਨ ਜੋੜੋ "dblclick". ਲਿੰਕਡ ਫੰਕਸ਼ਨ ਉਦੋਂ ਚੱਲਦਾ ਹੈ ਜਦੋਂ ਉਪਭੋਗਤਾ ਉਸ ਆਈਟਮ 'ਤੇ ਦੋ ਵਾਰ ਕਲਿੱਕ ਕਰਦਾ ਹੈ। ਹੇਠ ਦਿੱਤੀ ਉਦਾਹਰਨ ਤੱਤਾਂ ਨੂੰ ਲੁਕਾ ਦੇਵੇਗੀ <p> ਜਦੋਂ ਉਹਨਾਂ 'ਤੇ ਡਬਲ-ਕਲਿੱਕ ਕਰੋ।
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover().ੰਗ hover() ਇੱਕ ਜਾਂ ਦੋ ਈਵੈਂਟ ਹੈਂਡਲਰ ਫੰਕਸ਼ਨਾਂ ਨੂੰ ਚੁਣੇ ਹੋਏ ਐਲੀਮੈਂਟਸ ਨਾਲ ਜੋੜੋ ਜੋ ਐਗਜ਼ੀਕਿਊਟ ਕਰਦੇ ਹਨ ਜਦੋਂ ਮਾਊਸ ਪੁਆਇੰਟਰ ਐਲੀਮੈਂਟਸ ਦੇ ਅੰਦਰ ਅਤੇ ਬਾਹਰ ਜਾਂਦਾ ਹੈ। ਪਹਿਲਾ ਫੰਕਸ਼ਨ ਉਦੋਂ ਚੱਲਦਾ ਹੈ ਜਦੋਂ ਉਪਭੋਗਤਾ ਕਿਸੇ ਆਈਟਮ ਉੱਤੇ ਮਾਊਸ ਪੁਆਇੰਟਰ ਰੱਖਦਾ ਹੈ, ਜਦੋਂ ਕਿ ਦੂਜਾ ਫੰਕਸ਼ਨ ਉਦੋਂ ਚੱਲਦਾ ਹੈ ਜਦੋਂ ਉਪਭੋਗਤਾ ਉਸ ਆਈਟਮ ਤੋਂ ਮਾਊਸ ਪੁਆਇੰਟਰ ਨੂੰ ਹਟਾ ਦਿੰਦਾ ਹੈ।
ਹੇਠ ਦਿੱਤੀ ਉਦਾਹਰਨ ਆਈਟਮਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰੇਗੀ <p> ਜਦੋਂ ਤੁਸੀਂ ਇਸ 'ਤੇ ਕਰਸਰ ਰੱਖਦੇ ਹੋ, ਜਦੋਂ ਤੁਸੀਂ ਕਰਸਰ ਨੂੰ ਹਟਾਉਂਦੇ ਹੋ ਤਾਂ ਹਾਈਲਾਈਟ ਹਟਾ ਦਿੱਤੀ ਜਾਵੇਗੀ।
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter().ੰਗ mouseenter() ਇੱਕ ਇਵੈਂਟ ਹੈਂਡਲਰ ਫੰਕਸ਼ਨ ਨੂੰ ਚੁਣੇ ਹੋਏ ਤੱਤਾਂ ਨਾਲ ਜੋੜੋ ਜੋ ਕਿ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਮਾਊਸ ਇੱਕ ਐਲੀਮੈਂਟ ਵਿੱਚ ਦਾਖਲ ਹੁੰਦਾ ਹੈ। ਹੇਠ ਦਿੱਤੀ ਉਦਾਹਰਨ ਐਲੀਮੈਂਟ ਵਿੱਚ ਕਲਾਸ ਹਾਈਲਾਈਟਿੰਗ ਨੂੰ ਸ਼ਾਮਲ ਕਰੇਗੀ <p> ਜਦੋਂ ਤੁਸੀਂ ਇਸ ਉੱਤੇ ਕਰਸਰ ਰੱਖਦੇ ਹੋ।
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave().ੰਗ mouseleave() ਚੁਣੀਆਂ ਗਈਆਂ ਆਈਟਮਾਂ ਨਾਲ ਇੱਕ ਇਵੈਂਟ ਹੈਂਡਲਰ ਫੰਕਸ਼ਨ ਜੋੜੋ ਜੋ ਉਦੋਂ ਚੱਲਦਾ ਹੈ ਜਦੋਂ ਮਾਊਸ ਇੱਕ ਆਈਟਮ ਨੂੰ ਛੱਡਦਾ ਹੈ। ਹੇਠ ਦਿੱਤੀ ਉਦਾਹਰਨ ਐਲੀਮੈਂਟ ਤੋਂ ਕਲਾਸ ਹਾਈਲਾਈਟ ਨੂੰ ਹਟਾ ਦੇਵੇਗੀ <p> ਜਦੋਂ ਤੁਸੀਂ ਇਸ ਤੋਂ ਕਰਸਰ ਨੂੰ ਹਟਾਉਂਦੇ ਹੋ।
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>ਇੱਕ ਕੀਬੋਰਡ ਇਵੈਂਟ ਉਦੋਂ ਉਠਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਉਪਭੋਗਤਾ ਕੀਬੋਰਡ 'ਤੇ ਇੱਕ ਕੁੰਜੀ ਨੂੰ ਦਬਾਉ ਜਾਂ ਜਾਰੀ ਕਰਦਾ ਹੈ। ਆਉ ਕੀਬੋਰਡ ਇਵੈਂਟਸ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਕੁਝ ਆਮ ਤੌਰ 'ਤੇ ਵਰਤੇ ਜਾਂਦੇ jQuery ਤਰੀਕਿਆਂ ਨੂੰ ਵੇਖੀਏ।
keypress().ੰਗ keypress() ਚੁਣੇ ਹੋਏ ਤੱਤਾਂ (ਆਮ ਤੌਰ 'ਤੇ ਫਾਰਮ ਨਿਯੰਤਰਣ) ਨਾਲ ਇੱਕ ਇਵੈਂਟ-ਹੈਂਡਲਿੰਗ ਫੰਕਸ਼ਨ ਜੋੜਦਾ ਹੈ ਜੋ ਉਦੋਂ ਚੱਲਦਾ ਹੈ ਜਦੋਂ ਬ੍ਰਾਊਜ਼ਰ ਉਪਭੋਗਤਾ ਤੋਂ ਕੀਬੋਰਡ ਇਨਪੁਟ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ। ਹੇਠ ਦਿੱਤੀ ਉਦਾਹਰਨ ਇੱਕ ਸੁਨੇਹਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੇਗੀ ਜਦੋਂ ਇਵੈਂਟ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ keypress ਅਤੇ ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਕੀਬੋਰਡ 'ਤੇ ਕੁੰਜੀ ਨੂੰ ਦਬਾਉਂਦੇ ਹੋ ਤਾਂ ਇਹ ਕਿੰਨੀ ਵਾਰ ਚਾਲੂ ਹੁੰਦਾ ਹੈ।
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>ਕੀਪ੍ਰੈਸ ਇਵੈਂਟ ਕੀਡਾਊਨ ਈਵੈਂਟ ਵਰਗਾ ਹੈ, ਸਿਵਾਏ ਉਸ ਮੋਡੀਫਾਇਰ ਅਤੇ ਗੈਰ-ਪ੍ਰਿੰਟਿੰਗ ਕੁੰਜੀਆਂ ਜਿਵੇਂ ਕਿ ਸ਼ਿਫਟ, Esc, ਬੈਕਸਪੇਸ ਜਾਂ ਮਿਟਾਓ, ਐਰੋ ਕੁੰਜੀਆਂ, ਆਦਿ। ਉਹ ਕੀ-ਡਾਊਨ ਇਵੈਂਟਾਂ ਨੂੰ ਫਾਇਰ ਕਰਦੇ ਹਨ ਪਰ ਕੀ-ਪ੍ਰੈਸ ਇਵੈਂਟਾਂ ਨੂੰ ਨਹੀਂ।
keydown().ੰਗ keydown() ਚੁਣੀਆਂ ਗਈਆਂ ਆਈਟਮਾਂ (ਆਮ ਤੌਰ 'ਤੇ ਫਾਰਮ ਨਿਯੰਤਰਣ) ਨਾਲ ਇੱਕ ਇਵੈਂਟ-ਹੈਂਡਲਿੰਗ ਫੰਕਸ਼ਨ ਨੱਥੀ ਕਰਦਾ ਹੈ ਜੋ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਉਪਭੋਗਤਾ ਪਹਿਲੀ ਵਾਰ ਕੀਬੋਰਡ 'ਤੇ ਇੱਕ ਕੁੰਜੀ ਦਬਾਉਂਦਾ ਹੈ। ਹੇਠ ਦਿੱਤੀ ਉਦਾਹਰਨ ਇੱਕ ਸੁਨੇਹਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੇਗੀ ਜਦੋਂ ਇਵੈਂਟ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ keydown ਅਤੇ ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਕੀਬੋਰਡ 'ਤੇ ਕੁੰਜੀ ਨੂੰ ਦਬਾਉਂਦੇ ਹੋ ਤਾਂ ਇਹ ਕਿੰਨੀ ਵਾਰ ਚਾਲੂ ਹੁੰਦਾ ਹੈ।
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup().ੰਗ keyup() ਚੁਣੇ ਹੋਏ ਤੱਤਾਂ (ਆਮ ਤੌਰ 'ਤੇ ਫਾਰਮ ਨਿਯੰਤਰਣ) ਨਾਲ ਇੱਕ ਇਵੈਂਟ-ਹੈਂਡਲਿੰਗ ਫੰਕਸ਼ਨ ਨੱਥੀ ਕਰੋ ਜੋ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਉਪਭੋਗਤਾ ਕੀਬੋਰਡ 'ਤੇ ਇੱਕ ਕੁੰਜੀ ਜਾਰੀ ਕਰਦਾ ਹੈ। ਹੇਠ ਦਿੱਤੀ ਉਦਾਹਰਨ ਇੱਕ ਸੁਨੇਹਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੇਗੀ ਜਦੋਂ ਇਵੈਂਟ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ keyup ਅਤੇ ਇਹ ਕਿੰਨੀ ਵਾਰ ਚਾਲੂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਕੀਬੋਰਡ 'ਤੇ ਇੱਕ ਕੁੰਜੀ ਨੂੰ ਦਬਾਉਂਦੇ ਅਤੇ ਜਾਰੀ ਕਰਦੇ ਹੋ।
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>ਇੱਕ ਫਾਰਮ ਇਵੈਂਟ ਉਦੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਇੱਕ ਫਾਰਮ ਨਿਯੰਤਰਣ ਫੋਕਸ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ ਜਾਂ ਗੁਆ ਦਿੰਦਾ ਹੈ, ਜਾਂ ਜਦੋਂ ਉਪਭੋਗਤਾ ਇੱਕ ਫਾਰਮ ਨਿਯੰਤਰਣ ਮੁੱਲ ਨੂੰ ਬਦਲਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਟੈਕਸਟ ਇਨਪੁਟ ਵਿੱਚ ਟੈਕਸਟ ਟਾਈਪ ਕਰਨਾ, ਇੱਕ ਚੋਣ ਬਾਕਸ ਵਿੱਚ ਇੱਕ ਵਿਕਲਪ ਚੁਣਨਾ, ਆਦਿ। ਫਾਰਮ ਇਵੈਂਟਸ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਇੱਥੇ ਕੁਝ ਆਮ ਤੌਰ 'ਤੇ ਵਰਤੇ ਜਾਂਦੇ jQuery ਢੰਗ ਹਨ।
change().ੰਗ change() ਇੱਕ ਈਵੈਂਟ ਹੈਂਡਲਰ ਫੰਕਸ਼ਨ ਨੂੰ ਤੱਤਾਂ ਨਾਲ ਜੋੜੋ <input> ਅਤੇ ਇਸ ਨੂੰ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਇਸਦਾ ਮੁੱਲ ਬਦਲਦਾ ਹੈ। ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਡ੍ਰੌਪ ਡਾਊਨ ਚੋਣ ਬਾਕਸ ਵਿੱਚ ਇੱਕ ਵਿਕਲਪ ਦੀ ਚੋਣ ਕਰਨ ਵੇਲੇ ਇੱਕ ਚੇਤਾਵਨੀ ਸੁਨੇਹਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੇਗੀ।
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>ਕਲਿਕ ਬਾਕਸਾਂ, ਚੈਕ ਬਾਕਸਾਂ ਅਤੇ ਰੇਡੀਓ ਬਟਨਾਂ ਲਈ, ਜਦੋਂ ਉਪਭੋਗਤਾ ਮਾਊਸ ਦੀ ਚੋਣ ਕਰਦਾ ਹੈ ਤਾਂ ਇਵੈਂਟ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦਾ ਹੈ, ਪਰ ਟੈਕਸਟ ਇਨਪੁਟ ਅਤੇ ਟੈਕਸਟ ਖੇਤਰ ਲਈ ਤੱਤ ਦੇ ਫੋਕਸ ਗੁਆ ਦੇਣ ਤੋਂ ਬਾਅਦ ਇਵੈਂਟ ਫਾਇਰ ਹੋ ਜਾਂਦਾ ਹੈ।
focus().ੰਗ focus() ਇੱਕ ਇਵੈਂਟ ਹੈਂਡਲਰ ਫੰਕਸ਼ਨ ਨੂੰ ਚੁਣੇ ਹੋਏ ਤੱਤਾਂ (ਆਮ ਤੌਰ 'ਤੇ ਨਿਯੰਤਰਣ ਅਤੇ ਫਾਰਮ ਬਾਈਡਿੰਗ) ਨਾਲ ਜੋੜਦਾ ਹੈ ਜੋ ਫੋਕਸ ਹੋਣ 'ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ। ਜਦੋਂ ਟੈਕਸਟ ਇੰਪੁੱਟ ਫੋਕਸ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ ਤਾਂ ਹੇਠ ਦਿੱਤੀ ਉਦਾਹਰਨ ਇੱਕ ਸੁਨੇਹਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੇਗੀ।
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur().ੰਗ blur() ਤੱਤ ਬਣਾਉਣ ਲਈ ਇੱਕ ਇਵੈਂਟ ਹੈਂਡਲਰ ਫੰਕਸ਼ਨ ਜੋੜੋ ਜਿਵੇਂ ਕਿ <input>, <textarea>, <select> ਜਿਸ ਨੂੰ ਉਦੋਂ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਇਹ ਫੋਕਸ ਗੁਆ ਦਿੰਦਾ ਹੈ। ਹੇਠ ਦਿੱਤੀ ਉਦਾਹਰਨ ਇੱਕ ਸੁਨੇਹਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੇਗੀ ਜਦੋਂ ਟੈਕਸਟ ਇੰਪੁੱਟ ਫੋਕਸ ਗੁਆ ਦਿੰਦਾ ਹੈ।
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit().ੰਗ submit() ਇੱਕ ਈਵੈਂਟ ਹੈਂਡਲਰ ਫੰਕਸ਼ਨ ਨੂੰ ਤੱਤਾਂ ਨਾਲ ਜੋੜੋ <form> ਜੋ ਉਦੋਂ ਚੱਲਦਾ ਹੈ ਜਦੋਂ ਉਪਭੋਗਤਾ ਇੱਕ ਫਾਰਮ ਜਮ੍ਹਾਂ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦਾ ਹੈ। ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਫਾਰਮ ਨੂੰ ਜਮ੍ਹਾਂ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਵੇਲੇ ਦਾਖਲ ਕੀਤੇ ਮੁੱਲ ਦੇ ਆਧਾਰ 'ਤੇ ਇੱਕ ਸੁਨੇਹਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੇਗੀ।
<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>ਇਵੈਂਟਸ ਨੂੰ ਅਜਿਹੀ ਸਥਿਤੀ ਵਿੱਚ ਵੀ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਿੱਥੇ DOM (ਦਸਤਾਵੇਜ਼ ਆਬਜੈਕਟ ਮਾਡਲ) ਪੰਨਾ ਤਿਆਰ ਹੁੰਦਾ ਹੈ ਜਾਂ ਜਦੋਂ ਉਪਭੋਗਤਾ ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਨੂੰ ਮੁੜ ਆਕਾਰ ਦਿੰਦਾ ਹੈ ਜਾਂ ਸਕ੍ਰੋਲ ਕਰਦਾ ਹੈ, ਆਦਿ। ਇਸ ਕਿਸਮ ਦੀ ਘਟਨਾ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਇੱਥੇ ਕੁਝ ਆਮ ਤੌਰ 'ਤੇ ਵਰਤੇ ਜਾਂਦੇ jQuery ਢੰਗ ਹਨ।
ready().ੰਗ ready() ਜਦੋਂ DOM ਪੂਰੀ ਤਰ੍ਹਾਂ ਲੋਡ ਹੁੰਦਾ ਹੈ ਤਾਂ ਚਲਾਉਣ ਲਈ ਇੱਕ ਫੰਕਸ਼ਨ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ।
ਜਿਵੇਂ ਹੀ DOM ਲੜੀ ਪੂਰੀ ਤਰ੍ਹਾਂ ਤਿਆਰ ਹੋ ਜਾਂਦੀ ਹੈ ਅਤੇ ਹੇਰਾਫੇਰੀ ਲਈ ਤਿਆਰ ਹੁੰਦੀ ਹੈ, ਹੇਠ ਦਿੱਤੀ ਉਦਾਹਰਨ ਪੈਰਾਗ੍ਰਾਫ ਟੈਕਸਟ ਨੂੰ ਬਦਲ ਦੇਵੇਗੀ।
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize().ੰਗ resize() ਇੱਕ ਇਵੈਂਟ ਹੈਂਡਲਰ ਫੰਕਸ਼ਨ ਨੂੰ ਵਿੰਡੋ ਐਲੀਮੈਂਟ ਨਾਲ ਜੋੜੋ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਦਾ ਆਕਾਰ ਬਦਲਣ 'ਤੇ ਚੱਲਦਾ ਹੈ।
ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਦੀ ਮੌਜੂਦਾ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਦਿਖਾਏਗੀ ਜਦੋਂ ਤੁਸੀਂ ਇਸਦੇ ਕੋਨਿਆਂ ਨੂੰ ਖਿੱਚ ਕੇ ਇਸਦਾ ਆਕਾਰ ਬਦਲਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹੋ।
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll().ੰਗ scroll() ਇੱਕ ਇਵੈਂਟ ਹੈਂਡਲਰ ਫੰਕਸ਼ਨ ਨੂੰ ਵਿੰਡੋ ਜਾਂ ਨਾਲ ਜੋੜੋ iframe ਅਤੇ ਸਕ੍ਰੋਲ ਕਰਨ ਯੋਗ ਆਈਟਮਾਂ ਜੋ ਚਲਦੀਆਂ ਹਨ ਜਦੋਂ ਵੀ ਆਈਟਮ ਦੀ ਸਕ੍ਰੋਲ ਸਥਿਤੀ ਬਦਲਦੀ ਹੈ।
ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਨੂੰ ਸਕ੍ਰੋਲ ਕਰਨ ਵੇਲੇ ਇੱਕ ਸੁਨੇਹਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੇਗੀ।
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
ਐਪਲ ਵਿਜ਼ਨ ਪ੍ਰੋ ਕਮਰਸ਼ੀਅਲ ਵਿਊਅਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਇੱਕ ਓਫਥਲਮੋਪਲਾਸਟੀ ਓਪਰੇਸ਼ਨ ਕੈਟਾਨੀਆ ਪੌਲੀਕਲੀਨਿਕ ਵਿਖੇ ਕੀਤਾ ਗਿਆ ਸੀ...
ਰੰਗਾਂ ਰਾਹੀਂ ਵਧੀਆ ਮੋਟਰ ਹੁਨਰਾਂ ਦਾ ਵਿਕਾਸ ਕਰਨਾ ਬੱਚਿਆਂ ਨੂੰ ਲਿਖਣ ਵਰਗੇ ਹੋਰ ਗੁੰਝਲਦਾਰ ਹੁਨਰਾਂ ਲਈ ਤਿਆਰ ਕਰਦਾ ਹੈ। ਰੰਗ ਕਰਨ ਲਈ…
ਜਲ ਸੈਨਾ ਖੇਤਰ ਇੱਕ ਸੱਚੀ ਗਲੋਬਲ ਆਰਥਿਕ ਸ਼ਕਤੀ ਹੈ, ਜਿਸ ਨੇ 150 ਬਿਲੀਅਨ ਮਾਰਕੀਟ ਵੱਲ ਨੈਵੀਗੇਟ ਕੀਤਾ ਹੈ...
ਪਿਛਲੇ ਸੋਮਵਾਰ, ਫਾਈਨੈਂਸ਼ੀਅਲ ਟਾਈਮਜ਼ ਨੇ ਓਪਨਏਆਈ ਨਾਲ ਇੱਕ ਸੌਦੇ ਦਾ ਐਲਾਨ ਕੀਤਾ। FT ਆਪਣੀ ਵਿਸ਼ਵ ਪੱਧਰੀ ਪੱਤਰਕਾਰੀ ਨੂੰ ਲਾਇਸੰਸ ਦਿੰਦਾ ਹੈ...