CH07 jQuery选择器与过滤器.ppt

7.2.4可见性过滤器(VisibilityFilter)jQuery可见性过滤器(VisibilityFilter)根据元素当前状态是否可见进行过滤筛选。常见用法如表所示。7.2.4可见性过滤器(VisibilityFilter)1. :hidden:hidden过滤器用于筛选出所有处于隐藏状态的元素，其语法结构如下：:hidden过滤器可单独使用，也可以与其他选择器配合使用对元素进一步过滤筛选。例如：上述代码表示查找所有隐藏的段落元素p。$(:hidden)$(p:hidden)7.2.4可见性过滤器(VisibilityFilter)1. :hidden元素在网页中不占用任何位置空间就被认为是隐藏的，具体有以下几种情况：元素的宽度和高度明确设置为0；元素的CSS属性中display的值为none；表单元素的type属性设置为hidden；元素的父元素处于隐藏状态，因此元素也一并无法显示出来；下拉列表中的所有选项option元素也被认为是隐藏的，无论其是否为selected状态；7.2.4可见性过滤器(VisibilityFilter)1. :hidden【例7-26】jQuery可见性过滤器:hidden()的使用7.2.4可见性过滤器(VisibilityFilter)2. :visible:visible过滤器用于筛选出所有处于可见状态的元素，其语法结构如下：:visible过滤器可单独使用，也可以与其他选择器配合使用对元素进一步过滤筛选。:visible过滤器与:hidden过滤器的筛选条件完全相反，因此无法同时使用。$(:visible)7.2.4可见性过滤器(VisibilityFilter)2. :visible需要注意的是，元素处于以下几种特殊情况中也被认为是可见状态:元素的透明度属性opacity为0，此时元素仍然占据原来的位置；元素的可见属性visibility值为hidden，此时元素仍然占据原来的位置；当元素处于逐渐被隐藏的动画效果中，到动画结束之前都被认为仍然是可见的；当元素处于逐渐被显现的动画效果中，从动画一开始启动就被认为是可见的。7.2.4可见性过滤器(VisibilityFilter)2. :visible【例7-27】jQuery可见性过滤器:visible()的使用7.3阶段案例：网页一键换肤7.3.1案例需求 7.3.2案例分析 7.3.3案例制作 7.3.4案例思考 7.3.1案例需求制作一款可以给网页主题颜色一键切换的应用，点击工具箱中的按钮即可实现一键换肤功能。7.3.2案例分析网页的主题颜色主要是靠css样式代码实现的，如果事先制作好多个主题颜色的CSS样式文件，那么HTML页面引用了其中哪个主题颜色样式文件，就会显示对应的皮肤效果了。可以考虑给HTML页面head中关于外部样式表引用的link标签加上id属性，这样就方便被jQuery选择器准确定位和修改引用的文件地址了。7.3.2案例分析例如，在HTML文件中有：上述代码就表示原先引用的外部样式文件是a.css，然后被jQuery使用ID选择器找到了id=skinCSS的link标签，并且把引用的href地址变更成了b.css。linkid=skinCSSrel=stylesheethref=css/theme/a.cssscript//更新对应的CSS样式文件$(#skinCSS).attr(href,css/theme/b.css)/script7.3.3案例制作创建一个HTML文件，文件名可自定义，例如ThemeSwitch.html。1. !doctypehtml2. html3. head4. metacharset=utf-85. title网页一键换肤/title6. linkrel=stylesheethref=css/common.css7. linkid=skinCSSrel=stylesheethref=css/theme/skin_blue.css8. scriptsrc=js/jquery-1.12.3.min.js/script9. /head10. 11. body12. !--一、页眉--13. header14. h1网页一键换肤/h115. /header16. !--二、主体部分--17. divid=container18. !--工具箱整体区域--19. divid=toolbox7.3.3案例制作20.!--（1）工具