English | 正體中文 | 简体中文

jQuery 元素选择器


jQuery元素选择器可以让你用HTML标签如<p> or <div>去选择所有页面里有相同标签的元素
$("p") or $("div") or $("a") or ...

范例
This is span tag 1 (<span>)
This is span tag 2 (<span>)
This is division tag 1 (<div>)
This is division tag 2 (<div>)
     

范例程式码Expand
<!-- HTML -->
<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;


<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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>



选择有css类别名称为'example' <p> 元素
$("p.example")

范例

This is paragraph with class named 'example1'

This is paragraph with class named 'example1'

This is paragraph with class named 'example2'

This is paragraph with class named 'example2'

     

范例程式码Expand
<!-- HTML -->
<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">select &lt;p&gt; with class named 'example1' </button>&nbsp;
<button type="button" id="btn12">select &lt;p&gt; with class named 'example2'</button>&nbsp;
<button type="button" id="btn13">Reset</button>&nbsp;


<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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>


依照出现的顺序选择元素, 以 <ul><li> 为例
$("ul li:first") //选择第一个出现的项目
$("ul li:last")  //选择第二个出现的项目
$("ul li:eq(2)") //选择第三个出现的项目(以0为基底)

范例
  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
       

范例程式码Expand
<!-- HTML -->
<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;


<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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>



选择奇数或是偶数的元素, 以 <ul><li> 为例
$("ul li:even") //选择偶数的项目
$("ul li:odd")  //选择奇数的项目

范例
  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
  • list item 6
  • list item 7
  • list item 8
   

范例程式码Expand
<!-- HTML -->
<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;


<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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>



© 2012 PureExample.com contact