jQuery选择器

                                               jQuery

                               

  jQuery，write less,do more   正是因为jQuery将JavaScript简化了很多，所以很受欢迎。

  jQuery的使用核心，也就是jQuery的选择器。

==============================基本选择器======================

  一、简单选择器。

基本的选择器和CSS一样，分为三种。

1、标签选择器                     eg: $("div")               选择了所有div标签

2、class选择器                    eg:$(".aa")                选择了class为"aa"的元素

3、id选择器                         eg:$("#aa")                选择了ID为"aa"的元素

举例：

<div>

<input class="aa">11</input>

<input id="aa">22</input>

        <a>33</a>

</div>

要使得11 22 33 都变成红色，则可以：$("div").css('color','red');

要使得11变成红色，则可以：$(".aa").css('color','red');

要使得22变成红色，则可以：$("#aa").css('color','red');

相对而言，这些中第三种ID选择器用的最多，因为标签和class都不是唯一的，只有ID是唯一的。

二、进阶选择器。

1、群组选择器                  $("h1 h2 h3")          一次性选择多个元素

2、后代选择器                  $("ui li a")               选择ui标签下li标签下的a标签

3、通配符选择器               $("*")                     选择页面所有元素，比如：$("*").size();可以查看整个页面有多少元素。

其实他们的使用方式和CSS是一样的：

比如群组选择器的使用：

CSS方式：    jQuery方式：$("h1 h2 h3").css('color','red');

再比如后代选择器的使用：

CSS方式：          jQuery方式：$("ui li a").css('color','red');

jquery还提供了专门的方法为后代选择器：$("ui").find("a").css('color','red');

三、高级选择器

1、$("div").children("span").css('color','red');   选择div下的子元素span

2、$("#aa").next();    id为aa的这个元素的下一个同辈元素    

3、$("#aa").nextall();   ID为aa的这个元素后面的所有同辈元素

上面的这些选择器，简单的三种选择器和find();children();这两种，我们使用的比较多，其他的使用的少，毕竟使用  jQuery是为了方便，其他的都不是特别方便 。

=============================过滤选择器=========================

过滤选择器就是相对比较乱了，虽然说他们可以分为基本过滤选择器、类型选择器等等。但是我们平常常用的就是那么几个。      

比如上面的这些，我们平常用的比较多的是:empty、:hidden、:visible等

举例：

if($("div").children("span").is(":hidden")) ————表示如果div下面的span是隐藏的，那么。。。

if($("ui").find("li").not(":visible"))————————表示如果ui的后代li不是可见的，那么。。。

这是一些类型方面的,上面的类型都比较好记，下面的几种还挺常用的。

举例：

$(":input").css();          就表示所有的输入框

$(":checked").val();     有选择框的，输入选择的内容，例如性别的radio，选择了某个的话，它的属性就是chedked。

实现jQuery和DOM对象之间的转换。

     因为jQuery的命令和DOM对象的命令是不能混用的，但是刚开始又没有记住所以jQuery命令的时候，就需要学会jQuery和DOM对象之间的转换。

     jQuery转成DOM：

            var $aa=$("#id");

            var aa=$aa.get(0);或者：var aa=$aa[0];

     DOM转成jQuery：

             var aa=document.getElementById("id");

             var $aa=$(aa);

=========================使用示例=============================

click表示鼠标点击事件，中间的td是传参，可有可无。

keyup表示键盘弹起事件，也就是输入之后执行的方法。

bind表示绑定。change表示当内容改变时执行的方法。就像onchange一样。