jquery 总结（1）

1、jquery的由来.

     jquery是为了简化javascript的开发，而封装了很多预定义的对象和实用函数，从而使javascript的使用更加方便快捷，能帮助使用者建立高雅度交互的Web 2.0特性的富客户端页面，并且兼容更多的浏览器
     现在像javascript库，除了jquery还有  MooTools  Prototype   Dojo   YUI  EXT_JS  DWR  。
     jquery的宗旨就是写更少的代码，做更多的事（“write less do more”）
     它是轻量级的js，压缩有只有21K
     jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
     jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

2、jquery简单的例子
    <script  src="jquery.js"></script>
    <script  type="text/javascript">
         $(document).ready(function(){
             alert("欢迎学习jquery");
         });
   </script>
3 什么是jQuery对象？
 jquery对象就是通过Jquery包装dom对象后产生的对象
 jquery对象是jquery独有的，
 注意：以后我写代码的时候就会省略导入包的过程，只体现主要步骤
 eg:  <input type="text" id="username" name="username"/>
   <script type="text/javascript">
   //通过javascript
   alert(document.getElementById("username").value);
   //通过jquery
   alert($("#username").val());
   </script>
 约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.  
   var $variable = jQuery 对象
   var variable = DOM 对象
4、DOM对象 -----> JQuery对象  ($("#text"))-----获取id="text"的元素  必须要有“#”
 <input type="text" id="username" name="username"/>
  <script type="text/javascript">
  //获取dom对象
  var username = document.getElementById("username");
  //dom对象--->Jquery对象
  $username = $(username);
  </script>
5、JQuery对象----->DOM对象
 <input type="text" id="username" name="username"/>
  <script type="text/javascript">
  //获取Jquery对象
  var $username = $("#username");
  //方法一：Jquery对象--->dom对象
  var username = $username[0];
  //方法二：Jquery对象--->dom对象
  var username = $username.get(0);
  </script>
6、Jquery选择器（重点）
 1、基本选择器
    基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找
    DOM 元素(在网页中 id 只能使用一次, class 允许重复使用).
    (1)#id  用法: $(”#myDiv”);  返回值  单个元素的组成的集合
       eg: <input type="text" id="username" name="username"/>
    <script type="text/javascript">
    var $username = $("#username");//通过id=“username”所获得input元素的组成集合
    </script>
   
 (2)、Element  用法: $(”div”)     返回值  集合元素
  eg:  <input type="text" id="username" name="username"/>
  eg:  <input type="text" id="userpwd" name="userpwd"/>
    <script type="text/javascript">
    $("input")  --->即获取所有的input元素。要想获取每个的值，则需要遍历该元素 
    </script>
   
 (3)、class   用法: $(”.myClass”)      返回值  集合元素
  eg:  <input type="text" class="text" name="username"/>
  eg:  <input type="text" class="text" name="userpwd"/>
    <script type="text/javascript">
    $(".text")  --->即获取所有的class="text"元素。要想获取每个的值，则需要遍历该元素 
    </script>
 (4)、*   用法: $(”*”)      返回值  集合元素
   eg:  <script type="text/javascript">
    $("*")  --->返回document所有的元素
    </script>
 (5)、selector1, selector2, selectorN      用法: $(”div,span,p.myClass”)    返回值  集合元素
      说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并将匹配到的元素合并到一个结果内.
   其中p.myClass是表示匹配元素p class=”myClass”
 2、层次选择器
  1 、ancestor descendant
    用法: $(”form input”) ;   返回值  集合元素
    说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分开.
    eg: <select id="myselect">
     <option>选项一</option>
     <option>选项二</option>
     <option>选项三</option>
    </select>
     <script type="text/javascript">
     $("select option");   取所有的后辈元素(包括option  text) 
     </script>
  2、parent > child用法: $(”form > input”) ;    返回值  集合元素
    说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素
    eg:<select id="myselect">
     <option>选项一</option>
     <option>选项二</option>
     <option>选项三</option>
    </select>
     <script type="text/javascript">
     $("select option");   取所有的子元素(包括option 不包括 text) 
     </script>
  3、prev + next
    用法: $(”label + input”) ;   返回值  集合元素
    说明: 匹配所有紧接在 prev 元素后的 next 元素
  4、prev ~ siblings
    用法: $(”form ~ input”) ;    返回值  集合元素
    说明: 匹配 prev 元素之后的所有 siblings 元素.注意:是匹配之后的元素,不包含该元素在内,并且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.
    注意:  (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取
 3、过滤选择器
  基础过滤选择器
   1、:first 用法: $(”tr:first”) ;   返回值  单个元素的组成的集合
      说明: 匹配找到的第一个元素
   2、:last 用法: $(”tr:last”)   返回值  集合元素
      说明: 匹配找到的最后一个元素.与 :first 相对应.
   3、:not(selector) 用法: $(”input:not(:checked)”)返回值  集合元素
     说明: 去除所有与给定选择器匹配的元素.有点类似于”非”,意思是没有被选中的input(当input的type=”checkbox”).
   4、:even 用法: $(”tr:even”)   返回值  集合元素
     说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,因为是从0开始计数,所以table中的第一个tr就为偶数0.
   5、: odd 用法: $(”tr:odd”) 返回值  集合元素
      说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.
   6、:eq(index) 用法: $(”tr:eq(0)”)    返回值  集合元素
      说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.
   7、:gt(index) 用法: $(”tr:gt(0)”)    返回值  集合元素
     说明: 匹配所有大于给定索引值的元素.
   8、:lt(index) 用法: $(”tr:lt(2)”)    返回值  集合元素 
      说明: 匹配所有小于给定索引值的元素.
   9、:header(固定写法) 用法: $(”:header”).css(”background”, “#EEE”)    返回值  集合元素
      说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.
      eg:  <h1>标题一</h1>
        <input type="text" id="username" name="username"/>
        <script language="javascript">
        $(”:h1”).css(”background”, “#EEE”); --吧所有的标题都变成“#EEE”的背景色
        </script>
   10、:animated(固定写法)   返回值  集合元素
    说明: 匹配所有正在执行动画效果的元素