实现一个效果,以下。javascript
品牌列表默认精简显示,单击“显示所有品牌”按钮显示所有品牌,同时列表将推荐的品牌的名字高亮显示,按钮里的文字变成“精简显示品牌”。再次点击“精简显示品牌”回到初始页面。css
html结构以下:html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .SubCategoryBox{ width:800px; border:1px solid #ccc; overflow: hidden; font-size: 16px; } .SubCategoryBox li{ float: left; width: 240px; list-style: none; } .showmore{ clear: both; text-align: center; padding: 5px 0 5px; } .showmore a{ display: inline-block; border:1px solid green; padding:5px; } .showmore a:hover{ background-color: light-green; } </style> </head> <body> <div class="SubCategoryBox"> <ul> <li><a href="#">佳能</a><i>(30440)</i></li> <li><a href="#">索尼</a><i>(27220)</i></li> <li><a href="#">三星</a><i>(20808)</i></li> <li><a href="#">尼康</a><i>(17821)</i></li> <li><a href="#">松下</a><i>(12289)</i></li> <li><a href="#">卡西欧</a><i>(8242)</i></li> <li><a href="#">富士</a><i>(14894)</i></li> <li><a href="#">柯达</a><i>(9520)</i></li> <li><a href="#">宾得</a><i>(2195)</i></li> <li><a href="#">理光</a><i>(4114)</i></li> <li><a href="#">奥林巴斯</a><i>(12205)</i></li> <li><a href="#">明基</a><i>(1466)</i></li> <li><a href="#">爱国者</a><i>(3091)</i></li> <li><a href="#">其余品牌相机</a><i>(7275)</i></li> </ul> <div class="showmore"> <a href="more.html"><span>显示所有品牌</span></a> </div> </div> </body> </html>
页面加载的时候,只显示前5个品牌和最后一个“其余品牌相机”。因此从第6个开始隐藏后面的品牌(最后一条“其它品牌相机”)除外。java
jquery库用1.8.3:jquery
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
var $category = $(".SubCategoryBox li:gt(4):not(:last)"); //获取元素 $category.hide(); //隐藏
显示隐藏的品牌。若是浏览器禁用了javascript,就会跳到一个more.html来显示更多信息,不然return false,禁止跳转。api
var $toggleBtn=$("div.showmore>a");//获取点击按钮 $toggleBtn.click(function() { $category.show(); //显示隐藏的品牌 return false; //阻止浏览器跳转 });
此时须要将“显示所有品牌变为“精简显示品牌”。浏览器
$(this).find("span") .text("精简显示品牌");
接下来高亮推荐品牌。app
$(".SubCategoryBox li") .filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")//找到品牌 .addClass("promoted");//添加高亮样式
使用filter方法筛选出复核要求的品牌。dom
至此所有代码以下:ide
<script> $(function() { //等待DOM加载完毕 var $category = $(".SubCategoryBox li:gt(4):not(:last)"); //得到索引值大于4的品牌集合对象(除最后一条) $category.hide(); //隐藏匹配元素 var $toggleBtn = $("div.showmore>a"); //获取“显示所有品牌”按钮 $toggleBtn.click(function() { $category.show(); //显示$category $(this).find("span").text("精简显示品牌"); //改变按钮文字 $(".SubCategoryBox li") .filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')") .addClass("promoted"); //推荐品牌高亮显示 return false; //超连接不跳转 }); }); </script>
此时用户点击“显示所有品牌” ,正常显示所有品牌。
由于单击同一按钮,事件仍然在刚才的按钮上。要将切换两种状态的效果在一个按钮上进行,能够经过判断元素的显示和隐藏实现。
if(元素显示){
//元素隐藏
}else{
//元素显示
}
“元素显示”部分的代码就是第二步中的,如今只要完成元素隐藏的代码便可。
元素隐藏和显示功能恰好相反,代码以下。
if( $category.is(":visible")){ //元素隐藏 $category.hide(); //隐藏匹配元素 $(this).find("span").text("显示所有品牌"); //改变按钮文字 $(".SubCategoryBox li").removeClass("promoted"); //所有元素去掉"promoted" }
至此任务完成完整的代码为:
<script> $(function() { //等待DOM加载完毕 var $category = $(".SubCategoryBox li:gt(4):not(:last)"); //得到索引值大于4的品牌集合对象(除最后一条) $category.hide(); //隐藏匹配元素 var $toggleBtn = $("div.showmore>a"); //获取“显示所有品牌”按钮 $toggleBtn.click(function() { if ($category.is(":visible")) { //元素隐藏 $category.hide(); //隐藏匹配元素 $(this).find("span").text("显示所有品牌"); //改变按钮文字 $(".SubCategoryBox li").removeClass("promoted"); //所有元素去掉"promoted" } else { //元素显示 $category.show(); //显示$category $(this).find("span").text("精简显示品牌"); //改变按钮文字 $(".SubCategoryBox li") .filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')") .addClass("promoted"); //推荐品牌高亮显示 } return false; //超连接不跳转 }); }); </script>
jquery<=1.8.3中有一个方法更适合以上情境,它能给一个按钮添加一组交互事件,而不须要像上面同样作不少判断
$toggleBtn.click(function() { if ($category.is(":visible")) { //元素隐藏 } else { //元素显示 } return false; //超连接不跳转 });
等价为toggtle方法:toggle n.开关 触发器
$toggleBtn.toggle(function(){ //显示元素 },function(){ //隐藏元素 });
因此最终代码为:
<script> $(function() { //等待DOM加载完毕 var $category = $(".SubCategoryBox li:gt(4):not(:last)"); //得到索引值大于4的品牌集合对象(除最后一条) $category.hide(); //隐藏匹配元素 var $toggleBtn = $("div.showmore>a"); //获取“显示所有品牌”按钮 $toggleBtn.toggle(function() { //元素显示 $category.show(); //显示$category $(this).find("span").text("精简显示品牌"); //改变按钮文字 $(".SubCategoryBox li") .filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')") .addClass("promoted"); //推荐品牌高亮显示 return false; //超连接不跳转 }, function() { //元素隐藏 $category.hide(); //隐藏匹配元素 $(this).find("span").text("显示所有品牌"); //改变按钮文字 $(".SubCategoryBox li").removeClass("promoted"); //所有元素去掉"promoted" return false; //超连接不跳转 }); }); </script>
所有代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .SubCategoryBox { width: 800px; border: 1px solid #ccc; overflow: hidden; font-size: 16px; } .SubCategoryBox li { float: left; width: 240px; list-style: none; } .showmore { clear: both; text-align: center; padding: 5px 0 5px; } .showmore a { display: inline-block; border: 1px solid green; padding: 5px; } .promoted { font-weight: 700; color: red; } } </style> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> </head> <body> <div class="SubCategoryBox"> <ul> <li><a href="#">佳能</a><i>(30440)</i></li> <li><a href="#">索尼</a><i>(27220)</i></li> <li><a href="#">三星</a><i>(20808)</i></li> <li><a href="#">尼康</a><i>(17821)</i></li> <li><a href="#">松下</a><i>(12289)</i></li> <li><a href="#">卡西欧</a><i>(8242)</i></li> <li><a href="#">富士</a><i>(14894)</i></li> <li><a href="#">柯达</a><i>(9520)</i></li> <li><a href="#">宾得</a><i>(2195)</i></li> <li><a href="#">理光</a><i>(4114)</i></li> <li><a href="#">奥林巴斯</a><i>(12205)</i></li> <li><a href="#">明基</a><i>(1466)</i></li> <li><a href="#">爱国者</a><i>(3091)</i></li> <li><a href="#">其余品牌相机</a><i>(7275)</i></li> </ul> <div class="showmore"> <a href="more.html"><span>显示所有品牌</span></a> </div> </div> <script> $(function() { //等待DOM加载完毕 var $category = $(".SubCategoryBox li:gt(4):not(:last)"); //得到索引值大于4的品牌集合对象(除最后一条) $category.hide(); //隐藏匹配元素 var $toggleBtn = $("div.showmore>a"); //获取“显示所有品牌”按钮 $toggleBtn.toggle(function() { //元素显示 $category.show(); //显示$category $(this).find("span").text("精简显示品牌"); //改变按钮文字 $(".SubCategoryBox li") .filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')") .addClass("promoted"); //推荐品牌高亮显示 return false; //超连接不跳转 }, function() { //元素隐藏 $category.hide(); //隐藏匹配元素 $(this).find("span").text("显示所有品牌"); //改变按钮文字 $(".SubCategoryBox li").removeClass("promoted"); //所有元素去掉"promoted" return false; //超连接不跳转 }); }); </script> </body> </html>
.filter(expr) :筛选出与指定表达式匹配的元素集合,其中expr能够是多个选择器的组合。
.filter(expr)和.find()对比。
需求和实现以下:
$(document).ready(function() {}能够替换为等价且更简单的写法:$(function(){});
$("#id").is(':visible'); //true 为显示 false 为隐藏 $("#id").is(":hidden"); //true 为隐藏 false 为显示
jquery中的is(expr|obj|ele|fn)根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,若是其中至少有一个元素符合这个给定的表达式就返回true。
经常使用:
// 是不是隐藏的 $('#test').is(':visible'); // 判断input元素是否被选中 $('input[name=chkNoChecked]').is(':checked'); // 是不是第一个子元素 $(this).is(":first-child"); // 是否包含.blue,.red的class $(this).is(".blue,.red"); // 文本中是否包含Peter这个词 $(this).is(":contains('Peter')");
更多可参考官网文档:http://api.jquery.com/is/
下面代码,点击按钮时改变内容
$(".showmore").click(function() { $(".showmore a span").html("精简显示品牌"); });
可进一步写成:
$(".showmore").click(function() { $(this).find("span").text("精简显示品牌"); });
若是须要同时操做样式可写为:
$(".showmore").click(function() { $(this).find("span") .css("background","url(url(img/up.gif) no-repeat 0 0)") .text("精简显示品牌"); });
jquery<=1.8.3的toggle()方法能够实现以上效果。由于它有两种功能。
当指定元素被点击时,在两个或多个函数之间轮流切换。若是规定了两个以上的函数,则 toggle() 方法将切换全部函数。例如,若是存在三个函数,则第一次点击将调用第一个函数,第二次点击调用第二个函数,第三次点击调用第三个函数。第四次点击再次调用第一个函数,以此类推。
$(selector).toggle(function1(),function2(),functionN(),...)
function1():必需。规定元素偶数次被点击时要运行的函数。
function2():必需。规定当元素在奇数次被点击时要运行的函数。
functionN(),...可选。规定须要切换的其余函数。
效果能够看w3school:http://www.w3school.com.cn/tiy/t.asp?f=jquery_effect_toggle_function
jQuery Migrate(迁移)插件能够恢复此功能。也能够把原来那块代码拿出来,写成一个插件,以下:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>test</title> <script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.11.1/jquery.js"></script> </head> <body> <button>test click me</button> <script> $(document).ready(function(){ $("button").toggle(function(){ $("body").css("background-color", "green"); }, function(){ $("body").css("background-color", "red"); }, function(){ $("body").css("background-color", "yellow"); }); }); $.fn.toggle = function( fn ) { // Save reference to arguments for access in closure var args = arguments, guid = fn.guid || jQuery.guid++, i = 0, toggler = function( event ) { // Figure out which function to execute var lastToggle = ( jQuery._data( this, "lastToggle" + fn.guid ) || 0 ) % i; jQuery._data( this, "lastToggle" + fn.guid, lastToggle + 1 ); // Make sure that clicks stop event.preventDefault(); // and execute the function return args[ lastToggle ].apply( this, arguments ) || false; }; // link all the functions, so any of them can unbind this click handler toggler.guid = guid; while ( i < args.length ) { args[ i++ ].guid = guid; } return this.click( toggler ); } </script> </body> </html>
语法:
$(selector).toggle(speed,callback,switch)
参数都是可选的。
例子:切换p的显隐。
$(".btn1").click(function(){ $("p").toggle(); });
文中案例来自《锋利的jquery》,可是书中内容不免过期,但也不能因噎废食,知道一些技术的历史,哪怕是过期的,新旧结合,也能够帮助咱们更全面的认识掌握技术。
本文做者starof,因知识自己在变化,做者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/5416895.html有问题欢迎与我讨论,共同进步。