繼續上一篇
接下去是表單的選擇器
還是先寫個表單的頁面作為樣本
<!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是為了不然超鏈接打開新頁面 })});執行的效果就如下
新聞熱點
疑難解答
