JSON、Ajax、jQuery学习笔记

Fin9ertipsArt

已于 2022-04-01 10:41:44 修改

阅读量532

点赞数

文章标签： jquery ajax json

于 2022-04-01 10:20:48 首次发布

本文链接：https://blog.csdn.net/jnydep/article/details/123891310

版权

Web 1.0时代

早期网站，登录，如果失败，需要刷新页面，才能重新登录；不点击提交，就不知道自己的密码错了；
现在大多数网站，都是局部刷新，不刷新整个页面的情况下，实现页面刷新；
注册的时候，发现手机已经注册过了，但是只要是输入了，没有提交，就会出现提示。

web 2.0时代，最重要的一个因素就是Ajax

JSON

JSON（JavaScript Object Notation, JS 对象标记）是一种轻量级的数据交换格式。

采用完全独立于编程语言的文本格式来存储和表示数据，是一个理想的数据交换语言。
在JS语言中，一切都是对象，因此任何JS支持的类型都可以通过JSON来表示，例如字符串、数字、对象、数组等。

对象表示为键值对
数据由逗号分隔
花括号保存对象
方括号保存数组

JSON键值对：

{"name" : "ddsandwich"}
{"age": "24"}
{"sex" : "male"}

JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串。

var obj = {a : 'what', b : 'up'}; // 这是一个对象，键名也是可以使用引号包裹的
var json = '{"a" : "what", "b" : "up"}' // 这是一个JSON字符串，本质就是一个字符串

JSON和JS对象互相转换

要实现从JSON字符串转换为JS对象，使用JSON.parse()方法：

var obj = JSON.parse('{"a" : "what", "b" : "up"}');  //结果是{a: 'what', b: 'up'}

要实现从JS对象转换为JSON字符串，使用JSON.stringify()方法：

var json = JSON.stringify({a: 'what', b: 'up'}); //结果是'{"a" : "what", "b" : "up"}'

测试

<script type="text/javascript">
        //编写一个对象
        var user = {
            name : "ddsandwich",
            age : "24",
            sex : "male"
        }
        //打印对象
        console.log(user)
        //将JS对象转换为json对象
        jsonobj = JSON.stringify(user)
        console.log(jsonobj)
        //将json字符串转换为js对象
        jsobj = JSON.parse(jsonobj)
        console.log(jsobj)
    </script>

结果

在这里插入图片描述

Ajax

1、全局刷新和局部刷新

全局刷新：使用form，href等发起的请求是全局刷新

用户发起请求，视图改变了，跳转视图，使用新的数据添加到页面
缺点：
①传递数据量比较大，占用网络带宽
②浏览器需要重新的渲染整个页面
③用户体验不好

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

特点：
①数量比较小，在网络中传输速度快
②更新页面内容，是部分更新页面，浏览器不用全部渲染视图
③在一个页面中，可以做多个局部刷新
④从服务器获取的是数据，拿到数据，更新视图

2、异步请求对象

在局部刷新中，使用异步请求对象，在浏览器内部发起请求，获取数据。
在这里插入图片描述

异步对象（XMLHttpRequest）是在浏览器内部的一种JavaScript对象，各大浏览器都能支持异步对象的使用。

3、异步对象接收

js中的一种对象，使用js语法创建和使用这个对象。
var xhr = new XMLHttpRequest();
之后就可以使用xhr对象的属性或者函数，进行异步对象的操作

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

局部刷新需要使用哪些技术：
1）JavaScript：创建异步对象，调用它的属性或者方法
2）dom：处理dom
3）处理视图，更新，美化
4）servlet：服务器端技术
5）数据格式：JSON

把上面这些技术的综合使用称作Ajax（Asynchronous JavaScript and XML，异步的JavaScript和XML）

4、Ajax

Ajax是一种在无需重新加载整个网页的情况下，能够更新部分页面内容的新方法
Ajax不是新的编程语言，它是多种技术的综合使用。包含了JavaScript、dom、css、服务器端技术、servlet、jsp、jdbc等等，还有JSON数据格式。使用Ajax实现局部刷新

Ajax核心是JavaScript和XML（JSON）：使用JavaScript操作异步对象XMLHttpRequest，和服务器交换使用JSON数据格式

5、异步对象XMLHttpRequest属性和方法

创建异步对象，使用js语法

var xhr = new XMLHttpRequest();

XMLHttpRequest方法

①open（请求方式，服务器端的访问地址，异步还是同步）
例如：xhr.open("get", "loginServlet", true);
②send()：使用异步对象发送请求

XMLHttpRequest属性

readyState属性：请求的状态
0：表示创建异步对象时，new XMLHttpRequest();
1：表示初始异步对象的请求参数，执行open()方法
2：使用send()方法发送请求
3：使用异步对象从服务器端接收了数据
4：异步对象接收了数据，并在异步对象的内部处理完成后

status属性：表示网络的状态，和Http的状态码对应
200：表示请求成功
404：服务器资源没有找到
500：服务器内部代码有错误

responseText属性：表示服务器端返回的数据
例如：var data = xhr.responseText;

6、异步对象XMLHttpRequest的使用步骤

使用js创建异步对象

var xhr = new XMLHttpRequest();

给异步对象绑定事件，事件名称叫onreadystatechange

例如button增加单击事件onclick
xhr绑定事件：
xhr.onreadystatechange = function() { 当事件发生时，执行的代码 }

在绑定事件中做的处理，根据readyState值做

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

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

xhr.open("get", "loginServlet", true)

发送请求，执行send()函数

xhr.send()

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局刷新实现计算bmi指数</title>
</head>
<body>
    <div align = "center">
        <table>
            <tr>
                <td>姓名：</td>
                <td><input type="text" id="name"></td>
            </tr>
            <tr>
                <td>体重：</td>
                <td><input type="text" id="weight"></td>
            </tr>
            <tr>
                <td>身高：</td>
                <td><input type="text" id="height"></td>
            </tr>
                <td>操作：</td>
                <td><input type="button" id="button" onclick="doAjax()" value="提交"></td>
            </tr>
        </table>
    </div>
    </br>
    <div id="mydiv" align = "center">等待更新数据</div>

    <script type="text/javascript">
        function doAjax() {
            console.log("hell yeah");
            //使用XMLHttpRequest做ajax局部刷新
            //1. create XMLHttpRequest object
            var xhr = new XMLHttpRequest();
            //2. binding events
            xhr.onreadystatechange = function () {  //函数执行多次
                console.log("==wtk==" + xhr.readyState + " " + xhr.status)
                if ( xhr.readyState == 4 && shr.status == 20 ){
                    //开发人员处理服务器返回的数据，更新dom对象
                    var data = xhr.responseText; //这里data就是服务器端返回的数据
                    //更新dom对象
                    document.getElementById("mydiv").innerHTML = data;
                }
            }
            //3. get initial request para
            //收集请求中需要的参数值
            var pname = documen.getElementById("name").value;
            var pheight = documen.getElementById("height").value;
            var pweight = documen.getElementById("weight").value;
            //服务器端地址，例如：bmiServlet?name=lisi&w=80&h=1.8
            var para = "bmiAjax?name=" + pname +"&w=" + pweight + "&h" + pheight;
            xhr.open("get", para, true); //para为服务器端（java servlet）
            //4. send request
            xhr.send();
        }
    </script>
</body>
</html>

7、同步请求和异步请求

看open（请求方式，访问uri地址，Boolean是不是异步的）
true：异步请求
false：同步请求

jQuery

1、介绍

JQuery是一款跨主流浏览器的Javascript库，封装了JavaScript相关方法调用，简化了JS对HTML和DOM操作

官方地址：https://jquery.com/

2、jQuery使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="../jquery-3.2.1.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      
      /*
      $: jquery中的函数名
      document：是参数
      $(document)：把js中的document对象变成jquery可以使用的对象
      然后调用ready()函数，这个函数是jQuery中的函数
      ready()的执行时间在页面的dom对象加载完毕之后，相当于js中的onload事件
      */
      $(document).ready(function() {
        alert("jquery使用成功！")
      })
      
      //简单的方式使用ready()
      //$( 参数是一个函数 )
      $(function) {
         alert("简单的方式使用ready()") 
      }
    </script>
  </body>
</html>

3、dom对象和jQuery对象

3.1 dom对象转换jQuery对象

语法：$(dom对象)得到的是一个jQuery对象，可以调用jQuery中提供的函数

<input type="text" id="t1"/>
//通过js的函数，获取dom对象
var dom = document.getElementById("t1");
//把dom转为jQuery对象
var jQueryobj = $(dom);
//调用jQuery中的函数
jQueryobj.val(); // 获取dom对象的value属性的值

//为了区分dom对象和jQuery对象，可以在jQuery对象变量名上加一个$，例如：$jQueryobj

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
    <input type="button" value="我是一个按钮" onclick="btnClick()" id="btn" />
    <script type="text/javascript">
        function btnClick() {
            //获取dom对象
            var obj = document.getElementById("btn");
            //转为jQuery类型的对象
            var $jobj = $(obj);
            //调用jQuery中的函数
            alert($jobj.val());// 获取value属性的值
        }
    </script>
</body>
</html>

结果：
在这里插入图片描述

3.2 jQuery对象转换dom对象

语法：jQuery对象就是一个数组，数组成员是dom对象，使用[下标]或get(下标)

<input type="text" id="txt1" />
 //使用jQuery的方式表示这个dom对象
var obj = $("#txt1"); // 获取id是txt1的dom对象，obj是一个jQuery对象，是一个包含了一个成员的dom数组
var dom = obj[0]; // 或者obj.get(0)
//使用dom对象的函数或者属性
alert(dom.value)

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
    <input type="text" id="txt1" value="" placeholder="请输入数字" /><br/>
    <input type="button" id="btn" value="计算平方" onclick="btnClick()"/>
    <script type="text/javascript">
        function btnClick() {
            //获取jQuery对象
            var obj = $("#txt1"); //obj是一个jQuery对象
            //从数值中获取成员，成员是dom对象
            var dom = obj[0] // obj.get(0)
            //调用dom的属性或者函数
            //alert(dom.value);
            var num = dom.value
            dom.value = num * num
            alert(dom.value)
        }
    </script>
</body>
</html>

结果：
在这里插入图片描述

4、选择器

什么是选择器：选择器就是一个字符串，是一个定位到dom对象的字符串，使用这个字符串作为条件定位dom对象。可以使用id、class样式名称，标签名称等作为选择器使用，定位到dom对象

4.1 基本选择器

使用dom对象的id，class名称，标签名等作为条件，定位dom对象

使用dom对象的id作为条件

语法：$("#id")

class选择器，使用对象的class名称定位dom对象

语法：$(".class名称")

标签选择器，使用标签的名称作为条件定位dom对象

语法：$(“标签名称”)

例：

<!DOCTYPE html>
<br lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="../jquery-3.2.1.min.js"></script>
    <style>
        div{
            background-color:lightgoldenrodyellow;
            width: 200px;
            height: 100px;
        }

        .two{
            font-size: 22pt;
            color:lightcoral;
        }
    </style>
</head>
<br>
    <div id="one">我是id=one的div</div>
<br/>
    <div class="two">我是class=two的div</div>
</br>
    <div>我是没有id没有class的普通div</div>
</br>
    <span>我是span</span>
</br>
</br>
    <input type="button" value="获取id=one的dom" onclick="fun1()"/>
</br>
</br>
    <input type="button" value="获取class=two的dom" onclick="fun2()"/>
</br>
</br>
    <input type="button" value="获取div的dom" onclick="fun3()"/>

    <script type="text/javascript">
        function fun1() {
            //id选择器
            var obj = $("#one");
            obj.css("background","red");
        }

        function fun2() {
            //class选择器(样式选择器)
            var obj = $(".two");
            obj.css("background","blue");
        }

        function fun3() {
            //标签选择器
            var obj = $("div");
            obj.css("background","green");
        }
    </script>
</body>
</html>

所有选择器

语法：$("*")

组合选择器

语法：$("#id,.class,标签名称") 组合选择器使用id或者class名称或者标签名称任意组合

4.2 表单选择器

表单选择器使用dom对象的type属性值来定位dom对象，和form标签无关，
语法：$(":type属性值")

例：

<!DOCTYPE html>
<br lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="../jquery-3.2.1.min.js"></script>
</head>
<body>
    文本框:
    <input type="text" value="hh" placeholder="请输入文本"></body>
    <p>性别：</p>
    <input type="radio" name="sex" value="man">男</br>
    <input type="radio" name="sex" value="woman">女</br>
    <p>爱好：</p>
    <input type="checkbox" value="bike">骑行</br>
    <input type="checkbox" value="football">足球</br>
    <input type="checkbox" value="music">音乐</br>
    <p>功能按钮</p>
    <input type="button" value="读取text值" onclick="fun1()"/>
    <input type="button" value="读取radio值" onclick="fun2()"/>
    <input type="button" value="读取checkbox" onclick="fun3()"/>

    <script type="text/javascript">
        function fun1() {
            //使用表单选择器，获取dom对象
            var obj = $(":text");
            alert(obj.val());
        }

        function fun2() {
            var obj = $(":radio");
            for (var i=0; i<obj.length; i++) {
                var dom = obj[i];
                alert(dom.value);
            }
        }

        function fun3() {
            var obj = $(":checkbox");
            for (var i=0; i<obj.length; i++) {
                // var dom = obj[i];
                alert($(obj[i]).val());
            }
        }
    </script>
</body>
</html>

## 5、过滤器

过滤器是一个字符串，用来筛选dom对象的，过滤器是和选择器一起使用的，在选择了dom对象后，再进行筛选

5.1 基本过滤器

使用dom对象在数组中的位置作为过滤条件。

选择数组中第一个dom成员

语法：$("选择器:first")

选择数组中最后一个dom成员

语法：$("选择器:last")

选择等于指定下标的dom成员

语法：$("选择器:eq(下标)")

选择大于某个下标的所有dom成员

语法：$("选择器:gt(下标)")

选择小于某个下标的所有dom成员

语法：$("选择器:lt(下标)")

例：

<!DOCTYPE html>
<br lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="../jquery-3.2.1.min.js"></script>
    <script>
        //页面dom对象加载后执行，相当于onload事件
        $(function() {

            $("#btn").click(function () {alert("一二三四五")})

            $("#btn1").click(function () {
                var obj = $("div:first");
                obj.css("background","blue");
            })

            $("#btn2").click(function () {
                var obj = $("div:last");
                obj.css("background","red")
            })

            $("#btn3").click(function () {
                $("div:eq(3)").css("background","green")
            })

            $("#btn4").click(function () {
                $("div:lt(3)").css("background","orange") //注意div的布局，是否有父子情况
            })

            $("#btn5").click(function () {
                $("div:gt(3)").css("background","purple")
            })
        })
    </script>
</head>

    <div id="one">我是div-0</div>
    <div id="two">我是div-1</div>
    <div>我是div-2</div>
    <div>我是div-3</div>
    <div>我是div-4</div>
    <div>我是div-5</div>
    <br/>
    <br/>
    <span>我是span</span>
    <br/>
    <br/>
    <input type="button" id="btn" value="绑定事件" /><br/><br/>
    <input type="button" id="btn1" value="找到第一个div" /><br/><br/>
    <input type="button" id="btn2" value="找到最后一个div"/><br/><br/>
    <input type="button" id="btn3" value="找到指定下标的div"/><br/><br/>
    <input type="button" id="btn4" value="找到小于3下标的div"/><br/><br/>
    <input type="button" id="btn5" value="找到大于3下标的div"/><br/><br/>
    <!-- <script type="text/javascript">
        $("#btn").click(function () {alert("一二三四五")})
    </> -->
</body>
</html>

5.2 表单对象属性过滤器

根据对象的状态作为条件，筛选dom对象

获取可用的文本框

语法：$(":text:enabled")

获取不可用的文本框

语法：$(":text:disabled")

获取选中的复选框

语法：$(":checkbox:checked")

获取选中下拉列表框

语法：$("选择器>option:selected")

例：

<!DOCTYPE html>
<br lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="../jquery-3.2.1.min.js"></script>
    <script>
        //页面dom对象加载后执行，相当于onload事件
        $(function() {

            $("#btn1").click(function(){
                $(":text:enabled").val("hello")
            })

            $("#btn2").click(function(){
                var obj = $(":checkbox:checked")
                for(var i=0; i<obj.length;i++){
                    alert(obj[i].value)
                }
            })

            $("#btn3").click(function(){
                alert($("select>option:selected").val())
                //alert($("#lang>option:selected").val())
            })
        })
    </script>
</head>
<body>
    <p style="color: indianred;">文本框</p>
    <input type="text" id="text1" value="text1"/> <br>
    <input type="text" id="text2" value="text2" disabled /> <br>
    <input type="text" id="text3" value="text3"/> <br>
    <input type="text" id="text4" value="text4" disabled /> <br>
    <br>
    <p style="color: indianred;">复选框</p>
    <input type="checkbox" value="游泳" />游泳<br>
    <input type="checkbox" value="健身" checked />健身<br>
    <input type="checkbox" value="电子游戏" checked />电子游戏<br>
    <br>
    <p style="color: indianred;">下拉框</p>
    <select id="lang">
        <option value="java">java</option>
        <option value="python" selected>python</option>
        <option value="sql">sql</option>
    </select>
    <p style="color: indianred;">功能按钮</p>
    <button id="btn1">所有可用的text设值成hello</button><br>
    <button id="btn2">显示被选中的复选框的值</button><br>
    <button id="btn3">显示下拉列表选中的值</button><br>
</body>
</html>

6、函数

6.1 第一组函数

val()：操作dom对象的value值

val()：没有参数，获取dom数组中第一个dom对象的value值
val(参数)：有参数，给dom数组中所有dom对象的value属性赋值

text()：用来操作标签的文本内容，也就是标签开始和结束之间的内容

text()：没有参数，把dom数组中所有dom对象的文本内容连接起来，形成一个字符串，并返回这个字符串
text(参数)：有参数，给dom数组中的所有成员统一赋予新的文本

attr()：操作value、文本以外的属性时使用

attr("属性名")：获取dom数组中第一个dom成员的此属性
attr("属性名","属性值")：给dom数组中所有dom成员的此属性赋值

例：

<!DOCTYPE html>
<br lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="../jquery-3.2.1.min.js"></script>
    <style>
        #img{
            width: 200px;
            height: 100px;
        }
    </style>
    <script>
        $(function () {

            $("#btn1").click(function() {
                var txt = $(":text").val()
                alert(txt)
            })

            $("#btn2").click(function() {
                $(":text").val("六六")
            })

            $("#btn3").click(function() {
                var txt = $("div").text()
                alert(txt)
            })

            $("#btn4").click(function() {
                var txt = $("div:first").text()
                alert(txt)
            })

            $("#btn5").click(function() {
                $("div").text("哈哈哈")
            })

            $("#btn6").click(function() {
                $("img").attr("src","timg.gif")
            })
        })
    </script>
</head>
<body>
    <p>文本框val</p>
    <input type="text" value="一一" /> <br>
    <input type="text" value="二二" /> <br>
    <input type="text" value="三三" /> <br>
    <p>文本数据text</p>
    <div>第一个div</div>
    <div>第二个div</div>
    <div>第三个div</div>
    <p>图片</p>
    <img id="img" src="./IMG_20161128_192702.jpg" /><br>
    <p>功能按钮</p>
    <button id="btn1">获取第一个文本框的值</button><br>
    <button id="btn2">设置所有文本框为新值</button><br>
    <button id="btn3">获取div的所有文本</button><br>
    <button id="btn4">获取第一个div的文本</button><br>
    <button id="btn5">设置div新文本</button><br>
    <button id="btn6">设置img图片</button><br>
</body>
</html>

6.2 第二组函数

remove()

语法：$("选择器").remove()：删除选择的dom对象和他的子对象

empty()

语法：$("选择器").empty()：删除dom对象的子对象

append()

语法：$("选择器").append(子dom对象)：给dom对象在他的后面增加新的dom对象

html()

语法：$("选择器").html()：获取dom数组中第一个dom对象的文本值（返回结果先当与innerHTML）
$("选择器").html(参数)：给dom数组中所有成员设置新的文本内容

例：

<!DOCTYPE html>
<br lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="../jquery-3.2.1.min.js"></script>
    <style>
        
    </style>
    <script>
        $(function() {

            $("#btn1").click(function(){
                //删除dom和子dom对象
                $("select").remove();
            })

            $("#btn2").click(function() {
                $("select").empty();
            })

            $("#btn3").click(function() {
                $("#mydiv").append("<button>新加按钮</button>")
            })

            $("#btn4").click(function() {
                //dom数组中第一个的值，包含标签的内容
                alert($("span").html())
            })

            $("#btn5").click(function() {
                $("span").html("新的<b>内容</b>")
            })
        })
    </script>
</head>
<body>
    <select>
        <option value="老虎">老虎</option>
        <option value="狮子">狮子</option>
        <option value="豹子">豹子</option>
    </select>
    <br>
    <select>
        <option value="亚洲">亚洲</option>
        <option value="欧洲">欧洲</option>
        <option value="美洲">美洲</option>
    </select>
    <br>
    <br>
    <div id="mydiv" style="background:indianred">我是div</div>
    <br>
    <br>
    <span>我是<b>嘿嘿</b>yo</span>
    <br>
    <span>jqueryryrry</span>
    <br>
    <br>
    <button id="btn1">使用remove删除dom对象</button><br>
    <button id="btn2">使用empty删除子dom对象</button><br>
    <button id="btn3">使用append追加dom对象</button><br>
    <button id="btn4">获取dom数组中第一个dom对象的文本（innerHTML）</button><br>
    <button id="btn5">设置文本值</button>
</body>
</html>

6.3 each()函数

each()是循环函数，可以循环数组，json，dom对象数组

①$.each(要循环的内容，function(index, element){处理函数})
要循环的内容：可以是数组、json对象、dom对象数组
function：循环的处理函数，每个成员都会执行这个函数一次，index是循环变量的值，名称自定义，element是和index对应的成员，名称自定义

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="../jquery-3.2.1.min.js"></script>
     <title>each()循环普通数组</title>
 </head>
 <body>
     <button id="btn">each()循环普通数组</button>
     <script type="text/javascript">
        $("#btn").click(function(){
            var arr=["abc", "hello","js"]
            $.each(arr, function(index, element){
                console.log(index+" "+element)
            })
        })
    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="../jquery-3.2.1.min.js"></script>
     <title>each()循环json对象</title>
 </head>
 <body>
     <button id="btn">each()循环json对象</button>
     <script type="text/javascript">
        $("#btn").click(function(){
            var json={"name":"dqs", "age":"24", "sex":"male"}
            $.each(json,function(i,n){
                //i是key，n是value
                console.log(i+" "+n)
            })
        })
    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="../jquery-3.2.1.min.js"></script>
     <title>each()循环dom数组</title>
 </head>
 <body>
     <input type="text" value="kdot"><br>
     <input type="text" value="dre"><br>
     <input type="text" value="jay"><br>
     <button id="btn">each()循环dom数组</button>
     <script type="text/javascript">
        $("#btn").click(function(){
            var domArray = $(":text");
            $.each(domArray,function(index,n){
                console.log(index+" "+n.value)
            })
        })
    </script>
 </body>
 </html>

②$("选择器").each(function(index,element){处理函数})
可以对jQuery对象进行循环处理，jQuery对象就是dom数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../jquery-3.2.1.min.js"></script>
    <title>each()第二种语法格式</title>
</head>
<body>
    <input type="text" value="kdot"><br>
    <input type="text" value="dre"><br>
    <input type="text" value="jay"><br>
    <button id="btn">each()第二种语法格式</button>
    <script type="text/javascript">
       $("#btn").click(function(){
            //var obj = $(":text")
            $(":text").each(function(i,n){
                console.log(i+" "+n.value)
            })
       })
   </script>
</body>
</html>

7、事件

jquery可以给dom对象绑定事件，在程序执行期间动态地处理事件

7.1 第一种事件绑定语法

语法：$("选择器").事件名称(事件的处理函数)
$("选择器")：选择0或多个dom对象，给他们绑定事件
事件名称：就是js中的去掉on的部分，例如单击事件onclick，在这里就是click
事件的处理函数：函数定义，当事件发生时，执行这个函数

例：

<!DOCTYPE html>
<br lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
    <script src="../jquery-3.2.1.min.js"></script>
    <script>
        //页面dom对象加载后执行，相当于onload事件
        $(function() {
            $("#btn").click(function () {alert("一二三四五")})
        })
    </script>
</head>
<body>
    <div id="one">我是div-0</div>
    <div id="two">我是div-1</div>
    <div>
        我是div-2
        <div>我是div-3</div>
        <div>我是div-4</div>
    </div>
    <div>我是div-5</div>
    <br/>
    <br/>
    <span>我是span</span>
    <br/>
    <br/>
    <input type="button" id="btn" value="绑定事件" /><br/>
    <!-- <script type="text/javascript">
        $("#btn").click(function () {alert("一二三四五")})
    </> -->
</body>
</html>

7.2 第二种事件绑定语法

on()方法
语法：$("选择器").on(事件名称,function(){事件处理函数})

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../jquery-3.2.1.min.js"></script>
    <title>each()第二种语法格式</title>
</head>
<br>
    <div id="mydiv" style="background-color: indianred;">
        一个DIV
    </div>
    <br>
    <input type="button" id="btn" value="创建dom对象，给dom对象添加事件"/><br>
    
    <script type="text/javascript">
        $("#btn").on("click", function() {
            $("#mydiv").append("<button id='newbtn'>新增的按钮</button>")
            $("#newbtn").on("click", function() {
                alert("新的")
            })
        })
   </script>
</body>
</html>

8、AJAX

jQuery提供多个与AJAX有关的方法。通过jQuery AJAX方法，能够使用HTTP Get 和HTTP Post从远程服务器上请求文本、HTML、XML或JSON同时能够把接收的数据更新到DOM对象

使用jQuery提供的函数实现ajax请求的处理，代替直接使用XMLHttpRequest，但是jQuery实际还是使用的异步对象。

8.1 $.ajax()

语法：$.ajax({json格式的参数})
json格式的参数：key是定义好的，需要开发人员给key赋值，这些key是用来表示ajax请求必须的参数
例如：请求的uri地址，是不是异步请求，请求的方式等等

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

$.ajax(
  {
    url : "服务器的地址",
    type : "get",
    data : {"name":李四,"age":20},
    dataType : "json", //默认为txt
    success : function(resp) {开发人员获取数据，更新dom对象},
    error : function() {alert("请求错误！")},
    
  }
)

8.2 $.get()

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

$.get("queryname", {"proid":1}, function(resp){获取省份名称}, "text")

8.3 $.post()

$. p o s t () 执行 p o s t 请求的 a j a x < b r / > 语法： ‘$ .post(url, 请求参数, success函数, dataType)`

$.post("queryname", {"proid":1}, function(resp){获取省份名称}, "text")

Fin9ertipsArt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫