前端——Ajax和jQuery

钜形不锈钢水箱  金牌会员 | 2024-10-2 12:36:00 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 824|帖子 824|积分 2472

一、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")
  dd
    匹配奇数下标对应的元素
  :even
    匹配偶数下标对应的元素
  :eq(index)
    匹配指定下标的元素
  :lt(index)
    匹配下标小于index的元素
  :gt(index)
    匹配下标大于index的元素
  :not(选择器)
    否定筛选,除()中选择器外,其他元素
  示例代码：
  1. <script>
  2.         // jQuery 是 JavaScript的工具库   对原生js代码中方法 进行封装  dom操作  事件处理   包含数据处理和ajax技术等进行了封装   提供了完善的更加简单的方法   
  3.         
  4.         // 直接 使用 $() 来获取元素  
  5.         console.log($('box')); // 返回结果是JQuery对象  
  7.         // JQuery对象 转为原生js对象  
  8.         // let box =$('.box')[0];
  9.         // console.log(box);
  10.         // 或者
  11.         let box =$('.box').get(0);
  12.         console.log(box);
  14.         // 通过.css修改文字颜色  
  15.         $('.box').css('color','red')
  17.     </script>
复制代码
4.操纵元素内容

   // 设置或读取标签内容,等价于原生innerHTML,可识别标签语法
  html()
  // 设置或读取标签内容,等价于innerText,不能识别标签
  text()
  // 设置或读取表单位素的值,等价于原生value属性
  val()
  示例代码：
  1. <script src='./jquery.js'></script>
  2.      <script>
  3.         // html()等价于  原生 innerHTML 可识别标签  
  4.           $('.wrap').html('<h2>明天星期五了</h2>')
  6.         // 插入文本
  7.         $('p').text('搞学习了')
  9.         // 原生js  读取input控件里面的值 直接.value   
  10.         // console.log(inp.value);
  12.         //jquery版获取表单控件里面的内容
  13.         console.log($('input').val());
  15.         // 点击button按钮 把我在input输入框的内容  弹出来
  16.         $('button').click(function(){
  17.             console.log($('input').val());
  18.         })
  19.      </script>
复制代码
5.操纵标签属性

   1. attr("attrName","value")
      设置或读取标签属性
  2. prop("attrName","value")
      设置或读取标签属性
      留意 :在设置或读取元素属性时,attr()和prop()根本没有区别;但是在读取或设置表单位素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写
  3. removeAttr("attrName")
      移除指定属性
  示例代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.         <title>Document</title>
  9.     </head>
  11.     <body>
  12.         <!-- <input type="text" name='你好' id='check'> -->
  14.         <input type="checkbox" name='你好' id='check'>
  16.         <input type="submit" id='sub'>
  18.         <img  alt="你图片没了" src="https://img2.baidu.com/it/u=2425084553,971201481&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
  19.         <script src='./jquery.js'></script>
  20.         <script>
  21.             // 设置读取标签的属性  
  22.             console.log($('#check').attr('name'));//读取这个标签的name属性
  24.             // 给 value属性 设置了内容: 我输入了什么
  25.             //    console.log($('#check').attr('value','我输入了什么'));
  27.             //prop 读取或设置属性  
  28.             //    alert($('#check').prop('value'))
  30.             //attr 读取或设置属性  
  31.             //    alert($('#check').attr('value'))
  33.             $('#sub').click(function () {
  34.                 // 会监听你的点击状态
  35.                 // alert($('#check').prop('value'))//on表示选中
  37.                 // alert($('#check').attr('value'))//弹出  undefined 不会监听你按钮选中状态
  38.             })
  40.             // 删除属性
  41.             $('img').removeAttr('src')
  42.         </script>
  43.     </body>
  45. </html>
复制代码
6.操纵标签样式

1. 针对类选择器,提供操纵class属性值的方法
   // 添加指定的类名
  addClass("className")
  // 移除指定的类型,如果参数省略,表示清空class属性值
  removeClass("className")
  // 如果当前元素存在指定类名,则移除;不存在则添加
  toggleClass("className")
  2. 操纵行内样式
   // 设置行内样式
  css("属性名","属性值")  
  // 设置一组CSS样式
  css(对象)
  示例代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         *{
  10.             margin: 0px;
  11.             padding: 0px;
  12.             list-style: none;
  13.         }
  14.         .box{
  15.             width: 300px;
  16.             height: 300px;
  17.             background-color: orange;
  18.         }
  20.         .wrap{
  21.             background-color: pink;
  22.         }
  24.         .list{
  25.           width: 400px;
  26.           height: 80px;
  27.           background-color: pink;
  28.           margin: auto;
  29.         }
  30.         .list>li{
  31.             float: left;
  32.             width: 100px;
  33.             height: 80px;
  34.             background-color: gray;
  35.             color: orange;
  36.             text-align: center;
  37.             line-height: 80px;
  38.             /* 变成小手 */
  39.             cursor: pointer;
  40.         }
  41.         .list>.only{
  42.             background-color:  #096;
  43.         }
  44.     </style>
  45. </head>
  46. <body>
  47.      <div class='text wrap'></div>
  49.      <ul class='list'>
  50.         <li>英雄联盟</li>
  51.         <li>王者荣耀</li>
  52.         <li>永劫无间</li>
  53.         <li class='only'>原神</li>
  54.      </ul>
  57.      <p>我是文本标签</p>
  58.      <script src='./jquery.js'></script>
  59.      <script>
  60.         // 添加指定类名  
  61.         $('div').addClass('box')
  63.         //删除指定类名    如果参数忽略不写 那就清空class属性值  
  64.         // $('div').removeClass()
  66.         // 如果当前标签有这个类名那就删掉  无则加
  67.         $('div').toggleClass('wrap')
  69.         
  70.         $('.list>li').click(function(){
  71.             // 移除li标签里面用only类名  
  72.             $('.list>li').removeClass('only');
  74.             // this指向你当前点击的这个元素   
  75.             // $(this).addClass('only');
  76.             $(this).toggleClass('only')
  77.         })
  80.         // 操作元素 添加样式   $('元素').css('属性','属性值')  写多个就直接继续后面用.css方法 麻烦
  81.         // $('p').css('color','pink').css('font-size','20px')
  83.         // 快捷写多个属性 就写对象属性  
  84.         $('p').css(
  85.             {
  86.             'width':'200px',
  87.             'height':'300px',
  88.             'background-color':'green'
  89.             }
  90.         )
  91.      </script>
  92. </body>
  93. </html>
复制代码


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();  
  示例代码：
  1. <script>
  2.         // 创建新的span标签
  3.         let span = $('<span></span>');
  5.         
  6.         // 添加到我的div标签里面   作为最后一个子元素添加  
  7.         // $('div').append(span)
  9.         // 作为第一个子元素进行添加
  10.         // $('div').prepend(span)
  13.         // before() 作为同级元素进行插入  在前面插入
  14.         $('div').before(span)
  16.         // after() 作为同级元素进行插入  在后面插入
  17.         $('div').after(span)
  19.         // 设置内容  添加类名 颜色
  20.         span.html('我是刚刚新建的span标签').attr('class','text').css('color','green')
  21.          
  22.         // 删除元素
  23.         $('div').remove()
  25.       </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)
     
  1. <!DOCTYPE html>
  2. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.         <title>Document</title>
  9.         <style>
  10.             .box {
  11.                 width: 300px;
  12.                 height: 300px;
  13.                 background-color: skyblue;
  14.             }
  15.         </style>
  16.     </head>
  18.     <body>
  20.         <div class="box"></div>
  21.         <button class='btn1'>隐藏</button>
  23.         <button class='btn2'>上推</button>
  25.         <button class='btn3'>若隐</button>
  26.         <script src='./jquery.js'></script>
  27.         <script>
  28.             $('.btn1').click(function () {
  29.                 // // 点击隐藏按钮 box盒子就隐藏
  30.                 // $('.box').hide(1000,function(){
  31.                 //     // 隐藏之后  按钮的文字 替换成 显示
  32.                 //     $('.btn1').text('显示')
  33.                 // })
  36.                 // 如果字是隐藏就执行隐藏功能  否则就执行显示   
  37.                 if ($('.btn1').text() === '隐藏') {
  38.                     $('.box').hide(1000, function () {
  39.                         // 隐藏之后  按钮的文字 替换成 显示
  40.                         $('.btn1').text('显示')
  41.                     })
  42.                 } else {
  43.                     // 不是就执行显示功能   
  44.                     $('.box').show(1000, function () {
  45.                         //显示状态下把文字 替换成 隐藏
  46.                         $('.btn1').text('隐藏')
  47.                     })
  48.                 }
  49.             })
  52.             // 上推和下拉效果  
  54.             $('.btn2').click(function () {
  55.                 //slideUp上推方法 相当于把盒子高度 变为0 了
  56.                 // $('.box').slideUp(1000, function () {
  57.                 //     $('.btn2').text('下拉')
  58.                 // })
  60.                 // 如果字按钮文字是上推就执行上推效果  
  61.                 if ($('.btn2').text() === '上推') {
  62.                     $('.box').slideUp(1000, function () {
  63.                         $('.btn2').text('下拉')
  64.                     })
  65.                 } else {
  67.                     // slideDown下拉方法
  68.                     $('.box').slideDown(1000, function () {
  69.                         $('.btn2').text('上推')
  70.                     })
  71.                 }
  72.             })
  74.             //若隐若现效果
  75.             $('.btn3').click(function () {
  76.                 // 如果字按钮文字是若隐就执行若隐效果  
  77.                 if ($('.btn3').text() === '若隐') {
  78.                     // fadeOut若隐方法
  79.                     $('.box').fadeOut(1000, function () {
  80.                         $('.btn3').text('若现')
  81.                     })
  82.                 } else {
  83.                     // fadeIn若现方法
  84.                     $('.box').fadeIn(1000, function () {
  85.                         $('.btn3').text('若隐')
  86.                     })
  87.                 }
  88.             })
  89.         </script>
  90.     </body>
  92. </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(){});  
   

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

钜形不锈钢水箱

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表