jQuery நூலகம்

All lectures for TA purposes
நிலை 1 , பாடம் 966
கிடைக்கப்பெறுகிறது

8.1 jQuery ஐ இணைக்கிறது

இறுதியாக, நாங்கள் jQuery நூலகத்திற்கு வந்தோம். இந்த கட்டுரை எழுதப்பட்ட நேரத்தில், இது ஏற்கனவே வழக்கற்றுப் போய்விட்டது மற்றும் புதிய திட்டங்களில் கிட்டத்தட்ட பயன்படுத்தப்படவில்லை . ஆனால் ஒரு காலத்தில் இது மிகவும் பிரபலமாக இருந்தது, மிகவும் நன்றாக ஆவணப்படுத்தப்பட்டது, மேலும் அதன் பயன்பாட்டுடன் இணையத்தில் நிறைய எடுத்துக்காட்டுகள் உள்ளன .

எனவே, நீங்கள் ஒரு சிறிய வலைத் திட்டத்தை எழுதுகிறீர்கள் மற்றும் நவீன கட்டமைப்பைக் கற்றுக்கொள்வதற்கு மாதங்கள் செலவிட விரும்பவில்லை என்றால், நீங்கள் jQuery நூலகத்தைப் பயன்படுத்த பரிந்துரைக்கிறேன்.

ஆயிரக்கணக்கான jQuery செயல்பாடுகளைப் பயன்படுத்த, அதை உங்கள் பக்கத்தில் சேர்க்க வேண்டும். நீங்கள் இதை இப்படி செய்யலாம்:


   <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   </head>

jQuery உடன் பணிபுரிவதை இரண்டு வகையாகப் பிரிக்கலாம்.

முதலில், நீங்கள் ஒரு jQuery நூலகப் பொருளைப் பெறலாம், இது தனிப்பயன் jQuery பொருளில் மூடப்பட்டிருக்கும் வழக்கமான HTML உறுப்பு ஆகும்.

இரண்டாவதாக, jQuery ஆனது HTML உறுப்புகளுடன் பிணைக்கப்படாத பல உலகளாவிய பொருள்களைக் கொண்டுள்ளது. அவற்றையும் பயன்படுத்த வேண்டும்.

முதலில் இருந்து ஆரம்பிக்கலாம்.

8.2 தேர்வாளர்களுடன் பணிபுரிதல்

பொருள்களுடன் பணிபுரிய jQuery தேர்வாளர்களைப் பயன்படுத்துகிறது (CSS மற்றும் அதன் வகுப்புகளை நினைவில் கொள்கிறீர்களா?). எனவே, jQuery இல், நீங்கள் சில பொருள் அல்லது பொருள்களின் குழுவைத் தேர்ந்தெடுக்க விரும்பினால், அவற்றின் தேர்வியை அமைக்க வேண்டும்.

எடுத்துக்காட்டுகள்:

குறியீடு விளக்கம் குறிப்பு
1 $("div") DIV குறிச்சொல்லுடன் அனைத்து பொருட்களையும் தேர்ந்தெடுக்கிறது பல பொருள்கள்
2 $("img.#image123") IMG குறிச்சொல் மற்றும் ஐடி == image123 உள்ள அனைத்து பொருட்களையும் தேர்ந்தெடுக்கிறது ஒரு பொருள்
3 $("#image123") ID == image123 உள்ள அனைத்து பொருட்களையும் தேர்ந்தெடுக்கிறது ஒரு பொருள்
4 $("div.article") வகுப்பு கட்டுரையைக் கொண்ட DIV குறிச்சொல்லுடன் அனைத்து பொருட்களையும் தேர்ந்தெடுக்கிறது பல பொருள்கள்

எல்லா இணைப்புகளிலும் நிகழ்வு கையாளுதலைச் சேர்க்க விரும்புகிறோம் என்று வைத்துக்கொள்வோம் onclick, jQuery மூலம் அதை எப்படிச் செய்யலாம் என்பது இங்கே:


  $("a").click(function() {
    alert("Click");
  });

இங்கே மூன்று படிகள் எடுக்கப்படுகின்றன:

  1. தேர்வாளருடன் பொருந்தக்கூடிய பொருளை(களை) பெறுகிறது "a".
  2. என்பதை அழைக்கும் ஒரு அநாமதேய செயல்பாட்டை நாங்கள் உருவாக்குகிறோம் alert().
  3. clickஇந்தச் செயல்பாட்டை புள்ளி 1 இலிருந்து அனைத்துப் பொருள்களுக்கும் ஒரு நிகழ்வு கையாளுபவராக அமைத்துள்ளோம் .

jQuery பற்றிய மற்றொரு நல்ல விஷயம் என்னவென்றால், அதன் குறியீடு படிக்க எளிதானது. எல்லாம் எவ்வாறு இயங்குகிறது என்பதைக் கண்டுபிடிக்க அதிக நேரம் எடுக்காது. வேலை செய்யும் குறியீடு இருந்தால், அது என்ன செய்கிறது என்பதைப் புரிந்துகொள்வது போதுமானது.

8.3 ஆவண கூறுகளுடன் வேலை செய்தல்

jQuery ஐப் பயன்படுத்தி ஒரு ஆவணத்துடன் பணிபுரிவதற்கான சில காட்சிகளைப் பார்ப்போம்.

ஒரு தனிமத்தின் மதிப்பைப் பெறுக (மதிப்புகளைக் கொண்ட உறுப்புகளுக்கு):

var result = $ ("selector").value();

உறுப்பு மதிப்பை அமைக்கவும் (மதிப்புகளைக் கொண்ட உறுப்புகளுக்கு):

$ ("selector").value(newValue);

சில உறுப்புகளுக்குள் HTML ஐ எவ்வாறு சேர்ப்பது?

$ ("selector").html(newHTML);

உறுப்புக்குள் இருக்கும் HTML ஐ எவ்வாறு பெறுவது?

var html = $ ("selector").html();

நான் HTML அல்ல, எளிய உரையைப் பெற/சேர்க்க விரும்பினால் என்ன செய்வது? இங்கேயும் ஆச்சரியங்கள் இல்லை.

var html = $ ("selector").text();

ஒரு தனிமத்தின் நிறத்தை நான் பெற/மாற்ற விரும்பினால் என்ன செய்வது?

$ ("selector").color("red");

நீங்கள் பாணிகளுடன் வேலை செய்ய வேண்டும் என்றால், இதைச் செய்வதும் எளிதானது:

$ ("selector").css("color", "red");

புதிய உறுப்பை எவ்வாறு சேர்ப்பது?

$ (".container").append($("h3"));
கருத்துக்கள்
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION