ಅಜಾಕ್ಸ್ ಆಧಾರಿತ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ರಚಿಸುವುದು jQuery ಯೊಂದಿಗೆ ತುಂಬಾ ಸರಳ ಮತ್ತು ವೇಗವಾಗಿರುತ್ತದೆ.
jQuery ಅನ್ನು ಮೂಲತಃ 2006 ರ ಆರಂಭದಲ್ಲಿ ಜಾನ್ ರೆಸಿಗ್ ರಚಿಸಿದರು. jQuery ಯೋಜನೆಯನ್ನು ಪ್ರಸ್ತುತ ಡೆವಲಪರ್‌ಗಳ ವಿತರಣಾ ಗುಂಪಿನಿಂದ ಮುಕ್ತ ಮೂಲ ಯೋಜನೆಯಾಗಿ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ.
ನೀವು jQuery ಯೊಂದಿಗೆ ಸಾಕಷ್ಟು ಸಮಯ ಮತ್ತು ಶ್ರಮವನ್ನು ಉಳಿಸಬಹುದು. ಆದ್ದರಿಂದ ಈ ಸೈಟ್ ಅನ್ನು ನಿಮ್ಮ ಮೆಚ್ಚಿನವುಗಳಿಗೆ ಸೇರಿಸಿ ಮತ್ತು ಓದುವುದನ್ನು ಮುಂದುವರಿಸಿ
ನೀವು jQuery ಯೊಂದಿಗೆ ಮಾಡಬಹುದಾದ ಹಲವು ವಿಷಯಗಳಿವೆ.
ಪಟ್ಟಿಯು ಅಲ್ಲಿಗೆ ಕೊನೆಗೊಳ್ಳುವುದಿಲ್ಲ, jQuery ಯೊಂದಿಗೆ ನೀವು ಮಾಡಬಹುದಾದ ಅನೇಕ ಇತರ ಉತ್ತಮ ವಿಷಯಗಳಿವೆ.
jQuery ಅನ್ನು ಏಕೆ ಬಳಸಬೇಕೆಂದು ಹಲವಾರು ಪ್ರಯೋಜನಗಳಿವೆ:
ಪ್ರಾರಂಭಿಸಲು, ನಾವು ಮೊದಲು jQuery ನ ನಕಲನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡೋಣ ಮತ್ತು ನಂತರ ಅದನ್ನು ನಮ್ಮ ಯೋಜನೆಯಲ್ಲಿ ಸೇರಿಸೋಣ. jQuery ಯ ಎರಡು ಆವೃತ್ತಿಗಳು ಡೌನ್‌ಲೋಡ್‌ಗೆ ಲಭ್ಯವಿದೆ: ಆತುರದಲ್ಲಿ e ಸಂಕುಚಿತಗೊಂಡಿಲ್ಲ .
ಸಂಕ್ಷೇಪಿಸದ ಫೈಲ್ ಅಭಿವೃದ್ಧಿ ಅಥವಾ ಡೀಬಗ್ ಮಾಡಲು ಹೆಚ್ಚು ಸೂಕ್ತವಾಗಿರುತ್ತದೆ; ಅದೇ ಸಮಯದಲ್ಲಿ, ಮಿನಿಫೈಡ್ ಮತ್ತು ಸಂಕುಚಿತ ಫೈಲ್ ಅನ್ನು ಉತ್ಪಾದನೆಗೆ ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ ಏಕೆಂದರೆ ಇದು ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಅನ್ನು ಉಳಿಸುತ್ತದೆ ಮತ್ತು ಚಿಕ್ಕ ಫೈಲ್ ಗಾತ್ರದ ಕಾರಣ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
ನಾವು jQuery ಅನ್ನು ಇಲ್ಲಿಂದ ಡೌನ್‌ಲೋಡ್ ಮಾಡಬಹುದು: https://jquery.com/download/
ಒಮ್ಮೆ ನೀವು jQuery ಫೈಲ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿದ ನಂತರ ಅದು js ವಿಸ್ತರಣೆಯನ್ನು ಹೊಂದಿದೆ ಎಂದು ನೀವು ನೋಡಬಹುದು, ಅಂದರೆ ಅದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್ ಆಗಿದೆ. ವಾಸ್ತವವಾಗಿ JQuery ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಯೇ ಹೊರತು ಬೇರೇನೂ ಅಲ್ಲ, ಆದ್ದರಿಂದ ನೀವು jQuery ಫೈಲ್ ಅನ್ನು HTML ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ಅಂಶದೊಂದಿಗೆ ಸೇರಿಸಬಹುದು ನೀವು ಸಾಮಾನ್ಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳನ್ನು ಸೇರಿಸಿದಂತೆ.
<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 ಕೋಡ್ ಅವುಗಳನ್ನು ಪ್ರವೇಶಿಸಲು ಪ್ರಯತ್ನಿಸಿದಾಗ jQuery API ಗಳು ಲಭ್ಯವಿರುವುದಿಲ್ಲ.
ನೀವು ಗಮನಿಸಿದಂತೆ, ಹಿಂದಿನ ಉದಾಹರಣೆಯಲ್ಲಿ ನಾವು ಗುಣಲಕ್ಷಣವನ್ನು ಬಿಟ್ಟುಬಿಟ್ಟಿದ್ದೇವೆ 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 ಮೈಕ್ರೋಸಾಫ್ಟ್ ಸಿಡಿಎನ್.
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 ಕೇವಲ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಯಾಗಿದೆ, jQuery ಕೋಡ್ ಅನ್ನು ಅಂಶದ ಒಳಗೆ ಇರಿಸಬಹುದು <script>, ಅಥವಾ ನೀವು ಅದನ್ನು ಬಾಹ್ಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ನಲ್ಲಿ ಇರಿಸಬಹುದು;$(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="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
.
Veeam ನಿಂದ Coveware ಸೈಬರ್ ಸುಲಿಗೆ ಘಟನೆಯ ಪ್ರತಿಕ್ರಿಯೆ ಸೇವೆಗಳನ್ನು ಒದಗಿಸುವುದನ್ನು ಮುಂದುವರಿಸುತ್ತದೆ. ಕೋವ್‌ವೇರ್ ಫೋರೆನ್ಸಿಕ್ಸ್ ಮತ್ತು ಪರಿಹಾರ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ನೀಡುತ್ತದೆ…
ಸಸ್ಯ ನಿರ್ವಹಣೆಗೆ ನವೀನ ಮತ್ತು ಪೂರ್ವಭಾವಿ ವಿಧಾನದೊಂದಿಗೆ ಮುನ್ಸೂಚಕ ನಿರ್ವಹಣೆ ತೈಲ ಮತ್ತು ಅನಿಲ ವಲಯದಲ್ಲಿ ಕ್ರಾಂತಿಯನ್ನುಂಟು ಮಾಡುತ್ತಿದೆ.
ಕೃತಕ ಬುದ್ಧಿಮತ್ತೆ ಮಾರುಕಟ್ಟೆಯಲ್ಲಿ ಬಿಗ್ ಟೆಕ್ ನ ವರ್ತನೆಯ ಬಗ್ಗೆ UK CMA ಎಚ್ಚರಿಕೆ ನೀಡಿದೆ. ಅಲ್ಲಿ…
ಕಟ್ಟಡಗಳ ಶಕ್ತಿಯ ದಕ್ಷತೆಯನ್ನು ಹೆಚ್ಚಿಸಲು ಯುರೋಪಿಯನ್ ಯೂನಿಯನ್ ರೂಪಿಸಿದ "ಕೇಸ್ ಗ್ರೀನ್" ತೀರ್ಪು, ಅದರ ಶಾಸಕಾಂಗ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಮುಕ್ತಾಯಗೊಳಿಸಿದೆ…