JQuery选择器

JQuery概述:

1.jquery是一个优秀的JavaScript框架,它是一个轻量级的js库。
( 轻量级的含义十分简单 。一个jquery的库文件大概只有100+k，jquery1.9下载地址)
2. jquery更方便的处理HTML document,events,CSS代码,实现各种动画效果,方便地为网站提供AJAX交互。

JQuery可以满足下列需求:

 1.获取页面中的元素(不需要遍历)
 (主要的操作就是用ID选择器 或者class选择器进行获取)
 2.方便地修改页面的外观(调用CSS代码)
 $("选择器名").css();
 3.方便地改变页面的内容
 改变的方式有很多方法（隐藏:hide; 显示:show ;显示在html中：html）
 4.提供了操作页面的各种事件
  事件的话 可以去表里面查。
  （1).read: 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 $("document").ready(function(){})
   (2)例如blue (焦点) change() mouseover和mousemove的用法是一致的 都是当鼠标划过的时候触发
         mouseout 和mouselesve用法是一致的都是鼠标离开的时候触发 这些的用法和javascript的区别就是没有了on 
       $("选择器"),blue(funtion(){});             

 5.为页面添加动画效果 
 6.无需刷新页面与服务器进行交互。

好的 说了这么多 。大家可能对选择器比较迷茫吧。
下面来写一个元素选择器的例子。

我现在来解析一下 这里用到了mouseOver事件 当鼠标划入的时候标签会出现我们在上面定义的css的样式
(原谅我只会用这种最简单的方式来生成网页用图了)

基础选择器

     元素选择器   $("元素名")
     class选择器  $(".class选择名")  所有属性为class标注的元素
     id 选择器    $("#id选择名") 选中所有属性为id标注的元素
     多选择器     $("选择器1,选择器2，...")
     *选择器      $("*") 选择所有元素

（这里的选择器的不同 用法只需改变第9行的（“a”）中的a替换掉）

层次选择器:

       祖先---子孙   $("祖先元素  子孙元素")选中所有祖先元素中所有指定的子孙元素
                     如:$("form input")
       父---子      选中所有父元素下所有的指定的子元素 
                     如:$("ol > li");
       同一层次中:
       相邻的唯一元素 选择所有指定元素之后的相邻的一个元素
                      如:$("选择器+选择器")

       相邻的所有指定元素   选择所有指定元素之后的相邻的所有指定选择器
                      如:$("选择器 ~ 选择器")

下面我来贴一张关于层次选择图的做法

总结一下 就是选择元素 (也就是被操作的元素 我更愿意用影响这个词)
1.祖先 和子孙一般就发生在form 表单与input之间 （中间是 空格）
2.父子值得是包含关系 例如有序列表（ur>li） (中间是 大于号)
3.仅仅选择的是相邻的下一个元素 例如（可能会有很多img元素在a元素的下面 但是仅仅只需影响下一个元素，就需要用(选择器a+选择器img)）要注意的就是 我们中间用的是+号
4. 选择所有的指定元素 与3不同的就是 中间的+ 换成了”~” 这个符号就在esc键下面哦

基本过滤器:

   :first       匹配找到的一个元素  $("tr:first") 找到第一行
   :last        匹配找到的最后一个元素          
   :not(selector) 去除所有给定选择器匹配的元素
   :even        匹配所有索引值未偶数的元素(索引从0开始计数)
   :odd         匹配所有索引值为奇数的元素
   :eq(index)   匹配一个给定索引值的元素
   :gt(index)   匹配所有给定元素大的元素
   :lt()        匹配所有给定元素小的元素

下面贴的图是对于偶数与奇数的用法 （记住even是偶数 以及even是奇数 。并且要注意的地方就是 是从零开始记数的）

下面贴的图是索引值的变化
1. eq是给定的索引值
2. gt是给定元素大
3. lt给定元素小的情况
4. 要注意的情况就是一定要区别自己写的不同情况下的不同操作 不能搞混了

属性过滤器:

   [属性名]  匹配包含给定属性的元素
   [属性名=属性值]  匹配指定属性有指定取值的元素
   [属性名!=属性值]  匹配属性不包含特定值的元素
   [属性名^=属性值]  属性值以某些值开始
   [属性名$=属性值]  属性值是以某些值结尾的元素

下面我要来说明一个问题

那就是 如果进行属性选择的时候 会不止选择一个元素 所以最后返回的是一个数组 （这就是js最不规范的地方，他没有数据类型啊。所有的类型都是var这也是最麻烦的地方了）
下面给出两种解决方法
1.方法一 就是简单的对数组进行遍历 要注意的地方就是 获取Input中text中输入的数据方法是.value 而不是.val()函数

2.方法二 重新写一个数组 将得到的选择器写入数组中 然后在对数组进行遍历（这个方法虽然和第一种类似 ）但是更有利于理解获取的是数组元素

表单选择器:

注意 用到这里时还是要注意 会有数组元素的出现 因此要学会遍历数组
:input 匹配所有input 元素,textarea ,select ,button元素

:text 匹配所有的文本框
:password 匹配所有的密码框
:radio 匹配所有的密码框
:button 匹配所有的button按钮
$(“:input”)      选择所有的表单输入元素，包括input,textarea,select和button$(“:text”)       选择所有的text input元素 
$(“:password”)   选择所有的password input元素$(“:radio”)      选择所有的radio input元素 
$(“:checkbox”)   选择所有的checkbox input元素$(“:submit”)     选择所有的submit input元素 
$(“:image”)      选择所有的image input元素$(“:reset”)      选择所有的reset input元素 
$(“:button”)     选择所有的button input元素$(“:file”)       选择所有的file input元素 
$(“:hidden”)     选择所有类型为hidden的input元素或表单的隐藏域