index5_html.html

<!DOCTYPE html>
<html>
<head>
<title>Jquery Practice</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<style>
.btn{background: #ececec; color: #000; padding: 5px 8px 6px 8px; text-decoration: none; border: solid 1px #ccc;display: inline-block; margin:3px 0; font-size: 11px;}
nav { background-color:#ccc; position:fixed; top:0; width:100%; left:0; padding:3px;}
.box {width:50px; height:50px; background:red;}
.color {color:#fff;}
</style>
</head>
<body>
<nav class="menu">
    <a class="btn" style="float:right;" href="javascript:void(0);" onClick="window.location.reload()">Reload</a>
    
    <a class="btn" href="javascript:void(0);" id="getText">Get Text Content</a>    
    <a class="btn" href="javascript:void(0);" id="getHtml">Get Html Content</a>    
    <a class="btn" href="javascript:void(0);" id="getValue">Get value</a>
    <a class="btn" href="javascript:void(0);" id="getAttr">Get Attribute</a>
    <a class="btn" href="javascript:void(0);" id="setText">Set Text Content</a>    
    <a class="btn" href="javascript:void(0);" id="setHtml">Set Html Content</a>    
    <a class="btn" href="javascript:void(0);" id="setValue">Set value</a>
    <a class="btn" href="javascript:void(0);" id="setAttr">Set Chnage Attribute</a>
    <a class="btn" href="javascript:void(0);" id="setAttr2">Call Back Attribute</a>
    <a class="btn" href="javascript:void(0);" id="callBackText">Call Back Text</a>
    <a class="btn" href="javascript:void(0);" id="callBackHtml">Call Back Html</a>
    <a class="btn" href="javascript:void(0);" id="callBackValue">Call Back Value</a>    
    <a class="btn" href="javascript:void(0);" id="addClass">Add Class</a>
    <a class="btn" href="javascript:void(0);" id="removeClass">Remove Class</a>
    <a class="btn" href="javascript:void(0);" id="toggleClass">Toggle Class</a>
    <a class="btn" href="javascript:void(0);" id="selectValue">Select Value</a>
    
</nav>

<br/><br/><br/><br/>
<section>
	<p>You can set content for <b>Jequery</b></p>
    <input type="text" name="" value="Jquery Practice" /><br/>
    <a href="http://cz-jewellery.com/" title="CZ Collection" id="aTag">www.cz-jewellery.com</a>
    <div>test</div>
</section>

<select id="selectOption1">
	<option value="">Select Option</option>
	<option value="Male">Male</option>
    <option value="Female">Female</option>
    <option value="Others">Others</option>
</select>

<br><br>

<select onChange="selectOption2(this.value)">
	<option value="">Select Option</option>
	<option value="Male">Male</option>
    <option value="Female">Female</option>
    <option value="Others">Others</option>
</select>

<br><br>

<select id="selectOption3" onChange="selectOption3(this.id)">
	<option value="">Select Option</option>
	<option value="Male">Male</option>
    <option value="Female">Female</option>
    <option value="Others">Others</option>
</select>
<br/><br/><br/>
<br/><br/><br/>

<script>
function selectOption2(value){
	alert(value);
}
function selectOption3(id){
	alert($('#'+id).val());
}
$(document).ready(function(){
	$('#selectValue').click(function(){
		$('#selectOption1').val();
		alert($('#selectOption1').val());
	})
	
	$('#getText').click(function(){
		alert('Get Text ' + $('p').text() + ' Successfull');
	});
	$('#getHtml').click(function(){
		alert('Get Html Content' + $('p').html());
	});
	$('#getValue').click(function(){
		alert('Get Input Type Value ' + $('input').val());
	});
	$('#getAttr').click(function(){
		alert('The href value ' + $('#aTag').attr('href'));
	});
	$('#setText').click(function(){
		$('p').text('Change Your Text Content');
	});
	$('#setHtml').click(function(){
		$('p').html('Change Your Text <b>Content</b>');
	});
	$('#setValue').click(function(){
		$('input').val('John Doe');
	});
	$('#setAttr').click(function(){
		$('#aTag').attr({
			'href' : 'http://indian-collection.com/',
			'title' : 'Indian Collection'
		});
	});
	$('#setAttr2').click(function(){
		$('#aTag').attr('href', function(i, origValue){
			return origValue + 'product.php?pCategory=2'
		});
	});
	$('#callBackText').click(function(){
		$('p').text(function(i, origValue){
			return origValue + 'This is the New Text';
		});
	});
	$('#callBackHtml').click(function(){
		$('p').html(function(i, origValue){
			return origValue + 'This is the <b>New Html</b>';
		});
	});
	$('#callBackValue').click(function(){
		$('input').val(function(i, origValue){
			return origValue + 'John Doe';	
		})
	});
	$('#addClass').click(function(){
		$('div').addClass('box color');
	});
	$('#removeClass').click(function(){
		$('div').removeClass('box color');
	});
	$('#toggleClass').click(function(){
		$('div').toggleClass('box color');
	});
	
	
	
	
	
	
	
});
</script>
</body>
</html>