jQuery च्या मूलभूत वाक्यरचनामध्ये निवडक(CSS-शैली निवडक) आणि निवडलेल्या घटकांमध्ये फेरफार करण्यासाठी पद्धती वापरणे समाविष्ट आहे. येथे jQuery ची काही मूलभूत वाक्यरचना उदाहरणे आहेत:
घटक निवडत आहे
-
HTML टॅग नावानुसार घटक निवडा:
$("tagname")उदाहरण: पृष्ठावरील$("p")सर्व घटक निवडते.<p> -
CSS वर्गानुसार घटक निवडा:
$(".classname")उदाहरण:$(".myClass")"myClass" वर्ग असलेले सर्व घटक निवडते. -
आयडीनुसार घटक निवडा:
$("#idname")उदाहरण:$("#myElement")"myElement" आयडी असलेले घटक निवडते. -
विशेषतानुसार घटक निवडा:
$("[attribute='value']")उदाहरण: "बटण" वर सेट केलेले$("[data-type='button']")गुणधर्म असलेले घटक निवडतेdata-type. -
निवडी एकत्र करणे:
$("tagname.classname"),$("#idname .classname"), ...
निवडक घटक हाताळणे
-
घटकाची सामग्री बदलणे:
.html(),.text()उदाहरण:$("#myElement").html("New content")आयडी "myElement" सह घटकाची HTML सामग्री सेट करते. -
घटक गुणधर्म बदलणे:
.attr(),.prop()उदाहरण: सर्व घटकांचे गुणधर्म$("img").attr("src", "newimage.jpg")बदलते.src<img> -
घटकाचे CSS वर्ग हाताळणे:
.addClass(),.removeClass(),.toggleClass()उदाहरण:$("#myElement").addClass("highlight")"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()उदाहरण: "myElement" आयडी असलेल्या घटकाला$("#myElement").append("<p>New paragraph</p>")नवीन घटक जोडते.<p>
प्रभाव आणि अॅनिमेशन
-
fadeIn/fadeOut प्रभाव पार पाडणे:
.fadeIn(),.fadeOut()उदाहरण:$("#myElement").fadeIn(1000)1 सेकंदाच्या कालावधीत "myElement" आयडी असलेल्या घटकामध्ये फेड्स. -
slideUp/slideDown इफेक्ट्स करणे:
.slideUp(),.slideDown()उदाहरण:$(".myClass").slideUp(500)0.5 सेकंदांच्या कालावधीत "myClass" वर्गासह सर्व घटकांना वर स्लाइड करते. -
सानुकूल अॅनिमेशन करणे:
.animate()उदाहरण:$("#myElement").animate({ left: '250px', opacity: '0.5' })"myElement" आयडी असलेल्या घटकाची डावी स्थिती आणि अपारदर्शकता बदलून अॅनिमेट करते.
ही उदाहरणे jQuery च्या मूलभूत वाक्यरचनेचे विविध पैलू घटक निवडण्यासाठी, त्यांचे गुणधर्म हाताळण्यासाठी आणि प्रभाव किंवा अॅनिमेशन लागू करण्यासाठी कसे वापरावे हे दाखवतात. jQuery वेब डेव्हलपमेंट कार्ये सुलभ आणि वर्धित करण्यासाठी पद्धती आणि कार्यक्षमतांचा समृद्ध संच ऑफर करते.