学习笔记----jquery选择器（下）

最新推荐文章于 2024-04-19 15:29:12 发布

原创最新推荐文章于 2024-04-19 15:29:12 发布 · 445 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍jQuery中用于操作表单元素的选择器和方法，包括如何筛选可用和不可用的输入框、获取多选框选中项数量及下拉框选中内容等。并附带了一个动态列表效果的实例，展示如何通过jQuery实现内容的动态显示和隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单对象属性过滤选择器：

$(document).ready(function(){

               //<button id="btn1">对表单内可用input 赋值操作.</button>
               $("#btn1").click(function(){
                   /*
                   * 可用元素：<input name="add" value="可用文本框"/> <br/>
                     不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
                     可用元素： <input name="che" value="可用文本框" /><br/>
                   不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/>
                   */
                   /*
                   * val()：获取值和设置值
                   *    * val()：获取
                   *    * val(value)：设置
                   */
                   $("input:enabled").val("xxxxx");

               });

               //<button id="btn2">对表单内不可用input 赋值操作.</button>
               $("#btn2").click(function(){
                   /*
                   * 可用元素：<input name="add" value="可用文本框"/> <br/>
                     不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
                     可用元素： <input name="che" value="可用文本框" /><br/>
                   不可用元素：<input name="name" disabled="disabled" value="不可用文本框"/><br/>
                   */
                   /*
                   * val()：获取值和设置值
                   *    * val()：获取
                   *    * val(value)：设置
                   */
                   $("input:disabled").val("xxxxx");

               });

               //<button id="btn3">获取多选框选中的个数.</button>
               $("#btn3").click(function(){
                   alert($("input[name=newsletter]:checked").length);
               });

               //<button id="btn4">获取下拉框选中的内容.</button>
               $("#btn4").click(function(){
                   $("select>option:selected").each(function(index,domEle){
                       alert($(domEle).text());
                   })
               });

});

=========================================================================================================================================================

1、:input 用法: $(”:input”) ; 返回值集合元素
说明:匹配所有 input, textarea, select 和 button 元素

2、:text 用法: $(”:text”) ; 返回值集合元素
说明: 匹配所有的单行文本框.

3、:password 用法: $(”:password”) ; 返回值集合元素
说明: 匹配所有密码框.

4、:radio 用法: $(”:radio”) ; 返回值集合元素
说明: 匹配所有单选按钮.

5、:checkbox 用法: $(”:checkbox”) ; 返回值集合元素
说明: 匹配所有复选框

6、:submit 用法: $(”:submit”) ; 返回值集合元素
说明: 匹配所有提交按钮.

7、:image 用法: $(”:image”) 返回值集合元素
说明: 匹配所有图像域.

8、:reset 用法: $(”:reset”) ; 返回值集合元素
说明: 匹配所有重置按钮.

9、:button 用法: $(”:button”) ; 返回值集合元素
说明: 匹配所有按钮.这个包括直接写的元素button.

10、:file 用法: $(”:file”) ; 返回值集合元素
说明: 匹配所有文件域.

11、:hidden 用法: $(”input:hidden”) ; 返回值集合元素

说明: 匹配所有不可见元素，或者type为hidden的元素.这个选择器就不仅限于表单了,除了匹配input中的hidden外,那些style为hidden的也会被匹配.
注意: 要选取input中为hidden值的方法就是上面例子的用法,但是直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素,包括宽度或高度为0的,

小练习：动态页面整体效果源码

<!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>动态列表效果.html</title>
<style type="text/css">
 *{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style>
<!-- 引入jQuery -->
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function(){
            //1 页面加载时，隐藏内容
            var $hidden = $("li:gt(5):not(:last)");
            
            $hidden.hide();
            
            $("a>span").click(function(){
                //判断是否隐藏
                if($hidden.is(":hidden")){
                    $hidden.show(3000);
                    /*
                     * text()：获取文本内容和设置文本内容
                     *     * text()：获取
                     *     * text(value)：设置
                     */
                    $("a>span").text("精简显示品牌");
                    
                    //点击链接时，页面会自动提交。禁止页面自动提交
                    return false;
                }else{
                    $hidden.hide(3000);
                    $("a>span").text("显示全部品牌");
                }
            });
            
        });
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="#"><span>显示全部品牌</span></a>
</div>
</div>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>