index2_selector.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;}
</style>
</head>
<body>
<nav class="menu">
    <a class="btn" style="float:right;" href="javascript:void(0);" id="finishWork">Close Work</a>
    <a class="btn" style="float:right;" href="javascript:void(0);" onClick="window.location.reload()">Reload</a>
    <a class="btn" style="float:right;" href="javascript:void(0);" id="deSelectAll">Remove All Color</a>
    
    <a class="btn" href="javascript:void(0);" id="changeBg">Change Bg Color</a>
    <a class="btn" href="javascript:void(0);" id="selectAll">Change All Color</a>    
    <a class="btn" href="javascript:void(0);" id="selectId">Select Id</a>
    <a class="btn" href="javascript:void(0);" id="selectClass">Select Class</a>
    <a class="btn" href="javascript:void(0);" id="selectElement">Select Element</a>
    <a class="btn" href="javascript:void(0);" id="selectBoxFirstP">Select Box First P</a>
    <a class="btn" href="javascript:void(0);" id="selectBoxFirstPChild">Select Box First P Child</a>
    <a class="btn" href="javascript:void(0);" id="selectBoxFirstOfType">Select Box First Of Type</a>
    <a class="btn" href="javascript:void(0);" id="selectBoxLastP">Select Box Last P</a>
    <a class="btn" href="javascript:void(0);" id="selectBoxLastPChild">Select Box Last P Child</a>
    <a class="btn" href="javascript:void(0);" id="selectBoxLastOfType">Select Box Last Of Type</a>
    <a class="btn" href="javascript:void(0);" id="selectBoxNthChild">Select Box nth Child(3)</a>
    <a class="btn" href="javascript:void(0);" id="selectBoxNthLastChild">Select Box Last nth Child(3)</a>
    <a class="btn" href="javascript:void(0);" id="selectBoxNthOfType">Select Box nth of Type(1)</a>
    <a class="btn" href="javascript:void(0);" id="selectBoxNthLastOfType">Select Box nth Last of Type(1)</a>
    <a class="btn" href="javascript:void(0);" id="selectBoxOnlyChild">Select Box only Child</a>
    <a class="btn" href="javascript:void(0);" id="selectBoxOnlyOfType">Select Box only of type</a>
    
    
    <a class="btn" href="javascript:void(0);" id="selectParentChild">Parent Child</a>
    <a class="btn" href="javascript:void(0);" id="selectParentDesc">Parent Descendant</a>
    <a class="btn" href="javascript:void(0);" id="selectElementNext">Element Next</a>
    <a class="btn" href="javascript:void(0);" id="selectElementSiblings">Element Siblings</a>
    <a class="btn" href="javascript:void(0);" id="selectElementIndex">Select Element Index</a>
    <a class="btn" href="javascript:void(0);" id="selectElementGt">Element Greater Than</a>
    <a class="btn" href="javascript:void(0);" id="selectElementLt">Element Less Than</a>
    <a class="btn" href="javascript:void(0);" id="selectHeaderElement">Header Element Change</a>
    <a class="btn" href="javascript:void(0);" id="selectAnimatedElement">Select Animated</a>
    <a class="btn" href="javascript:void(0);" id="FocusInput">Focus Input</a>
    <a class="btn" href="javascript:void(0);" id="BlurInput">Blur Input</a>
    <a class="btn" href="javascript:void(0);" id="elementMatchText">Select element Match Text</a>
    <a class="btn" href="javascript:void(0);" id="elementMatchElement">Select element Match Element</a>
    <a class="btn" href="javascript:void(0);" id="elementEmpty">Select Empty Space</a>
    <a class="btn" href="javascript:void(0);" id="elementParent">Select Parent</a>
    <a class="btn" href="javascript:void(0);" id="showVisibleItems">Show Visible Items</a>
    <a class="btn" href="javascript:void(0);" id="selectInput">Select Input</a>
    <a class="btn" href="javascript:void(0);" id="selectInputDisable">Select Input Disable</a>
    <a class="btn" href="javascript:void(0);" id="selectAllHref">Select All Href</a>
    <a class="btn" href="javascript:void(0);" id="selectHrefIndexHtml">Select href(index.html)</a>
    <a class="btn" href="javascript:void(0);" id="selectNoHrefIndexHtml">Select href not (index.html)</a>
    <a class="btn" href="javascript:void(0);" id="selectHrefTargetBlank">Select href(target blank)</a>
    <a class="btn" href="javascript:void(0);" id="selectHrefLastJpg">Select href(last .jpg)</a>
    <a class="btn" href="javascript:void(0);" id="selectExample1">Example |</a>
    <a class="btn" href="javascript:void(0);" id="selectExample2">Example ^</a>
    <a class="btn" href="javascript:void(0);" id="selectExample3">Example ~</a>
    <a class="btn" href="javascript:void(0);" id="selectExample4">Example *</a>
    
</nav>

<br/><br/><br/>
<br/><br/><br/>
<br/><br/><br/>
<section>
<h1 title="paragraph-heading"><a href="index.html">Jquery Pactice 2</a></h1>
<p>
<b title="paragraph"><a>Paragaraph 1</a></b> <br/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
</p>
<p>
<b title="paragraphpara" class="para2"><a href="demo.html" target="_blank">Paragaraph 2</a></b> <br/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
</p>
<b class="para3" title="paraparagraph"><a href="index.org">Paragaraph 3</a></b> <br/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
<p>
<b id="para4" title="paragraph para">Paragaraph 4</b> <br/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
</p>

<div id="jq_box" style="border:solid 1px #000; width:100%; min-height:50px;">
    <table width="100%" border="1" class="table">
        <tr>
        	<td>
            	<p>Jq Box first p</p>
            </td>
            <td>
            	<b>Jq Box first p</b>
            	<p>Jq Box first p</p>
            </td>
            <td>
            	<p>Jq Box first p</p>
   		 		<p>Jq Box p 2</p><p>Jq Box p 3</p><p>Jq Box p 4</p>
            </td>
            <td>
            	<div>
                    <p>Jq Box div1 first p</p><p>Jq Box div1 p2</p><p>Jq Box div1 p3</p>
                </div>
                <p>Jq Box div1 p3</p>
                <p>Jq Box div1 p3</p>
                <p>Jq Box div1 p3</p>
                <p>Jq Box div1 p3</p>
                <span>Jq Box div1 p3</span>
            </td>
            <td>
            	<div>
                    <b>Div 2</b>
                    <p>Jq Box div2 first p</p><p>Jq Box div2 p2</p><p>Jq Box div2 p3</p>
                    <br/>
                    <span>Div 2 span</span>
                </div>
                <p>Jq Box div1 p3</p>
                <p>Jq Box div1 p3</p>
                <span>Jq Box div1 p3</span>
            </td>
            <td>
            	<div>
                    <p>Jq Box <b>div3</b> first p</p><p>Jq Box div3 p2</p><p>Jq Box div3 p3</p><p>Jq <b>Box</b> div3 p4</p>
                </div>
                <p>Jq Box div1 p3</p>
                <p>Jq Box div1 p3</p>
                <b>Jq Box div1 p3</b>
            </td>
            <td>
            	<p>Jq Box p 5</p><p>Jq Box p 5</p><p>Jq Box p 6</p>
            </td>
        </tr>
    </table>    
</div>
<br/>
<div id="jq_box2" style="border:solid 1px #000; width:100%; min-height:50px;">
    <div style="border:1px solid;">
      <p>The first child.</p>
      <p>The last child.</p>
    </div><br>
    
    <div style="border:1px solid;">
      <p>The only child.</p>
    </div><br>
    
    <div style="border:1px solid;">
      <span>The first child.</span>
      <p>The last child.</p>
    </div><br>
</div>
<br/>
<table width="500" border="1" class="table2">
	<tr>
    	<th>Heading A</th>
        <th>Heading B</th>
        <th>Heading C</th>
        <th>Heading D</th>
    </tr>
	<tr>
    	<td><p style="display:none;">some contetn</p></td>
        <td>TD B</td>
        <td>TD C</td>
        <td>TD D</td>
    </tr>
    <tr>
    	<td>TD A</td>
        <td></td>
        <td>TD C</td>
        <td>TD D</td>
    </tr>
    <tr>
    	<td>TD A</td>
        <td>TD B</td>
        <td></td>
        <td>TD D</td>
    </tr>
    <tr>
    	<td>TD A</td>
        <td></td>
        <td>TD C</td>
        <td>TD D</td>
    </tr>
    <tr>
    	<td>TD A</td>
        <td></td>
        <td>TD C</td>
        <td></td>
    </tr>
</table>

<h3>Order List</h3>
<ul class="orderList">
	<li>Lorem Ipsum is simply dummy tex</li>
    <li>rinting and typesetting industry. Lorem Ipsum has been the ind</li>
    <li>ntially unchanged. It was popularised i</li>
    <li>assages, and more recently with desktop publis</li>
    <li>Lorem Ipsum is simply dummy tex</li>
</ul>

<h4>Form</h4>
<input type="text"  />
<input type="number" name="" value="9563735364" placeholder="Password" />
<input type="email" name="" value="JohnDoe@gmail.com" placeholder="login id" required />
<input type="password" name="" value="123456" placeholder="Password" />
<input type="submit" name="" value="submit" disabled/>
</section>

<br/><br/><br/>
<br/><br/><br/>

<script>
	$(document).ready(function(){
		$('#finishWork').click(function(){
			$('body:not(.menu)').empty();			
		});
		$('#changeBg').click(function(){
			$(':root').css({'background-color' : '#f7ec9d'});
		});
		$('#selectAll').click(function(){
			$('*:not(.btn)').css({
				'color': 'red',
				'border-color': 'red'
			});
		});
		$('#deSelectAll').click(function(){
			$('*:not(.menu, .btn)').css({
				'color':'#000',
				'border-color':'#000',
				'background-color':'transparent'
			})
		});
		$('#selectId').click(function(){
			$('#para4').css('color','#26ca26');
		});
		$('#selectClass').click(function(){
			$('.para2, .para3').css('color','yellow');
		});
		$('#selectElement').click(function(){
			$('h1, p').css('color','#d486d4');
		});
		$('#selectBoxFirstP').click(function(){
			$('#jq_box p:first').css({'background':'red', 'color':'white'});
		});
		$('#selectBoxFirstPChild').click(function(){
			$('#jq_box p:first-child').css({'background':'red', 'color':'white'});
		});
		$('#selectBoxFirstOfType').click(function(){
			$('#jq_box p:first-of-type').css({'background':'red', 'color':'white'});
		});
		$('#selectBoxLastP').click(function(){
			$('#jq_box p:last').css({'background':'red', 'color':'white'});
		});
		$('#selectBoxLastPChild').click(function(){
			$('#jq_box p:last-child').css({'background':'red', 'color':'white'});
		});
		$('#selectBoxLastOfType').click(function(){
			$('#jq_box p:last-of-type').css({'background':'red', 'color':'white'});
		});
		$('#selectBoxNthChild').click(function(){
			$('#jq_box p:nth-child(3)').css({'background':'red', 'color':'white'});
		});
		$('#selectBoxNthLastChild').click(function(){
			$('#jq_box p:nth-last-child(3)').css({'background':'red', 'color':'white'});
		});
		$('#selectBoxNthOfType').click(function(){
			$('#jq_box p:nth-of-type(1)').css({'background':'red', 'color':'white'});
		});
		$('#selectBoxNthLastOfType').click(function(){
			$('#jq_box p:nth-last-of-type(1)').css({'background':'red', 'color':'white'});
		});
		$('#selectBoxOnlyChild').click(function(){
			$('#jq_box p:only-child').css({'background':'red', 'color':'white'});
		});
		$('#selectBoxOnlyOfType').click(function(){
			$('#jq_box p:only-of-type').css({'background':'red', 'color':'white'});
		});
		$('#selectParentChild').click(function(){
			$('#jq_box div > b').css({'background':'red', 'color':'white'});
		});
		$('#selectParentDesc').click(function(){
			$('#jq_box b').css({'background':'red', 'color':'white'});
		});
		$('#selectElementNext').click(function(){
			$('#jq_box div + p').css({'background':'red', 'color':'white'});
		});
		$('#selectElementSiblings').click(function(){
			$('#jq_box div ~ p').css({'background':'red', 'color':'white'});
		});
		$('#selectElementIndex').click(function(){
			$('.orderList li:eq(2)').css({'background':'red', 'color':'white'});
		});
		$('#selectElementGt').click(function(){
			$('.orderList li:gt(1)').css({'background':'red', 'color':'white'});
		});
		$('#selectElementLt').click(function(){
			$('.orderList li:lt(2)').css({'background':'red', 'color':'white'});
		});
		$('#selectHeaderElement').click(function(){
			$(':header').css({'background':'red', 'color':'white'});
		});
		$('#FocusInput').click(function(){
			$('input').focus();
			$('*:focus').css({'background':'red', 'color':'white'});
		});
		$('#elementMatchText').click(function(){
			$('#jq_box p:contains(p3)').css({'background':'red', 'color':'white'});
		});
		$('#elementMatchElement').click(function(){
			$('#jq_box p:has(b)').css({'background':'red', 'color':'white'});
		});
		$('#elementEmpty').click(function(){
			$('.table td:empty').css({'background':'red', 'color':'white'});
		});
		$('#elementParent').click(function(){
			$('#jq_box2 p:parent').css({'border':'red solid 1px', 'color':'red'});
		});
		$('#showVisibleItems').click(function(){
			$('.table2 td:visible').css({'background':'red', 'color':'white'});
		});
		$('#selectInput').click(function(){
			$(':input:not([type="submit"])').css({'background':'red', 'color':'white'});
		});
		$('#selectInputDisable').click(function(){
			$('input[type="submit"]:disabled').css({'background':'red', 'color':'white'});
		});
		$('#selectAllHref').click(function(){
			$('[href]').css({'background':'red', 'color':'white'});
		});		
		$('#selectHrefIndexHtml').click(function(){
			$('[href = "index.html"]').css({'background':'red', 'color':'white'});
		});
		$('#selectNoHrefIndexHtml').click(function(){
			$("a[href!='index.html']").css({'background-color':'green', 'color':'white'});
		});			
		$('#selectHrefTargetBlank').click(function(){
			$('[target="_blank"]').css({'background':'red', 'color':'white'});
		});
		$('#selectHrefLastJpg').click(function(){
			$("a[href$='.org']").css({'background-color':'green', 'color':'white'});
		});
		$('#selectExample1').click(function(){
			$('[title|="paragraph"]').css({'background-color':'yellow'});
		});
		$('#selectExample2').click(function(){
			$('[title^="paragraph"]').css({'background-color':'yellow'});
		});
		$('#selectExample3').click(function(){
			$('[title~="paragraph"]').css({'background-color':'yellow'});
		});
		$('#selectExample4').click(function(){
			$('[title*="paragraph"]').css({'background-color':'yellow'});
		});
		
		
	});
</script>
</body>
</html>