<%@ Page Language="C#" AutoEventWireup="true" CodeFile="选择器中的空格.aspx.cs" Inherits="_02第二章_2_14_选择器注意几点_选择器中的空格" %>
<!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 runat="server">
<title>选择器中的空格</title>
<script src="../jquery/jquery-1.3.1.js" type="text/javascript"></script>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$( function(){
//注意区分这样的选择器
//虽然有一个空格，却有截然不同的效果；
var $t_a=$(".test :hidden"); //选择器（xx:选择条件）
var $t_b=$(".test:hidden");
var $len_a=$t_a.length; //获取对象的个数，用jquery对象的length属性；
var $len_b=$t_b.length;
alert("$('.test :hidden')="+$len_a);//有空格，说明是要选取class下方hidden的子元素的个数；
alert("$('.test:hidden')="+$len_b); //没空格，选取元素class为test本身hidden的个数；
});
</script>
</head>
<body>
<div class="test">
<div style="display:none;">aa</div>
<div style="display:none;">bb</div>
<div style="display:none;">cc</div>
<div class="test" style="display:none;">dd</div>
</div>
<div class="test" style="display:none;">ee</div>
<div class="test" style="display:none;">ff</div>
</body>
</html>
最新评论