8.1 j క్వెరీని కనెక్ట్ చేస్తోంది
చివరగా, మేము j క్వెరీ లైబ్రరీకి చేరుకున్నాము. ఈ వ్యాసం వ్రాయబడిన సమయానికి, ఇది ఇప్పటికే వాడుకలో లేదు మరియు కొత్త ప్రాజెక్ట్‌లలో దాదాపుగా ఉపయోగించబడలేదు . కానీ ఒక సమయంలో ఇది చాలా ప్రజాదరణ పొందింది, చాలా చక్కగా డాక్యుమెంట్ చేయబడింది మరియు దాని ఉపయోగంతో ఇంటర్నెట్‌లో చాలా ఉదాహరణలు ఉన్నాయి .
అందువల్ల, మీరు ఒక చిన్న వెబ్ ప్రాజెక్ట్‌ను వ్రాస్తున్నట్లయితే మరియు ఆధునిక ఫ్రేమ్‌వర్క్‌లను నేర్చుకోవడానికి నెలలు గడపకూడదనుకుంటే, మీరు j క్వెరీ లైబ్రరీని ఉపయోగించాలని నేను సిఫార్సు చేస్తున్నాను.
వేలాది j క్వెరీ ఫంక్షన్‌లను ఉపయోగించడానికి, మీరు దీన్ని మీ పేజీలో చేర్చాలి. మీరు దీన్ని ఇలా చేయవచ్చు:
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>j క్వెరీతో పనిచేయడాన్ని రెండు రకాలుగా విభజించవచ్చు.
ముందుగా, మీరు j క్వెరీ లైబ్రరీ ఆబ్జెక్ట్‌ను పొందవచ్చు, ఇది కస్టమ్ j క్వెరీ ఆబ్జెక్ట్‌లో చుట్టబడిన సాధారణ HTML మూలకం.
రెండవది, j క్వెరీ అనేక గ్లోబల్ ఆబ్జెక్ట్‌లను కలిగి ఉంది, అవి HTML మూలకాలకు కట్టుబడి ఉండవు. వాటిని కూడా వినియోగించుకోవాలి.
మొదటిదానితో ప్రారంభిద్దాం.
8.2 సెలెక్టర్లతో పని చేయడం
వస్తువులతో పని చేయడానికి j క్వెరీ సెలెక్టర్లను ఉపయోగిస్తుంది (CSS మరియు దాని తరగతులను గుర్తుంచుకోవాలా?). కాబట్టి, j క్వెరీలో, మీరు కొన్ని వస్తువులు లేదా వస్తువుల సమూహాన్ని ఎంచుకోవాలనుకుంటే, మీరు వాటి ఎంపిక సాధనాన్ని సెట్ చేయాలి.
ఉదాహరణలు:
| కోడ్ | వివరణ | గమనిక | |
|---|---|---|---|
| 1 | $("div") | DIV ట్యాగ్‌తో అన్ని వస్తువులను ఎంచుకుంటుంది | అనేక వస్తువులు |
| 2 | $("img.#image123") | IMG ట్యాగ్ మరియు ID == image123తో అన్ని వస్తువులను ఎంచుకుంటుంది | ఒక వస్తువు |
| 3 | $("#image123") | ID == image123తో అన్ని వస్తువులను ఎంచుకుంటుంది | ఒక వస్తువు |
| 4 | $("div.article") | తరగతి కథనాన్ని కలిగి ఉన్న DIV ట్యాగ్‌తో అన్ని ఆబ్జెక్ట్‌లను ఎంచుకుంటుంది | అనేక వస్తువులు |
మేము అన్ని లింక్‌లకు ఈవెంట్ హ్యాండ్లింగ్‌ని జోడించాలనుకుంటున్నాము onclick, j క్వెరీతో దీన్ని ఎలా చేయాలో ఇక్కడ ఉంది:
$("a").click(function() {
alert("Click");
});ఇక్కడ మూడు దశలు తీసుకోబడ్డాయి:
- సెలెక్టర్‌కి సరిపోలే ఆబ్జెక్ట్(ల)ని పొందుతుంది
"a". - మేము కాల్ చేసే అనామక ఫంక్షన్‌ని సృష్టిస్తాము
alert(). clickమేము పాయింట్ 1 నుండి అన్ని ఆబ్జెక్ట్‌ల కోసం ఈ ఫంక్షన్‌ని ఈవెంట్ హ్యాండ్లర్‌గా సెట్ చేసాము .
j క్వెరీ గురించి మరొక మంచి విషయం ఏమిటంటే, దాని కోడ్ చదవడం సులభం. ప్రతిదీ ఎలా పని చేస్తుందో తెలుసుకోవడానికి ఇది చాలా అవసరం లేదు. వర్కింగ్ కోడ్ ఉంటే, అది ఏమి చేస్తుందో అర్థం చేసుకోవడం చాలా సులభం.
8.3 డాక్యుమెంట్ అంశాలతో పని చేయడం
j క్వెరీని ఉపయోగించి పత్రంతో పని చేయడానికి కొన్ని దృశ్యాలను చూద్దాం.
మూలకం యొక్క విలువను పొందండి (విలువలను కలిగి ఉన్న మూలకాల కోసం):
var result = $ ("selector").value();మూలకం విలువను సెట్ చేయండి (విలువలను కలిగి ఉన్న మూలకాల కోసం):
$ ("selector").value(newValue);కొన్ని మూలకం లోపల HTMLని ఎలా జోడించాలి?
$ ("selector").html(newHTML);మరియు మూలకం లోపల ఉన్న HTMLని ఎలా పొందాలి?
var html = $ ("selector").html();నేను HTML కాకుండా సాదా వచనాన్ని పొందాలనుకుంటే/జోడించాలనుకుంటే? ఇక్కడ కూడా ఆశ్చర్యం లేదు.
var html = $ ("selector").text();నేను ఒక మూలకం యొక్క రంగును పొందాలనుకుంటే/మార్చాలనుకుంటే?
$ ("selector").color("red");మీరు శైలులతో పని చేయవలసి వస్తే, దీన్ని చేయడం కూడా సులభం:
$ ("selector").css("color", "red");కొత్త మూలకాన్ని ఎలా జోడించాలి?
$ (".container").append($("h3"));