jQuery 选择器 - 2

本文详细介绍了jQuery中关于表单的选择器,包括表单对象属性过滤选择器的使用,如筛选enabled或disabled的输入元素。通过实例展示了如何在电商页面上实现商品列表的显示切换,并突出显示特定品牌的高亮效果。

继续上一篇

接下去是表单的选择器


表单对象属性过滤选择器

还是先写个表单的页面作为样本

<!DOCTYPE html>
<head>
    
    <script src = "./scripts/jquery.js" ></script>

</head>

<body>
<form id = "form1" action = "#">
    可用元素:<input name = "add" value = "可用文本框" /> <br/>
    不可用元素:<input name = "email" disabled = "disabled" value = "不可用文本框" /> <br/>
    可用元素:<input name = "che" value = "可用文本框" /> <br/>
    不可用元素:<input name = "name" disabled = "disabled" value = "不可用文本框" />  <br/>
    
    <br/>
    多选框:<br/>
    <input type = "checkbox" name = "newsletter" checked = "checked" value = "test1" />test1
    <input type = "checkbox" name = "newsletter" checked = "checked" value = "test2" />test2
    <input type = "checkbox" name = "newsletter" checked = "checked" value = "test3" />test3
    <input type = "checkbox" name = "newsletter" checked = "checked" value = "test4" />test4
    <input type = "checkbox" name = "newsletter" checked = "checked" value = "test5" />test5
    <div></div>
    
    <br/><br/>
    下拉列表1: <br/>
    <select name = "test" multiple = "multiple" style = "height:100px" >
        <option>浙江</option>
        <option selected = "selected">湖南</option>
        <option>北京</option>
        <option selected = "selected">天津</option>
        <option>广州</option>
        <option>湖北</option>
    </select>
    
    </br></br>
    下拉列表2:<br/>
    <select name = "test2">
        <option>浙江</option>
        <option>湖南</option>
        <option selected = "selected">北京</option>
        <option>天津</option>
        <option>广州</option>
    </select>
    
    <div></div>
</form>

    <script src = "./scripts/color.js"></script>

</body>


预览效果如下:




如果我们把jquery代码如下编写

$("#form1 input:enabled").val("这里变化了!");

那他起到的作用将是如下,所有enabled设置的input字段内容,就被更改了。





再次修改jquery如下

$("#form1 input:disabled").val("此处又发生变化了!");

所有disabled属性的input表单字段就被修改了






表单选择器




实际操作

用一个类似电商网站的页面,来进行实际操作

<html>
<head>
    <meta charset="UTF-8" />
    <script scr="./scripts/jquery.js"></script>
</head>

<body>
    <div class = "SubCategoryBox">
        <ul>
            <li><a href = "#">佳能</a><i>(30440)</i></li>
            <li><a href = "#">索尼</a><i>(30440)</i></li>
            <li><a href = "#">三星</a><i>(30440)</i></li>
            <li><a href = "#">尼康</a><i>(30440)</i></li>
            <li><a href = "#">松下</a><i>(30440)</i></li>
            <li><a href = "#">卡西欧</a><i>(30440)</i></li>
            <li><a href = "#">富士</a><i>(30440)</i></li>
            <li><a href = "#">柯达</a><i>(30440)</i></li>
            <li><a href = "#">宾得</a><i>(30440)</i></li>
            <li><a href = "#">理光</a><i>(30440)</i></li>
            <li><a href = "#">奥林巴斯</a><i>(30440)</i></li>
            <li><a href = "#">明基</a><i>(30440)</i></li>
            <li><a href = "#">爱国者</a><i>(30440)</i></li>
            <li><a href = "#">其他品牌相机</a><i>(30440)</i></li>
        </ul>
        <div class = "showmore">
            <a href = "more.html"><span>显示全部品牌</span></a>
        </div>
    </div>
</body>
</html>


基本效果如下




主要目标:

1:做一个按钮,可以让上面的列表进行    全部/部分   显示之间的切换,但是其他品牌相机 几个字必须保留

2:在部分显示情况下,让指定的品牌高光显示


$(function(){

    var $category = $('ul li:gt(5):not(:last)');          //选择列表单元的第6个到倒数第2个,不包含最后一个
    $category.hide();                                     //对选择的对象进行隐藏操作
    var $toggleBtn = $('div.showmore > a');               //选择class名为showmore的div内的a元素
    $toggleBtn.click(function(){                          //为这个超链接添加click事件
        if ($category.is(":visible")){            //如果category元素是可见的话
            $category.hide();                     //对category进行隐藏操作
            $('.showmore a span').css("background","url(./img/down.gif) no-repeat 0 0").text("显示全部品牌");
            //并将class为showmore内的文字,添加背景图片,以及将文字修改为显示全部品牌
            $('ul li').removeClass("promoted");
            //将每个列表元素的promoted的class名字除去,promoted这个class名字是让文字显示高光的css
        }else{
            $category.show();           //反之,则将category调整为显示状态
            $('.showmore a span').css("background","url(./img/up.gif) no-repeat 0 0").text("精简显示品牌");
            //则将背景图片修改,并将文字改成精简显示品牌
            $('ul li').filter(":contains('佳能'), :contains('尼康'), :contains('奥林巴斯')").addClass("promoted");
            //并将所有列表元素进行过滤,选出指定的品牌,添加class名字为promoted
        }
        return false;  //return false是为了不然超链接打开新页面
    })
});


执行的效果就如下







评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值