jquery基础操作

jquery就是js的一个库    
   简洁的语法和跨平台的兼容性，极大的简化了javascript开发人员遍历HTML文档，操作DOM，处理事件，执行动画和开发AJAX(javascript + xml + json )，其理念：write less,do more
AJAX：Asynchronous javascript and xml,异步的javascript和XML

$("#my_div")等价于jQuery("#my_div")
3. 获得一个jQuery对象的三种方式
         一:把一个dom对象转换为jQuery对象
         var cc = document.getElementById("cc");
         var $cc = $(cc);
         二:通过选择器直接拿到一个jQuery对象
          var d = $("#my_div");
         三:直接创造出一个jQuery对象
         var v = $("<div>test</div>");
jQuery的理念:write less,do more
基本选择器
    1) id选择器  $("#myId")
    2) class选择器  $(".myClass")
    3) 标签选择器  $("table")
    4) *选择器
    5) 组合选择器   $("div,span,p.myClass")
层次选择器
    1)后代选择器    $("ancestor descendant")
    2)子代选择器     $("parent>child")  
    3)相邻兄弟选择器      $("#s2+span"); $("#s2+")；s $("#s2").next();
    4）一般兄弟选择器        $("#div2~div") 获得div2【后面】的所有的div元素(只有后面)
                             $("#div2").siblings("div") 获得div2的【所有】的div兄弟元素(包括前面)
过滤选择器                        
1）基本过滤器  $("tr:first")  $("tr:last")   $("input:not(.myclass)")
               $("tr:even")   索引是偶数的所有元素  $("tr").filter(":even")
               $("tr:odd")    索引是奇数的所有元素  $("tr").filter(":odd")
               $("td:eq(index)")  选取索引等于index的元素   $("td").eq(index)
               $(":header")     选取所有的标题元素，例如h1,h2,h3等    $("*").filter(":header")
               $("div:animated")     选取当前正在执行动画的所有元素
2）内容过滤选择器               
               $("div:contains('text')")  选取含有文本内容为"text"的元素
               $("div:empty")   选取不包含子元素或者文本的 空元素
               $("div:has('span')")   选取含有某些指定元素的元素
               $(".divClass:parent")    选取含有子元素或者文本的元素，这个正好和 :empty相反。
3）可见性过滤选择器               
               $("div:hidden")   选择所有隐藏的元素。
               $("div:visible")    选取所有可见的元素
4）属性过滤器  
               $("div[id]")    选择所有具有指定属性的元素，该属性可以是任何值。
               $('div[class="cc"]')    选择属性值为value的元素
               $('input[name!="newsletter"]')    属性不等于value的元素
               $('input[name^="news"]').val('test');    属性值以value开始的元素,速度比较慢，不推荐使用
               $('input[name$="letter"]')     属性值以value结束的元素
               $('input[name*="man"]')     选择指定属性具有包含一个给定的子字符串的元素。
               $('input[id][name$="man"]')     多个属性选择器一起使用
5）子元素过滤选择器               
               $(".div1:first :nth-child(1)")    first后的空格一定要加,表示其子元素的筛选
                               first-child
                               last-child
                               only-child
                               :first-of-type
                               :last-of-type
4，表单选择器：主要是对选择的表单元素进行过滤。               
               $("input:enabled")   选取所有可用元素
               $("input:disabled")   选取所有不可用的元素
               $( "input:checked" )  选取所有被选中的元素用于复选框和单选框(下拉框)
               $("select option:selected")    选取所有被选中的选项元素该选择器只适用于<option>元素
               $('input:text')
                   :password        选取所有的密码框
                   :radio        选取所有的单选框
                   :checkbox        选取所有的多选框
                   :submit        选取所有的提交按钮
                   :image        图像
                   :reset        重置按钮
                   :button        所有按钮
                   :file        所有上传域

                   
                   
jQuery中的each函数:遍历    
    格式1:
        jQuery对象.each(匿名函数);
    格式2:
        $.each(对象/数组,匿名函数);    
 
    //参数i表示每次遍历拿到的数组的下标        
    //参数e表示拿到的当前下标的对象,注意是dom对象
    $("div").each(function(i,e){
            console.log(e);//这是dom对象
            console.log($(e));//这是jQuery对象 需要这样封装一下
            console.log(this);//this表示拿到的当前对象 dom对象
            console.log($(this));//这样就可以变为jQuery对象了
    });           
    
    $.each($("div"),function(){
            console.log(" "+v.innerHTML);
            console.log(this);
         })            
               
jquery中的DOM操作               
       1，节点整体操作：
           1）查找节点：通过jQuery选择器来完成   获得节点的属性值:var 属性值 = attr("属性名字")
           2）创建节点：创建元素节点：var newTd = $("<td></td>")
           3）插入节点：
              ----------内部插入------------
              append(content)
              append(function(index,html){...});
              appendTo(target)
              prepend(content)
              prepend(fn)
              prependTo(target)
              ----------外部插入------------
              after(content)
              after(function(index){...});
              insertAfter(target)
              before(content)
              before(function(index){...});
              insertBefore(target)
            4）删除节点  
              remove()
              empty()
              detach()
            5）复制节点
              $("#id").clone(false)
            6）替换节点
              replaceWith(newContent):用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。该方法会删除与节点相关联的所有数据和事件处理程序 。
            7）包裹节点
              $("strong").wrap("<b></b>");用<b>标签把每个<strong>元素分别都包裹起来
              unwrap()没有参数作用和warp函数是相反的
              wrapAll([wrappingElement]) :将所有匹配的元素用一个指定元素来包裹
              wrapInner([wrappingElement]):每个匹配元素里面内容(子元素)都会被这种结构包裹。              
        2，节点属性操作      
            1）获取属性
               $demo.attr("attrName");            
            2）删除属性
               $demo.removeAttr("attrName");
        3，节点样式操作    
            1）获取样式，设置样式
               $("p").attr("class","high"),它将原来的class替换为新的class
            2）追加样式 addClass()
               $("#div1").addClass("c3");
            3）移除样式 removeClass()
               removeClass("one two")：从匹配的元素中删除全部或者指定的class
            4）切换样式 toggleClass( className )
               $("#btn").click(function(){
                   $("#div").toggleClass("c3");
                  });
               hasClass()  判断元素中是否含有某个class
            5）设置和获取HTML，文本和值
               html() :获取集合中第一个匹配元素的HTML内容innerHTML
               html(htmlString):设置每一个匹配元素的html内容。.html() 方法对 XML 文档无效.
               text()  得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，
               text(textString)   设置匹配元素集合中每个元素的文本内容为指定的文本内容。
               text() 在XML 和 HTML 文档中都能使用。 方法不能使用在 input 元素或scripts元素上。
               val()  获取匹配的元素集合中第一个元素的当前值,方法主要用于获取表单元素的值，比如 input, select 和 textarea。
               val(value)  设置匹配的元素集合中每个元素的值。
        4，节点遍历
             1）children()    用于取得匹配元素的子元素集合（只考虑子元素而不考虑任何后代元素）
             2）next()        取得匹配的元素集合中每一个元素紧邻的后面兄弟元素。
             3）prev()        取得匹配元素前面紧邻的兄弟元素
             4）siblings()    取得匹配元素前后所有的兄弟元素
             5）closest()    取得和参数匹配的最近的元素，如果匹配不上继续向上查找父元素
             6）find(selector) 在当前元素对象中的子元素中查找，和参数所匹配的所有的后代元素。
             7）filter(selector) 把当前所选择的所有元素再进行筛选过滤
             8）nextAll()    查找当前元素之后所有的同辈元素。
             9）prevAll()    查找当前元素之前所有的同辈元素。
             10）parent()    取得匹配元素集合中，每个元素的父元素
             11）parents()    获得集合中每个匹配元素的祖先元素
        5，CSS设置
              css("attrName") 获取某个元素的指定样式
              css({"attrName1":"attrVal1","attrName2":"attrVal2"});              
              
jQuery中的ajax
      $.ajax({
        key:value,
        key:value,
        ..
        ..
    });

    //非表单提交
    $("button:first").click(function(){
            $.ajax({
                type:"post",     //请求方式
                url:"../ajaxServlet",      //请求地址
                data:{"name":"zs","age":20},      //数据源
                success:function(data){          //回调函数
                    console.log(data)
                    //$("#content").text(data)
                    console.log($(data).find("book").text());
                },
                dataType:"xml"       //回调数据类型
            });
        });
              
    //表单数据ajax发送
        $("button:last").click(function(){
            $.ajax({
                type:"post",
                url:"../ajaxServlet",
                data:$("form").serialize(),
                success:function(data){
                    console.log(data)
                    //$("#content").text(data)
                    console.log($(data).find("book").text());
                },
                dataType:"text"
            });    
        })      
           
    1.参数
      url：一个用来包含发送请求的URL字符串。
      settings：一个以"{键:值}"组成的AJAX        
               
    2.load方法           
      load(url,data,complete);                  
    3. $.get()方法           
        $.get(
            url,               //请求的地址
            data,               //给服务器发送的参数
            function(v){       //回调函数
            
            },
            dataType           //服务器响应回来的数据类型
         );       
    4. $.post()方法
        $.post(
            url,               //请求的地址
            data,               //给服务器发送的参数
            function(v){       //回调函数
            
            },
            dataType           //服务器响应回来的数据类型
         );                      
    5.getJSON方法    
       $.getJSON("url",{name:"tom"},function(data){
            
            //解析接收到的json数据 data
       });  
      是下面方法的缩写
           $.ajax({
            url: "",
            dataType: "json",
            data: data,
            success: success
           });
    6.json格式的数据
        JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式
        JSON 数据的书写格式是：名称:值对。 key:value
        JSON 对象中的key 必须是双引号引着的字符串 "key"
        其中JSON 对象中的value 可以是以下几种
        数字（整数或浮点数）
        字符串（必须在双引号中）
        逻辑值（true 或 false）
        数组（在方括号中[]）
        对象（在花括号中{}）
        null
    7.服务器端如何给页面发送json数据
        7.1 使用io流直接把字符串拼接成json数据格式
            out.print("{\"name\":\"tom\",\"age\":20}");
        7.2 使用第三方jar提供的方法

     前端页面：HTML+AJAX+javascript

jQuery 中的事件
    1. 事件绑定
        1)bind(type [, data] , fn)事件绑定  
           eg : $demo.bind("click",function(){});
           第一个参数是事件类型
          blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,
           第二个参数： 作为event.data 属性值传递给事件对象的额外数据对象
           第三个参数： 是用来绑定的处理函数
注意:如果连着给一个按钮绑定俩次click事件的话,那么俩个都是会起作用的,哪个先绑定就先调用哪个,解绑的时候俩个绑定的click事件会被同时解绑
    多个事件
    同一处理函数可以通过用空格隔开一次性绑定：
    $("div").bind("click mouseover",function(){
        //....
    });  
 注意:bind函数绑定事件后,并不会对后来动态添加上来的元素起作用
         (解除绑定)unbind([teype][,data]),如果没有参数，删除所有绑定的事件，如果提供了事件类型，只删除该事件类型的绑定事件(专门针对bind绑定的事件)
           $("div").unbind();
           $("div").unbind("click");
         2)live(type, [data], fn)用法上基本和bind是一样的.但是也有些不同之处,live改进了bind函数的一些缺点:
虽然使用live绑定事件后，动态添加进来的元素只要符合选择器条件也会自动有click和mouseover,但是发现只要页面任
何地方添加一个符合条件的元素那么就会被绑定上事件.
          die(type, [fn])如果没有参数，删除所有绑定的事件，如果提供了事件类型，只删除该事件类型的绑定事件(专门针对live绑定的事件)
           $("div").die();
           $("div").die("click");
         3)delegate(selector,[type],[data],fn)用法上基本和bind以及live是一样的.但是也有些不同之处,delegate改进了live函数的一些缺点:
使用delegate绑定事件后，动态添加进来的元素只要符合选择器条件并且也是在#dd这个div所属范围内,那么这个元素也会自动有click和mouseover,相对来讲比live绑定提升了效率
           undelegate([selector,[type],fn])
         4)on(events[, data ], handler(eventObject))融合了bind、live、delegate三种函数的特殊
          events:事件类型
          data:当一个事件被触发时，要传递给事件处理函数的event.data。
          handler(eventObject):事件被触发时，执行的函数。
          off( events )
如果没有参数，删除所有绑定的事件，如果提供了事件类型，只删除该事件类型的绑定事件.(专门针对on绑定的事件)
    $("p").off();
    $("p").off("click");
         5)one( events [, data ], handler(eventObject) )
         给对象绑定一次数据处理,触发处理完之后就失效
           $( "#btn" ).one( "click", function( event ) {
                alert("hello");
           });
2. 事件冒泡，事件会按照DOM的层次结构像水泡一样不断向上直至顶端
  这个时候点击span的时候会触发span的onclick事件,同时也会触发div的onclick事件,因为span在div里面,这种现象就叫做事件冒泡
   event.stopPropagation();  或return false  //停止事件冒泡
   event.preventDefault();或return false   阻止默认行为，例如超链接添加其他事件后放弃跳转，则写入事件中
   return false;//同时阻止事件冒泡和默认行为
   
         事件对象(event)属性 ：jQuery在遵循W3C规范的情况下，对事件对象的常用属性进行了封装
          event.type   获取到事件的类型
          event.target 获取到触发事件的元素(事件源)
          event.pageX event.pageY 获取光标相对于页面的X坐标，Y坐标。
          event.which 在鼠标单击事件中获取鼠标的左，中，右键。在键盘事件中获取键盘的按键
          event.originalEvent 指向原始的事件对象
         
          //和键盘相关的
          event.keyCode 对于keyup和keydown事件返回被按下的键. 不区分大小写, a和A都返回65.
          注意:对于keypress事件请使用which属性, 因为which属性跨浏览时依然可靠
          keypress只能检测到键盘上的字母数字和部分符合键,但是字母的大小写可以分别检测到
          keyup keydown可以检测到键盘上的所有的按键,但是字母的大小写不区分

          event.ctrlKey 检查按键盘上面的键的时候是不是已经按着了ctrl键
          event.shiftKey 同上
          event.altKey   同上
          
3. 事件模拟      
    trigger(events) ：自己定义      
4. 表单事件          
        $("#name").blur(function(){})  
        $("#name").focus(function(){})
        $("#city").change(function(){})
        $("#like").select(function(){})  
        $("#form").submit(function(){})  
5. 键盘事件(在上面的例子中已经测试过了)
      keydown()
      keypress()
      keyup()
6. 鼠标事件
      click()    鼠标左键单击
      dblclick() 鼠标左键双击,双击的时候算触发俩次单击
      focusin()  当元素或其任意子元素获得焦点时
      focusout() 当元素或其任意子元素失去获得焦点时      
    focusin()
    只要div里面的任何一个子元素获得焦点都会除法focusin的事件
    focus()    
只有div这个元素获得焦点的时候,才会除法这个focus事件,但是div是不能获得用户输入的焦点的。除法我们使用trigger方法来模拟这个事件的触发。      
    hover(fn1,fn2) :
用来模拟光标悬停事件，当光标移动到元素上时，会触发第一个函数fn1，光标移出这个元素时会触发第二个函数fn2      
      mouseenter()：只有移到它内才有效果
      mouseleave()

      mouseover():移到包含它的元素也会有效果
      mouseout()
      mouseenter和mouseover的区别:(mouseleave和mouseout的区别类同)
      
二，jQuery中的动画
  1，基础
    1)hide()
      隐藏匹配的元素。 style="display:none"
      hide( [duration ] [, complete ] )
        duration 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
        complete 在动画完成时执行的函数。

    2)show()
        显示匹配的元素(和hide的参数作用一致)

    3)toggle( [duration ] [, complete ] )
        toggle()默认是切换元素的显示和隐藏效果
    $("#my_input").click(function(){
        $("#div2").toggle();
    });
    
    也可以自定义转换的俩个或者多个函数:
    //点击#my_input按钮后#div2就会在c1和c2俩个提前定义好的样式间转换
    $("#my_input").toggle(function(){
        $("#div2").attr("class","c1");
    },function(){
        $("#div2").attr("class","c2");
    });

  2，渐变
    1)fadeIn( [duration ] [, complete ] )
       通过淡入的方式显示匹配隐藏元素。
       ("slow","normal", or "fast")
    2)fadeOut( [duration ] [, complete ] )
       通过淡出的方式隐藏匹配显示元素。
    3)fadeTo( duration, opacity [, complete ] )
       opacity:0和1之间的数字表示目标元素的不透明度。
    4)fadeToggle( [duration ] [, complete ] )
       切换渐变效果
       通过匹配的元素的不透明度动画，来显示或隐藏它们。
       当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局。
  3，滑动
    1)slideDown( [duration ] [, complete ] )
       将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式。
    2)slideUp( [duration ] [, complete ] )
       向上滑动
    3)slideToggle( [duration ] [, complete ] )
       切换滑动效果