j క్వెరీ యొక్క ప్రాథమిక వాక్యనిర్మాణంలో ఎంపిక సాధనం(CSS-శైలి ఎంపిక సాధనం) మరియు ఎంచుకున్న మూలకాలను మార్చటానికి పద్ధతులు ఉపయోగించబడతాయి. ఇక్కడ j క్వెరీ యొక్క కొన్ని ప్రాథమిక సింటాక్స్ ఉదాహరణలు ఉన్నాయి:
ఎలిమెంట్స్ ఎంచుకోవడం
-
HTML ట్యాగ్ పేరు ద్వారా ఎలిమెంట్‌లను ఎంచుకోండి:
$("tagname")ఉదాహరణ: పేజీలోని$("p")అన్ని ఎలిమెంట్‌లను ఎంచుకుంటుంది.<p> -
CSS తరగతి ద్వారా మూలకాలను ఎంచుకోండి:
$(".classname")ఉదాహరణ:$(".myClass")"myClass" తరగతితో అన్ని మూలకాలను ఎంచుకుంటుంది. -
ID ద్వారా మూలకాలను ఎంచుకోండి:
$("#idname")ఉదాహరణ:$("#myElement")ID "myElement"తో మూలకాన్ని ఎంచుకుంటుంది. -
లక్షణం ద్వారా మూలకాలను ఎంచుకోండి:
$("[attribute='value']")ఉదాహరణ: "బటన్"కి సెట్ చేయబడిన$("[data-type='button']")లక్షణంతో మూలకాలను ఎంచుకుంటుందిdata-type. -
ఎంపికలను కలపడం:
$("tagname.classname"),$("#idname .classname"), ...
ఎంచుకున్న మూలకాలను మార్చడం
-
మూలకం యొక్క కంటెంట్‌ను మార్చడం:
.html(),.text()ఉదాహరణ:$("#myElement").html("New content")మూలకం యొక్క HTML కంటెంట్‌ను ID "myElement"తో సెట్ చేస్తుంది. -
మూలకం లక్షణాలను సవరించడం:
.attr(),.prop()ఉదాహరణ: అన్ని మూలకాల యొక్క లక్షణాన్ని$("img").attr("src", "newimage.jpg")మారుస్తుంది.src<img> -
మూలకం యొక్క CSS తరగతులను మార్చడం:
.addClass(),.removeClass(),.toggleClass()ఉదాహరణ:$("#myElement").addClass("highlight")ID "myElement"తో మూలకానికి "హైలైట్" తరగతిని జోడిస్తుంది. -
మూలకాలను దాచడం/చూపడం:
.hide(),.show(),.toggle()ఉదాహరణ:$(".myClass").hide()"myClass" తరగతితో అన్ని మూలకాలను దాచిపెడుతుంది. -
మూలకాలపై ఈవెంట్‌లను నిర్వహించడం:
.click(),.hover(),.submit(), ... ఉదాహరణ:$("button").click(function() { ... })క్లిక్ ఈవెంట్ హ్యాండ్లర్‌ను నమోదు చేస్తుంది
మూలకం యొక్క సేకరణలతో పని చేస్తోంది
-
సేకరణ ద్వారా పునరావృతం:
.each()ఉదాహరణ: పేజీలోని$("li").each(function() { ... })ప్రతి మూలకంపై పునరావృతమవుతుంది.<li> -
సేకరణను ఫిల్టర్ చేయడం:
.filter(),.not()ఉదాహరణ: మూలకాలను$("div").filter(".myClass")ఫిల్టర్ చేస్తుంది<div>మరియు "myClass" తరగతి ఉన్న వాటిని ఎంపిక చేస్తుంది. -
సేకరణలో మూలకాలను చొప్పించడం:
.append(),.prepend(),.after(),.before()ఉదాహరణ: ID "myElement"తో మూలకానికి$("#myElement").append("<p>New paragraph</p>")కొత్త మూలకాన్ని జోడిస్తుంది.<p>
ప్రభావాలు మరియు యానిమేషన్లు
-
ఫేడ్ఇన్/ఫేడ్అవుట్ ఎఫెక్ట్‌లను అమలు చేయడం:
.fadeIn(),.fadeOut()ఉదాహరణ:$("#myElement").fadeIn(1000)1 సెకను వ్యవధిలో ID "myElement"తో మూలకంలో ఫేడ్ అవుతుంది. -
స్లైడ్‌అప్/స్లైడ్‌డౌన్ ఎఫెక్ట్‌లను అమలు చేయడం:
.slideUp(),.slideDown()ఉదాహరణ:$(".myClass").slideUp(500)0.5 సెకన్ల వ్యవధిలో క్లాస్ "మైక్లాస్"తో అన్ని ఎలిమెంట్‌లను స్లైడ్ చేస్తుంది. -
అనుకూల యానిమేషన్‌లను అమలు చేయడం:
.animate()ఉదాహరణ:$("#myElement").animate({ left: '250px', opacity: '0.5' })ఎలిమెంట్‌ను దాని ఎడమ స్థానం మరియు అస్పష్టతను మార్చడం ద్వారా ID "myElement"తో యానిమేట్ చేస్తుంది.
మూలకాలను ఎంచుకోవడానికి, వాటి లక్షణాలను మార్చటానికి మరియు ప్రభావాలు లేదా యానిమేషన్‌లను వర్తింపజేయడానికి j క్వెరీ యొక్క ప్రాథమిక సింటాక్స్ యొక్క విభిన్న అంశాలను ఎలా ఉపయోగించాలో ఈ ఉదాహరణలు ప్రదర్శిస్తాయి. j క్వెరీ వెబ్ డెవలప్‌మెంట్ టాస్క్‌లను సులభతరం చేయడానికి మరియు మెరుగుపరచడానికి విస్తృతమైన పద్ధతులు మరియు కార్యాచరణలను అందిస్తుంది.