jQuery

jQuery
    (1)jQuery介绍
        jQuery是一个js框架(jquery.js)，它的特点是
    利用选择器查找要操作的节点(dom对象)，然后将
    找到的节点封装成一个jQuery对象。通过调用
    jQuery对象的方法或者属性来实现对底层被封装的
    节点的操作。
        这样做的好处是：代码有更好的兼容性，另外，
        代码也会更加简洁。
    (2)jQuery对象与dom对象之间如何转换
        1)dom对象 ---> jQuery对象   
                $(dom对象);
        2)jQuery对象 ---> dom对象
                方式一
                    $obj.get(0);
                方式二
                    $obj.get()[0];
    (3)选择器  select
        1)基本选择器 s1.html
            #id
            .class
            element
            select1,select2..selectn
            *
        2)层次选择器   s2.html
            select1 select2 考虑所有后代
            select1>select2 只考虑子节点
            select1+select2 下一个兄弟
            select1~select2 下面所有兄弟
        3)过滤选择器
            A,基本过滤选择器  s3.html
                :first
                :last
                :not(select)
                :even
                :odd
                :eq(index)
                :gt(index)
                :lt(index)
            B,内容过滤选择器  s4.html
                :contains(text) 匹配包含给定文本的元素
                :empty 匹配所有不包含子元素或者文本的空元素
                :has(select) 匹配含有选择器所匹配的元素的元素
                :parent 匹配含有子元素或者文本的元素
            C,可见性过滤选择器 s5.html  
                :hidden 匹配所有不可见元素，
                    或者type为hidden的元素
                :visible 匹配所有的可见元素
            D,属性过滤选择器 s6.html
                [attribute]
                [attribute=value]
                [attribute!=value]
            E,子元素过滤选择器 s7.html
                :nth-child(index/even/odd)
                注：下标从1开始
            F,表单对象属性过滤选择器 s8.html
                :enabled
                :disabled
                :checked
                :selected
     (4)表单选择器
                :input   
                :text
                :pasword
                :radio
                :checkbox
                :submit
                :image
                :reset
                :button
                :file
                :hidden
------
1,dom操作  dom
    (1)读取或者修改节点的html内容,文本内容,属性值,
    value值。  d1.html
        1)html()
        2)text()
        3)attr()
        4)val()
    (2)创建节点  d2.html
        $(html)
    (3)添加节点  d3.html
        1)append():作为最后一个孩子添加
        2)prepend():作为第一个孩子添加
        3)before():作为上一个兄弟添加
        4)after():作为下一个兄弟添加
    (4)删除节点 d4.html
        1)remove()
        2)empty()
    (5)将html与js代码分离  d5_1.html,d5_2.html
        $(fn);
        注: fn是一个函数(也可以是匿名函数)，当整个页
        面加载完毕，会执行该函数。
    (6)clone  d6.html
        clone();
        clone(true); 连同事件处理函数一块复制(即复制行为)
    (7)属性操作
        attr();读取或者修改属性
        removeAttr();删除属性
    (8)样式   d8.html
        1)attr():设置style,class属性值
        2)addClass():添加样式。参数必须是一个class选择器，可以
                            同时添加多个样式。
            removeClass():删除样式。如果没有添加任何参数，
                            表示删除所有的class选择器。
        3)toggleClass():切换样式。
        4)hasClass():判断节点是否有该样式，有则返回true,
                    否则返回false。
        5)css():直接添加样式。
                    css({'font-size':'60px','color':'red'});
    (9)遍历 d9.html
        1)children()/children(select):查找子节点。
        2)parent():父节点。
        3)prev()/prev(select):上一个兄弟
        4)next()/next(select):下一个兄弟
        5)siblings()/siblings(select):其它兄弟
        6)find(select):查找后代
2,事件处理  event
    (1)事件处理知识回顾  
        1)如何绑订事件处理函数  
            a,绑订到html元素上
            <input type="button" id="b1" 
            onclick="f1();"/>
            b,绑订到dom对象上。
                var obj = document.getElementById('b1');
                obj.onclick=f1;
            c,使用浏览器提供的方法。
                因为兼容性问题，少用。 
        2)如何获得事件对象  e1.html
                给事件处理函数使用"event"来作为参数。
                比如:
                    onclick="f1(event);"
        3)事件对象的作用 e1.html
            a.找到事件源(谁产生的这个事件)
                e.target (firefox,chrome)
                e.srcElement (ie)
            b,获得鼠标点击的坐标
                e.clientX
                e.clientY
            c,取消事件冒泡
                e.cancelBubble = true;
        4)什么是事件冒泡，如何取消 e2.html
            子节点产生的事件，会依次向上抛给对应的
        父节点。

    (2)jQuery对事件处理的支持
        1)绑订事件处理函数  e3.html
            a,正式写法
                $obj.bind(事件类型,事件处理函数);
                比如:
                    var eventType = 'click';
                    $obj.bind(eventType,f1);
            b,简写形式:
                    $obj.click(f1);
        2)获得事件对象  e4.html
                只需要给事件处理函数传递任意一个变量。
                比如
                    $obj.click(function(e){
                        e:就是事件对象。
                            实际上，该事件对象是jQuery对
                            底层事件对象的一个封装。
                    });
        3)事件对象的作用 e4.html
            a,找到事件源
                var obj = e.target;
            b,获得鼠标点击的坐标
                e.pageX
                e.pageY
            c,取消冒泡
                e.stopPropagation();
        4)事件冒泡   e5.html
        5)合成事件  e6.html  e7.html
            a, hover(f1,f2);  模拟光标悬停事件(鼠标进入
                            和离开)。当鼠标进入时，执行f1,
                            当鼠标离开，执行f2。
            b,toggle(f1,f2,f3...);模拟连续单击事件。
        6)模拟操作  e8.html
            a,正式写法
                $obj.trigger(事件类型);
                比如:
                    $obj.trigger('click');
            b,简写形式
                    $obj.click();
3,动画
4,类数组
5,ajax支持

1,动画   animate
    (1)show,hide  a1.html
        1)作用
            通过同时改变元素的宽度和高度来实现显示
        和隐藏。
        2)用法
            $obj.show(speed,callback); 
                注:
                    speed:执行速度，单位可以是毫秒，也可
                            以是"slow","fast","normal"。
                    callback:(回调函数)当整个动画完成之后，
                    执行该函数。
    (2)slideDown,slideUp  a1.html
        1)作用
            通过改变元素的高度来实现显示和隐藏。
        2)用法
            同上。 
    (3)fadeIn,fadeOut (淡入，淡出) a2.html
        1)作用
            通过改变元素的不透明度来实现显示和隐藏。
        2)用法
            同上。
    (4)animate      a3.html
         1)用法
            $obj.animate({},speed,callback);
            注:
                {}: 用来描述动画完成之后，元素的样式，
                    比如: {'top':'200px','left':'300px'}  
                speed:只能用毫秒。
                callback:回调函数。
2,类数组  array  a1.html
    所谓类数组，指的是jQuery对象包含的那些节点。
    each(fn):遍历节点,其中，fn是一个函数，用来处理
                被遍历的节点。fn函数中，this表示正在被
                遍历的那个节点,也可以给fn函数传参，表示
                正在被遍历的那个节点的下标。
    eq(index):依据下标获取节点，然后将该节点封装成
                一个jQuery对象。
    get(index):依据下标获取节点。
    index(obj/$obj):获得节点的下标。
    get():将jQuery对象中的所有节点放到一个数组当中，
    然后返回。
    length属性：获得jQuery对象包含的节点的个数。
3,ajax支持
    (1)load方法
        1)作用：向服务器发送异步请求，然后将服务器
        返回的数据直接添加到符合要求的节点之上。
        2)用法:
            $obj.load(url,data);
            注:
                url:请求地址
                data:请求参数
                            请求参数有两种写法:
                            请求字符串 username=tom&age=22
                            json对象  {'username':'tom','age':22}
                当有请求参数时，load方法会发送post请求，
                如果没有请求参数，会发送get请求。
    (2)$.get和$.post
        1)作用：$.get方法，向服务器发送异步请求(采用get
        方式),并且可以处理服务器返回的数据。
        2)用法:
                $.get(url,data,callback,type);
                注:
                    url:请求地址
                    data:请求参数(同上)
                    callback:回调函数,用来处理服务器返回的
                                数据，格式如下:
                                function(data,statusText),其中,
                                data是服务器返回的数据，statusText
                                是服务器处理的状态。
                    type:服务器返回的数据类型，可以是以下几个值：
                            html: html文档
                            xml:xml文档
                            json:json字符串
                            text:文本
                            script: javascript脚本
    (3)$.ajax
        用法:
            $.ajax({});
            注:
                使用json对象来描述各个请求选项参数。
                url:请求地址
                data:请求参数
                type:请求类型
                dataType:服务器返回的数据类型
                success:服务器处理正确对应的回调函数，
                            格式 function(data,statusText)。
                error:服务器处理失败对应的回调函数。
                async:发送同步或者异步请求,当值为true时
                        发送异步请求,当值为false,发送同步请求。
                        缺省值是true。


上传文件(扩展)
step1,设置表单的提交方式为post,
并且，设置表单的enctype属性为
"multipart/form-data"。
step2,在服务器，不能够使用
   request.getParameter方法，
   要使用request.getInputStream()
   获得一个输入流，然后分析该流(
   一般会使用一些开源的工具来分析)。
   apache提供的commons-fileupload.jar

(1)
first.html

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!-- www.jquery.com -->
    <script type="text/javascript" src="js/jquery-1.4.3.js"></script>
    <script type="text/javascript">
      function f1(){
        //1.利用选择器查找节点,返回值是一个jQuery对象
        //变量以$开头，
        //是为了强调返回值是一个jQuery对象
        var $obj = $('#d1');
        //2。调用jQuery对象的方法或属性来实现对底层
        //被封装节点的操作
        //$obj.html('hello kitty');//类似于innerHTML

        //$obj.css('font-size','80px');
        //$obj.css('color','red');

        //返回值还是当前jQuery对象，所以可以这么写：
        $obj.css('font-size','80px').css('color','blue');
      }
      function f2(){
        var obj = document.getElementById("d1");
        //dom对象 --> jQuery对象
        var $obj = $(obj);
        $obj.css('font-size','60px').css('font-style','italic');
      }

      function f3(){
        var $obj = $('#d1');
        //jQuery对象 --> dom对象
        //var obj = $obj.get(0);

        //或者
        var obj = $obj.get()[0];
        obj.innerHTML = 'hello java';
      }
    </script>
  </head>

  <body style="font-size:30px;">
    <div id="d1">hello jQuery</div>
    <a href="javascript:;" onclick="f3()">click here</a>
  </body>
</html>

s1-s8.html

<html>
  <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
   <script type="text/javascript">

     //id选择器（推荐优先使用）
     function f1(){
        //var $obj = $('#d1');
        //$obj.css('font-size','60px');

        $('#d1').css('font-size','60px');
     }
     //类选择器
     function f2(){
        //$('.s1').css('font-size','60px');
        $('p.s1').css('font-size','60px');
     }
      //元素选择器
     function f3(){
        $('div').css('font-size','60px');
     }
     //多个选择器
     function f4(){
        $('#d1,p').css('font-size','60px');
     }
     //* 所有节点
     function f5(){
        $('*').css('font-size','60px');
     }


   </script>
  </head>

  <body style="font-size:30px;">
      <div id="d1">hello jQuery</div>
      <div class="s1">hello dojo</div>
      <p class="s1">hello extJs</p>
      <a href="javascript:;" onclick="f5();">Click Here</a>
  </body>
</html>

<html>
  <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
   <script type="text/javascript">

      //层次选择器（所有后代）(使用较多)
      function f1(){
         $('#d1 div').css('font-size','60px')
      }

      //只找子节点
      function f2(){
         $('#d1>div').css('font-size','60px')
      }

      //下个兄弟必须是div，才可操作下个兄弟的节点
      function f3(){
         $('#d3+div').css('font-size','60px')
      }

      //下面所有兄弟，必须是div
      function f4(){
         $('#d2~div').css('font-size','60px')
      }
   </script>
  </head>

  <body style="font-size:30px;">
      <div id="d1">
         <div id="d2">hello d2</div>
         <div id="d3">
             <div id="d4" style="font-size:40px">hello d4</div>
         </div>
         <div id="d5">hello d5</div>
         <p>hello p</p>
      </div>

      <a href="javascript:;" onclick="f4();">Click Here</a>
  </body>
</html>

<html>
  <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
   <script type="text/javascript">
      //基本过滤选择器
      function f1(){
        $('table tr:first')
        .css('background-color','#cccccc');

        //偶数行,下标从0开始
        $('tbody tr:even')
        .css('background-color','#fff8dc');

        //奇数行
        $('tbody tr:odd')
        .css('background-color','#f0f0f0');
      }

      //下标从0开始
      //tbody tr:eq(1) tbody的第2行
      function f2(){
        $('tbody tr:eq(1) td:eq(1)')
        .css('background-color','yellow');
      }

      //排除tbody里面id为tr2的行
      function f3(){
        $('tbody tr:not(#tr2)')
        .css('background-color','yellow');
      }
   </script>
  </head>

  <body style="font-size:30px;">
      <table width="60%" border="1" cellspacing="0" cellpadding="0">
         <thead>
            <tr><td>name</td><td>age</td></tr>
         </thead>
         <tbody>
            <tr><td>Tom</td><td>22</td></tr>
            <tr id="tr2"><td>John</td><td>23</td></tr>
            <tr><td>Sally</td><td>24</td></tr>
            <tr><td>Eric</td><td>25</td></tr>
         </tbody>

      </table>

      <a href="javascript:;" onclick="f3();">Click Here</a>
  </body>
</html>

<html>
  <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
   <script type="text/javascript">
      //过滤选择器
      //匹配包含：
      function f1(){
         $('div:contains(梦想)')
         .css('font-style','italic')
      }
      //空节点
      function f2(){
         $('div:empty')
         .html('马云说的');
      }

      //非空节点
      function f3(){
         $('div:parent')
         .css('font-style','italic');
      }

      //含有指定过滤元素
      function f4(){
         $('div:has(span)')
         .css('font-style','italic');
      }

   </script>
  </head>

  <body style="font-size:30px;">
      <div>人总要有点梦想</div>
      <div></div>
      <div>
         <span>万一实现了呢</span>
      </div>

      <a href="javascript:;" onclick="f4();">Click Here</a>
  </body>
</html>

<html>
  <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
   <script type="text/javascript">
      //把隐藏的div显示出来
      function f1(){
        //$('div:hidden').css('display','block');
        $('div:hidden').show('slow');//动画函数
      }

      //隐藏
      function f2(){
        $('div:visible').hide('slow');//动画函数
      }
   </script>
  </head>

  <body style="font-size:30px;">
       <div>hello jQuery</div>
       <div style="display:none;">hello java</div>
       <a href="javascript:;" onclick="f2();">Click Here</a>
  </body>
</html>

<html>
  <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
   <script type="text/javascript">
      function f1(){
          //具有id属性的div
          $('div[id]').css('font-size','60px');
      }

      function f2(){
          //具有id属性的值为d1的
          $('div[id=d1]').css('font-size','60px');
      }

      function f3(){
          //id不为d1的（即 <div>hello java</div>）
          $('div[id!=d1]').css('font-size','60px');
      }

   </script>
  </head>

  <body style="font-size:30px;">
       <div id="d1">hello jQuery</div>
       <div>hello java</div>
       <a href="javascript:;" onclick="f3();">Click Here</a>
  </body>
</html>

<html>
  <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
   <script type="text/javascript">
      function f1(){
          //找到6个li,下标为0-5
          $('ul li:eq(1)').css('font-size','60px');
          //结果"22"变大
      }

      function f2(){
          //nth-child下标从1开始（特殊）
          //每个ul的第二个子元素
          $('ul li:nth-child(2)').css('font-size','60px');
      }

   </script>
  </head>

  <body style="font-size:30px;">
       <ul>
          <li>11</li>
          <li>22</li>
          <li>33</li>
       </ul>
       <ul>
          <li>1111</li>
          <li>2222</li>
          <li>3333</li>
       </ul>
       <a href="javascript:;" onclick="f2();">Click Here</a>
  </body>
</html>

<html>
  <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
   <script type="text/javascript">
      function f1(){
          //无效变有效
          //$('#form1 input:disabled').css('border','1px dotted red');
          $('#form1 input:disabled')
          .attr('disabled',false);
      }

      //有效变无效
      function f2(){

          $('#form1 input:enabled')
          .attr('disabled',true);
      }
      //取得被选中的值
      function f3(){
          var vl = $('#form2 input:checked')
                   .val();
          alert(vl);
      }

      //取得被选中的值
      function f4(){
          var v1 = $('#form3 option:selected')
                   .val();
          alert(v1);
      }


   </script>
  </head>

  <body style="font-size:30px;">
       <form id="form1">
         username:<input name="username"/><br/>
         name:<input name="name" disabled="disabled"/><br/>
         <input type="submit" value="提交"/>

       </form>

       <form id="form2">
              性别：男<input type="radio" name="gender" value="m"
               checked="checked"/>
             女<input type="radio" name="gender" value="f"/>

       </form>

       <form id="form3">
              <select id="s1">
                 <option value="bj">北京</option>
                 <option value="sh" selected="selected">上海</option>
                 <option value="gz">广州</option>
              </select>

       </form>
       <a href="javascript:;" onclick="f4();" >Click Here</a>
  </body>
</html>