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)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值