→ ಆರಂಭಿಕರಿಗಾಗಿ jQuery ಉದಾಹರಣೆಗಳು

jQuery ಎಂಬುದು ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಕಾರ್ಯಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಒಂದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಯಾಗಿದೆ - DOM (ಡಾಕ್ಯುಮೆಂಟ್ ಆಬ್ಜೆಕ್ಟ್ ಮಾಡೆಲ್) ಅಂಶಗಳನ್ನು ಕುಶಲತೆಯಿಂದ ಸುತ್ತುವರಿದ. ಬ್ರೌಸರ್ ಅನ್ನು ಅವಲಂಬಿಸಿ ಅಗತ್ಯವಿರುವ ಯಾಂತ್ರಿಕತೆಯ ಸ್ವಯಂಚಾಲಿತ ಅಪ್ಲಿಕೇಶನ್ ಇದರ ಮುಖ್ಯ ತತ್ವವಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, ID ಮೂಲಕ ಡಾಕ್ಯುಮೆಂಟ್‌ನ html ಅಂಶವನ್ನು ಪಡೆಯುವುದು ವಿಭಿನ್ನ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ವಿಭಿನ್ನವಾಗಿ ಸಂಭವಿಸುತ್ತದೆ. jquery ಮೊದಲು, ನಾನು ಈ ಕಾರ್ಯವನ್ನು ಬಳಸಿದ್ದೇನೆ:

ಫಂಕ್ಷನ್ getObj(objID)( if (document.getElementById) (return document.getElementById(objID);) else if (document.all) (return document.all;) else if (document.layers) (return document.layers;) )

jquery ನಲ್ಲಿ ಅದೇ ಕ್ರಿಯೆಯನ್ನು ಮಾಡಲು, ಇದನ್ನು ಮಾಡಿ:

$("#objID") ಅಥವಾ jQuery("#objID")

$() ಕಾರ್ಯವನ್ನು ಕರೆಯುವುದು jQuery() ಗೆ ಸಮನಾಗಿರುತ್ತದೆ, ಏಕೆಂದರೆ ಮೊದಲನೆಯದು ಎರಡನೆಯದಕ್ಕೆ ಅಲಿಯಾಸ್ ಆಗಿದೆ. ನೀವು jquery ನಂತಹ ಇತರ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸದಿದ್ದರೆ, ನೀವು $() ಮೂಲಕ ನೇಮ್‌ಸ್ಪೇಸ್ ಅನ್ನು ಸುರಕ್ಷಿತವಾಗಿ ಪ್ರವೇಶಿಸಬಹುದು. ಇಲ್ಲದಿದ್ದರೆ, ವಸ್ತುವಿನ ನೇರ ಹೆಸರನ್ನು ಬಳಸುವುದು ಉತ್ತಮ - jQuery. ಇದಲ್ಲದೆ, ಬೇರೆ ಯಾವುದೇ ಗ್ರಂಥಾಲಯಗಳಿಲ್ಲ ಎಂದು ನಾವು ಭಾವಿಸುತ್ತೇವೆ.

jQuery ಯೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸುವುದು

ಆದ್ದರಿಂದ ಪ್ರಾರಂಭಿಸೋಣ. ಅಧಿಕೃತ ಪ್ರಾಜೆಕ್ಟ್ ವೆಬ್‌ಸೈಟ್ http://jquery.com/ ನಿಂದ jquery ಲೈಬ್ರರಿಯ ಇತ್ತೀಚಿನ ಆವೃತ್ತಿಯನ್ನು ಪಡೆಯುವುದು ಅಥವಾ jquery ಅನ್ನು ಇಲ್ಲಿ ಡೌನ್‌ಲೋಡ್ ಮಾಡುವುದು ಮೊದಲ ಹಂತವಾಗಿದೆ. ಆರ್ಕೈವ್‌ನಲ್ಲಿ ಮತ್ತು ಅಧಿಕೃತ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಎರಡು ಆವೃತ್ತಿಗಳಿವೆ: ಸಂಕುಚಿತ ಮತ್ತು ಅಭಿವೃದ್ಧಿಪಡಿಸಲಾಗಿದೆ. ಸೈಟ್ನಲ್ಲಿ ಸಂಕುಚಿತ ಒಂದನ್ನು ಬಳಸುವುದು ಉತ್ತಮ, ಮತ್ತು ನೀವು ಪ್ರಯೋಗ ಮಾಡಲು ಬಯಸಿದರೆ, ಎರಡನೆಯದನ್ನು ಬಳಸಿ. ಮೊದಲನೆಯದಾಗಿ, ನಾವು ಪುಟದ ದೇಹದಲ್ಲಿ jquery ಲೈಬ್ರರಿಯನ್ನು ಸೇರಿಸುತ್ತೇವೆ:

ಇದರ ನಂತರ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನೇಮ್‌ಸ್ಪೇಸ್ ಅನ್ನು $() ಕಾರ್ಯದ ಕರೆಯನ್ನು jquery ಆಕ್ರಮಿಸಿಕೊಂಡಿರುವ ರೀತಿಯಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ ಮತ್ತು $("#objID") ಅಭಿವ್ಯಕ್ತಿಯನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು HTML ಡಾಕ್ಯುಮೆಂಟ್‌ನ ಯಾವುದೇ ಅಂಶವನ್ನು ವಸ್ತುವಾಗಿ ಪಡೆಯಬಹುದು. ಅಲ್ಲಿ objID ವಸ್ತು ID ಆಗಿದೆ.

jQuery ಮತ್ತು CSS

ಮೊದಲ ಉದಾಹರಣೆಯಾಗಿ, jquery ಮತ್ತು CSS ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಎಂಬುದನ್ನು ನೋಡೋಣ. jquery ಅನ್ನು ಬಳಸಿಕೊಂಡು CSS ಅನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸಲು ಎರಡು ಮುಖ್ಯ ಮಾರ್ಗಗಳಿವೆ: ಒಂದು ಗುಣಲಕ್ಷಣ ಅಥವಾ ಹಲವಾರು ಏಕಕಾಲದಲ್ಲಿ ಬದಲಾಯಿಸುವುದು. ಅವುಗಳನ್ನು css() ಕಾರ್ಯದ ಮೂಲಕ ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ. ತಾತ್ವಿಕವಾಗಿ, ಇದು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:

$("#objID").css("ಡಿಸ್ಪ್ಲೇ","ಬ್ಲಾಕ್") $("#objID").css((ಪ್ರದರ್ಶನ:"ಬ್ಲಾಕ್, ಮಾರ್ಜಿನ್:"10px", ಬಣ್ಣ:"#ffffff" ))

ಒಂದು CSS ಗುಣಲಕ್ಷಣವನ್ನು ಬದಲಾಯಿಸುವ ಉದಾಹರಣೆ

ಒಂದು ಗುಣಲಕ್ಷಣವನ್ನು ಬದಲಾಯಿಸುವ ಉದಾಹರಣೆ ಯಶಸ್ವಿಯಾಗಿದೆ!

ಮೂಲ ಕೋಡ್:

ಒಂದು ಗುಣಲಕ್ಷಣವನ್ನು ಬದಲಾಯಿಸುವ ಉದಾಹರಣೆ ಯಶಸ್ವಿಯಾಗಿದೆ!

ಬಹು CSS ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬದಲಾಯಿಸುವ ಉದಾಹರಣೆ

ಬಹು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬದಲಾಯಿಸುವ ಉದಾಹರಣೆ!

ಮೂಲ ಕೋಡ್:

ಫಂಕ್ಷನ್ demo_css())( $("#span2").css((ಬಣ್ಣ:"#ffffff", ಪ್ಯಾಡಿಂಗ್:"5px", ಹಿನ್ನೆಲೆ:"#980000" )); ) ಬಹು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬದಲಾಯಿಸುವ ಉದಾಹರಣೆ!

ಪಠ್ಯ ಮತ್ತು html ಅನ್ನು ಬದಲಾಯಿಸುವುದು

ಪಠ್ಯ ಅಥವಾ html ಕೋಡ್ ಅನ್ನು ಬದಲಾಯಿಸಲು, ಪಠ್ಯ() ಮತ್ತು html() ಕಾರ್ಯಗಳಿವೆ.

$("#objID").text("True la la") $("#objID").html("

ನಿಜ ಲಾ ಲಾ

ಇದಲ್ಲದೆ, ನೀವು ಪಠ್ಯ() ಕಾರ್ಯವನ್ನು ಬಳಸಿಕೊಂಡು HTML ಕೋಡ್ ಅನ್ನು ಸೇರಿಸಲು ಪ್ರಯತ್ನಿಸಿದರೆ, ನೀವು ಅದನ್ನು ಅದರ ಮೂಲ ರೂಪದಲ್ಲಿ ಸ್ವೀಕರಿಸುತ್ತೀರಿ. ಪಠ್ಯ() ಕಾರ್ಯವು ಎಲ್ಲವನ್ನೂ ತಪ್ಪಿಸುತ್ತದೆ.

ಪಠ್ಯ () ಉದಾಹರಣೆ

ಮೂಲ ಕೋಡ್:

ಫಂಕ್ಷನ್ set_text())( $("#span3").text("ಧನ್ಯವಾದಗಳು!"); )

html() ಬಳಸುವ ಉದಾಹರಣೆ

ಮೂಲ ಕೋಡ್:

ಫಂಕ್ಷನ್ set_html())( $("#span4").html("ಧನ್ಯವಾದಗಳು! ಇದು ಹೆಚ್ಚು ಉತ್ತಮವಾಗಿದೆ."); )

jQuery ನೊಂದಿಗೆ ಗುಣಲಕ್ಷಣಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು

attr() ಕಾರ್ಯವು ಯಾವುದೇ ಅಂಶದ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸುತ್ತದೆ. ಅದರ ಸಹಾಯದಿಂದ ನೀವು ಶೀರ್ಷಿಕೆ, href, ಮೌಲ್ಯ, src ಮತ್ತು ಮುಂತಾದವುಗಳನ್ನು ಸೇರಿಸಬಹುದು ಅಥವಾ ಬದಲಾಯಿಸಬಹುದು.

Attr () ಉದಾಹರಣೆ

ಮೂಲ ಕೋಡ್:

ಫಂಕ್ಷನ್ plus_ten())( var cur_value = $("#text").attr("value"); cur_value = parseInt(cur_value) + 10; $("#text").attr("value",cur_value); )

jQuery ನಲ್ಲಿ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು

ಪೂರ್ಣ ಪಟ್ಟಿ http://api.jquery.com/category/events/ ನಲ್ಲಿ ಲಭ್ಯವಿದೆ. ನಾನು ಕೆಲವೇ ಉದಾಹರಣೆಗಳನ್ನು ನೀಡುತ್ತೇನೆ. ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದ ಆನ್‌ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್. jQuery ನಲ್ಲಿ ನೀವು ಕ್ಲಿಕ್ () ಕಾರ್ಯದ ಮೂಲಕ ಅದನ್ನು ಪ್ರತಿಬಂಧಿಸಬಹುದು.

ಕ್ಲಿಕ್ ಮಾಡಿ() ಉದಾಹರಣೆ

ಮೂಲ ಕೋಡ್:

$("#ಬಟ್").ಕ್ಲಿಕ್(ಫಂಕ್ಷನ್())( ಎಚ್ಚರಿಕೆ("ನೀವು ಅದನ್ನು ಪರಿಶೀಲಿಸಲು ನಿರ್ಧರಿಸಿದ್ದೀರಾ?"); ));

ಕೀಅಪ್ () ಉದಾಹರಣೆ

ಏನನ್ನಾದರೂ ನಮೂದಿಸಿ:

ನೀವು ನಮೂದಿಸಿದ:

ಮೂಲ ಕೋಡ್:

ಏನನ್ನಾದರೂ ನಮೂದಿಸಿ:
ನೀವು ನಮೂದಿಸಿದ: $("#text2").keyup(function())( if ($("#text2")val())( $("#text2_target").css((ಹಿನ್ನೆಲೆ:"#980000" ) ) ಬೇರೆ ($("#text2_Target").css((ಹಿನ್ನೆಲೆ:"#ffffff")); ) $("#text2_target").text($("#text2").val()); );

ಬೈಂಡ್ () ಬಳಸುವ ಉದಾಹರಣೆ

ನನ್ನ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ!

ಮೂಲ ಕೋಡ್:

div#log( ಹಿನ್ನೆಲೆ:#1C93A5; ಅಗಲ:300px; ಎತ್ತರ:100px; ಪ್ಯಾಡಿಂಗ್:10px; ಬಣ್ಣ:#fff; ) ನನ್ನ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ!
$(ಡಾಕ್ಯುಮೆಂಟ್).ರೆಡಿ(ಫಂಕ್ಷನ್() ( $("#ಲಾಗ್").ಬೈಂಡ್("ಕ್ಲಿಕ್", ಫಂಕ್ಷನ್(ಇ) ($("#ಕೋರ್ಡ್").html("X ನಿರ್ದೇಶಾಂಕ: "+ e.pageX + " Y ನಿರ್ದೇಶಾಂಕ: " + e.pageY + "");

JQuery ಉತ್ತಮ ಗ್ರಂಥಾಲಯವಾಗಿದೆ. ಇದು IE6 ನ ಎಲ್ಲಾ ಮೋಸಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ತಪ್ಪಿಸಲು ಸಹಾಯ ಮಾಡಿತು. ಹಿಂದಿನ ಕಾಲದಲ್ಲಿ, ಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯು ಡೆವಲಪರ್‌ಗಳು ಎದುರಿಸುತ್ತಿರುವ ದೊಡ್ಡ ಸಮಸ್ಯೆಯಾಗಿತ್ತು. ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ವಿನ್ಯಾಸಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವಲ್ಲಿನ ಎಲ್ಲಾ ವ್ಯತ್ಯಾಸಗಳನ್ನು jquery ಚೆನ್ನಾಗಿ ನಿಭಾಯಿಸಿದೆ.

ಇಂದು, ಬ್ರೌಸರ್ಗಳು ಅತ್ಯುತ್ತಮ ಏಕೀಕೃತ ಪರಿಹಾರಗಳನ್ನು ಹೊಂದಿವೆ. ನಾವು ES5 ನ ಎಲ್ಲಾ ಸವಲತ್ತುಗಳನ್ನು ಆರಾಮವಾಗಿ ಬಳಸಬಹುದು, ಮತ್ತು ನಾವು HTML5 API ಅನ್ನು ನಮ್ಮ ವಿಲೇವಾರಿಯಲ್ಲಿ ಹೊಂದಿದ್ದೇವೆ, ಇದು DOM ಅಂಶಗಳನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ಹೆಚ್ಚು ಸುಲಭವಾಗುತ್ತದೆ. ಡೆವಲಪರ್‌ಗಳು ಮರೆವಿನ ಅಂಚಿನಲ್ಲಿದ್ದಾರೆ ಮತ್ತು ಕೆಲವು ಯೋಜನೆಗಳಿಗಾಗಿ jQuery ನಿಂದ ದೂರ ಸರಿಯುತ್ತಿದ್ದಾರೆ. ವಿಶೇಷವಾಗಿ ಸೂಕ್ಷ್ಮ ಸೇವೆಗಳು ಮತ್ತು ಸಂಕೀರ್ಣವಲ್ಲದ ಕಾರ್ಯಕ್ರಮಗಳ ಸಂದರ್ಭದಲ್ಲಿ.

ನನ್ನನ್ನು ತಪ್ಪಾಗಿ ಗ್ರಹಿಸಬೇಡಿ - Jquery ಇನ್ನೂ ಅದ್ಭುತವಾದ ಗ್ರಂಥಾಲಯವಾಗಿದೆ, ಮತ್ತು ಸಹಜವಾಗಿ, 70% ನೀವು ಅದನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ. ಸೀಮಿತ JS ಹೊಂದಿರುವ ಸಣ್ಣ ಪುಟಗಳಿಗಾಗಿ, ನೀವು ವೆನಿಲ್ಲಾಜೆಎಸ್ ಅಥವಾ ಇನ್ನೊಂದು ಚೌಕಟ್ಟನ್ನು ಬಳಸಬಹುದು. ಇವು ಮೊಬೈಲ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಸೂಕ್ತವಾಗಿವೆ.

ಸರಿ, ನೀವು jquery ಇಲ್ಲದೆ ಮಾಡಬಹುದಾದ ವರ್ಕಿಂಗ್ ಕೋಡ್‌ನ 10 ಉದಾಹರಣೆಗಳು ಇಲ್ಲಿವೆ.

ಪುಟ ಲೋಡ್ ಸಂಪೂರ್ಣ ಈವೆಂಟ್ ಅನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲಾಗುತ್ತಿದೆ

jQuery ಅನ್ನು ಬಳಸುವಾಗ ನೀವು ಮಾಡುವ ಮೊದಲ ಕೆಲಸವೆಂದರೆ ಕೋಡ್ ಅನ್ನು $(ಡಾಕ್ಯುಮೆಂಟ್).ರೆಡಿ() ವಿಧಾನದಲ್ಲಿ ಸುತ್ತಿ DOM ಯಾವಾಗ ಕುಶಲತೆಗೆ ಸಿದ್ಧವಾಗಿದೆ ಎಂಬುದನ್ನು ತಿಳಿಯುವುದು. Jquery ಇಲ್ಲದೆ, ನಾವು DOMContentLoaded ಈವೆಂಟ್ ಅನ್ನು ಬಳಸಬಹುದು. ಕೋಡ್ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:

// ಅನಾಮಧೇಯ ಕಾರ್ಯದೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಡಾಕ್ಯುಮೆಂಟ್‌ಗಾಗಿ DOMContentLoaded ಈವೆಂಟ್ ಅನ್ನು ಆಲಿಸಿ // ಈ ಕಾರ್ಯದ ತೋಳುಗಳಲ್ಲಿ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ನೀವು ಸುತ್ತಿಕೊಳ್ಳಬಹುದು // ಮತ್ತು ಪುಟವನ್ನು ಲೋಡ್ ಮಾಡಿದಾಗ ಅದು ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ. document.addEventListener("DOMContentLoaded", ಫಂಕ್ಷನ್ () ( // ನಮ್ಮ ಹವಾಯಿಯನ್ ಗ್ರೀಟಿಂಗ್, console.log("Aloha"); ));

Jquery ಇಲ್ಲದೆ ಎಲಿಮೆಂಟ್ ಸೆಲೆಕ್ಟರ್‌ಗಳು

ಒಂದು ದಿನ, ನಾವು ಐಡಿ, ವರ್ಗ ಅಥವಾ ಟ್ಯಾಗ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಅಂಶಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಬೇಕಾಗುತ್ತದೆ ಮತ್ತು jQuery ಅತ್ಯುತ್ತಮವಾದದ್ದು. ಇದರ ಸೆಲೆಕ್ಟರ್‌ಗಳು CSS ಸಿಂಟ್ಯಾಕ್ಸ್‌ಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಹೋಲುತ್ತವೆ. ಇಂದು, ಬ್ರೌಸರ್‌ಗಳು ಎರಡು ಪ್ರಮುಖ APIಗಳನ್ನು ಪರಿಚಯಿಸಿವೆ - querySelector ಮತ್ತು querySelectorAll.

// ನೀವು ಮಾನದಂಡಕ್ಕೆ ಹೊಂದಿಕೆಯಾಗುವ ಮೊದಲ ಅಂಶವನ್ನು ಪಡೆಯಲು document.querySelector ಅನ್ನು ಬಳಸಬಹುದು // ಕೇವಲ ಒಂದು ವಾದವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ - CSS ಆಯ್ಕೆಗಳು. var lochNess = document.querySelector(".monsters"); console.log("ಇದು" ಸ್ಕಾಟ್ಲೆಂಡ್‌ನಿಂದ - " + lochNess.textContent); // ನಾವು document.querySelectorAll ಅನ್ನು ಬಳಸಿಕೊಂಡು ಸಂಗ್ರಹಣೆಯನ್ನು ಸಹ ಪಡೆಯಬಹುದು .ಮಾನ್ಸ್ಟರ್ಸ್") ; console.log("ಚಾಂಪಿಯನ್‌ಗಳನ್ನು ಮರೆಮಾಡಿ ಮತ್ತು ಹುಡುಕುವುದು: "); ಫಾರ್ (var i = 0; i< scary.length; i++) { console.log(scary[i].innerHTML); }

• ನೆಸ್ಸಿ
• ದೊಡ್ಡ ಕಾಲು
• ಲಾ ಚುಪಕಾಬ್ರಾ

ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ರಚಿಸುವುದು ಮತ್ತು ಅಳಿಸುವುದು (ವಿಧಾನಗಳು)

ಈವೆಂಟ್‌ಗಳನ್ನು ಆಲಿಸುವುದು ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ ಮೂಲಭೂತ ಭಾಗವಾಗಿದೆ. ಐತಿಹಾಸಿಕವಾಗಿ, ಎರಡು ದೊಡ್ಡ ಶಿಬಿರಗಳಿವೆ - IE ಮತ್ತು ಉಳಿದವು. ಆದರೆ ಇಂದು, ನಾವು addEventListener ಅನ್ನು ಬಳಸುತ್ತೇವೆ

Var btn = document.querySelectorAll("ಬಟನ್"), ಪಟ್ಟಿ = document.querySelector("ul"); // ಬಯಸಿದ ಈವೆಂಟ್‌ನಲ್ಲಿ addEventListener ಗೆ ಕರೆ ಮಾಡಿ. // ಅಂಶದ ಮೇಲೆ ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಅನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. btn.addEventListener("ಕ್ಲಿಕ್", ಫಂಕ್ಷನ್ () ( // ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ನಾವು ನಮ್ಮ ಪಟ್ಟಿಗೆ ಈವೆಂಟ್ ಸ್ಕೇಲ್ ಅನ್ನು ಪ್ರಚೋದಿಸಲು ಬಯಸುತ್ತೇವೆ. // ಇದನ್ನು ಮಾಡಲು, ನಾವು ನಮ್ಮ ಪಟ್ಟಿಗೆ ಈವೆಂಟ್ ಅನ್ನು ಸೇರಿಸಬೇಕಾಗಿದೆ // ಆದ್ದರಿಂದ ಮೌಸ್ ಒಂದು ಅಂಶದ ಮೇಲೆ ಸುಳಿದಾಡಿದಾಗ, ಕಾರ್ಯವು .addEventListener ("mouseover", enlarge ) ); // ಜೂಮ್ ಈವೆಂಟ್ ಅನ್ನು ರದ್ದುಗೊಳಿಸಲು, removeEventListener ಬಳಸಿ. btn.addEventListener("ಕ್ಲಿಕ್", ಫಂಕ್ಷನ್ () ( // ಈವೆಂಟ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕುವುದು ಹೆಸರಿಸದ ಕಾರ್ಯಗಳೊಂದಿಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ, ಹೆಸರಿಸಿದವುಗಳನ್ನು ಮಾತ್ರ ಬಳಸಿ list.removeEventListener("mouseover", enlarge); )); // ಅಳೆಯುವ ಕಾರ್ಯವನ್ನು ರಚಿಸೋಣ. var enlarge = ಫಂಕ್ಷನ್ () ( // ಎಲಿಮೆಂಟ್ಸ್ ಪಟ್ಟಿಗೆ ವರ್ಗ ಸೇರಿಸಿ ", ಕಾರ್ಯ ( ) ( list.classList.remove("zoomed") )); // ಈಗ ನಾವು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಹೆಸರುಗಳನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು ಬಯಸುತ್ತೇವೆ. // ಅಂಶದ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಅದು ಹಸಿರು ಬಣ್ಣಕ್ಕೆ ತಿರುಗಬೇಕು // ಈವೆಂಟ್ ನಿಯೋಗಕ್ಕೆ ಧನ್ಯವಾದಗಳು, ನಾವು ಮೂಲ ಅಂಶಕ್ಕೆ ಸರಳವಾಗಿ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಸೇರಿಸಬಹುದು // ಈ ವಿಧಾನದಲ್ಲಿ, ನಾವು ಪ್ರತಿಯೊಂದಕ್ಕೂ ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ರಚಿಸುವುದಿಲ್ಲ

. list.addEventListener("ಕ್ಲಿಕ್", ಫಂಕ್ಷನ್ (ಇ) ( // ಹಸಿರು e.target.classList.add ("ಗ್ರೀನ್") ನಲ್ಲಿ ಗುರಿ ಅಂಶವನ್ನು ಹೈಲೈಟ್ ಮಾಡಿ);

ಜೂಮ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ ಜೂಮ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿ

ಹೆಸರನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು ಅದರ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ

• ಚೆವ್ಬಾಕ್ಕಾ
• ಹಾನ್ ಸೋಲೋ
• ಲ್ಯೂಕ್
• ಬೋಬಾ ಫೆಟ್

ಹಸಿರು (ಬಣ್ಣ: ಹಸಿರು;) .ಝೂಮ್ಡ್ (ಕರ್ಸರ್: ಪಾಯಿಂಟರ್; ಫಾಂಟ್-ಗಾತ್ರ: 23px; )

addEventListener ಮೂರನೇ ಆರ್ಗ್ಯುಮೆಂಟ್ ಅನ್ನು ಬಳಸಿದೆ, ಆದರೆ ಇದು ಐಚ್ಛಿಕವಾಗಿರುತ್ತದೆ. ನೀವು ನೋಡುವಂತೆ, ಕೋಡ್ jQuery ಗೆ ಹೋಲುತ್ತದೆ.

ಶುದ್ಧ JS ನಲ್ಲಿ jQuery ಇಲ್ಲದೆ ತರಗತಿಗಳನ್ನು ಸೇರಿಸುವುದು, ತೆಗೆದುಹಾಕುವುದು

ಹಳೆಯ ದಿನಗಳಲ್ಲಿ jQuery ಇಲ್ಲದೆ ಎಲಿಮೆಂಟ್ ತರಗತಿಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು ಒಂದು ದೊಡ್ಡ ಸಮಸ್ಯೆಯಾಗಿತ್ತು. ಆದರೆ ಇನ್ನು ಮುಂದೆ ಇಲ್ಲ. ವರ್ಗಪಟ್ಟಿ ಆಸ್ತಿಗೆ ಧನ್ಯವಾದಗಳು. ಮತ್ತು ನೀವು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬದಲಾಯಿಸಬೇಕಾದರೆ, ನೀವು setAttribute ಅನ್ನು ಬಳಸಬಹುದು.

Var btn = document.querySelectorAll("ಬಟನ್"), div = document.querySelector("#myDiv"); btn.addEventListener("ಕ್ಲಿಕ್", ಕಾರ್ಯ () ( // ಅಂಶ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಪಡೆಯಲು ಸುಲಭವಾದ ಮಾರ್ಗ console.log(div.id); )); // Element.classList ಎಲ್ಲಾ ಅಂಶ ವರ್ಗಗಳನ್ನು DOMTokenList ನಿಂದ ಸಂಗ್ರಹಿಸುತ್ತದೆ. var ತರಗತಿಗಳು = div.classList; btn.addEventListener("ಕ್ಲಿಕ್", ಕಾರ್ಯ () ( console.log(classes); )); btn.addEventListener("ಕ್ಲಿಕ್", ಫಂಕ್ಷನ್ () (// ತರಗತಿಗಳನ್ನು ಸೇರಿಸುವುದು ಮತ್ತು ತೆಗೆದುಹಾಕುವುದು ತರಗತಿಗಳು.add("ಕೆಂಪು"); )); btn.addEventListener("ಕ್ಲಿಕ್", ಫಂಕ್ಷನ್ () ( // ವರ್ಗ ತರಗತಿಗಳನ್ನು ಟಾಗಲ್ ಮಾಡಿ.ಟಾಗಲ್("ಹಿಡನ್"); ));

ಪ್ರದರ್ಶನ ಐಡಿ ಪ್ರದರ್ಶನ ತರಗತಿಗಳು ಬಣ್ಣ ಕೆಂಪು ಟಾಗಲ್ ಗೋಚರತೆಯನ್ನು

ಚೌಕ (ಅಗಲ: 100px; ಎತ್ತರ: 100px; ಅಂಚು-ಕೆಳಗೆ: 20px; ಗಡಿ: 1px ಘನ ಬೂದು; ಗಡಿ-ತ್ರಿಜ್ಯ: 5px; ) .ಗುಪ್ತ (ಗೋಚರತೆ: ಮರೆಮಾಡಲಾಗಿದೆ; ) .ಕೆಂಪು (ಹಿನ್ನೆಲೆ-ಬಣ್ಣ: ಕೆಂಪು; )

ಅಂಶದ HTML ವಿಷಯವನ್ನು ಪಡೆಯುವುದು ಮತ್ತು ಬದಲಾಯಿಸುವುದು

jQuery ಅನುಕೂಲಕರ ವಿಧಾನಗಳನ್ನು ಹೊಂದಿದೆ ಪಠ್ಯ () ಮತ್ತು html (). ಬದಲಾಗಿ, ನೀವು jQuery ಗಿಂತ ಮುಂಚೆಯೇ ಇರುವ textContent ಮತ್ತು innerHTML ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಬಹುದು.

Var myText = document.querySelector("#myParagraph"), btn = document.querySelectorAll("ಬಟನ್"); // ಈ ರೀತಿಯಲ್ಲಿ ನೀವು ಅಂಶ ಮರದ ಸಂಪೂರ್ಣ ಪಠ್ಯವನ್ನು ಸುಲಭವಾಗಿ ಕಂಡುಹಿಡಿಯಬಹುದು var myContent = myText.textContent; console.log("ಪಠ್ಯವಿಷಯ: " + myContent); // ಅಂಶದ ಪಠ್ಯವನ್ನು ಬದಲಿಸಲು textContent ಅನ್ನು ಬಳಸಿ // ಹಳೆಯದನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ, ಅದನ್ನು ಹೊಸ ಪಠ್ಯದೊಂದಿಗೆ ಬದಲಾಯಿಸುತ್ತದೆ btn.addEventListener("ಕ್ಲಿಕ್", ಕಾರ್ಯ () ( myText.textContent = " ಕೋಲಾಗಳು ಅತ್ಯುತ್ತಮ ಪ್ರಾಣಿಗಳು "; )); // ನಮಗೆ ಅಂಶದ HTML ಅಗತ್ಯವಿದ್ದರೆ, innerHTML ಅನ್ನು ಬಳಸಿ. var myHtml = myText.innerHTML; console.log("innerHTML: " + myHtml); // html ಅನ್ನು ಬದಲಿಸಲು, ಹೊಸ btn.addEventListener ("ಕ್ಲಿಕ್", ಫಂಕ್ಷನ್ () ಅನ್ನು ಒದಗಿಸಿ ( myText.innerHTML = " ಪೆಂಗ್ವಿನ್‌ಗಳು ಅತ್ಯುತ್ತಮ ಪ್ರಾಣಿಗಳು "; ));

ಯಾವ ಪ್ರಾಣಿಗಳು ಉತ್ತಮವಾಗಿವೆ?

ಕೋಲಾಸ್
ಪೆಂಗ್ವಿನ್ಗಳು

ಹೊಸದನ್ನು ಸೇರಿಸುವುದು ಮತ್ತು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಅಂಶಗಳನ್ನು ಅಳಿಸುವುದು

ಅಂಶಗಳನ್ನು ಸೇರಿಸುವ ಮತ್ತು ತೆಗೆದುಹಾಕುವುದರೊಂದಿಗೆ Jquery ಕೆಲಸವನ್ನು ಹೆಚ್ಚು ಸರಳಗೊಳಿಸುತ್ತದೆ ಎಂಬ ವಾಸ್ತವದ ಹೊರತಾಗಿಯೂ, ಇದನ್ನು ಶುದ್ಧ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್‌ನಲ್ಲಿ ಮಾಡಲಾಗುವುದಿಲ್ಲ ಎಂದು ಯಾರೂ ಹೇಳಲಿಲ್ಲ. ಪುಟದಲ್ಲಿ ಅಂಶವನ್ನು ಹೇಗೆ ಸೇರಿಸುವುದು, ತೆಗೆದುಹಾಕುವುದು ಅಥವಾ ಬದಲಾಯಿಸುವುದು ಎಂಬುದರ ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ.

Var lunch = document.querySelector("#lunch"); // ನಮ್ಮ ಊಟಕ್ಕೆ ನಾವು ಮೆನುವನ್ನು ಹೊಂದಿದ್ದೇವೆ ಎಂದು ಹೇಳೋಣ // ಅದಕ್ಕೆ ಏನನ್ನಾದರೂ ಸೇರಿಸೋಣ var addFries = ಕಾರ್ಯ () ( // ಮೊದಲು ನಾವು ಒಂದು ಅಂಶವನ್ನು ರಚಿಸುತ್ತೇವೆ ಮತ್ತು ಅದನ್ನು ವಿಷಯದೊಂದಿಗೆ ತುಂಬುತ್ತೇವೆ var fries = document.createElement("div"); fries .innerHTML = "

ಫ್ರೈಸ್

"; // ಒಮ್ಮೆ ಇದನ್ನು ಮಾಡಿದ ನಂತರ, ನಾವು ಅದನ್ನು ಪುಟಕ್ಕೆ ಸೇರಿಸಲು appendChild ಅನ್ನು ಬಳಸುತ್ತೇವೆ. // ನಮ್ಮ ಅಂಶವು ಮೆನುವಿನಲ್ಲಿ ಪುಟದಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ lunch.appendChild(fries); // ನಮ್ಮ ಬರ್ಗರ್‌ಗೆ ಚೀಸ್ ಸೇರಿಸಿ) var addCheese = ಕಾರ್ಯ () (var beef = document.querySelector("#Beef"), topSlice = document.createElement("li"), bottomSlice = document.createElement("li"); bottomSlice.innerHTML = topSlice.innerHTML = "ಚೀಸ್" .insertBefore(topSlice, ದನದ ಮಾಂಸ); .insertBefore(bottomSlice, beef.nextSibling); removePickles = ಕಾರ್ಯ () ( // var ಉಪ್ಪಿನಕಾಯಿ = document.querySelector ("# ಉಪ್ಪಿನಕಾಯಿ");

ವೇಳೆ (ಉಪ್ಪಿನಕಾಯಿಗಳು) ( pickles.parentNode.removeChild(pickles); ); // ಸವಿಯಾದ! var btn = document.querySelectorAll("ಬಟನ್"); btn.addEventListener("ಕ್ಲಿಕ್", addFries); btn.addEventListener("ಕ್ಲಿಕ್", addCheese); btn.addEventListener("ಕ್ಲಿಕ್", ತೆಗೆದುಹಾಕಿ ಪಿಕಲ್ಸ್);

• ಊಟಕ್ಕೆ ಫ್ರೈಸ್ ಸೇರಿಸಿ ಸ್ಯಾಂಡ್ವಿಚ್ಗೆ ಚೀಸ್ ಸೇರಿಸಿ ಉಪ್ಪಿನಕಾಯಿ ನನ್ನ ಲಂಚ್ ತೆಗೆದುಹಾಕಿ
• ನನ್ನ ಸ್ಯಾಂಡ್ವಿಚ್
• ಬ್ರೆಡ್
• ಉಪ್ಪಿನಕಾಯಿ
• ಗೋಮಾಂಸ
• ನನ್ನ ಸ್ಯಾಂಡ್ವಿಚ್

ಮೇಯೊ

jQuery ಆಗಮನದೊಂದಿಗೆ, ವೆಬ್ ಪ್ರೋಗ್ರಾಮರ್ಗಳು ಫ್ಲಾಶ್ ತಂತ್ರಜ್ಞಾನವನ್ನು ಆಶ್ರಯಿಸದೆ ಪ್ರಭಾವಶಾಲಿ ದೃಶ್ಯ ಪರಿಣಾಮಗಳನ್ನು ರಚಿಸಲು ಅವಕಾಶವನ್ನು ಹೊಂದಿದ್ದಾರೆ. ಸ್ಟ್ಯಾಂಡರ್ಡ್ ಬ್ರೌಸರ್ ಪರಿಕರಗಳು ಮತ್ತು ನಿಮ್ಮ ಕಲ್ಪನೆಯನ್ನು ಬಳಸಿಕೊಂಡು ಯಾವ ಅದ್ಭುತ ಫಲಿತಾಂಶಗಳನ್ನು ಸಾಧಿಸಬಹುದು ಎಂಬುದಕ್ಕೆ ಈ ಲೇಖನವು ಹಲವಾರು ಗಮನಾರ್ಹ ಉದಾಹರಣೆಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.

ವರ್ಧಕ ಗಾಜಿನ ಪರಿಣಾಮ

ಕರ್ಸರ್ ಇರುವ ಚಿತ್ರದ ಭಾಗವನ್ನು ಹಿಗ್ಗಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಸುಸಂಘಟಿತ ಪರಿಣಾಮ. CSS3 ಪರಿಚಯವಿಲ್ಲದ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ, ಭೂತಗನ್ನಡಿಯು ಚೌಕವಾಗಿರುತ್ತದೆ.

ಅವಿಯಾಸ್ಲೈಡರ್

ಈ ಸ್ಲೈಡರ್ ಚಿತ್ರಗಳ ಮೂಲಕ ಫ್ಲಿಪ್ಪಿಂಗ್ ಮಾಡಲು ಎಂಟು ವಿಭಿನ್ನ ವಿಧಾನಗಳನ್ನು ಹೊಂದಿದೆ, ಪ್ರತಿಯೊಂದೂ ಅದರ ನಿಷ್ಪಾಪ ಪಾಲಿಶ್ ಡೈನಾಮಿಕ್ಸ್ನೊಂದಿಗೆ ಕಣ್ಣನ್ನು ಸಂತೋಷಪಡಿಸುತ್ತದೆ.
ವಿಶಾಲ-ಪ್ರಮಾಣದ ನ್ಯಾವಿಗೇಷನ್
ದೊಡ್ಡ ಚಿತ್ರ ಸ್ಲೈಡ್‌ಶೋ

ವೃತ್ತ ಆಧಾರಿತ ನ್ಯಾವಿಗೇಷನ್

ಬಹಳಷ್ಟು ಸುತ್ತಿನ ಅಂಶಗಳನ್ನು ಹೊಂದಿರುವ ಸೈಟ್ ಅನ್ನು ನೀವು ನೋಡುವುದು ಆಗಾಗ್ಗೆ ಅಲ್ಲ. ಬಬಲ್ ನ್ಯಾವಿಗೇಶನ್ ಪ್ಲಗಿನ್ ನಿಮಗೆ ಕೇವಲ ವಲಯಗಳ ಆಧಾರದ ಮೇಲೆ ಡೈನಾಮಿಕ್ ನ್ಯಾವಿಗೇಶನ್ ರಚಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.
ಡ್ರಾಪ್-ಡೌನ್ ಸೈಟ್ ಲಾಗಿನ್ ಫಲಕ

ವೃತ್ತದ ಸುತ್ತಲೂ ಮತ್ತು ಬಾಹ್ಯಾಕಾಶದ ವಿವಿಧ ವಿಮಾನಗಳಲ್ಲಿ ಪುಟದ ಅಂಶಗಳನ್ನು ಪ್ರಾರಂಭಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಫ್ಲಿಪ್ ಬಾಕ್ಸ್

ಫ್ಲಿಪ್ ಪ್ಲಗಿನ್ ಅಂಶಗಳನ್ನು ಕಾರ್ಡ್‌ಗಳಂತೆ ಫ್ಲಿಪ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಸುಳಿದಾಡುವ ಗ್ಯಾಲರಿ

ಅನೌಪಚಾರಿಕ ಚಿತ್ರ ಗ್ಯಾಲರಿ. ವಿಷಯ ಮುನ್ನೋಟವು ಪೋಲರಾಯ್ಡ್ ಕ್ಯಾಮೆರಾದಿಂದ ತೆಗೆದ ಚದುರಿದ ಛಾಯಾಚಿತ್ರಗಳ ಗುಂಪಾಗಿದೆ.

ಐಕಾರೋಸೆಲ್

ಸರಳವಾದ ಆದರೆ ಬಹಳ ಸುಂದರವಾದ ಚಿತ್ರ ಸ್ಲೈಡರ್.

ಚಿತ್ರ ಹರಿವು

ಬಾಹ್ಯಾಕಾಶದಲ್ಲಿ ಚಲಿಸುವ ಚಿತ್ರಗಳೊಂದಿಗೆ ಸ್ಲೈಡ್ಶೋ.

ಸಂವಾದಾತ್ಮಕ ಚಿತ್ರ

ಸಂವಾದಾತ್ಮಕ ಉತ್ಪನ್ನ ಕ್ಯಾಟಲಾಗ್ ಮಾಡಲು ಬಹಳ ಆಸಕ್ತಿದಾಯಕ ಮಾರ್ಗವಾಗಿದೆ.

Jqfancy ಪರಿವರ್ತನೆಗಳು
ಫೋಟೋ ಶೂಟ್

ಪುಟದಲ್ಲಿ ಚಿತ್ರದ ಪ್ರತ್ಯೇಕ ಭಾಗಗಳ ಚಿತ್ರಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಚಿತ್ರದ ಅಪೇಕ್ಷಿತ ಭಾಗವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು ಪರದೆಯ ಮೇಲೆ ಫಲಿತಾಂಶವನ್ನು ನೋಡಿ.

ತ್ವರಿತ ಮರಳು

ಕ್ವಿಕ್‌ಸ್ಯಾಂಡ್ ಪ್ಲಗಿನ್ ನಿಮಗೆ ಉತ್ತಮ ಗುಣಮಟ್ಟದ ಪರಿಣಾಮಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಅಂಶಗಳ ಗುಂಪನ್ನು ವಿಂಗಡಿಸಲು ಮತ್ತು ಫಿಲ್ಟರ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ.

ಸ್ಲೈಡ್ಔಟ್ ಸಂದರ್ಭ ಸಲಹೆಗಳು

ಸಂಕೀರ್ಣ ವಸ್ತುಗಳ ವಿವರವಾದ ವಿವರಣೆಗಳನ್ನು ರಚಿಸಲು ಮತ್ತು ಅಗತ್ಯವಿರುವಾಗ ಸಂವಾದಾತ್ಮಕ ಪ್ರವಾಸಗಳನ್ನು ರಚಿಸಲು ಈ ಪ್ಲಗಿನ್ ತುಂಬಾ ಉಪಯುಕ್ತವಾಗಿದೆ, ಆದರೆ ಹೆಚ್ಚಿನ ಪ್ರಮಾಣದ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸಲು ಸಾಧ್ಯವಾದಷ್ಟು ಕಡಿಮೆ ಜಾಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.

ಸ್ಲೈಡಿಂಗ್ ಪೆಟ್ಟಿಗೆಗಳು

ಸ್ಲೈಡಿಂಗ್ ಬಾಕ್ಸ್‌ಗಳ ಪ್ಲಗಿನ್ ಚಿತ್ರಗಳ ಶೀರ್ಷಿಕೆಗಳೊಂದಿಗೆ ಅಸಾಮಾನ್ಯ ಡೈನಾಮಿಕ್ ಗ್ಯಾಲರಿಯನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಜೂಮರ್ ಗ್ಯಾಲರಿ

ನೀವು ಅವುಗಳ ಮೇಲೆ ಸುಳಿದಾಡಿದಾಗ ಅದರ ಅಂಶಗಳು ಹರ್ಷಚಿತ್ತದಿಂದ ಪಾಪ್ ಅಪ್ ಆಗುವ ಚಿತ್ರ ಗ್ಯಾಲರಿ.

ಈ ಲೇಖನದಲ್ಲಿ, ನಾವು jQuery ನ AJAX ಶಾರ್ಟ್‌ಕಟ್ ವಿಧಾನಗಳನ್ನು ನೋಡೋಣ: ಲೋಡ್, ಪಡೆಯಿರಿ, getJSON, getScript ಮತ್ತು ಪೋಸ್ಟ್. ಈ ವಿಧಾನಗಳು ಅವಶ್ಯಕವಾದ AJAX ವಿನಂತಿಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಬಹಳ ಸುಲಭವಾಗಿಸುತ್ತದೆ ಮತ್ತು ಅಜಾಕ್ಸ್ ಕಾರ್ಯದಂತೆ, ಅವುಗಳಿಗೆ ಬರೆಯಲು ಕಡಿಮೆ ಸಾಲುಗಳ ಕೋಡ್ ಅಗತ್ಯವಿರುತ್ತದೆ.

jQuery - ಲೋಡ್ ವಿಧಾನ

ಲೋಡ್ ವಿಧಾನವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ URL ನಲ್ಲಿ ಸರ್ವರ್‌ನಿಂದ ಡೇಟಾವನ್ನು ಹಿಂಪಡೆಯಲು ಮತ್ತು ಅದನ್ನು ಒಂದು ಅಥವಾ ಹೆಚ್ಚು ಆಯ್ಕೆಮಾಡಿದ ಅಂಶಗಳಲ್ಲಿ ಇರಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ.

ಲೋಡ್ ವಿಧಾನವು ಈ ಕೆಳಗಿನ ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ಹೊಂದಿದೆ:

ಲೋಡ್(url [,data] [,complete]) // ಚೌಕ ಬ್ರಾಕೆಟ್‌ಗಳಲ್ಲಿನ ನಿಯತಾಂಕಗಳು ಐಚ್ಛಿಕ //url - ವಿನಂತಿಯನ್ನು ಕಳುಹಿಸಬೇಕಾದ URL ಅನ್ನು ಒಳಗೊಂಡಿರುವ ಸ್ಟ್ರಿಂಗ್ //ಡೇಟಾ (ಐಚ್ಛಿಕ ಪ್ಯಾರಾಮೀಟರ್) - ಕಳುಹಿಸಬೇಕಾದ ಡೇಟಾ ಸರ್ವರ್ (ಸ್ಟ್ರಿಂಗ್ ಅಥವಾ ಆಬ್ಜೆಕ್ಟ್ ಫಾರ್ಮ್ಯಾಟ್‌ನಲ್ಲಿ) //ಸಂಪೂರ್ಣ – ವಿನಂತಿಯನ್ನು ಪೂರ್ಣಗೊಳಿಸಿದ ನಂತರ ನಿರ್ವಹಿಸಬೇಕಾದ ಹೆಚ್ಚುವರಿ ಕ್ರಿಯೆಗಳು (ಫಂಕ್ಷನ್ (ರೆಸ್ಪಾನ್ಸ್‌ಟೆಕ್ಸ್ಟ್, ಟೆಕ್ಸ್ಟ್‌ಸ್ಟಟಸ್, xhr) ಕಾರ್ಯವನ್ನು ಬಳಸಿಕೊಂಡು ನಿರ್ದಿಷ್ಟಪಡಿಸಲಾಗಿದೆ) // ಪ್ರತಿಕ್ರಿಯೆ ಪಠ್ಯ - ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆ // ಪಠ್ಯ ಸ್ಥಿತಿ - ಪ್ರತಿಕ್ರಿಯೆ ಸ್ಥಿತಿ // xhr - XMLHTTP ವಿನಂತಿ ವಸ್ತು

ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ, ವಿನಂತಿಯನ್ನು ಕಳುಹಿಸಲು ಲೋಡ್ ವಿಧಾನವು GET ಅನ್ನು ಬಳಸುತ್ತದೆ. ಆದರೆ ಇದು POST ವಿಧಾನವನ್ನು ಸಹ ಬಳಸಬಹುದು. ಸರ್ವರ್‌ಗೆ ಕಳುಹಿಸಬೇಕಾದ ಡೇಟಾವನ್ನು ಸ್ಟ್ರಿಂಗ್ ಸ್ವರೂಪದಲ್ಲಿ ಅಲ್ಲ, ಆದರೆ ವಸ್ತುವಿನ ಮೂಲಕ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದಾಗ ಮಾತ್ರ ಇದು ಸಂಭವಿಸುತ್ತದೆ.

ಲೋಡ್ ವಿಧಾನವನ್ನು ಬಳಸುವ ಉದಾಹರಣೆಗಳು

1. ಪುಟದ DOM ಅನ್ನು ಲೋಡ್ ಮಾಡಿದ ನಂತರ id="asidenav" ನೊಂದಿಗೆ ಬ್ಲಾಕ್‌ಗೆ asidenav.tpl ಫೈಲ್‌ನ ವಿಷಯಗಳನ್ನು ಸೇರಿಸಿ:

... // ಪುಟದ DOM ಅನ್ನು ಲೋಡ್ ಮಾಡಿದ ನಂತರ $(ಫಂಕ್ಷನ್() ( // asidenav.tpl ಫೈಲ್‌ನ ವಿಷಯವನ್ನು ಅಂಶಕ್ಕೆ ಸೇರಿಸಿ (#asidenav) // ಫೈಲ್ HTML ನಂತೆಯೇ ಅದೇ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ ಇಲ್ಲದಿದ್ದರೆ ಡಾಕ್ಯುಮೆಂಟ್, ನಂತರ ನೀವು ಹೆಚ್ಚುವರಿಯಾಗಿ ಅವನಿಗೆ ಮಾರ್ಗವನ್ನು ಸೂಚಿಸಬೇಕು $("#asidenav").load("asidenav.tpl");

2. ನೀವು ಅದರಲ್ಲಿರುವ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ demo.html ಫೈಲ್‌ನ ಭಾಗವನ್ನು ಅಂಶಕ್ಕೆ ಲೋಡ್ ಮಾಡಿ:

demo.html ಫೈಲ್‌ನ ವಿಷಯವನ್ನು ಪಡೆಯಿರಿ ... $("#ajaxclick").click(function())( // ಫೈಲ್‌ನ demo.html (#content1) ನ ಭಾಗವನ್ನು ಅಂಶ id="content1" $ ಗೆ ಲೋಡ್ ಮಾಡಿ (ಇದು).ಪೋಷಕ() .load("demo.html #content1" ));

demo.html ಫೈಲ್‌ನ ವಿಷಯಗಳು:

ಫೈಲ್ demo.html ... ...

3. id="ಫಲಿತಾಂಶ" ಹೊಂದಿರುವ ಅಂಶಕ್ಕೆ ಪ್ರತಿಕ್ರಿಯೆ content.php ಅನ್ನು ಲೋಡ್ ಮಾಡಿ. ಈ ಪ್ರತಿಕ್ರಿಯೆಯು ಸರ್ವರ್‌ಗೆ AJAX ವಿನಂತಿಯನ್ನು ಕಳುಹಿಸಿದ ಬಟನ್ ಹೊಂದಿರುವ ಡೇಟಾ-ವಿಷಯ ಗುಣಲಕ್ಷಣದ ಮೌಲ್ಯವನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ.

ಲೋಡ್ ವಿಷಯ 1 ಲೋಡ್ ವಿಷಯ 2 ಲೋಡ್ ವಿಷಯ 3 ... // ವರ್ಗ ಲೋಡ್-ಅಜಾಕ್ಸ್-ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ $(".load-ajax-content") ಕ್ಲಿಕ್ ಮಾಡಿ.ಕ್ಲಿಕ್(ಫಂಕ್ಷನ್())( // ಮೌಲ್ಯವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ ಡೇಟಾ ಗುಣಲಕ್ಷಣದ -ಕಂಟೆಂಟ್ ವರ್ ಡೇಟಾContent = $(ಇದು).attr("ಡೇಟಾ-ಕಂಟೆಂಟ್"); ಡೇಟಾ ವಿಷಯ) ( $ ("#ಫಲಿತಾಂಶ").ಲೋಡ್("content.php","content="+dataContent) ));