开发者学堂课程【jQuery 开发教程： jQuery_可见性过滤 jQuery 扩展】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/362/detail/4283
jQuery_可见性过滤 jQuery 扩展
内容介绍
一、jQuery 扩展
二、可见性过滤
一、jQuery扩展
选择器 |
描述 |
animated Selector |
选择所有正在执行动画效果的元素 |
Attribute Not Equal selector [name!="value"] |
选择不存在指定属性，或者指定的属性值不等于给定值的元素 |
button Selector |
选择所有按钮元素和类型为按钮的元素 |
checkboxSelector |
选择所有类型为复选框的元素 |
eq（）Selector |
在匹配的集合中选择索引值为index的元素 |
even Selector |
选择所引值为偶数的元素，从О开始计数。也可以查看odd |
file Selector |
选择所有类型为文件（file）的元素 |
first Selector |
选择第一个匹配元素 |
gt （） Selector |
选择匹配集合中所有大于给定index (索引值)的元素 |
has（）Selector |
选择元素其中至少包含指定选择器匹配的一个种元素 |
header Selector |
选择所有标题元素，像h1, h2, h3等 |
hidden Selector |
选择所有隐藏元素 |
image Selector |
选择所有类型为图片的元素 |
input Selector |
选择所有input, textarea, select和button元素. |
last Selector |
选择最后一个匹配的元素 |
It（）Selector |
选择匹配集合中所有索引值小于给定index参数的元素。 |
parent Selector |
选择所有含有子元素或文本的父级元素 |
password Selector |
选择所有类型为密码的元素 |
radie Selector |
选择所有类型为单元框的元素 |
reast Selector |
选择所有类型为重置的元素 |
selected Selector |
获取select元素中所有被选中的元素。 |
这些选择器是扩展了 css3中的选择器。
因为是css扩展的，而不是css规范的一部分，所以查询中使用无法使性能提升，所以在使用时最好先用 css 选择器选择一部分元素，再使用这些选择器来进行过滤。
举例：新创建一个文件，引入jQuery：
<script src="jquery-2.2.1.min. js">< /script>
写一个表格加上边框和内容并复制几个：
body> <table border="1"> <tr><td>index0</td></tr> <tr><td>index1</td></tr> <tr><td>index2</td></tr> <tr><td>index3</td></tr> < /table> < / body>
这是1×4的表格，现在使用 even 选择器选择所有索引值为偶数的函数添加背景颜色。
要使用这些扩展出来的选择器，首先要使用 css 选择器先来选出一部分元素：
<script> $ ( function () { $ ( "table tr: even" ).css ( "background-color" , "red"); }) </script>
1和2已被添加上了颜色，这就是 jQuery扩展出的选择器的用法，其他选择器同理。
二、可见性过滤
1、hidden selector
- 描述︰选择所有隐藏的元素。
- 语法:
jQuery( ":hidden") - 补充∶
元素可以被认为是隐藏的几个情况∶
1)CSs display值是none。
2)是type="hidden"的表单元素。
3)宽度和高度都设置为0。
4)一个祖先元素是隐藏的，因此该元素是不会在页面上显示。
2、visible selector
- 描述∶选择所有可见的元素。
- 语法:
jQuery( ":visible" )
如果元素占据文档中一定的空间,元素被认为是可见的。可见元素的宽度或高度，是大于零。
所以∶元素的visibility: hidden或opacity:0被认为是可见的，因为仍然占用空间布局。
不在文档中的元素是被认为隐藏的jQuery没有办法知道是否是可见的，因为元素可见性依赖于适用的样式。
隐藏元素上做动画，元素被认为是可见的，直到动画结束。显示元素上做动画，在动画的开始处该元素被认为是可见的。
举例：新创建 hidden.html 文件
引入jQuery：
<script src="jquery-2.2.1.min. js">< /script>
写一个例子：
<body> <div class="outter"> <div class="inner">hidder ! </div> < / div> < / body>
设置样式：
<style> .outter{ width: 300px; height: 300px; background-color: red;
然后写 .inner，设置样式：
.inneri width: 50px; height: 50px; background-color: #abcdef; < /style>
让其隐藏，写入display：none 这时候就认为是一个隐藏元素。
写 js 检测一下.inneri 是不是隐藏的，如果是隐藏的让其显现出来：
$ (function()i $( ".outter .inner:hidden" ).css ( "display" , "block"); })
Hider已被显示出来
同理，visible selector 也是一样。
