வலைத்தளப் பக்கங்களை உருவாக்குவதற்கு உதவிய பலதரப்பட்ட html tags-ஐ எவ்வாறு jQuery மூலம் பல்வேறு முறைகளில் அணுகுவது என்று இந்தப் பகுதியில் பார்க்கப்போகிறோம். பின்வரும் எடுத்துக்காட்டில் அனைத்து வகையான tags-ஐயும் பயன்படுத்தி ஒரு பக்கம் உருவாக்கப்பட்டுள்ளது. பின்னர் Desired Changes எனும் பொத்தானை சொடுக்கும்போது அவைகள் jQuery மூலம் எவ்வாறு செயல்படுத்தப்படுகின்றன என்பதும் கொடுக்கப்பட்டுள்ளது. இதில் ஒவ்வொரு tag-ம் ஒவ்வொரு விதத்தில் jQuery-மூலம் அழைக்கப்பட்டு ஒவ்வொரு வகையான மாற்றங்களை நிகழ்த்துகின்றன.
இவை அனைத்தையும் உள்ளடக்கிய ஒரு எடுத்துக்காட்டு கீழே கொடுக்கப்பட்டுள்ளது.
சாதாரண வெளிப்பாடு:
jQuery ஏற்படுத்திய மாற்றம்:
நிரலுக்கான விளக்கம்:
முதலில் உள்ள $(“p”).css(“color”,”blue”) என்பது <p> எனும் tags-க்குள் வரையறுக்கப்பட்டுள்ள அனைத்தையும் நீல நிறத்தில் மாற்ற உதவுகிறது. $( ) என்பதற்குள் <p>, <a>, <div>, <img> போன்ற பலதரப்பட்ட tags-ஐ முறையே $(“p”) , $(“a”) , $(“div”) , $(“img”) எனக் கொடுத்து அணுகலாம். இதுவே ஒரு tag -ன் வகையைக் கொண்டு அணுகும் முறை ஆகும்.
அடுத்து உள்ள $(“#abcd”).css(“text-align”,”center”) என்பது <p id=’abcd’>-க்குள் வரையறுக்கப்பட்டுள்ள அனைத்தையும் மத்தியில் நகர்த்த உதவும். $( ) என்பதற்குள் # ஐத் தொடர்ந்து id-ஐக் கொடுப்பதன் மூலம், அந்த id-யைப் பெற்றுள்ள அனைத்து tags-ஐயும் நம்மால் அணுக முடியும். இதுவே ஒரு tag -ன் id-ஐக் கொண்டு அணுகும் முறை ஆகும்.
அவ்வாறே $( ) என்பதற்குள் புள்ளிவைத்து அதனைத் தொடர்ந்து class-ன் பெயரை அளிப்பதன் மூலம், அந்த class-ஐப் பெற்றுள்ள அனைத்து tags-ஐயும் நம்மால் அணுக முடியும். $(“.efg”).css(“background-color”,”#ffff00″) என்பது <p class=’efg’>-க்குள் வரையறுக்கப்பட்டுள்ளவற்றை மஞ்சள் நிறமூட்டப்பட்ட பின்புறத்துடன் வெளிப்படுத்தும். இதுவே ஒரு tag -ன் class-ஐக் கொண்டு அணுகும் முறை ஆகும்.
ஒரு tag- ன் இன்னபிற பண்புகளைக் கொண்டும் நாம் அணுகலாம். $(“[align=’right’]”).css(“background-color”,”pink”).css(“text-align”,”center”) என்பது வலது பக்கமாக முறைப்படுத்தப்பட்ட அனைத்து tags-ஐயும் எடுத்து, அதில் வரையறுக்கப்பட்டவற்றை கொடுக்கப்பட்டுள்ள பண்புகளுக்கு ஏற்ப மாற்றுகிறது. இங்கு இரண்டு பண்புகள் தொடர்ச்சியாக கொடுக்கப்பட்டுள்ளன. அதாவது ரோசா நிறப் பின்புறத்துடன் வெளிப்படுத்துவதோடு மட்டுமல்லாமல், அதனை மையப்படுத்தியும் காட்டுக என்று இவை தெரிவித்துள்ளன. இதுவே ஒரு tag -ன் வேறு சில பண்புகளைக் கொண்டு அணுகும் முறை ஆகும்.
அடுத்ததாக ஒரே வகையான tags-ஐ அது அமைந்துள்ள வரிசைமுறையின் அடிப்படையில் அணுகுவதற்கு $(“div:eq(1)”).css(“color”,”red”) என்று கொடுக்கப்பட்டுள்ளது. இது ஒன்றுக்கும் மேற்பட்ட <div> tags இருப்பின், அதில் இரண்டாவது <div>ஐ மட்டும் எடுத்து அதில் வரையறுக்கப்பட்டுள்ளவற்றை மட்டும் சிகப்பு நிற எழுத்துக்களில் மாற்றும். :$( ) என்பதற்குள் கொடுக்கப்படும் :eq(0), :eq(1) :eq(2) என்பது முறையே முதலாவது, இரண்டாவது மற்றும் மூன்றாவது tags-ஐக் குறிக்கும். அதாவது இதனுடைய index 0-விலிருந்து ஆரம்பிப்பதால் $(“div:eq(1)”) என்பது எப்போதும் இரண்டாவது <div>-ஐயே குறிக்கும்.
$(“p:first-child”).css(“font-style”,”italic”) என்பது முதலாவது <p>-ஐத் தேர்ந்தெடுத்து அதனை சாய்வெழுத்துக்களில் காட்டுகிறது. $( ) என்பதற்குள் கொடுக்கப்படும் p:first-child என்பது முதலாவது <p>-ஐயும், அவ்வாறே p:last-child என்பது கடைசியாக உள்ள <p>ஐயும் தேர்ந்தெடுத்து வேண்டிய மாற்றங்களை நிகழ்த்தும். இதுவே ஒரே வகையான tags-ஐ தாய்-சேய் அடிப்படையில் அணுகுதல் என்று அழைக்கப்படும். இதேபோன்று மற்ற வகையான <a>, <div>, <img> tags-ஐயும் நம்மால் அணுக முடியும்.
$(“#dv1”).hide() என்பது dv1 எனும் id-ஐக் கொண்டுள்ள <div>க்குள் உள்ளவற்றை திரையில் வெளிப்படுத்தாமல் மறைக்கும் வேலையைச் செய்கிறது. show(), hide() போன்றவை ஒருசில விஷயங்களை திரையில் வெளிப்படுத்துவதற்கும், மறைப்பதற்கும் பயன்படுகின்ற methods ஆகும்.
Female அல்லது Male எனும் இரண்டில் ஒன்றைத் தேர்ந்தெடுப்பதற்கான jQuery. $(“#r1”).prop(“checked”, true) என்று கொடுக்கப்பட்டுள்ளது. இது r1 எனும் id-ஐப் பெற்றுள்ள Female எனும் மதிப்பினைத் தேர்ந்தெடுக்கிறது. <form>-க்குள் கொடுக்கப்படும் <input>-ன் வகைகளாக அமைகின்ற இதுபோன்ற பொத்தான்களை தேர்வு செய்வதற்கு prop எனும் பண்பு பயன்படுகிறது. $( ) என்பதற்குள் id- ஐக் கொடுத்துவிட்டு $(# ).prop(“checked”, true) என்று கொடுத்தோமானால் அந்த id-ஐப் பெற்றுள்ள input tag-ன் மதிப்பானது தேர்வு செய்யப்பட்டுவிடும். இதுவே Checkboxes, radio buttons போன்றவற்றை அணுகும் முறை ஆகும்.
$(“p.one , div.one”).css(“text-align”,”right”) என்பது <p class=’one’> அல்லது <div class=’one’> ஐத் தேர்ந்தெடுத்து , அதன் மதிப்புகளை வலப்புறமாக மாற்றி அமைக்கிறது. இங்கு <p class=’one’> என்ற ஒன்று இல்லாத காரணத்தால், <div class=’one’> ஐ மட்டும் எடுத்துக் கொண்டு செயல்படுகிறது. $( ) என்பதற்குள் பல்வேறு நிபந்தனைகளை comma மூலம் பிரித்து நம்மால் கொடுக்க முடியும். அவற்றில் ஏதேனும் ஒன்று பொருந்தினால் கூட அது தேர்வு செய்யப்பட்டு வேண்டிய மாற்றம் நிகழ்த்தப்பட்டுவிடும். இவ்வாறாக ஒன்றுக்கும் மேற்பட்ட அணுகுமுறைகளை ஒன்றாக இணைத்தும் நாம் தேர்வு செய்யலாம்.