jQuery 选择器 - 2

最新推荐文章于 2024-10-31 15:39:18 发布

bestallen

最新推荐文章于 2024-10-31 15:39:18 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript HTML5

本文链接：https://blog.youkuaiyun.com/bestallen/article/details/55259430

HTML5 同时被 2 个专栏收录

11 篇文章

订阅专栏

JavaScript

5 篇文章

订阅专栏

本文详细介绍了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是为了不然超链接打开新页面
    })
});

执行的效果就如下