前端——Ajax和jQuery

于 2024-10-01 13:10:41 发布
阅读量607 收藏 10
点赞数 14
文章标签： 前端 ajax jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53256193/article/details/142638870
版权

一、Ajax

Ajax即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），  通过 JS 异步的向服务器发送请 求并接收响应数据。

同步访问：当客户端向服务器发送请求时，服务器在处理的过程中，浏览器只能等待，效率较低。

异步访问：当客户端向服务器发送请求时，服务器在处理的过程中，客户端可以做其他的操作，不需要一直等待。

创建ajax实例  

 let xhr = new XMLHttpRequest();

创建请求

method:请求方式，取值'GET' 或 'POST'

url:请求地址，字符串。

xhr.open(method,url)；

 发送请求  

        xhr.send()

响应请求  

        xhr.onload = function(){

          //判断 你请求服务器的状态是否为200  200的状态码表示成功

          if(xhr.status === 200){

            console.log(xhr.response);

          }  

        }

二、jQuery

1.jQuery介绍

jQuery是JavaScript的工具库，对原生JavaScript中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善，更便捷的方法。

2.工厂函数 - $()

"$()"函数用于获取元素节点，创建元素节点或将原生JavaScript对象转换为jquery对象,返回 jQuery 对象。jQuery 对象实际是一个类数组对象，包含了一系列jQuery 操作的方法。

原生JavaScript对象与jQuery对象的属性和方法不能混用。可以根据需要，互相转换 :

1. 原生JavaScript转换jQuery对象

    $(原生对象)，返回 jQuery 对象

2. jQuery对象转换原生JavaScript对象

    - 方法一 : 根据下标取元素,取出即为原生对象

        var div = $("div")[0];

    - 方法二 : 使用jQuery的get(index)取原生对象

        var div2 = $("div").get(0);

3.jQuery获取元素

jQuery通过选择器获取元素，$("选择器")

标签选择器：$("div")

ID 选择器：$("#d1")

类选择器：$(".c1")

群组选择器：$("body,p,h1")

后代选择器： $("div .c1")

子代选择器： $("div>span")

相邻兄弟选择器： $("h1+p")  匹配选择器1后的第一个兄弟元素,同时要求兄弟元素满足选择器2

通用兄弟选择器： $("h1~h2") 匹配选择器1后所有满足选择器2的兄弟元素

过滤选择器，需要结合其他选择器使用。

:first

  匹配第一个元素 例:$("p:first")

:last

  匹配最后一个元素 例:$("p:last")

:odd

  匹配奇数下标对应的元素

:even

  匹配偶数下标对应的元素

:eq(index)

  匹配指定下标的元素

:lt(index)

  匹配下标小于index的元素

:gt(index)

  匹配下标大于index的元素

:not(选择器)

  否定筛选,除()中选择器外,其他元素

示例代码：

<script>
        // jQuery 是 JavaScript的工具库   对原生js代码中方法 进行封装  dom操作  事件处理   包含数据处理和ajax技术等进行了封装   提供了完善的更加简单的方法   
        
        // 直接 使用 $() 来获取元素  
        console.log($('box')); // 返回结果是JQuery对象  

        // JQuery对象 转为原生js对象  
        // let box =$('.box')[0];
        // console.log(box);
        // 或者
        let box =$('.box').get(0);
        console.log(box);

        // 通过.css修改文字颜色  
        $('.box').css('color','red')

    </script>

4.操作元素内容

// 设置或读取标签内容,等价于原生innerHTML,可识别标签语法

html()

// 设置或读取标签内容,等价于innerText,不能识别标签

text()

// 设置或读取表单元素的值,等价于原生value属性

val()

示例代码：

 <script src='./jquery.js'></script>
     <script>
        // html()等价于  原生 innerHTML 可识别标签  
          $('.wrap').html('<h2>明天星期五了</h2>')

        // 插入文本 
        $('p').text('搞学习了')

        // 原生js  读取input控件里面的值 直接.value    
        // console.log(inp.value);

        //jquery版获取表单控件里面的内容 
        console.log($('input').val());

        // 点击button按钮 把我在input输入框的内容  弹出来 
        $('button').click(function(){
            console.log($('input').val());
        })
     </script>

5.操作标签属性

1. attr("attrName","value")

    设置或读取标签属性

2. prop("attrName","value")

    设置或读取标签属性

    注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写

3. removeAttr("attrName")

    移除指定属性

示例代码：

<!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>Document</title>
    </head>

    <body>
        <!-- <input type="text" name='你好' id='check'> -->

        <input type="checkbox" name='你好' id='check'>

        <input type="submit" id='sub'>

        <img  alt="你图片没了" src="https://img2.baidu.com/it/u=2425084553,971201481&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
        <script src='./jquery.js'></script>
        <script>
            // 设置读取标签的属性  
            console.log($('#check').attr('name'));//读取这个标签的name属性

            // 给 value属性 设置了内容: 我输入了什么
            //    console.log($('#check').attr('value','我输入了什么'));

            //prop 读取或设置属性  
            //    alert($('#check').prop('value'))

            //attr 读取或设置属性  
            //    alert($('#check').attr('value'))

            $('#sub').click(function () {
                // 会监听你的点击状态
                // alert($('#check').prop('value'))//on表示选中

                // alert($('#check').attr('value'))//弹出  undefined 不会监听你按钮选中状态
            })

            // 删除属性
            $('img').removeAttr('src')
        </script>
    </body>

</html>

6.操作标签样式

1. 针对类选择器,提供操作class属性值的方法

// 添加指定的类名

addClass("className")

// 移除指定的类型,如果参数省略,表示清空class属性值

removeClass("className")

// 如果当前元素存在指定类名,则移除;不存在则添加

toggleClass("className")

2. 操作行内样式

// 设置行内样式

css("属性名","属性值")  

// 设置一组CSS样式

css(对象)

示例代码：

<!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>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: orange;
        }

        .wrap{
            background-color: pink;
        }

        .list{
          width: 400px;
          height: 80px;
          background-color: pink;
          margin: auto;
        }
        .list>li{
            float: left;
            width: 100px;
            height: 80px;
            background-color: gray;
            color: orange;
            text-align: center;
            line-height: 80px;
            /* 变成小手 */
            cursor: pointer;
        }
        .list>.only{
            background-color:  #096;
        }
    </style>
</head>
<body>
     <div class='text wrap'></div>

     <ul class='list'>
        <li>英雄联盟</li>
        <li>王者荣耀</li>
        <li>永劫无间</li>
        <li class='only'>原神</li>
     </ul>


     <p>我是文本标签</p>
     <script src='./jquery.js'></script>
     <script>
        // 添加指定类名  
        $('div').addClass('box')

        //删除指定类名    如果参数忽略不写 那就清空class属性值  
        // $('div').removeClass()

        // 如果当前标签有这个类名那就删掉  无则加 
        $('div').toggleClass('wrap')

        
        $('.list>li').click(function(){
            // 移除li标签里面用only类名  
            $('.list>li').removeClass('only');

            // this指向你当前点击的这个元素   
            // $(this).addClass('only');
            $(this).toggleClass('only')
        })


        // 操作元素 添加样式   $('元素').css('属性','属性值')  写多个就直接继续后面用.css方法 麻烦 
        // $('p').css('color','pink').css('font-size','20px')

        // 快捷写多个属性 就写对象属性  
        $('p').css(
            {
            'width':'200px',
            'height':'300px',
            'background-color':'green'
            }
        )
     </script>
</body>
</html>

049a9a905a9a4ed4935c4c7142dc8a3c.png

7.元素的创建,添加,删除

1. 创建：使用$("标签语法")，返回创建好的元素

// 创建元素

let div = $("<div></div>");

// 设置内容和属性

div.html("动态创建").attr("id","d1").css("color","red");

let h1 = $("<h1 id='d1'>一级标题</h1>")

2. 作为子元素添加

// 在$obj的末尾添加子元素newObj

$obj.append(newObj);

// 作为第一个子元素添加至$obj中

$obj.prepend(newObj);

3. 作为兄弟元素添加

// 在$obj的后面添加兄弟元素

$obj.after(newObj);

// 在$obj的前面添加兄弟元素

$obj.before(newObj);

4. 移除元素

// 移除$obj

$obj.remove();  

示例代码：

<script>
        // 创建新的span标签 
        let span = $('<span></span>');

        
        // 添加到我的div标签里面   作为最后一个子元素添加  
        // $('div').append(span)

        // 作为第一个子元素进行添加 
        // $('div').prepend(span)


        // before() 作为同级元素进行插入  在前面插入 
        $('div').before(span)

        // after() 作为同级元素进行插入  在后面插入 
        $('div').after(span)

        // 设置内容  添加类名 颜色 
        span.html('我是刚刚新建的span标签').attr('class','text').css('color','green')
         
        // 删除元素
        $('div').remove()

      </script>

8.动画效果

1. 显示和隐藏

     show(speed,callback)/hide(speed,callback)

    - speed   可选。规定元素从隐藏到完全可见的速度。默认为 "0"。

    - callback   可选。show 函数执行完之后，要执行的函数

2. 通过使用滑动下拉和上推效果，显示隐藏的被选元素（ **只针对块元素** ）

     slideDown(speed,callback)/slideUp(speed,callback)

3. 通过使用淡隐淡现方式显示效果，显示隐藏的被选元素

     fadeOut(speed,callback)/fadeIn(speed,callback)

   

<!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>Document</title>
        <style>
            .box {
                width: 300px;
                height: 300px;
                background-color: skyblue;
            }
        </style>
    </head>

    <body>

        <div class="box"></div>
        <button class='btn1'>隐藏</button>

        <button class='btn2'>上推</button>

        <button class='btn3'>若隐</button>
        <script src='./jquery.js'></script>
        <script>
            $('.btn1').click(function () {
                // // 点击隐藏按钮 box盒子就隐藏 
                // $('.box').hide(1000,function(){
                //     // 隐藏之后  按钮的文字 替换成 显示 
                //     $('.btn1').text('显示')
                // })


                // 如果字是隐藏就执行隐藏功能  否则就执行显示   
                if ($('.btn1').text() === '隐藏') {
                    $('.box').hide(1000, function () {
                        // 隐藏之后  按钮的文字 替换成 显示 
                        $('.btn1').text('显示')
                    })
                } else {
                    // 不是就执行显示功能   
                    $('.box').show(1000, function () {
                        //显示状态下把文字 替换成 隐藏
                        $('.btn1').text('隐藏')
                    })
                }
            })


            // 上推和下拉效果  

            $('.btn2').click(function () {
                //slideUp上推方法 相当于把盒子高度 变为0 了 
                // $('.box').slideUp(1000, function () {
                //     $('.btn2').text('下拉')
                // })

                // 如果字按钮文字是上推就执行上推效果  
                if ($('.btn2').text() === '上推') {
                    $('.box').slideUp(1000, function () {
                        $('.btn2').text('下拉')
                    })
                } else {

                    // slideDown下拉方法
                    $('.box').slideDown(1000, function () {
                        $('.btn2').text('上推')
                    })
                }
            })

            //若隐若现效果
            $('.btn3').click(function () {
                // 如果字按钮文字是若隐就执行若隐效果  
                if ($('.btn3').text() === '若隐') {
                    // fadeOut若隐方法
                    $('.box').fadeOut(1000, function () {
                        $('.btn3').text('若现')
                    })
                } else {
                    // fadeIn若现方法
                    $('.box').fadeIn(1000, function () {
                        $('.btn3').text('若隐')
                    })
                }
            })
        </script>
    </body>

</html>

9.数据与对象遍历

1. $(selector).each() 方法规定为每个匹配元素规定运行的函数

    $(selector).each(function(index,element){})

    - *index* - 选择器的 index 位置

    - element - 当前的元素

2. $.each()函数是框架提供的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理。

    $.each(Object, function(index, data){});

    - *index* - 选择器的 index 位置

    - data- 当前的数据

10.jQuery事件处理

文档加载完毕原生JavaScript 方法：window.onload

$(function(){

  // 文档加载完毕后执行

})

区别：原生onload事件不能重复书写，会产生覆盖问题；jquery中对事件做了优化,可以重复书写ready方法,依次执行

$("div").on("click",function(){});

$("div").click(function(){});  

 

人生の三重奏
关注
Ajax和jQuery
weixin_56341892的博客
04-09 4356
Ajax和jQuery 一、Ajax 1、Ajax概述 ajax：Asynchronous JavaScript and XML（Asynchronous：异步的 JavaScript 和 XML）。 Asynchronous: 异步的意思 JavaScript：javascript脚本，在浏览器中执行 xml : 是一种数据格式 ajax是一种做局部刷新的方法，不是一种语言。 是浏览器客户端上的前端技术，是多个技术联合实现的产物。 ajax包含的技术主要有javascript，dom，css,，x
基于MVC用JSP/Servlet实现JPetStore——使用AJAX和jQuery改善用户体验
08-02
通过在JSP/Servlet实现的JPetStore项目中集成AJAX和jQuery，我们能够显著提升用户交互体验，实现无刷新的页面更新，优化数据传输，同时利用jQuery简化前端开发。这种改进不仅提高了应用的性能，也使得用户更容易理解...
jQuery基础——Ajax
m0_54066656的博客
09-03 1839
JQ中的ajax
前端技术——7——jQuery
kaoa000的专栏——非淡泊无以明志，非宁静无以致远
03-14 3073
jQuery是继prototype之后又一个JavaScript框架，是一个快速、简洁的JavaScript库，使用户能更方便的处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互；jQuery能够使用户的html页保持代码和内容分离，即不用再在html中插入一堆js来调用命令了，只需定义id即可。 什么是jQuery对象： jQuery对象就是通过jQuery包装DOM对象后产生的对象；jQuery对象是jQuery独有的，如果一个对象是jQuery对象，那么
前端学习——Ajax的使用
Indra_ran的博客
03-21 1869
Ajax 一、JSON格式 本质上是一个字符串，是作为数据交换的格式。主要是用于前后端数据交互 json可以是对象，数组，字符串， <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> </style> </head>
前端技术(六)—— AJAX详解
kejizhentan的博客
09-01 1781
ajax详解
Web前端——JQuery 基础
硝酸童不酸的博客
09-29 1183
jquery基础知识
前端学习——初识jQuery
qq_64133626的博客
09-03 332
1、jQuery 介绍即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我主要学习的就是jQuery。
前端——jQuery
Y_jun1004的博客
10-09 258
jquery
Web前端——正则表达式和 jQuery
硝酸童不酸的博客
10-04 401
正则表达式简单知识点
Web前端开发技术（JQuery+Ajax）——第二章 JQuery基础知识
m0_62096596的博客
03-16 201
Web前端开发技术（JQuery+Ajax）——第二章 JQuery基础知识
ASP.NET源码——使用Ajax和Jquery实现GridView的展开 合并源码.zip
10-10
在本示例中，我们关注的是如何利用Ajax和Jquery技术来实现GridView控件的展开与合并功能。GridView是ASP.NET中常用的数据绑定控件，它能够方便地展示和操作数据集。 Ajax（Asynchronous JavaScript and XML）技术...
基于MVC用JSPServlet实现JPetStore实验报告+使用AJAX和jQuery改善用户体验实验报告.doc
12-10
在本实验报告中，我们将探讨如何使用MVC（Model-View-...通过实践，学生能够更好地理解Web应用的开发流程，掌握Java后端服务的编写，以及前端与后端的交互方式，同时体验到AJAX和jQuery在提升Web应用性能上的优势。
前端经典——ajax前后数据交互.rar
11-29
9. jQuery和现代库的Ajax：jQuery简化了Ajax的使用，提供了$.ajax()、$.get()、$.post()等函数。现在，Fetch API和Promises已成为现代前端的首选，它们提供了更简洁、易用的异步编程模型。 10. 轮询与长连接：除了...
登录功能开发 P167重点
最新发布
2303_81204446的博客
09-30 114
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Webpack 打包后文件过大，如何优化？
官方推荐
09-30 1607
Webpack 打包后文件过大，如何优化？
Web认识 -- 第一课
ZxVSaccount的博客
09-30 691
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
前端规范工程-2：JS代码规范（Prettier + ESLint）
Vinca@的博客
09-26 690
Prettier 主要关注代码的格式，而 ESLint 则关注代码的质量和规范。结合使用这两个工具，可以极大地提高代码的可读性和维护性，同时减少潜在的错误和不一致性。
前端面试经验总结2(经典问题篇)
rita_0567的博客
09-28 855
因为计算机技术的快速发展，所以程序员如果不能保持对技术的持续性学习，会更容易的被淘汰，我从来不觉得程序员是一个轻松的职业，但是程序员是我最热爱的职业，我做好了充足的准备让自己能够长期在前端行业深耕。既要扩充自己的知识宽度，同时又不要一味的追求学习的东西越多越来，今天学两天这个，明天学两天那个，工作中又没有得到使用的话，很快也都会忘记的。了解，贵公司主要是在xxx行业从事xxx业务，贵公司所处的行业是我非常看好的，我感觉贵公司的氛围我很喜欢，比如xxxx。遇到了哪些挑战，我如何在不利的条件下成长起来的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值