1 从集合中通过指定的序号获取元素 html: 复制代码 代码如下: <div> <p>0</p> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> </div> JS 复制代码 代码如下: <script type="text/javascript"> jQuery(function(){ $("p").eq(2).css("color","red"); $("p").eq(3).css("color","red"); }) </script> 2 获取指定条件一致和指定范围的元素 html: 复制代码 代码如下: <div> <p>0</p> <p>1</p> <p class="center">2</p> <p class="center">3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> </div> JS 复制代码 代码如下: <script type="text/javascript"> jQuery(function(){ $("p").filter('.center').css("color","red"); }) $(function(){ $("p").slice(5,7).css("color","yellow"); }) </script> 3 获取与条件表达式一致的元素 html: 复制代码 代码如下: <div> <p>0</p> <p>1</p> <p class="center">2</p> <p class="center">3</p> <p>4</p> <p class="aa">5</p> <p>6</p> <p>7</p> </div> js 复制代码 代码如下: <script type="text/javascript"> jQuery(function(){ $("p").each(function(){ switch(true){ case $(this).is(".center"): $(this).css("color","red"); break; case $(this).is(".aa"): $(this).css("color","yellow"); break; } }) }) </script> 4 获取元素的上一个元素和下一个元素 Html: 复制代码 代码如下: <div id="aa"> <p>1号</p> <p class="yes">2号</p> <p>3号</p> <p>4号</p> <p>5号</p> <p class="yes">6号</p> <p class="yes">7号</p> </div> js 复制代码 代码如下: //获取元素的下一个元素 jQuery(function(){ $("p").next(".yes").css("color","red"); }) //获取元素的上一个元素 jQuery(function(){ $("p").prev(".yes").css("color","red"); }) 5 获取元素的父元素和子元素 html: 复制代码 代码如下: <div id="aa"> <p>1号</p> <p class="yes">2号</p> <p>3号</p> <p>4号</p> <p>5号</p> <p class="yes">6号</p> <p class="yes">7号</p> </div> js 复制代码 代码如下: //获取元素的父元素 jQuery(function(){ $("p").parent().css("color","red"); }) //获取元素的子元素 jQuery(function(){ $("#aa").children(".yes").css("color","red"); }) |
|