வலைத்தளப் பக்கங்களை உருவாக்குவதற்கு உதவிய பலதரப்பட்ட 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 மூலம் பிரித்து நம்மால் கொடுக்க முடியும். அவற்றில் ஏதேனும் ஒன்று பொருந்தினால் கூட அது தேர்வு செய்யப்பட்டு வேண்டிய மாற்றம் நிகழ்த்தப்பட்டுவிடும். இவ்வாறாக ஒன்றுக்கும் மேற்பட்ட அணுகுமுறைகளை ஒன்றாக இணைத்தும் நாம் தேர்வு செய்யலாம்.
Thanks for Your Uploading This Content
It is Very useful Javascript Framework
Thanks Madam
Future la CSS Framework Bootstrap mudinja podunga Madam