jQuery选择器初级手记

基础选择器

$(.div1) //选择class为div1的元素

$("#div2") //选择id为div2的元素

$("p")      //选择标签为 p 的元素

$("*")      //选择所有元素 （不太重要）

$(".div1,#div2") //选择class为div1的 元素 和 id为 div2的元素

层次选择器

$("div ul li")  //选择 div里面的ul里面的li里的元素（这个和CSS一样）

过滤选择器（筛选）

 

首先先来一段HTML代码

 

—————————————–HTML-CODE-

<div>

  <ul>

    <li>Li:1</li>  <!–index = 0 –>

    <li>Li:2</li> <!–index = 1 –>

    <li id="clear">Li:3</li>  <!–index = 2 –>

    <li>Li:4</li><!–index = 3 –>

    <li>Li:5</li> <!–index = 4 –>

  <ul>

</div>

——————————————-xLoli.Net—

 

$("div ul li:first") //这个就是选择第一li 也就是 <li>Li:1</li>

$("div ul li:last") //这个就是选择最后一个li 也就是 <li>Li:5</li>

$("div ul li:not(#clear)") //这个就是选择除 clear 以外的所有元素

$("div ul li:even") //这个选择偶数元素（注意：index从0开始）将选择index为 0 2 4 的元素

$("div ul li:odd") //这个是选择基数元素。

$("div ul li:eq(1)") //这个是选择index为1的元素

$("div ul li:gt(2)") //这个将选择 index > 2的元素 也就是 选择index为 3 4的元素

$("div ul li:lt(3)")  //这个就是选择index < 3的元素咯 即 2 1 0 

$("div ul li[id='clear']") //选择属性id为clear的元素