jQuery Element Selector

jQuery element selector allows you to use HTML tag such as <p> or <div> to select all elements with same tag throughout the page.
$("p") or $("div") or $("a") or ...
ExampleElement selector (span and division)
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<script type="text/javascript">
$(document).ready(function (){
    $("#btn1").click(function(){
        /* because we don`t want to select all span in page, 
           we just want to select span in 'example-section', 
           so we select parent element first -> $("#example-section span") */
        $("#example-section span").css("background-color", "orange");        
    });

    $("#btn2").click(function(){        
        $("#example-section div").css("background-color", "orange");
    });

    $("#btn3").click(function(){
        $("#example-section span,div").css("background-color", "");
    });
});
</script>

<!-- HTML -->
<a name="#span-div"></a>
<div id="example-section">
    <span>This is span tag 1 (&lt;span&gt;)</span> <br/>
    <span>This is span tag 2 (&lt;span&gt;)</span>
    <div>This is division tag 1 (&lt;div&gt;)</div>
    <div>This is division tag 2 (&lt;div&gt;)</div>
</div>
<button type="button" id="btn1">Mark all &lt;span&gt;</button>&nbsp;
<button type="button" id="btn2">Mark all &lt;div&gt;</button>&nbsp;
<button type="button" id="btn3">Reset</button>&nbsp;



 
select <p> element with class named 'example'
$("p.example")
ExampleElement selector (paragraph)
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- CSS -->
<style type="text/css">
.button {
    width: 300px;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
$(document).ready(function () {
	$("#btn11").click(function () {
		/* because we don`t want to select all span in page, 
           we just want to select span in 'example-section', 
           so we select parent element first -> $("#example-section span") */
		$("#example-section1 p.example1").css("background-color", "orange");
	});

	$("#btn12").click(function () {
		$("#example-section1 p.example2").css("background-color", "orange");
	});

	$("#btn13").click(function () {
		$("#example-section1 p").css("background-color", "");
	});
});
</script>

<!-- HTML -->
<a name="#select-paragraph"></a>

<div id="example-section1">
    <p class="example1">This is paragraph with class named 'example1'</p>
    <p class="example1">This is paragraph with class named 'example1'</p>
    <p class="example2">This is paragraph with class named 'example2'</p>
    <p class="example2">This is paragraph with class named 'example2'</p>
</div>
<button type="button" id="btn11" class="button">select &lt;p&gt; with class named 'example1'</button>&nbsp;
<button type="button" id="btn12" class="button">select &lt;p&gt; with class named 'example2'</button>&nbsp;
<button type="button" id="btn13">Reset</button>&nbsp;



select element in the order of their appearance, take <ul><li> for instance
        $("ul li:first") //select first item
        $("ul li:last")  //select last item
        $("ul li:eq(2)") //select third item (zero based)
ExampleSelect element in the order of their appearance $(':first') $(':last') $(':eq')
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<script type="text/javascript">
$(document).ready(function (){
    $("#btn61").click(function(){
        $("#example-section6 ul li:first").css("background-color", "orange");
    });

    $("#btn62").click(function(){
        $("#example-section6 ul li:last").css("background-color", "orange");
    });

    $("#btn63").click(function(){
        $("#example-section6 ul li:eq(2)").css("background-color", "orange");
    });

    $("#btn64").click(function(){
        $("#example-section6 ul li").css("background-color", "");
    });
});
</script>

<!-- HTML -->
<a name="#first-last-eq"></a>
<div id="example-section6">
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>    
</div>
<button type="button" id="btn61">select 'first' item</button>&nbsp;
<button type="button" id="btn62">select 'last' item</button>&nbsp;
<button type="button" id="btn63">select 'third' item</button>&nbsp;
<button type="button" id="btn64">Reset</button>&nbsp;


select even or odd elements, take <ul><li> for instance
ExampleSelect even or odd elements $(':even') $(':odd')
Source Code Expand
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Javascript -->
<script type="text/javascript">
$(document).ready(function (){
    $("#btn71").click(function(){
        $("#example-section7 ul li:odd").css("background-color", "");
        $("#example-section7 ul li:even").css("background-color", "orange");
    });

    $("#btn72").click(function(){
        $("#example-section7 ul li:odd").css("background-color", "orange");
        $("#example-section7 ul li:even").css("background-color", "");
    });
});
</script>

<!-- HTML -->
<a name="#even-odd-selector"></a>
<div id="example-section7">
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
        <li>list item 6</li>
        <li>list item 7</li>
        <li>list item 8</li>
    </ul>    
</div>
<button type="button" id="btn71">select 'even' item</button>&nbsp;
<button type="button" id="btn72">select 'odd' item</button>&nbsp;



comments powered by Disqus