గత వారం, నేను ఏ ఆధునిక వెబ్ డెవలపర్‌కి j క్వెరీ ఎంత ముఖ్యమైనది మరియు ఎందుకు అద్భుతంగా ఉంది అనే దాని గురించి మాట్లాడాను. ఈ వారం, నేను కొన్ని కోడ్‌లతో మన చేతులను మురికిగా చేసుకుని, మా ప్రాజెక్ట్‌లలో j క్వెరీని ఎలా ఉపయోగించాలో నేర్చుకోవాల్సిన సమయం వచ్చింది.

నేను ఇప్పుడు చెప్తాను - j క్వెరీని ఉపయోగించడానికి మీరు జావాస్క్రిప్ట్ నేర్చుకోవాల్సిన అవసరం లేదు. మీరు j క్వెరీని జావాస్క్రిప్ట్ యొక్క పరిణామంగా భావిస్తే ఇది ఉత్తమమైనది - దీన్ని చేయడానికి మంచి మార్గం - కేవలం ఒక లైబ్రరీ కంటే కార్యాచరణను జోడిస్తుంది. మీకు అవసరమైన ఏదైనా జావాస్క్రిప్ట్ మార్గంలో తీయబడుతుంది. వెబ్ డెవలపర్‌గా మీకు HTML మరియు CSS గురించి మంచి పరిజ్ఞానం ఉందని భావించబడుతుంది (మరియు ఇక్కడ సహాయకరమైన ఉచిత xHTML గైడ్ లేకపోతే!).

---

---

డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్

j క్వెరీ ప్రయాణం మరియు తారుమారు గురించి తీర్పు - ది డి ఓక్యుమెంట్ లేదా వస్తువు ఎమ్ odel. DOM అనేది పేజీ యొక్క క్రమానుగత చెట్టు ప్రాతినిధ్యం, ఇది అన్ని HTML కోడ్‌లలో చదివిన తర్వాత బ్రౌజర్‌ల ద్వారా నిర్మించబడింది. J క్వెరీలో, మేము వంటి పదజాలం ఉపయోగిస్తాము పేరెంట్ , పిల్లలు , మరియు తోబుట్టువుల చాలా తరచుగా, కాబట్టి DOM కి సంబంధించి దీని అర్థం ఏమిటో మీకు ఒక ఆలోచన ఉండాలి.

నుండి ఈ సాధారణ రేఖాచిత్రంw3 పాఠశాలలుభావనలను చక్కగా వివరిస్తుంది. మూలకం యొక్క పేరెంట్ అని మీరు చూడగలరు మూలకం తక్షణం కలిగి ఉంటుంది

తోబుట్టువు.

ప్రారంభించడం: j క్వెరీని జోడించడం

కుదించినప్పుడు j క్వెరీ యొక్క తాజా వెర్షన్ 91KB గా ఉంటుంది, కనుక ఇది చిన్న ఫోటోగ్రాఫ్ లేదా స్క్రీన్ షాట్ వలె అదే పేజీ బరువును జోడిస్తుంది. మీ ప్రాజెక్ట్‌లో j క్వెరీని చేర్చడానికి సులభమైన మార్గం మీ సైట్ హెడర్ విభాగంలో అత్యంత ఇటీవలి హోస్ట్ వెర్షన్‌కు సూచనను అతికించడం:

అయితే మీరు WordPress నడుపుతున్నట్లయితే, ఇది j క్వెరీ లైబ్రరీకి ఇప్పటికే దాని స్వంత కాపీని కలిగి ఉన్నందున ఇది సమస్యలకు కారణం కావచ్చు. ప్లగిన్‌లు దీన్ని లోడ్ చేయమని అభ్యర్థించగలవు, మరియు WordPress తెలివిగా మాత్రమే j క్వెరీని ఎన్ని ప్లగ్‌ఇన్‌లు అడిగినప్పటికీ ఒకసారి లోడ్ చేస్తుంది.

మీరు ఈ క్రింది పంక్తిని మీతో జోడిస్తే విధులు. php థీమ్ ఫైల్, అది చేర్చడానికి మీరు మరొక అభ్యర్థనను జోడిస్తారు. మీ థీమ్ యాక్టివ్‌గా ఉంటే దానిని ఎల్లప్పుడూ లోడ్ చేయడం WordPress కి తెలుస్తుంది.

---

---

ఫేస్‌బుక్‌లో తొలగించిన సందేశాలను మీరు ఎలా చూస్తారు

wp_enqueue_script('jquery');

గుర్తుంచుకోవలసిన రెండవ విషయం ఏమిటంటే, ప్రామాణిక పద్ధతిని ఉపయోగించి j క్వెరీని జోడించినప్పుడు, అది ఇలా లోడ్ చేయబడుతుంది $ . మీరు j క్వెరీతో చేసే ఏదైనా ఈ $ ముందు ఉంటుంది, అవి:

$.ajax

లేదా

---

---

$('#header')

అయితే, WordPress ద్వారా j క్వెరీ లోడ్ అయినప్పుడు, ప్రతిదీ $ కి బదులుగా j క్వెరీ వేరియబుల్ ఉపయోగించి చేయబడుతుంది, కాబట్టి ఉదాహరణకు:

jQuery('#header')

మీ స్వంత కోడ్ వ్రాసేటప్పుడు ఇది పెద్ద సమస్య కానప్పటికీ, వెబ్‌లో మీరు కనుగొన్న j క్వెరీ స్నిప్పెట్‌లను కత్తిరించడం మరియు అతికించడం అంటే j క్వెరీని ఉపయోగించడానికి బదులుగా అనువదించాల్సి ఉంటుంది. $ - అంతే.

దీని చుట్టూ ఉన్న ఒక మార్గం మీకు కనిపించే $ -style కోడ్‌ను చుట్టడం:

(function($) {
// paste $ code in here
})(jQuery);

ఇది పడుతుంది j క్వెరీ వేరియబుల్ మరియు దానిని అనామక ఫంక్షన్‌గా పంపుతుంది $ . నేను తదుపరిసారి అనామక విధులను వివరిస్తాను - ప్రస్తుతానికి, j క్వెరీ కోడ్ యొక్క ప్రాథమిక నిర్మాణాన్ని నేర్చుకుందాం.

మీ కోడ్‌ని HTML లేదా PHP పేజీకి జోడించడానికి, ట్యాగ్‌ల లోపల ప్రతిదీ జతపరచండి, ఇలా:


// jQuery code codes here


$ ('సెలెక్టర్').పద్ధతి();

టైటిల్‌లో, అంతే. DOM ని తారుమారు చేయడానికి j క్వెరీ కోడ్ యొక్క ఒకే భాగం యొక్క ప్రాథమిక నిర్మాణం అది. సులభం, సరియైనదా?

దిసెలెక్టర్ఈ నియమానికి సరిపోయే విషయాలను కనుగొనమని j క్వెరీకి చెబుతుంది, మరియు CSS సెలెక్టర్ల మాదిరిగానే ఉంటుంది (ఆపై మరికొన్ని పైన). కాబట్టి, CSS లో వలె మీరు అన్ని లింక్‌లను స్టైల్ చేస్తారు

a { }

J క్వెరీలో కూడా అదే జరుగుతుంది

$('a')

ఏదైనా HTML అంశాల కోసం దీన్ని చేయవచ్చు - div, h1, span - సంసార. మీరు మరింత నిర్దిష్టంగా ఉండటానికి CSS తరగతులు మరియు ID లను కూడా ఉపయోగించవచ్చు.

ఉదాహరణకు, 'findme' క్లాస్‌తో అన్ని లింక్‌లను కనుగొనడానికి, మీరు వీటిని ఉపయోగించవచ్చు:

$('a.findme')

మీరు ప్రతిసారీ మూలకం యొక్క రకాన్ని పేర్కొనవలసిన అవసరం లేదు - కానీ మీరు అలా చేస్తే, అది నియమాన్ని మరింత నిర్దిష్టంగా చేస్తుంది. మీరు ఇప్పుడే చెప్పవచ్చు

$('.findme')

ఇది క్లాస్‌తో ప్రతిదీ సరిపోతుంది నన్ను కనిపెట్టు , అది లింక్ అయినా.

పేరున్న ID మూలకాన్ని ఉపయోగించడానికి, ఉపయోగించండి # బదులుగా సంతకం చేయండి. ఇక్కడ ఉన్న ముఖ్యమైన వ్యత్యాసం ఏమిటంటే, ఒక ID సెలెక్టర్ ఒక వస్తువును మాత్రమే ఎన్నుకుంటుంది, అదే సమయంలో ఒక క్లాస్ సెలెక్టర్ ఒకటి కంటే ఎక్కువ కనుగొనవచ్చు.

ఆండ్రాయిడ్‌లో ఐఓఎస్ 9 ఎమోజీలను ఎలా పొందాలి

$('#something')

ప్రాథమికంగా మీరు CSS లో చేయగలిగితే j క్వెరీ కూడా చేస్తుంది. వాస్తవానికి, మీరు కొన్ని క్లిష్టమైన CSS3 శైలి సూడో సెలెక్టర్లను కూడా చేయవచ్చు: మొదటిది

$('body p:first')

ఇది పేజీలోని పేరాగ్రాఫ్‌ను పట్టుకుంటుంది. మీరు కొన్ని లక్షణాలతో మూలకాలను కూడా కనుగొంటారు. ఈ ఉదాహరణను పరిగణించండి; పేజీలో అంతర్గతంగా సూచించే అన్ని లింక్‌లను మేము కనుగొనాలనుకుంటున్నాము ఉపయోగించుకోండి మరియు వాటిని ఏదో ఒక విధంగా హైలైట్ చేయండి. మేము వాటిని ఎలా కనుగొనగలమో ఇక్కడ ఉంది:

$('a[href*='makeuseof']')

ఇది బాగుంది కదా? బాగా, నేను అనుకుంటున్నాను.

మీ తదుపరి పోర్ట్ కాల్ ఉండాలి సెలెక్టర్ల కోసం j క్వెరీ API డాక్యుమెంటేషన్ . ఇది ఉపయోగించడానికి అందుబాటులో ఉన్న వివిధ రకాల సెలెక్టర్ల యొక్క భారీ జాబితా, మరియు మీరు అవన్నీ నేర్చుకుంటారని ఎవరూ ఊహించరు.

సమీకరణం యొక్క తదుపరి భాగంపద్ధతి- మీరు అవన్నీ కనుగొన్న తర్వాత ఆ విషయాలతో ఏమి చేయాలి - కానీ మేము దానిని తదుపరి పాఠం కోసం వదిలివేస్తాము. మీరు ఇప్పుడు వివిధ సెలెక్టర్లను ప్రయత్నించడం ప్రారంభించాలనుకుంటే, కింది css పద్ధతికి కట్టుబడి ఉండాలని నేను సూచిస్తున్నాను. ఇది రెండు పారామితులను తీసుకుంటుంది - ఒక CSS ఆస్తి పేరు , మరియు ఒక కొత్త విలువ ఆ ఆస్తికి కేటాయించడానికి. కాబట్టి, అన్ని లింక్‌లకు ఎరుపు నేపథ్య రంగును ఇవ్వడానికి, మీరు ఇలా చేస్తారు:

$('a').css('background-color','red');

తగినంత సరళమైనది! ఇది ఎటువంటి ఆచరణాత్మక ఉపయోగం కానప్పటికీ, మీ సెలెక్టర్లను ఉపయోగించి ఉన్న ఏవైనా అంశాలను సులభంగా చూడడానికి ఇది మిమ్మల్ని అనుమతిస్తుంది. ఇప్పుడు ముందుకు సాగండి మరియు ఎంచుకోండి - DOM మీ కోసం వేచి ఉంది.

ఈ ట్యుటోరియల్ మీకు ఉపయోగపడిందని నేను ఆశిస్తున్నాను; నేను వీలైనంత సులభంగా అర్థం చేసుకోవడానికి ప్రయత్నించాను. మీకు ఏవైనా ప్రశ్నలు అడగడానికి సంకోచించకండి లేదా అభిప్రాయాన్ని తెలియజేయండి, కానీ నేను ఖచ్చితంగా ఎలైట్ j క్వెరీ నింజా కాదని తెలుసుకోండి.

షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ మీ వర్చువల్‌బాక్స్ లైనక్స్ మెషిన్‌లను సూపర్‌ఛార్జ్ చేయడానికి 5 చిట్కాలు

వర్చువల్ మెషీన్స్ అందించే పేలవమైన పనితీరుతో విసిగిపోయారా? మీ వర్చువల్‌బాక్స్ పనితీరును పెంచడానికి మీరు ఏమి చేయాలో ఇక్కడ ఉంది.

తదుపరి చదవండి సంబంధిత అంశాలు

• వెబ్ కల్చర్
• వెబ్ అభివృద్ధి
• జావాస్క్రిప్ట్
• ప్రోగ్రామింగ్
• j క్వెరీ

రచయిత గురుంచి జేమ్స్ బ్రూస్(707 కథనాలు ప్రచురించబడ్డాయి)

జేమ్స్ ఆర్టిఫిషియల్ ఇంటెలిజెన్స్‌లో BSc కలిగి ఉన్నారు మరియు CompTIA A+ మరియు నెట్‌వర్క్+ సర్టిఫికేట్ పొందారు. అతను హార్డ్‌వేర్ రివ్యూస్ ఎడిటర్‌గా బిజీగా లేనప్పుడు, అతను LEGO, VR మరియు బోర్డ్ గేమ్‌లను ఆస్వాదిస్తాడు. MakeUseOf లో చేరడానికి ముందు, అతను లైటింగ్ టెక్నీషియన్, ఇంగ్లీష్ టీచర్ మరియు డేటా సెంటర్ ఇంజనీర్.

జేమ్స్ బ్రూస్ నుండి మరిన్ని

మా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి

టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!

సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి