jQuery 选择器 - 2

2019-11-08 18:25:02

字体：大中小

来源：转载

供稿：网友

继续上一篇

接下去是表单的选择器

表单对象属性过滤选择器

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

<!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是为了不然超链接打开新页面    })});
执行的效果就如下