JQuery函数库,作为一个后端开发辅助插件,从刚开始的默默无闻到现在的当前最主流的后端函数库不是没有道理的,它所具备的强大实用性以及便利性是它受众人欢迎的主要原因,就像JQuery官方网站的宣传标题所说:用最少的代码,实现最多的功能。这一点,它们以及做的很好了,现在做系统功能少不了JQ插件的帮忙,熟练运用JQ里封装好的各个函数方法已经成为我们学习的一部分。此次要聊的主人公是JQ众多函数方法中的一位成员is()。
说实话,JQ中有着许多的函数方法,本人只有较为常用的几个方法是记得住的,其他的也只是需要用到才去查一下,而is()正是不太常用的方法。首先来看看is()它的作用是什么,如下图解释:
检测匹配到的元素集合,若该集合中有(至少一个)元素符合当前表达式的就返回true。额,它的作用是不是就觉得挺冷门的,反正我是第一次用。虽说是冷了点,但若是使用了当也可以产生奇效。当时遇到的问题是,点击下图右上角的筛选按钮,使按钮下方原本为隐藏状态的浅灰色折叠层显示出来:
当点击筛选按钮后,筛选按钮会变为收起,当再次点击收起按钮时,下方的浅灰色折叠层则会从当前的显示变回隐藏,需要完成的效果就是如此:
为此我曾想过许多解决办法:1.为筛选按钮绑定两次点击事件,点击第一次让它显示,第二次让它隐藏;2.运用toggle()方法让它隐藏和显示;3.则是使用本期的主角is(),用它来判断浅灰色折叠层中是否有隐藏(hidden)属性,有的话下一步做什么,没有的话又做什么。
//筛选按钮(折叠层显示事件)
function btnShaiXuan() {
//判断当前折叠层是否为隐藏状态,若为隐藏则通过show()让它显示出来
if ($("#折叠层").is(":hidden")) {
//折叠层显示
$("#折叠层").show();
//将筛选改为收起
$("#筛选按钮").html("收起");
}
//若为显示则让它隐藏起来
else {
//折叠层隐藏
$("#折叠层").hide();
//将收起改为筛选
$("#筛选按钮").html("筛选");
}
}
方法定义好以后,再为筛选按钮绑定onclick事件就完成了,这样子的话,每点击一次筛选就会进行一次判断,从而达到所需的效果。所以呢,不要小看JQuery中的任何一个方法,即便是冷门,运用的巧妙也可以发挥出它应有的作用。