选择器 | 功能 | 返回值 |
:nth-child(eq|even|odd|index) | 获取每个父元素下的特定位置元素,索引号从1开始 | 元素集合 |
:first-child | 获取每个父元素下的第一个子元素 | 元素集合 |
:last-child | 获取每个父元素下的最后一个子元素 | 元素集合 |
:only-child | 获取每个父元素下的仅有一个子元素 | 元素集合 |
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>使用jQuery子元素过滤选择器</title>
- <script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script>
- <style type="text/css">
- body{font-size:12px;text-align:center}
- ul{width:241px;list-style-type:none;padding:0px}
- ul li{height:23px;width:60px;line-height:23px;float:left;border-top:solid 1px #eee;border-bottom:solid 1px #eee;margin-bottom:5px}
- .GetFocus{width:58px;border:solid 1px #666;background-color:#eee}
- </style>
- <script type="text/javascript">
- /*$(function(){//增加每个父元素下的第2个子元素类别
- $("li:nth-child(2)").addClass("GetFocus");
- })
- $(function(){//增加每个父元素下的第一个子元素类别
- $("li:first-child").addClass("GetFocus");
- })
- $(function(){//增加每个父元素下的最后一个子元素类别
- $("li:last-child").addClass("GetFocus");
- })*/
- $(function(){//增加每个父元素下只有一个子元素类别
- $("li:only-child").addClass("GetFocus");
- })
- </script>
- </head>
- <body>
- <ul>
- <li>Item 1-0</li>
- <li>Item 1-1</li>
- <li>Item 1-2</li>
- <li>Item 1-3</li>
- </ul>
- <ul>
- <li>Item 2-0</li>
- <li>Item 2-1</li>
- <li>Item 2-2</li>
- <li>Item 2-3</li>
- </ul>
- <ul>
- <li>Item 3-0</li>
- </ul>
- </body>
- </html>
表2-14 页面执行效果
关键代码 | 功能描述 | 页面效果 |
$("li:nth-child(2)").addClass("GetFocus"); | 增加每个父元素下的第二个子元素类别 | |
$("li:first-child").addClass("GetFocus"); | 增加每个父元素下的第一个子元素类别 | |
$("li:last-child").addClass("GetFocus"); | 增加每个父元素下的最后一个子元素类别 | |
$("li:only-child").addClass("GetFocus"); | 增加每个父元素下的仅有一个子元素类别 |
选择器 | 功能 | 返回值 |
:enable | 获取表单中所有属性为可用的元素 | 元素集合 |
:disable | 获取表单中所有属性为不可用的元素 | 元素集合 |
:checked | 获取表单中所有被选中的元素 | 元素集合 |
:selected | 获取表单中所有被选中option的元素 | 元素集合 |
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>使用jQuery子元素过滤选择器</title>
- <script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script>
- <style type="text/css">
- body{font-size:12px;text-align:center}
- div{display:none}
- select{height:65px}
- .clsIpt{width:100px;padding:3px}
- .GetFocus{border:solid 1px #666;background-color:#eee}
- </style>
- <script type="text/javascript">
- /*$(function(){//增加表单中所有属性为可用的元素类别
- $("#divA").show(3000);
- $("#form1 input:enabled").addClass("GetFocus")
- })
- $(function(){//增加表单中所有属性为不可用的元素类别
- $("#divA").show(3000);
- $("#form1 input:disabled").addClass("GetFocus")
- })
- $(function(){//增加表单中所有被选中的元素类别
- $("#divB").show(3000);
- $("#form1 input:checked").addClass("GetFocus");
- })*/
- $(function(){//显示表单中所有被选中option的元素内容
- $("#divC").show(3000);
- $("#Span2").html("选中项是:"+$("select option:selected").text());
- })
- </script>
- </head>
- <body>
- <form id="form1" style="width:241px">
- <div id="divA">
- <input type="text" value="可用文本框" class="clsIpt"/>
- <input type="text" disabled="disabled" value="不可用文本框" class="clsIpt"/>
- </div>
- <div id="divB">
- <input type="checkbox" checked="checked" value="1">选中
- <input type="checkbox" value="0">未选中
- </div>
- <div id="divC">
- <select multiple="multiple">
- <option value="0">Item 0</option>
- <option value="1" selected="selected">Item 1</option>
- <option value="2">Item 2</option>
- <option value="3" selected="selected">Item 3</option>
- </select>
- <span id="Span2"></span>
- </div>
- </form>
- </body>
- </html>
表2-16 页面执行效果
关键代码 | 功能描述 | 页面效果 |
$("#form1 input:enabled").addClass("GetFocus") | 增加表单中所有属性为可用的元素类别 | |
$("#form1 input:disabled").addClass("GetFocus") | 增加表单中所有属性为不可用的元素类别 | |
$("#form1 input:checked").addClass("GetFocus"); | 增加表中所有被选中的元素类别 | |
$("#Span2").html("选中项是:"+$("select option:selected").text()); | 显示表单中所有被选中option的元素内容 |
选择器 | 功能 | 返回值 |
:input | 获取所有input textarea select | 元素集合 |
:text | 获取所有单行文本框 | 元素集合 |
:password | 获取所有密码框 | 元素集合 |
:radio | 获取所有单选按钮 | 元素集合 |
:checkbox | 获取所有复选框 | 元素集合 |
:submit | 获取所有提交按钮 | 元素集合 |
:image | 获取所有图像域 | 元素集合 |
:reset | 获取所有重置按钮 | 元素集合 |
:button | 获取所有按钮 | 元素集合 |
:file | 获取所有文件域 | 元素集合 |
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>使用jQuery表单过滤选择器</title>
- <script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script>
- <style type="text/css">
- body{font-size:12px;text-align:center}
- form{width:241px}
- textarea,select,button,input,span{display:none}
- .btn{border:#666 1px solid;padding:2px;width:60px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#Ece9D8)}
- .txt{border:#666 1px solid;padding:3px}
- .img{padding:2px;border:solid 1px #ccc}
- .div{border:solid 1px #ccc;background-color:#eee;padding:5px}
- </style>
- <script type="text/javascript">
- /*$(function(){//显示Input类型元素的总数量
- $("#form1 div").html("表单共找出Input类型元素:"+$("#form1 :input").length);
- $("#form1 div").addClass("div");
- })
- $(function(){//显示所有文本框对象
- $("#form1 :text").show(3000);
- })
- $(function(){//显示所有密码框对象
- $("#form1 :password").show(3000);
- })
- $(function(){//显示单选按钮对象
- $("#form1 :radio").show(3000);
- $("#form1 #Span1").show(3000);
- })
- $(function(){//显示所有复选框对象
- $("#form1 :checkbox").show(3000);
- $("#form1 #Span2").show(3000);
- })
- $(function(){//显示所有提交按钮对象
- $("#form1 :submit").show(3000);
- })
- $(function(){//显示所有图片域对象
- $("#form1 :image").show(3000);
- })
- $(function(){//显示所有重置按钮对象
- $("#form1 :reset").show(3000);
- })
- $(function(){//显示所有按钮对象
- $("#form1 :button").show(3000);
- })*/
- $(function(){//显示所有文件域对象
- $("#form1 :file").show(3000);
- })
- </script>
- </head>
- <body>
- <form id="form1">
- <textarea class="txt">TextArea</textarea>
- <select><option value="0">Item 0</option></select>
- <input type="text" value="Text" class="txt">
- <input type="password" value="PassWord" class="txt">
- <input type="radio"><span id="Span1">Radio</span></input>
- <input type="checkbox"/>
- <span id="Span2">Checkbox</span>
- <input type="submit" value="Submit" class="btn"/>
- <input type="image" title="Image" src="../images/twowayAdvertTest/logo_jquery.gif" class="img"/>
- <input type="reset" value="Reset" class="btn"/>
- <input type="button" value="Button" class="btn"/>
- <input type="file" title="File" class="txt"/>
- <div id="divShow"></div>
- </form>
- </body>
- </html>
表 2-18 页面执行效果
关键代码 | 功能描述 | 页面效果 |
$("#form1 div").html("表单共找出Input类型元素:"+$("#form1 :input").length); | 显示input类型元素的总数量 | |
$("#form1 :text").show(3000); | 显示所有文本框对象 | |
$("#form1 :password").show(3000); | 显示所有密码框对象 | |
$("#form1 :radio").show(3000); | 显示所有单选按钮 | |
$("#form1 :checkbox").show(3000); | 显示所有复选框对象 | |
$("#form1 :submit").show(3000); | 显示所有提交按钮对象 | |
$("#form1 :image").show(3000); | 显示所有图片域钮对象 | |
$("#form1 :reset").show(3000); | 显示所有重置按钮对象 | |
$("#form1 :button").show(3000); | 显示所有按钮对象 | |
$("#form1 :file").show(3000); | 显示所有文件域对象 |
综合案例分析---导航条在项目中的应用
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>导航条在项目中的应用</title>
- <script language="javascript" type="text/javascript" src="../jquery/jquery-1.4.2.min.js"></script>
- <style type="text/css">
- <SPAN style="WHITE-SPACE: pre"> </SPAN>body{font-size:13px}
- #divFrame{border:solid 1px #666;width:301px;overflow:hidden}
- #divFrame .clsHead{background-color:#eee;padding:8px;height:18px;cursor:hand}
- #divFrame .clsHead h3{padding:0px;margin:0px;float:left}
- #divFrame .clsHead span{float:right;margin-top:3px}
- #divFrame .clsContent{padding:8px}
- #divFrame .clsContent ul {list-style-type:none;margin:0px;padding:0px}
- #divFrame .clsContent ul li{ float:left;width:95px;height:23px;line-height:23px}
- #divFrame .clsBot{float:right;padding-top:5px;padding-bottom:5px}
- .GetFocus{background-color:#eee}
- </style>
- <script type="text/javascript">
- <SPAN style="WHITE-SPACE: pre"> </SPAN>
- <SPAN style="WHITE-SPACE: pre"> </SPAN>$(function(){//页面加载事件
- <SPAN style="WHITE-SPACE: pre"> </SPAN>$(".clsHead").click(function(){//图片单击事件
- <SPAN style="WHITE-SPACE: pre"> </SPAN>if($(".clsContent").is(":visible")){//如果内容可见
- <SPAN style="WHITE-SPACE: pre"> </SPAN>$(".clsHead span img").attr("src","../images/2/a1.gif");//改变图片
- <SPAN style="WHITE-SPACE: pre"> </SPAN>//隐藏内容
- <SPAN style="WHITE-SPACE: pre"> </SPAN>$(".clsContent").css("display","none");
- <SPAN style="WHITE-SPACE: pre"> </SPAN>}else{
- <SPAN style="WHITE-SPACE: pre"> </SPAN>$(".clsHead span img").attr("src","../images/2/a2.gif");//改变图片
- <SPAN style="WHITE-SPACE: pre"> </SPAN>//显示内容
- <SPAN style="WHITE-SPACE: pre"> </SPAN>$(".clsContent").css("display","block");
- <SPAN style="WHITE-SPACE: pre"> </SPAN>}
- <SPAN style="WHITE-SPACE: pre"> </SPAN>});
- <SPAN style="WHITE-SPACE: pre"> </SPAN>$(".clsBot > a").click(function(){//热点链接单击事件
- <SPAN style="WHITE-SPACE: pre"> </SPAN>//如果内容为"简化"字样
- <SPAN style="WHITE-SPACE: pre"> </SPAN>if($(".clsBot > a").text()=="简化"){
- <SPAN style="WHITE-SPACE: pre"> </SPAN>//隐藏index号大于4且不是最后一项的元素
- <SPAN style="WHITE-SPACE: pre"> </SPAN>$("ul li:gt(4):not(:last)").hide();
- <SPAN style="WHITE-SPACE: pre"> </SPAN>//将字符内容改为"更多"
- <SPAN style="WHITE-SPACE: pre"> </SPAN>$(".clsBot > a").text("更多");
- <SPAN style="WHITE-SPACE: pre"> </SPAN>}else{
- <SPAN style="WHITE-SPACE: pre"> </SPAN>$("ul li:gt(4):not(:last)").show().addClass("GetFocus");//显示所选元素且增加样式
- <SPAN style="WHITE-SPACE: pre"> </SPAN>//将字符内容更改为"简化"
- <SPAN style="WHITE-SPACE: pre"> </SPAN>$(".clsBot > a").text("简化")
- <SPAN style="WHITE-SPACE: pre"> </SPAN>}
- <SPAN style="WHITE-SPACE: pre"> </SPAN>});
- <SPAN style="WHITE-SPACE: pre"> </SPAN>})
- </script>
- </head>
- <body>
- <SPAN style="WHITE-SPACE: pre"> </SPAN><div id="divFrame">
- <SPAN style="WHITE-SPACE: pre"> </SPAN><div class="clsHead">
- <SPAN style="WHITE-SPACE: pre"> </SPAN><h3>图书分类</h3>
- <SPAN style="WHITE-SPACE: pre"> </SPAN><span><img src="../images/2/a2.gif" alt=""/></span>
- <SPAN style="WHITE-SPACE: pre"> </SPAN></div>
- <SPAN style="WHITE-SPACE: pre"> </SPAN><div class="clsContent">
- <SPAN style="WHITE-SPACE: pre"> </SPAN><ul>
- <SPAN style="WHITE-SPACE: pre"> </SPAN><li><a href="#">小说</a><li>(1110)</li></li>
- <SPAN style="WHITE-SPACE: pre"> </SPAN><li><a href="#">文艺</a><li>(230)</li></li>
- <SPAN style="WHITE-SPACE: pre"> </SPAN><li><a href="#">青春</a><li>(1430)</li></li>
- <SPAN style="WHITE-SPACE: pre"> </SPAN><li><a href="#">少儿</a><li>(1560)</li></li>
- <SPAN style="WHITE-SPACE: pre"> </SPAN><li><a href="#">生活</a><li>(870)</li></li>
- <SPAN style="WHITE-SPACE: pre"> </SPAN><li><a href="#">社科</a><li>(1460)</li></li>
- <SPAN style="WHITE-SPACE: pre"> </SPAN><li><a href="#">管理</a><li>(1450)</li></li>
- <SPAN style="WHITE-SPACE: pre"> </SPAN><li><a href="#">计算机</a><li>(1780)</li></li>
- <SPAN style="WHITE-SPACE: pre"> </SPAN><li><a href="#">教育</a><li>(930)</li></li>
- <SPAN style="WHITE-SPACE: pre"> </SPAN><li><a href="#">工具书</a><li>(3450)</li></li>
- <SPAN style="WHITE-SPACE: pre"> </SPAN><li><a href="#">引进版</a><li>(980)</li></li>
- <SPAN style="WHITE-SPACE: pre"> </SPAN><li><a href="#">其他类</a><li>(3230)</li></li>
- <SPAN style="WHITE-SPACE: pre"> </SPAN></ul>
- <SPAN style="WHITE-SPACE: pre"> </SPAN></div>
- <SPAN style="WHITE-SPACE: pre"> </SPAN><div class="clsBot">
- <SPAN style="WHITE-SPACE: pre"> </SPAN><a href="#">简化</a>
- <SPAN style="WHITE-SPACE: pre"> </SPAN><img src="../images/2/a5.gif" alt=""/>
- <SPAN style="WHITE-SPACE: pre"> </SPAN></div>
- <SPAN style="WHITE-SPACE: pre"> </SPAN></div>
- </body>
- </html>
2.3.4在页面代码中,首先通过如下代码:
- $(".clsContent").css("display","none");
- $(".clsHead span img").attr("src","../images/2/a2.gif");
- if($(".clsContent").is(":visible")){
其中“$(".clsContent”)获取内容元素,“is”是判断,":visible"表示是否可见,此行代码用于判断内容元素是否可见,它返回一个布尔值,如果为true,则执行if后面的语句块,否则执行else后面的语句块
- if($(".clsBot > a").text()=="简化"){
其中$(".clsBot > a")获取超链接元素,text()是jQuery中一个获取元素内容的函数。
- <PRE class=javascript name="code">$("ul li:gt(4):not(:last)").hide();</PRE>
- <PRE></PRE>
- 其中,“ul li”获取元素,":gt(4)"和":not(:last)"分别为两个并列的过滤选择条件,前者表示Index号大于4,后者表示不是最后一个元素,二者组合成一个过滤条件,即选Index号大于4并且不是最后一个的元素集合;hide()是jQuery中一个隐藏元素的函数。
- <PRE></PRE>