<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function() {
$("[Id*='isAccommadation']").bind("click", function () {
alert(this.value);
});
});
</script>
</head>
<body>
<div id="hai">
<input type='checkbox' name="1" id='isAccommadation_1' value="JQuery" />JQuery<br/>
<input type='checkbox' name="2" id='isAccommadation_2' value="Example" />Example<br/>
<input type='checkbox' name="3" id='isAccommadation_3' value="Code" />Code<br/>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script language="javascript">
$('document').ready(function() {
$('#requestAccommodication').bind("click", doOperations);
});
var doOperations = (function () {
debugger;
if ($('#hai #requestAccommodication').is(':checked')) {
$("#hai input[type=checkbox]").each(function () {
$(this).prop("checked", true);
});
} else {
$("#hai input[type=checkbox]").each(function () {
$(this).prop("checked", false);
});
}
});
</script>
</head>
<body>
<div id="hai">
<input type="checkbox" id="requestAccommodication" /><br />
<input type='checkbox' name="1" id='isAccommadation_1' />JQuery
<input type='checkbox' name="2" id='isAccommadation_2' />Example
<input type='checkbox' name="3" id='isAccommadation_3' />Code
</div>
</body>
</html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style type="text/css">
ul
{
margin-left: 20px;
color: blue;
}
li
{
cursor: default;
}
span
{
color: green;
display: none;
}
</style>
<script type="text/javascript">
//first way to do one mouse over and mouse leave -- using toggle
$(function () {
$(".category").hover(function () {
$(this).find("span").toggle();
});
});
//Second way to do mouseenter and mouse leave event.
$(function () {
$(".category1").mouseenter(function () {
$this = $(this);
$this.find("span").css("display", "block");
}).mouseleave(function () {
$this = $(this);
$this.find("span").hide();
}); }); </script>
</head> <body> <ul> <li class='category'> <span>aspnettutorialonline.blogspot.com</span> </li> <li class='category'><span>aspnettutorialonline.blogspot.com</span>
</li> <li class='category'><span>aspnettutorialonline.blogspot.com</span>
</li> </ul>
<ul> <li class='category1'> <span>aspnettutorialonline.blogspot.com</span> </li> <li class='category1'><span>aspnettutorialonline.blogspot.com</span> </li> <li class='category1'><span>aspnettutorialonline.blogspot.com</span> </li> </ul> </body> </html>Output:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function Validate() {
//Need to do validations here.
//If any thing fails we have to return false other wise request go to server
}
</script>
</head> <body> <form onsubmit="return Validate()"> ... all controls will go here with submit button... </form>
</body> </html>
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function () {
debugger;
var id = $('#links #active1').attr('id');
var linkName = $('#links #active1 a').text();
$('body').html('Id Name--------' + id + '<br />' + 'Name--------' + linkName);
});
</script>
</head>
<body>
<ul id="links">
<li id="active1"><a href="google.com" id="3">aspnettutorialonline.blogspot.com </a></li>
<li id="active2"><a href="yahoo.com" id="2">Yahoo </a></li>
<li id="Li1"><a href="facebook.com" id="A1">Facebook </a></li>
</ul>
</body>
</html>
Output: |
| Getting inside ul hyper link id and name using JQuery |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('.rootClass table div').css('background', 'green');
});
</script>
</head>
<body>
<div class="rootClass">
<h3>Header</h3>
<div>
<p>this is para</p>
<div>second para</div>
<div>
<table border="1">
<tbody><tr><td><div>aspnettutorialonline.blogspot.com</div></td><td>THis is second column</td></tr></tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Output: |
| Applying css background property to inner div inside table using root class name |
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var dataContainer = {
metaData: {
Paints: [{
id: 1,
color: { id: 123456 }
},
{
id: 2,
color: { id: 789 }
}]
}
};
$(function () {
debugger;
$.each(dataContainer.metaData.Paints,function(key,value){
$('body').append($('<div>').html('<b>Id:</b>' + value.id + '----- <b> Color Code:</b>' + value.color.id));
});
});
</script> </head> <body>
</body> </html>
