ஜெகொரியில்
செலெக்டர் என்பது முக்கியமான ஒன்றாகும்.இது html எலெமெண்ட்களை செலெக்ட்
செய்து அதை கையாள உதவுகின்றது.
நாம்
ஒரு எலெமெண்டை வெ வ்வேறு வழிகளில் செலெக்ட் செய்யலாம்.
அதன்
ஐடி, எலெமெண்ட் டைப், கிளாஸ் பெயர், பண்புகள், பண்புகளின் மதிப்பு என வெவ்வேறு
வழிகளில் செலெக்ட் செய்யலாம்.
அதில்
முக்கியமானது ஐடி (ஆந்த எலெமெண்டின் பெயர்) பயன்படுத்தி செலெக்ட் செய்வதாகும்.
சான்று:
handler.
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btn1').click(function () {
alert('Muthu
karthikeyan');
});
});
</script>
</head>
<body>
<input id="btn1" type="button" value="Click " />
</body>
</html>
மேலே
உள்ள சான்றில் btn1 என்ற ஐடி உள்ள பட்டனுக்குன் கிளிக் ஈவண்ட்
சேர்க்கப்படுகின்றது.ஒரு எலெமண்டை ஐடி பயன்படுத்தி செலெக்ட் செய்ய வேண்டுமென்றால்
அதன் பெயருக்கு முன்னால் # சிம்பளை சேர்க்க வேண்டும். உதாரணம்.
#btn1
அதன்
பின்னனி வண்ணத்தை கீழே உள்ளவாறு மாற்றலாம்
Changes the background colour of the button to yellow
Changes the background colour of the button to yellow
$(document).ready(function () {
$('#btn1').css('background-color', 'red');
});
ஜெகொரி ஐடி
செலெக்டர் ஆனது ஜாவா ஸ்கிரிப்டின் document.getElementById() என்பதற்கு சமம்.
எனினும் document.getElementById() என்பது ரா DOM
ஆப்ஜெக்டை ரிடர்ன் செய்கின்றது. அதே நேரத்தில் ஜெகொரி ஐடி செலெக்டர் ஆனது ஒரு டாம்
ஆப்ஜெக்டை ராப் செய்து அதே நேரத்தில் ஜெகொரி மெத்தட்களையும் வழங்குகின்றது.
முக்கிய குறிப்பு:
document.getElementById() ஆனது ஜெகொரி ஐடி
செலெக்டரை காட்டிலும் வேகமானது .எனினும் நீங்கள் ஜெகொரிமெத்தட்களை பயன்படுத்த
வேண்டுமென்றால் ஜெகொரி ஐடி செலெக்டரை பயன்படுத்துவதே நன்று.
ஒரு
எலெமெண்டை அதன் டேக் பெயர் பயன்படுத்தி செலெக்ட் செய்யலாம்.
Syntax : $(element)
$('td') // Selects all td elements
$('div a') // Select all anchor elements that are descendants
of div element
$('div, span, a') // Selects all div, span and anchor elements
ஒரு டேபிளின் td –யின் லெங்க்தை கண்டு பிடிக்க கீழ்வறுமாறு நிரல் எழுதலாம்.
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert($('td').length);
});
</script>
</head>
<body>
<table style="border:1px solid black; border-collapse:collapse">
<tr>
<td>C#</td>
<td>VB.NET</td>
<td>ASP.NET</td>
</tr>
<tr>
<td>ADO.NET</td>
<td>SQLSERVER</td>
<td>LINQ</td>
</tr>
<tr>
<td>HTML</td>
<td>CSS</td>
<td>JQUERY</td>
</tr>
<tr>
<td>JAVA</td>
<td>Dot NET</td>
<td>PHP</td>
</tr>
<tr>
<td>ORACLE</td>
<td>ACCESS</td>
<td>MYSQL</td>
</tr>
</table>
<br /><br />
<div>
DIV 1
<br />
<a href="http://muthukarthikeyan.blogspot.com">viewer</a>
</div>
<br /><br />
<a href="http://google.com">Google</a>
<br /><br />
<div>DIV 2</div>
<br /><br />
<span>SPAN 1</span>
<br /><br />
<div>DIV 3</div>
</body>
</html>
கீழே உள்ள நிரல் எல்லா tr எலெமெண்ட்களை செலக்ட் செய்து அதன் பிண்ணனி
வண்ணத்தை சிவப்பாக மாற்றுகின்றது.
<script type="text/javascript">
$(document).ready(function () {
$('tr').css('background-Color', 'red');
});
</script>
கீழே உள்ள நிரல் வரிகளானதுன் டேபிளிபின் ஒட்டு மொத்த html வரிகளை அலர்ட்
செய்கின்றது
<script type="text/javascript">
$(document).ready(function () {
alert($('table').html());
});
</script>
கீழே உள்ள நிரல் வரிகளானது ஒரு டேபிளின் ஒவ்வொறு ரோவின் html வரிகளை ஒன்றன்
பின் ஒன்றாக அலர்ட் செய்கின்றது.
Alerts the HTML content of each table row
<script type="text/javascript">
$(document).ready(function () {
$('table tr').each(function () {
alert($(this).html());
});
});
</script>
கீழே உள்ள நிரல் வரிகளானது div, span,anchor ஆகிய மூன்று எலெமெண்டுகளின்
பிண்ணனி வண்ணத்தை சிவப்பாக மாற்றுகின்றது.
<script type="text/javascript">
$(document).ready(function () {
$('div, span, a').css('background-Color', 'red');
});
</script>
கீழே உள்ள நிரல் வரிகளானது div எலெமெண்டின் சைல்ட் ஆங்கர் எலெமெண்டுகளை
செலெக்ட் செய்ய பயன்படுகின்றது.
<html>
<head>
<title></title>
<script src="jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('div
a').css('background-Color', 'yellow');
});
</script>
</head>
<body>
<div>
<a href="https://muthukarthikeyan.blogspot.com">PragimTech</a>
</div>
<br />
<a href="https://microsoft.com">Microsoft</a>
</body>
</html>
கிளாஸ் பெயர் பயன்படுத்தி ஒரு எலெமெண்டை செலெக்ட் செய்யலாம்.
சிண்டாக்ஸ்:: $('.class')
இது
ஜாவா ஸ்கிரிப்டின் getElementsByClassName() என்பதற்கு சமமானது.
கீழே உள்ளது small என்ற கிளாஸ் பெயர் உள்ள எல்லா எலெமெண்டுகளையும் செலெக்ட் செய்கின்றது.
கீழே உள்ளது small என்ற கிளாஸ் பெயர் உள்ள எல்லா எலெமெண்டுகளையும் செலெக்ட் செய்கின்றது.
$('.small') // Selects all elements with class small
கீழே
உள்ளது small ,big என்ற கிளாஸ் பெயர் உள்ள
எல்லா எலெமெண்டுகளையும் செலெக்ட் செய்கின்றது.
$('.small,.big') // Selects all elements with class small or big
கீழே உள்ளது small என்ற கிளாஸ் பெயர் உடைய div எலெமெண்டுகள், .big கிளாஸ்
உள்ள எலெமெண்டுகளையும் செலெக்ட் செய்கின்றது.
$('div.small,.big') // Selects div
elements with class small and any element with class big
சான்று:
கீழே உள்ள நிரலில் .small என்ற கிளாஸ் பெயருடைய எல்லா எலெமெண்டுகளையும் 5px solid red border ஆக மாற்றியமைக்கின்றது.
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.small').css('border', '5px solid red');
});
</script>
</head>
<body>
<span class="small">
Span 1
</span>
<br /><br />
<div class="small">
Div 1
</div>
<br />
<span class="big">
Span 2
</span>
<p class="big">This is a paragraph</p>
</body>
</html>
கீழே உள்ளது small , big இரண்டு கிளாஸ் எலெமெண்டுகளின் css ஐ பார்டர் என்பதை 5px solid red border ஆக மாற்றியமைக்கின்றது.
<script type="text/javascript">
$(document).ready(function () {
$('.small, .big').css('border', '5px solid red');
});
</script>
கீழே உள்ள வரிகளானது small கிளாஸ் எலெமெண்டுகள் மற்றும் big என்ற கிளாஸ் பெயருடைய span எலெமெண்டுகளை செலெக்ட் செய்து அதன் பார்டரை 5px solid red ஆக மாற்றியமைக்கின்றது.
<script type="text/javascript">
$(document).ready(function () {
$('.small, span.big').css('border', '5px solid red');
});
</script>
தொடரும்.
No comments:
Post a Comment