jQuery 学习总结

1.jQuery是js库

jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。

2.dom对象和JQuery对象

    dom对象:
        使用JavaScript的语法创建的对象叫做dom对象,也就是js对象
        var obj = document.getElementByID("txt1");  obj是dom对象,也叫做js对象
        obj.value;
    JQuery对象:
        使用JQuery语法表示对象叫做JQuery对象,JQuery表示的对象都是数组.
        var jobj = $("#txt1");
        jobj就是使用JQuery语法表示的对象,也就是JQuery对象,它是一个数组.
        现在数组中就一个值,装的是dom对象
    dom对象和JQuery对象相互转化
        dom -> JQuery  语法: $(dom对象)
        JQuery -> dom  语法: 从数组中获取第一个对象,第一个对象就是dom对象,[0]或get{0}
    为什么要进行dom和JQuery的转换:
        目的是要使用对象的方法,当使用dom对象的方法时可以转换为dom,使用JQuery对象时,可以转换为JQuery.

3.选择器

        使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。就是一个字符串,用来定位dom对象的.定位了dom对象,就可以通过JQuery的函数操作dom.

        常用的选择器:
            1) id选择器: $("#dom对象的id值")
                通过dom对象的id定位dom对象,通过id找对象
            2) class选择器: $(".class样式名")
                class表示css中的样式, 使用样式的名称定位dom对象
            3) 标签选择器: $("标签名称")
                使用标签名称定位dom对象
            4) 表单选择器: $(":type属性值")
                使用<input>标签的type属性值,例如:
                    $(":text"),选择所有单行文本框
                    $(":button"),选择所有按钮

4.过滤器

        在定位了dom对象后,根据一些条件筛选dom对象.过滤器不能单独使用,必须和选择器一起使用.

        1) $("选择器:first"); //第一个dom对象
        2) $("选择器:last"); //数组中最后一个dom对象
        3) $("选择器:eq(数组的下标)"); //获取指定下标的dom对象
        4) $("选择器:lt(下标)"); //获取小于下标的所有dom对象
        5) $("选择器:gt(下标)"); //获取大于下标的所有dom对象
        6)表单属性过滤器:
            根据表单中dom对象的状态情况,定位dom对象的.
            启用状态, enabled
            不可用状态, disabled
            选择状态, checked, 例radio,checkbox

        有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：

         $('div').next('p'); //选择div元素后面的第一个p元素 
         $('div').parent(); //选择div元素的父元素 
         $('div').closest('form'); //选择离div最近的那个form父元素 
         $('div').children(); //选择div的所有子元素 
         $('div').siblings(); //选择div的同级元素 

5.链式操作

　　选中网页元素以后，就可以对它进行某种操作.jQuery允许将所有操作连接在一起，以链条的形式写出来，比如:

    $('div').find('h3').eq(2).html('Hello'); 
    分解开来，就是下面这样：
    1. $('div')         //找到div元素 
    2. .find('h3')      //选择其中的h3元素
    3. .eq(2)           //选择第3个h3元素 
    4. .html('Hello');  //将它的内容改为Hello 
    它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。

    jQuery还提供了.end()方法，使得结果集可以后退一步：
    1. $('div') 
    2. .find('h3') 
    3. .eq(2) 
    4. .html('Hello') 
    5. .end()//退回到选中所有的h3元素的那一步 
    6. .eq(0)//选中第一个h3元素 
    7. .html('World'); //将它的内容改为World 
    .end()：回到最近的一个"破坏性"操作之前。如果之前没有破坏性操作，则返回一个空集。
    所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。

6.常用函数

//取值和赋值
        $("input元素名称").val(); //获取input元素的值
        $("input元素名称").val(value); //设置input元素的值为value
        $("元素名称").text(); //获得该元素的文本
        $("元素名称").text(value); //设置该元素的文本值为value
        $("img").attr({src:"SequenceInputStream.jpg",alt:"SequenceInputStream Image"}); //给某个元素添加属性/值，参数是map
        $("img").attr("src","SequenceInputStream.jpg"); //给某个元素添加属性/值
        $("img").attr("title", function() { return this.src }); //给某个元素添加属性/值
        $("元素名称").html(); //获得该元素内的内容（元素，文本等）
        $("元素名称").html("new stuff"); //给某元素设置内容
　　需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；
    取值的时候，则是只取出第一个元素的值（.text()例外，它取出所有元素的text内容）。

        $("元素名称").after(content); //在匹配元素后面添加内容
        $("元素名称").before(content); //在匹配元素前面添加内容
        $("元素名称").empty(); //将该元素的内容设置为空
        $("元素").remove(); //删除所有的指定元素
        $("元素").remove("exp"); //删除所有含有exp的元素
        $("元素名称").append(content); //将content作为元素的内容插入到该元素的后面 为数组中所有DOM对象添加子对象
            例: $(选择器).append("<div>动态添加的div</div>")   (类别有多种)
        $("元素名称").appendTo(content); //在content后接元素
        $("元素").prepend(content); //将content作为该元素的一部分，放到该元素的最前面
        $("元素").prependTo(content); //将该元素作为content的一部分，放content的最前面

each语法

    1. 可以对 数组, json, dom数组循环处理. 数组,  json中的每一个成员都会调用一次处理函数.
        var arr = {1,2,3}
        var json = {"name":zhangsan,"age":20}
        var obj = $(":text")
    2. 语法
        语法1. $.each(要遍历的对象,function(index,element){处理程序})
        语法2. JQuery对象.each(function(index,element){处理程序})
        index, element都是自定义的形参, 名称自定义.
        index: 循环的索引
        element: 数组中的成员

7.绑定事件

    1)  $(选择器).事件名称(事件的处理函数);
        $(选择器):定位dom对象, dom对象可以有多个,这些dom对象都绑定事件了
        事件名称: 就是js中的事件去掉on的部分, 例如 js中的单击事件 onclick()
                JQuery中的事件名称就是click()
        事件的处理函数: 就是一个function,当事件发生时,执行函数内容.
        例: 给id为btn的按钮绑定单击事件
            $("btn").click(function(){
                alert("按钮被点击了");
            });

    事件在jQuery内部，都是可以由.bind()的便捷方式。使用.bind()可以更灵活地控制事件，比如为多个事件绑定同一个函数：
        $("input").bind('click change',function () {
            alert("Hello");
        });

    有时，你只想让事件运行一次，这时可以使用.one()方法。
        $("p").one("click"， function(){ 
            alert("Hello"); //只运行一次，以后的点击不会运行 
        }); 

    unbind()用来解除事件绑定。
        $('p').unbind('click'); 

    所有的事件处理函数，都可以接受一个事件对象(event object)作为参数，例：
        $("p").click(function(e){ 
            alert(e.type); //"click" 
        });
    这个事件对象有一些很有用的属性和方法：
        e.pageX 事件发生时，鼠标距离网页左上角的水平距离
        e.pageY 事件发生时，鼠标距离网页左上角的垂直距离
        e.type 事件的类型（比如click）
        e.which 按下了哪一个键
        e.data在事件对象上绑定数据，然后传入事件处理函数
        e.target 事件针对的网页元素
        e.preventDefault() 阻止事件的默认行为（比如点击链接，会自动打开新页面）
        e.stopPropagation() 停止事件向上层元素冒泡

8.特殊效果

        jQuery允许对象呈现某些特殊效果。

    $('h1').show(); //展现一个h1标题
    
    常用的特殊效果如下：
    .fadeIn() 淡入
    .fadeOut() 淡出
    .fadeTo() 调整透明度
    .hide() 隐藏元素
    .show() 显示元素
    .slideDown() 向下展开
    .slideUp() 向上卷起
    .slideToggle() 依次展开或卷起某个元素
    .toggle() 依次展示或隐藏某个元素
    
    除了.show()和.hide()，所有其他特效的默认执行时间都是400ms(毫秒)，但是你可以改变这个设置。
    * $('h1').fadeIn(300); // 300毫秒内淡入 
    * $('h1').fadeOut('slow'); //缓慢地淡出

        在特效结束后，可以指定执行某个函数。

    $('p').fadeOut(300, function(){$(this).remove(); }); 

    更复杂的特效，可以用.animate()自定义。
    $('div').animate( { 
        left : "+=50"，//不断右移 
        opacity : 0.25 //指定透明度 
        },
        300,// 持续时间 
        function(){ alert('done!'); }//回调函数 
    );

　　.stop()和.delay()用来停止或延缓特效的执行。
　　$.fx.off如果设置为true，则关闭所有网页特效。

 9.使用jQuery的函数,实现Ajax请求的处理.

        jQuery简化了Ajax请求.

        三个函数:
            1) $.ajax() : jQuery中实现ajax的核心函数
            2) $.post() : 使用post方式发送ajax请求
            3) $.get() : 使用get方式发送ajax请求

            $.post()和$.get()在内部都是调用的$.ajax()

        $.ajax函数的使用, 函数的参数表示请求的url, 请求的方式, 参数值等信息.
        $.ajax()参数是一个json的结构

        例: $.ajax( {名称:值, 名称:值...} )
            $.ajax( {
                        async:true,
                        contentType:"application/json",
                        data:{name:"张三",age:20},
                        dataType:"json",
                        error:function(){
                            请求出现错误时执行的函数.
                        },
                        success:function(data){
                            //data就是responseText,是jQuery处理后的数据.
                        },
                        url:"bmiAjax",
                        type:"get"
                    }
                  )

        json结构的参数说明:
            1)async: 是一个boolean类型的值, 默认是true, 表示异步请求的,可以不写async这个配置项
                相当于 xmlHttp.open(get,url,true),第三个参数
            2)contentType: 一个字符串,表示从浏览器发送服务器的参数的类型,可以不写.
            3)data: 可以是字符串,数组,json.表示请求的参数和参数值.常用的json格式的数据
            4)dataType: 表示期望从服务器端返回的数据格式,可选的有: xml, html, text, json
                当使用$.ajax()发送请求时,会把dataType的值发送给服务器,那么Servlet就能够读取
                到dataType的值,就知道浏览器需要的是json或xml的数据,则服务器返回需要的数据格式
            5)error: 一个function, 表示当请求发生错误时执行的函数
                error:function{ 执行的函数 }
            6)success: 一个function, 请求成功,服务器返回数据,会执行函数的操作
                相当于:使用XMLHttpRequest对象, 当readyState==4&&status==200时执行操作
            7)请求的地址
            8)type:请求方式,get或者post,默认为get

            主要使用:url,data,dataType,success