Jquery介绍及Ajax

jquery对象与DOM对象的关系

    jquery对象本质上是一个DOM对象数据，它在该数组上扩展了一些操作数组中元素的方法；

    元素的方法：可以直接操作这个数组

                                 Obj,length：获取数组的长度；

                                 Obj.get(index)：获取数组中某一个DOM对象；

                                 Obj[index]：等价于Obj.get(index)；

                          DOM对象——>jQuery对象：$(DOM对象)

jQuery选择器

    基本选择器：$("标签名")；$(".class")，$("#id")，$("#id,.class")

    层次选择器：在select1元素下，选中所有满足select2的子孙：$("select1 select2")；

                         在select1元素下，选中所有满足select2的子元素：$("select1 > select2")；

                         在select1元素下，选中所有满足select2的下一个弟弟：$("select1 + select2")；

                         在select1元素下，选中所有满足select2的所有弟弟：$("select1 ~ select2")；

    基本过滤选择器(常用于表格，列表):

        :first 第一个元素        :last 最后一个元素        :not(selector)  把selector排除在外

        :even  挑选偶数行     :odd  挑选奇数行          :eq(index)  下标等于index

        :gt(index) 下标大于index   :it(index) 下标小于index

    内容过滤选择器

        :contains(text)：匹配包含给定元素或文本的空元素；

        :empty：匹配所有不包含子元素或文本的空元素；

    可见性过滤选择器：

        :hidden：匹配所有不可见元素，或type为hidden元素；

        :visible：匹配所有可见元素；

    属性过滤选择器：

        [attribute]：匹配具有attribute属性元素；

        [attribute=value]： 匹配属性等于value元素；

        [attribute != value]：匹配属性不等于value元素；

    状态过滤器：

        :enabled：匹配可用的元素；               :disabled：匹配不可用元素；

        :checked：匹配选中的checkbox；      :selected：匹配选中的option；

    表单选择器：

        :text：文本框                     :password：密码框                       :radio：单选框

        :checkbox：多选框            :submit：提交按钮                       :reset：重置按钮

        :button：普通按钮              :file：文本框                                 :hidden：隐藏框

读写节点

    读写节点的内容

        innERHTML==html();        innnertext=text();

    读写input的值

        value=val()

    读写节点的属性

        attr("")==getAttribute("")      attr("")==setAttribute("","")

        obj.val("属性名","属性值");

增删节点

    添加节点：

        parent.append(obj)：作为最后一个子节点添加进来；

        parent.prepend(obj)：作为第一个子节点添加静来；

        brother.after(obj)：作为下一个兄弟节点添加静来；

        brother.before(obj)：作为上一个兄弟节点添加进来；

    删除节点：

        obj.remove：删除节点          obj.remove(selector)：只删除满足selector的节点

        obj.empty()：清空节点          empty()=html("")

样式操作

    addClass("")：追加样式                         removeClass("")：移除指定样式

    removeClass()：移除所有样式              toggleClass("")：切换样式

    hasClass("")：判断是否有某个样式       css("")：读取css的值

    css("","")：设置多个样式

遍历节点

    chlidren()：直接子节点       next()：下一个兄弟

    prev()：上一个兄弟             siblings()：所有兄弟

    parent()：父节点

事件处理

    $obj.click()   出发click事件

获得事件对象event

    $obj.click(function(e){})   e:传任意的参数  e.target：获取事件源  (e.pagex,e.pagey)：获取坐标

事件冒泡

    子节点产生的事件会依次向上抛给父节点

     e.stopPropagetion()：取消事件冒泡

合成事件

    haver(mouseenter,mouseleave)：模拟光标悬停事件；

    toggle()：在多个事件响应中切换；

模拟操作

    $obj.trigger(事件类型) eg: $.obj.trigger("focus")  简写 $obj.focus();

jQuery动画

    显示隐藏效果：show/hide()  同时改变宽度和高度来实现；

    上下滑动式隐藏：slideDown()/slideUp()

    淡入淡出式隐藏：fadeIn()/fadeOut()   改变不透明度opacity来实现:

    自定义动画效果：animate(偏移位置，执行事件，回调函数)；

                                 $("image").animate({"left":"300px",200})；

Ajax

    异步应用在B/S程序中，发请求——>服务器处理——>响应

    Ajax有点：提升用户体验度，使用户操作更连续，避免等待，避免页面的整体频繁刷新，提升处理效率，

                      提升响应速度。

    Ajax原理：以XMLHttpRequest为核心，异步发送请求，接收响应结果；

                      以JavaScript语言为基础，进行界面处理；

                      以JSON/XML作为数据传输格式；

                      以HTML/CSS作为界面渲染；

    Ajax基本使用方法：XMLHttpRequest对象常用方法和属性；

        open()函数：创建一个Ajax请求；

        Send()函数：发送Ajax请求；

        readyState属性：ajax请求处理状态，值分为0,1,2,3,4；

        onreadystatechange事件：readState属性切换时调用绑定的function；

        responseTest属性：获取服务器返回的Text信息(在readystate==4时使用才有效)；

        responseXML属性：获取服务器返回的xml信息；

        status属性：HTTP响应状态；eg：404,500；

JSON：javaScript Object Notation

    javaScript中JSON类型：var obj={"key1":value,"key2",value2}；

                                            obj.key1；获取value1的值；obj.key2；获取value2的值；

    Json在Ajax中的应用：在servlet端将java对象转成json字符串，在js回调函数端再讲json字符串

                                        转成Json变量；

    jQuery对Ajax的支持：jQuery脚本库是对原始js的封装；

                                       $("tr")：把所有的<tr>元素选出来；

                                       select对象.append(option对象)：将option添加到select里；

    jQuery中Ajax函数：$.ajax()    $.get()/$.post()    $.getJSON()/$.getScript()；

    $.get(请求url，成功回调函数，服务器返回的数据类型) ；

    $.post(请求url，[请求参数]，成功返调函数，服务器返回的数据类型)；

$.ajax({
    url:         //请求地址
    type:        //请求类型
    data:        //提交请求参数
    dataType:    //服务器返回的数据类型
    asyn:        //同步/异步
    success:     //成功回调函数
    error:       //失败回调函数
})