jQuery சிந்தக்ஸ் (Syntax) - அறிமுகம்

jQuery சிந்தக்ஸ் (Syntax) – அறிமுகம்

வணக்கம் நண்பர்களே! இன்று நாங்கள் jQuery இன் சிந்தக்ஸ் பற்றி பேசப் போகிறோம். jQuery கற்றுக்கொள்வதற்கு இது மிகவும் முக்கியமான விஷயம், ஏனெனில், இது JavaScript-ஐ எளிதாக்குவதற்கான ஒரு முக்கியமான தூண்.

jQuery சிந்தக்ஸ்:

jQuery-இல் செயல்படுத்தும் சிந்தக்ஸ் மிகவும் எளிமையானது. அதில் முக்கியமாக மூன்று பகுதிகள் உள்ளன:

$ (dollar sign): இது jQuery ஐ குறிக்கிறது. JavaScript இல், $ ஒரு குறியீடாக பயன்படுத்தப்படுகிறது.
Selector: HTML உறுப்புகளைத் தேர்ந்தெடுக்க பயன்படுத்தப்படும்.
Action: HTML உறுப்புகளுக்கு செய்யப்படும் செயல்கள்.

jQuery சிந்தக்ஸ் பொதுவான வடிவம்:

$(selector).action();

$: jQuery ஐ குறிக்கிறது.
selector: HTML உருப்படியை தேர்வு செய்யும்.
action: அந்த உருப்படிக்கு செய்யும் செயல்பாடு.

Selector பற்றி

Selectors மூலம் HTML உருப்படிகளை தேர்வு செய்யலாம். இதனால், நாம் எந்த உருப்படிகளுடன் வேலை செய்ய வேண்டுமென்று தெரிவுசெய்வது சுலபமாகும்.

சில பொதுவான selectors:

$(“p”): எல்லா உருப்படிகளையும் தேர்வு செய்யும்.
$(“#id”): குறிப்பிட்ட id கொண்ட உருப்படியை தேர்வு செய்யும்.
$(“.class”): குறிப்பிட்ட class கொண்ட உருப்படிகளை தேர்வு செய்யும்.

Action எவ்வாறு செயல்படுகிறது?

நாம் செலக்டர்களை தேர்வு செய்தவுடன், அதில் செயல்பாடுகளைச் சேர்க்கலாம். இதைப் பயன்படுத்தி, HTML உருப்படிகளை மாற்றலாம் அல்லது நிகழ்வுகளைச் செயல்படுத்தலாம்.

$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});

இந்த உதாரணத்தில், ஒரு பத்தியை (p tag) கிளிக் செய்தவுடன், அது மறைந்து விடும்.

jQuery Functions

jQuery-ல் பல செயல்பாடுகள் உள்ளன, அவற்றில் சில:

hide(): உருப்படியை மறைக்கிறது.
show(): மறைக்கப்பட்ட உருப்படியை காட்டுகிறது.
toggle(): மறை மற்றும் காட்டு இடையே மாறுகிறது.
fadeIn(): உருப்படி மெதுவாக காட்டப்படுகிறது.
fadeOut(): உருப்படி மெதுவாக மறைக்கப்படுகிறது.

ஒரு சின்ன உதாரணம்:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Syntax Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#myButton").click(function(){
                $("#myText").hide();
            });
        });
    </script>
</head>
<body>

<p id="myText">jQuery சிந்தக்ஸ் பற்றி நீங்கள் கற்றுக்கொள்வது மிகவும் எளிது!</p>
<button id="myButton">மறைக்க</button>

</body>
</html>

முடிவுரை:

jQuery-இன் சிந்தக்ஸ் மிக எளிமையானது. நீங்கள் $ மற்றும் சில selectors மற்றும் actions பயன்படுத்தி HTML உருப்படிகளை எளிதாக மாற்றலாம். இதனை கற்றுக்கொள்வதற்கு சில உடனடி விளைவுகளைப் பார்க்கலாம், மேலும் வெப்சைட்டின் செயல்திறனையும் மேம்படுத்தலாம்.