SqlServer前端——Ajax和jQuery - Powered by Discuz! Archiver

钜形不锈钢水箱 发表于 2024-10-2 12:36:00

前端——Ajax和jQuery

一、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");
- 方法二 : 利用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');
   // 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="checkbox" name='你好' id='check'>

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

   <imgalt="你图片没了" 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> https://i-blog.csdnimg.cn/direct/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(){});

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

页: [1]

ToB企服应用市场:ToB评测及商务社交产业平台's Archiver

前端——Ajax和jQuery