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()எடுத்துக்காட்டு:$("#myElement").fadeIn(1000)1 வினாடியில் "myElement" ஐடியுடன் உள்ள உறுப்பில் மங்குகிறது. -
ஸ்லைடுஅப்/ஸ்லைடுடவுன் விளைவுகளைச் செயல்படுத்துதல்:
.slideUp(),.slideDown()எடுத்துக்காட்டு:$(".myClass").slideUp(500)0.5 வினாடிகளில் "myClass" வகுப்பில் அனைத்து உறுப்புகளையும் ஸ்லைடு செய்கிறது. -
தனிப்பயன் அனிமேஷன்களைச் செய்தல்:
.animate()எடுத்துக்காட்டு:$("#myElement").animate({ left: '250px', opacity: '0.5' })"myElement" ஐடியுடன் உறுப்பை அதன் இடது நிலை மற்றும் ஒளிபுகாநிலையை மாற்றுவதன் மூலம் அனிமேட் செய்கிறது.
கூறுகளைத் தேர்ந்தெடுப்பதற்கும், அவற்றின் பண்புகளைக் கையாளுவதற்கும், விளைவுகள் அல்லது அனிமேஷன்களைப் பயன்படுத்துவதற்கும் jQuery இன் அடிப்படை தொடரியல் பல்வேறு அம்சங்களை எவ்வாறு பயன்படுத்துவது என்பதை இந்த எடுத்துக்காட்டுகள் விளக்குகின்றன. jQuery ஆனது வலை அபிவிருத்தி பணிகளை எளிமைப்படுத்தவும் மேம்படுத்தவும் ஏராளமான முறைகள் மற்றும் செயல்பாடுகளை வழங்குகிறது.