jQuery学习笔录2（jQuery学习笔记——选择器(2)&过滤器）

jQuery选择器，简单来讲就是【$】，你要对html页面上的东西进行操作的话，就要把东西“拿出来”，而这“拿出来”的动作就是利用$选择器。

1 选择器基本用法

$("p")选择p签的元素,$("#id")选择ID=id的元素，$(".test")选择class=test的元素

2 过滤选择器：

input :checked　　选择input 标签下 同时状态是checked的元素

.基本过滤选择器
•:first ：选取第一个元素 实例：$(“div:first”) 选取所有<div>元素中第一个<div>元素
•:last:选取最后一个元素 实例：$(“div:last”) 选取所有<div>元素中最后一个<div>元素
•:not(selector) 取出所有与给定选择器匹配的元素。例如：$(“input:not(.myClass)”) 选取class不是myClass的<input>元素
•:even 选取索引是偶数的所有元素，索引从0开始 例如：$(“input:even”) 选取索引是偶数的<input>元素
•:odd 选取索引是奇数的所有元素，索引从0开始 例如：$(“input:odd”) 选取索引是奇数的<input>元素
•:eq(index) 选取索引等于index的元素(index从0开始) 例如：$(“input:eq(1)”) 选取索引等于1的<input>元素
•:gt(index) 选取索引大于index的元素(index从0开始) 例如$(“input:get(1)”) 选取索引大于1的<input>元素（注：大于1，而不包括1）
•:lt(index) 选取索引小于index的元素(index从0开始) 例如：$(“input:lt(1)”) 选取索引小于1的<input>元素。
•:header 选取所有的标题元素，例如h1,h2,h3等等 例如$(“:header”) 选取所有网页中的<h1>,<h2><h3>…..
•:animated 选取当前正在执行动画的所有元素 例如：$(“div:animated”) 选取正在执行动画的<div>元素
属性过滤选择器
[attribute]  选取拥有此属性的元素 例子：$(“div[id]”) 选取拥有属性id的元素。
•[attribute=value] 选取属性的值为value的元素 例子：$(“div[title=test]”) 选取属性title为”test” 的<div>元素
•[attribute!=value] 选取属性的值不等于value的元素 例子：$(“div[title!=test]”) 选取属性title不等于“test“的<div>元素（注意：没有属性title的<div>元素也会被选取）
•[attribute^=value] 选取属性的值以value开始的元素 例子：$(“div[title^=test]”) 选取属性title以“test“开始的<div>元素
•[attribute$=value] 选取属性的值以value结束的元素 例子：$(“div[title$=test]”) 选取属性title以”test”开始的<div>元素。
•[attribute*=value] 选取属性值包含有value的元素 例子$(“div[title*=test]”) 选取属性title含有“test“的<div>元素。
•[selector1][selector2][selectorN] 用属性选择器合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围 。例子：$(“div[id][title$=’test’]”) 选取拥有属性id，并且属性title以“test“结束的<div>元素。

下面记了几个常用的jQuery方法、例子。

一 隔行显示变色

$("#tb tbody tr:even").css("backgroundColor","#888");//刚开始写的时候不知道jquery下tb、tbody 、tr怎么连接的，
//现在知道了:找到id是tb的元素，寻找他下面的tbody标签，tr标签，even过滤偶数的tr元素
//css("property","value"); 设置jquery对象的样式

二 针对"name","Type"属性的操作

//===========对多选框进行操作，输出选中的多选框的个数
$("#btn").click(function(){
//alert($("input[type='checkbox']:checked").length);
alert($("input[name='check']:checked").length);//jquery的选择器有对id的有对class的也有对标签的，但是没有对name 和 type的，所以要这样表示
})
在这之前 我有过一个博客《JavaScript的相关问题》是说这一块内容

当时是不理解为什么自己先前的方法不行，但是后来理解了。

三 输入内容

html代码：

  可用元素:<input name="add" value="可用文本框" /><br />

jQuery代码：

$("#form1 input:enabled").val("这里变化了");//div,span,em 这些使用html()输入内容，input 是用val()输入内容

讲解：选择id=form1 的元素，input标签，过滤： 可用的元素（【：】表示过滤），输入“这里变化了”

四 子元素和父元素的甄别

html代码：

 <form id="form1" runat="server">
    <div class="test">
       <div style="display:none;">aa</div>
       <div style="display:none;">bb</div>
       <div style="display:none;">cc</div>
       <div class="test" style="display:none;">dd</div>  
    </div>
    <div class="test" style="display:none;">ee</div>
    <div class="test" style="display:none;">ff</div>
    </form>

jQuery代码：

var $t_a=$(".test>div");//带空格的jQuery选择器，与下面的语句 功能相同,找儿子元素
//var $t_a=$(".test :hidden");//带空格的jQuery选择器,选取的是后代的的隐藏元素。  输出4
                            //这里的后代：class=test的元素的儿子们，这里说明，不选取孙子。
                            // <div class="test" style="display:none;">ff</div> 
                            //上面这个class=test的元素，即 <div> 他没有儿子，即 子节点，所以length是0

var $t_b=$(".test:hidden");//不带空格的jQuery选择器，选取class=test 并且是隐藏的元素，理论上讲应该输出3.

var len_a=$t_a.length;
var len_b=$t_b.length;
alert("有空格的"+len_a);
alert("没空格的"+len_b);

var $t_b=$(".test:hidden");//不带空格的jQuery选择器，选取class=test 并且是隐藏的元素    应该输出3，但是我运行发现结果是4，这里不知道怎么回事，求解答

五 jQuery和DOM的转换

var $cr=$("#cr");            //jQuery对象
var cr=$cr[0];                 //dom对象，或者var cr=$cr.get(0)

六其他方法一览

show()//:显示隐藏的匹配元素
css(name,value)//:给元素设置样式
text(string)//:设置所有匹配元素的文本内容,类似输入
filter(expr)//:筛选出与指定表达式匹配的元素结合，expr可以是多个选择器的组合.filter()是在平级找也就是同一辈份元素中找 find是在子元素中找 
addClass(class)//:为匹配的元素添加指定的类名

$(".SubCategoryBox ul li:gt(5):not(:last)").css("display","none");//gt()选取大于index的元素，index从0开始；not就是不包括、排除，last就是最后一个