jQuery ના મૂળભૂત વાક્યરચનામાં પસંદગીકાર(CSS-શૈલી પસંદગીકાર) અને પસંદ કરેલ ઘટકોને ચાલાકી કરવાની પદ્ધતિઓનો ઉપયોગ કરવાનો સમાવેશ થાય છે. અહીં jQuery ના કેટલાક મૂળભૂત વાક્યરચના ઉદાહરણો છે:
તત્વો પસંદ કરી રહ્યા છીએ
-
HTML ટેગ નામ દ્વારા તત્વો પસંદ કરો:
$("tagname")ઉદાહરણ: પૃષ્ઠ પરના$("p")તમામ ઘટકો પસંદ કરે છે.<p> -
CSS વર્ગ દ્વારા ઘટકો પસંદ કરો:
$(".classname")ઉદાહરણ:$(".myClass")વર્ગ "myClass" સાથેના તમામ ઘટકો પસંદ કરે છે. -
ID દ્વારા તત્વો પસંદ કરો:
$("#idname")ઉદાહરણ:$("#myElement")"myElement" ID સાથે ઘટક પસંદ કરે છે. -
વિશેષતા દ્વારા તત્વો પસંદ કરો:
$("[attribute='value']")ઉદાહરણ: "બટન" પર સેટ કરેલ$("[data-type='button']")વિશેષતા સાથે તત્વો પસંદ કરે છેdata-type. -
પસંદગીઓનું સંયોજન:
$("tagname.classname"),$("#idname .classname"), ...
પસંદ કરેલા તત્વોની હેરફેર
-
તત્વની સામગ્રી બદલવી:
.html(),.text()ઉદાહરણ:$("#myElement").html("New content")ID "myElement" સાથે ઘટકની HTML સામગ્રી સેટ કરે છે. -
તત્વ વિશેષતાઓને સંશોધિત કરવી:
.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 સેકન્ડના સમયગાળામાં વર્ગ "myClass" સાથે તમામ ઘટકોને ઉપર સ્લાઇડ કરો. -
કસ્ટમ એનિમેશન કરવું:
.animate()ઉદાહરણ:$("#myElement").animate({ left: '250px', opacity: '0.5' })એલિમેન્ટને તેની ડાબી સ્થિતિ અને અસ્પષ્ટતાને બદલીને ID "myElement" સાથે એનિમેટ કરે છે.
આ ઉદાહરણો દર્શાવે છે કે jQuery ના મૂળભૂત વાક્યરચનાનાં વિવિધ પાસાઓનો ઉપયોગ એલિમેન્ટ્સ પસંદ કરવા, તેમની પ્રોપર્ટીમાં ચાલાકી કરવા અને અસરો અથવા એનિમેશન લાગુ કરવા માટે કેવી રીતે કરવો. jQuery વેબ ડેવલપમેન્ટ કાર્યોને સરળ બનાવવા અને વધારવા માટે પદ્ધતિઓ અને કાર્યોનો સમૃદ્ધ સમૂહ પ્રદાન કરે છે.