继续上一篇
接下去是表单的选择器
表单对象属性过滤选择器
还是先写个表单的页面作为样本
<!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是为了不然超链接打开新页面
})
});
执行的效果就如下