jQuery元素筛选有关问题-JavaSript-爱易网页

jQuery元素筛选有关问题

日期：2014-05-16　浏览次数：20459 次

jQuery元素筛选问题
各位大虾，我是jQuery初学者，在学习过程中，遇到了一点问题希望大家能够帮忙解决下。下面是例子的代码和问题说明

在此说明一下，我用得是jQuery-1.7.2

问题：当我在查找div中类为.mini的非最后一个div元素时，为什么这样写就是在div和.mini中间加一个空格才能正确排除最后一个div元素$("div .mini:not(:last)").css("background", "#baf");

而如果div和.mini中间不加空格则不能排除最后一个div元素$("div.mini:not(:last)")。这两种查找方式具体有什么不同呢？请各位大虾详细说明下，谢谢给位大虾了。

<script language="javascript" type="text/javascript">

//所有div中类为.mini的非最后1个div元素
$("#btn4").click(function(){
//过滤器
//$("div .mini:not(:last)").css("background", "#baf"); //问题有待解决$("div.mini:not(:last)")
});

</script>

<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/>
<label for="isreset">点击下列按钮时先自动重置页面</label>
<br />
<br />
<h3>基本选择器.</h3>

<input type="button" value="所有div中类为.mini的非最后1个div元素" id="btn4"/>
<br />
<br />

<div class="one" id="one" > id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" > <b>id为two,class为one,title为test的div.</b>
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div> 包含input的type为"hidden"的div
<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>

------解决方案--------------------
实际上，在你给出的测试数据中，两种选择器能选择到同样的元素对象，为了直观说明父子选择器的作用，请考虑一下下面这个例子。

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
    $("#btn4").click( function() {
        $("div .mini:not(:last)").css("border", "1px solid red");
        $("div.mini:not(:last)").css("background-color",

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

jQuery元素筛选有关问题

相关资料更多>

推荐阅读更多>