jQuery_Ajax

jQuery

js库是一个封装好的特定的集合（方法和函数）。简单理解：就是一个js文件，里面对我们原生js代码进行了封装，存放到里面，这样我们就可以快速高效的使用这些封装好的功能了。比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。

用jq要先引入jq。

基本使用

入口函数

$(function(){});是页面DOM加载完成的入口。

• 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jq帮我们完成了封装。
• 相当于原生js中的DOMContentLoaded。
• 不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。

对象

顶级对象：$是jQuery的别称，同时也是jQuery的顶级对象。

DOM对象和jQuery对象

用原生js获取来的对象就是DOM对象，jQuery方法获取的元素就是jQuery对象。jQuery对象的本质：利用$对DOM对象包装后产生的对象（伪数组形式存储）。

DOM对象和jQuery对象之间是可以相互转换的，因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用就要进行转换。

• DOM—>jQuery：$(DOM对象)
  • 例如：$('div')
• jQuery—>DOM：
  • $('div')[index]：index是索引号
  • $('div').get(index)：index是索引号

常用的API

选择器

$("选择器")：里面选择器直接写css选择器即可，但是要加双引号。

子代选择器：$("ul>li")：使用>号，获取亲儿子层级的元素，ps：并不会获取孙子层级的元素。

后代选择器：$("ul li")：使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等。

遍历内部的元素（伪数组形式存储）的过程就叫做隐式迭代。简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作。方便我们调用。

jQ筛选选择器：

• $('li:first')：获取第一个li元素。
• $('li:last')：获取最后一个li元素。
• $("li:eq(index)")：获取到的li元素中，选择索引号为index的元素，index从0开始。
• $("li:odd")：获取到的li元素中，选择索引号为奇数的元素。
• $("li:even")：获取到的li元素中，选择索引号为偶数的元素。

筛选方法：

• parent()：返回的是最近一级的父级元素。（亲爸爸
• children(selector)：子代选择器 ul>li
• find(selector)：选里面所有的孩子，包括儿子和孙子，类似于后代选择器。
• siblings(selector)：除了自身元素以外的亲兄弟。
• nextAll([expr])：查找当前元素之后的兄弟元素。
• prevtAll([expr])：查找当前元素之前的兄弟元素。
• hasClass(class)：检查当前的元素是否含有某个特定的类，如果有就返回true。
• eq(index)：选择第index个元素。（更推荐这个方法来选择

jQ得到当前元素的索引号：$(this).index()

样式操作

jQ可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式。

操作css方法：

• 参数只写属性名，则是返回属性值。
• 参数是属性名,属性值，属性必须加引号，值如果是数字可以不用跟单位和引号。
• 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不加引号。
  • $(this).css({width:200,height:200,background:"red"});
  • 如果是复合属性则必须采取驼峰命名法，如果值不是数字则需要加引号。

设置类样式方法：

• 添加类：$(this).addClass("className")
• 删除类：$(this).removeClass("className")
• 切换类：$(this).toggleClass("className")

原生js中className会覆盖元素原来里面的类名，jQ里面类操作只是对指定类进行操作，不影响原先的类名。

属性操作

element.prop("属性名")：获取元素固有的属性值。

element.prop("属性名","属性值")：修改元素的属性值。

元素的自定义属性，我们通过attr()，修改后面加值就可以了。

数据缓存data()这个里面的数据是存放在元素的内存里面，可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。

文本属性值

html()：获取元素的内容。html("内容")：设置元素的内容。

text()：获取元素的文本内容。

val()：获取设置表单值。

parent()：返回祖先元素，里面的参数是返回指定的祖先元素。

.toFixed(数字)：保留几位小数。

元素操作

主要是遍历、创建、添加、删除元素操作。

遍历元素：

• $("div").each(function(index,domEle){})
  • each()遍历匹配的每一个元素，主要用dom处理
  • 里面的回调函数有两个参数：index是每个元素的索引号，可以自己指定索引号名称；domEle是每个dom元素对象，不是jq对象。
• $.each(object,function(index,element){})
  • $.each()可用于遍历任何对象，主要用于数据处理，比如数组，对象。
  • 里面的函数有两个参数：index是元素的索引号；element是遍历内容。

创建元素：

• $("<li></li>")：创建了一个li元素。
• 添加元素：
  • 内部添加：element.append("内容") 把内容放入匹配元素内部最后面，类似原生的appendChild。element.prepend("内容") 是放在前面。
  • 外部添加：element.after("内容") 把内容放到目标元素的后面。element.before("内容") 是放在前面。
  • 内部添加元素，生成之后是父子关系。外部添加元素，生成之后是兄弟关系。
• 删除元素：
  • element.remove()：删除匹配的元素（本身）
  • element.empty()：删除匹配的元素集合中所有的子节点
  • element.html("")：清空匹配的元素内容

尺寸、位置操作

尺寸：

• width()/height()：只算width/height
• innerwidth()/innerheight()：算width/height+padding
• outerwidth()/outerheight()：算width/height+padding+border
• outerwidth(true)/outerheight(true)：算width/height+padding+border+margin

位置:

• offset()：获取设置距离文档的位置（偏移），**跟父级没有关系。**可以设置偏移。
• position()：获取距离带有定位父级位置（偏移）。如果没有带有定位的父级，则以文档为准。只能获取不能设置。

事件

绑定事件

单个事件注册：$(this).事件(function(){})

element.on(events,[selector],fn)方法在匹配元素上绑定一个或多个事件的事件处理函数。

• events：一个或多个用空格分隔的事件类型。
• selector：元素的子元素选择器。
• fn：回调函数，即绑定在元素上的函数。

on()可以事件委派操作。事件委派操作就是把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

$('ul').on('click','li',function(){
    alert('hello');
})
//click是绑定在ul上的 但是点击li才会触发

on()可以给动态创建的元素绑定事件。

解绑事件

off()：解除事件。

• 没有参数就是解除所有事件。
• 有参数就是解除该参数的事件。比如：click、mouseover。
• $("ul").off("click","li")：解除事件委托。

one()：只能触发事件一次。

自动触发

三种方式：

• 元素.事件()：会触发元素的默认行为。
• 元素.trigger(“事件”)：会触发元素的默认行为。
• 元素.triggerHandler(“事件”)：不会触发元素的默认行为。

Ajax

JSON

概述

JSON是一种轻量级的数据交换格式，轻量级体现在JSON的体积小，虽然一个小的体积可能表示的数据很多。在js中，json是以对象的形式存在的。

数据交换：各种语言之间交换数据。在现代的开发中，能够做数据交换的包括两个：JSON、XML，两个都是非常标准的数据交换格式。

• XML体积大，解析难度大。
• JSON体积小，解析更容易。
• XML的语法严谨，JSON的语法相对松散。

对象的创建和使用

JSON是一种无类型的对象，直接一个大括号包起来就是一个JSON对象。

JSON对象必须全部带上双引号。

//语法格式：
var jsonObj = {
    "属性名": "属性值",
    "属性名": "属性值",
    "属性名": "属性值",
    ...
}
//ps：属性值可以是任意类型，也可以是JSON对象

使用的方法和js对象一样。

交换数据

Java和js两个语言怎么交换数据：Java的JDBC连接数据库查询数据，然后将数据拼接成JSON格式的字符串，将JSON格式的字符串传给js，然后在js当中把json格式的字符串转换成json对象，这样就可以从js对象中取数据了，这样就完成了数据的交换。

    <script>
        var fromJava = "{\"name\":\"zs\", \"age\":20}"; //这个不是json对象，是一个字符串
        //将json格式的字符串转换成json对象
        //eval函数可以将一个字符串当做一段js代码解释执行
        window.eval("var stu = " + fromJava); //这个可以将json格式的字符串转换成json对象
        //转换成json对象的目的是为了取数据（这样就完成了数据交换
        /*上面的代码执行结束就等同于这里创建了一个json对象：
        var stu = {
            "name": "zs",
            "age": "20"
        }*/
        console.log(stu.name + "," + stu.age);
    </script>

解析json动态生成表格：

<body>
    <script>
        // 从Java过来一个json格式的字符串
        var fromJava = "{\"total\" : 3, \"students\" : [{\"name\" : \"张三\", \"age\" : 20}, {\"name\" : \"李四\", \"age\" : 19}, {\"name\" : \"王强\", \"age\" : 25}]}";
        onload = function(){
            document.getElementById("btn").onclick = function(){
                //解析上面json格式的字符串，将解析出来的数据放到tbody里
                window.eval("var json = " + fromJava); //json对象
                //设置总记录条数
                document.getElementById("totalSpan").innerHTML = json.total;
                //拼接html
                var studentArray = json.students;
                var html = "";
                for(var i = 0; i < studentArray.length; i++){
                    var s = studentArray[i];
                    html += "<tr>";
                    html += "<td>" + (i + 1) + "</td>";
                    html += "<td>" + s.name + "</td>";
                    html += "<td>" + s.age + "</td>";
                    html += "<tr>";
                }
                //将上面拼接的html设置在tbody里面
                document.getElementById("stuTbody").innerHTML = html;
            }
        }
    </script>
    
    <input type="button" value="查看学生信息列表" id="btn">
    <hr>
    <table border="1px" width="40%">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tbody id="stuTbody">
            <!-- <tr>
                <td>1</td>
                <td>张三</td>
                <td>20</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>17</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王强</td>
                <td>25</td>
            </tr> -->
        </tbody>
    </table>
    总记录条数:<span id="totalSpan">0</span>条
</body>

正则表达式

通常使用正则表达式进行字符串格式匹配。正则表达式是有一堆特殊的符号组成的一个表达式，每一个特殊的符号都有特殊的表达含义。

在js中创建正则表达式：重点使用第一种

• 直接量语法：var regExp = /正则表达式/标记
  • 标记是可选项，可写可不写，有以下值可选：
    • g：全局 global
    • i：忽略大小写 ignorecase
    • gi：全局扫描，并且忽略大小写
• 使用内置类RegExp类：var regExp = new RegExp("正则表达式", "标记")

表单验证

获取元素的三种方式：（很重要很常见

• getElementById("id名")：根据id获取一个元素。
• getElementsByName("name名")：根据name属性获取多个元素。
• getElementsByTagName("标签名")：根据标签获取多个元素。

表单验证（很重要 多写几遍）

<body>
    <script>
        /*
        1.用户名不能为空
        2.用户名在6-14位之间
        3.用户名只能数字和字母组成，不能含有其他符号（正则表达式）
        4.密码和确认密码一致
        5.统一失去焦点验证
        6.错误提示信息统一在span标签中提示，并且要求字体12号，红色
        7.文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
        8.最终表单中所有项均合法方可提交
        */

        onload = function(){
            //给id="username"的节点绑定blur事件
            var usernameElt = document.getElementById("username");
            var nameError = document.getElementById("nameError");
            //失去焦点
            usernameElt.onblur = function(){
                //获取用户名
                var username = usernameElt.value;
                //去除前后空白
                username = username.trim();
                //用户名不能为空,不能为空串
                if(username == ""){
                    nameError.innerHTML = "用户名不能为空";
                }else{
                    //用户名不为空 检测长度是否合法
                    if(username.length < 6 || username.length > 14){
                        nameError.innerHTML = "用户名在6-14位之间";
                    }else{
                        //用户名不为空，长度也合法 再检测是否有特殊符号
                        var regExp = /^[a-zA-Z0-9]+$/
                        var ok = regExp.test(username);
                        if(ok){
                            //合法
                            nameError.innerHTML = "";
                        }else{
                            //不合法
                            nameError.innerHTML = "用户名只能由字母和数字组成";
                        }
                    }
                }
            }
            //获得焦点:清空span信息
            usernameElt.onfocus = function(){
                nameError.innerHTML = "";
            }

            var passwordElt = document.getElementById("confirmpwd");
            var pwdError = document.getElementById("pwdError");
            //确让密码失去焦点就验证
            passwordElt.onblur = function(){
                //获取密码
                var userpwd = document.getElementById("userpwd").value;
                //获取确认密码
                var confirmpwd = document.getElementById("confirmpwd").value;
                //检测是否一致
                if(userpwd != confirmpwd){
                    pwdError.innerHTML = "密码和确认密码不一致";
                }else if(userpwd == "" && confirmpwd == ""){
                    pwdError.innerHTML = "密码不能为空";
                }else{
                    pwdError.innerHTML = "";
                }
            }
            //获得焦点：清空span里的信息
            passwordElt.onfocus = function(){
                pwdError.innerHTML = "";
            }

            document.getElementById("regbtn").onclick = function(){
                //验证用户名 怎么验证用户名？让用户名文本框失去焦点
                //重点：使用js代码怎么触发事件
                usernameElt.focus(); //触发文本框获取焦点事件
                usernameElt.blur(); //触发文本框失去焦点事件
                
                //验证密码 怎么验证密码？让文本框失去焦点
                passwordElt.focus(); //触发文本框获取焦点事件
                passwordElt.blur(); //触发文本框失去焦点事件
                
                //当所有span的内容都为空就表示表单合法
                if(nameError.innerHTML == "" && pwdError.innerHTML == ""){
                    //提交
                    var formObj = document.getElementById("userForm");
                    //调用submit()来完成表单的提交
                    formObj.submit();
                }
            }
        }
    </script>
    <form id="userForm" action="">
        用户名<input type="text" name="username" id="username"><span id="nameError"></span>
        <br>
        密码<input type="password" name="userpwd" id="userpwd">
        <br>
        <!-- 确认密码不需要提交给服务器 name不要写 -->
        确认密码<input type="password" id="confirmpwd"><span id="pwdError"></span>
        <br>
        <!-- 表单项目都合法才能提交 -->
        <!-- button不能提交表单，但是js代码可以提交表单 -->
        <input type="button" value="注册" id="regbtn">
    </form>
</body>

全局刷新和局部刷新

全局刷新：使用form、href等发起的请求是全局刷新。（用户发起请求，视图改变了，跳转视图，使用新的数据添加到页面）缺点如下：

• 传递数据量比较大，占用网络的带宽。
• 浏览器需要重新的渲染整个页面。
• 用户体验不是那么好。

局部刷新：在当前页面中，发起请求，获取数据，更新当前页面的dom对象。对视图部分刷新。特点如下：

• 数据比较小，在网络中传输速度快。
• 更新页面内容，是部分更新页面，浏览器不会全部渲染视图。
• 在一个页面中，可以做多个局部刷新。
• 从浏览器获取的是数据，拿到更新视图。

异步请求对象

在局部刷新中，使用异步请求对象，在浏览器内部发起请求，获取数据。

异步对象（XMLHttpRequest）是在浏览器内部的一种js对象，各大浏览器都能支持异步对象的使用。使用js语法创建和使用这个对象：var xhr = new XMLHttpRequest()，之后就可以使用xhr对象的属性或者函数，进行异步对象的操作。

使用异步对象实现局部刷新，异步对象主要负责发起请求，传递请求的参数，并从服务器接收数据。局部刷新需要使用以下技术：

• JavaScript：创建XMLHttpRequest对象，调用它的属性或者方法。
• dom：处理dom，更新select的数据。
• css：处理视图，更新，美化。
• servlet：服务器端技术。
• 数据格式：json（它之前是xml

把上面这些技术的综合使用称为Ajax。

Ajax

Ajax是一种在无需重新加载整个网页的情况下，能够更新部分页面内容的新方法。它不是新的编程语言，是多种技术的综合使用，使用Ajax实现局部刷新。Ajax的核心是JavaScript和xml（json）：使用JavaScript操作异步对象XMLHttpRequest 和服务器交换使用json数据格式。

异步对象的属性和方法

创建异步对象，使用js的语法：var xhr = new XMLHttpRequest();

方法：

• open(请求方式,服务器端的访问地址,异步还是同步)
• send()：使用异步对象发送请求

属性：

• readyState：请求的状态（请求的过程
  • 0：表示创建异步对象时，new XMLHttpRequest();
  • 1：表示初始异步对象的请求参数，执行open()方法。
  • 2：使用send()方法发送请求。
  • 3：使用异步对象从服务器接收了数据。
  • 4：异步对象接收了数据，并在异步对象内部处理完成后。
• status：网络的状态，和Http的状态码对应。
  • 200：请求成功
  • 404：服务器资源没有找到
  • 500：服务器内部代码有错误
• responseText：表示服务器端返回的数据

使用步骤

1）使用js创建异步对象：var xhr = new XMLHttpRequest();

2）给异步对象绑定事件，事件名称是：onreadystatechange

• 在绑定事件中做什么，根据readyState值做请求的处理。

  xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 && xhr.status == 200){
          //从服务器获取了数据，更新当前页面的dom对象，完成请求的处理
          var data = xhr.responseText;
          //更新dom对象
          document.getElementById("#mydiv").innerHTML = data;
      }
  }
  

3)初始请求的参数，执行open()函数

4）发送请求，执行send()

常用的函数

$.ajax()

$.ajax()是jq中Ajax请求的核心方法，所有的其他方法都是在内部使用此方法。语法：$.ajax({json格式的参数})，json格式的参数：key是定义好了的，需要开发人员给key赋值，这些key是用来表示ajax请求必须的参数。例如：请求的url地址、是不是异步请求、请求的方式等等。$.ajax()有以下参数：

• url：服务器的地址，例如某个servlet的访问地址。
• type：表示请求的方式：get、post。默认是get，这个值不区分大小写。
• data：表示提交的请求参数，可以是string、数组、json类型的，推荐使用json格式。
  • json格式例如：data:{"name":"lisi","age":20}。jq在发送请求时，会把json中的key作为请求的参数使用，key对应的值作为参数数据。
• dataType：数据格式，可以是html、text、xml、json等等，表示发起请求后，希望服务器端返回的数据格式。
  • jq可以尝试使用对应格式处理返回的数据，比如指定了dataType:json表示希望服务器返回的是json格式数据，jq就会把json数据转换成json对象。
  • 服务器代码可以得到dataType的内容。
• success：函数function。当服务器端返回了数据，jq处理完数据后，执行这个函数。等同于异步对象的readyState == 4 && status = 200的情况。
  • 例如：success:function(resp){开发人员处理服务器返回的数据}。resp是自定义形参，相当于resp = xhr.responseText
• error：函数function。当请求错误时，执行这个函数。
• contentType：表示请求的参数数据格式，这个内容可以不写。例如：application/json。
• async：是一个boolean，表示请求是同步（false）还是异步（true）的，默认是true。

函数get和post

$.get()这个函数就是执行get请求方式的ajax，语法：$.get(url,请求参数,success函数,dataType)

$.post()执行post请求的ajax，语法：$.post(url,请求参数,success函数,dataType)