一文玩转jQuery+Ajax

岳泽以

发布于 2023-04-27 19:31:06

4K0

发布于 2023-04-27 19:31:06

文章被收录于专栏：岳泽以博客岳泽以博客

开始

简介：jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

官网：https://jquery.com/download/

下载：https://code.jquery.com/jquery-3.6.4.js （打开后右击另存为）

本地使用：

<script src="/jquery-3.6.4.js"></script>

CDN引入：

<script sr="https://cdn.staticfile.org/jquery/3.6.4/jquery.min.js"></script>

核心：$ 符号在jQuery中代表对jQuery的引用。

jQuery对象

原始的DOM对象只有DOM接口提供的方法和属性，通过js代码获取的对象都是DOM对象。

而通过jQuery获取的对象是jQuery包装集对象，简称jQuery对象，只有jQuery对象才能使用jQuery提供的方法。

DOM对象转jQuery对象

  /* DOM对象 */
  var divDom = document.getElementById("mydiv")
  console.log(divDom);
  // DOM对象转Jquery对象
  var divDomToJquery = $(divDom)
  console.log(divDomToJquery);

jQuery对象转DOM对象

获取包装集对象中指定下标的元素，将jQuery转成DOM元素

  /* jQuery对象 */
  // 通过id选择器获取元素对象 $(#id属性值)
  var divJquery = $("#mydiv")
  console.log(divJquery);
  // jquery对象转DOM对象
  var JqueryToDom = divJquery[0];
  console.log(JqueryToDom);

jQuery选择器

jQuery选择器按照功能主要分为选择和过滤，并且是配合使用的，基础选择器掌握即可，其他用到查询。

基础选择器

选择器	写法举例	说明
ID选择器	$("#mydiv")	选择id为mydiv的元素
元素选择器	$("div")	选择所有的div元素
类选择器	$(".blue")	选择所有class为blue的元素
通用选择器	$("*")	选择页面所有元素
组合选择器	$("#mydiv,span,.blue")	同时选中多个选择器匹配的元素

<!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>
  <div id="mydiv1">ID选择器</div>
  <span>元素选择器</span>
  <div class="mydiv2">类选择器</div>

</body>
<!-- 在需要使用jQuery的页面引入jQuery核心js文件 -->
<script src="jquery-3.6.4.js"></script>

<script>
  /* id选择器 */
  var mydivid = $("#mydiv1")
  console.log(mydivid);

  /* 元素选择器 */
  var Jspan = $("span")
  console.log(Jspan);

  /* 类选择器 */
  var mydivclass = $(".mydiv2")
  console.log(mydivclass);

  /* 组合选择器 */
  var zuhe = $("#mydiv1,span,.mydiv2")
  console.log(zuhe);

  /* 通用选择器 */
  var all = $("*")
  console.log(all);
</script>

</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">
  <title>Document</title>
  <style>
    .testColor {
      background: green;
    }

    .gray {
      background: gray;
    }
  </style>
</head>

<body>
  <div id="parent">层次选择器
    <!-- 第一个大DIV包含一个div和俩个图片 -->
    <div id="child" class="testColor">父选择器
      <div class="gray">子选择器</div>
      <img src="https://pic.zeyiwl.cn/yunimg/202304171028533.jpg" alt="" width="200" height="200">
      <img src="https://pic.zeyiwl.cn/yunimg/202304171028533.jpg" alt="" width="200" height="200">
    </div>
    <!-- 第二个大DIV包含一个div -->
    <div>
      选择器2
      <div>选择器2中的div</div>
    </div>

  </div>
</body>
<!-- 在需要使用jQuery的页面引入jQuery核心js文件 -->
<script src="jquery-3.6.4.js"></script>
<script>
  // 后代选择器
  var hd = $("#parent div")
  console.log(hd);//四个div

  // 子代选择器
  var zd = $("#parent > div")
  console.log(zd);//俩个div

  // 相邻选择器 他一定找的是挨着的元素
  var xl = $("#child + div")
  console.log(xl);

  // 同辈选择器
  var tb = $(".gray ~ img")
  console.log(tb);//俩个img
</script>

</html>

表单选择器

Forms	举例	说明
表单选择器	$(":input")	查找所有的input元素，会匹配input、textarea、select和button元素
文本框选择器	$(":text")	查找所有文本框
密码框选择器	$(":passwor")	查找所有密码框
单选按钮选择器	$(":radio")	查找所有的单选按钮
复选框选择器	$(":checkbox")	查找所有的复选框
提交按钮选择器	$(":submit")	查找所有的提交按钮
图像域选择器	$(":image")	查找所有的图像域
重置按钮选择器	$(":reset")	查找所有的重置按钮
按钮选择器	$(":button")	查找所有的按钮
文件域选择器	$(":file")	查找所有的文件域

<!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>
  <form id="myform" name="myform" action="" method="post">
    <input type="hidden" name="uno" value="9999" disabled="disabled">
    姓名：<input type="text" id="uname" name="uname"><br />
    密码：<input type="password" id="upwd" name="upwd" value="123456"><br />
    年龄：<input type="raido" name="uage" value="0" checked="checked">小孩子
    <input type="radio" name="uage" value="1"><br />
    爱好：<br />
    <input type="checkbox" name="ufav" value="篮球">篮球<br />
    <input type="checkbox" name="ufav" value="足球">足球<br />
    <input type="checkbox" name="ufav" value="读书">读书<br />
    来自：<select name="ufrom" id="ufrom">
      <option value="-1" selected>请选择</option>
      <option value="0">北京</option>
      <option value="1">上海</option>
    </select><br />
    简介：<textarea name="uintro" id="" cols="30" rows="10"></textarea><br />
    头像：<input type="file">
    <input type="image" src="https://pic.zeyiwl.cn/yunimg/202304171028533.jpg" width="20" height="20"><br />
    <button type="submit" onclick="return chechkForm()">提交</button>
    <button type="reset">重置</button>
  </form>

</body>
<!-- 在需要使用jQuery的页面引入jQuery核心js文件 -->
<script src="jquery-3.6.4.js"></script>

<script>
  var input = $(":input")
  console.log(input);//14
  // 文本框选择器
  var text = $(":text")
  console.log(text);//1

  // 复选框选择器
  var check = $(":checkbox")
  console.log(check);//3

  //文件域选择器
  var filen = $(":file")
  console.log(filen);//1
</script>

</html>

jquery Dom操作

jQuery也提供了对HTML节点的操作，而且在原生的基础上进行了优化，使用起来更加方便。

操作元素的属性

固有属性：元素本身就有的属性(id、name、class、style)

返回值是Boolean的属性：checked、selected、disabled

自定义属性：用户自定义的属性

方法	举例	说明
attr(属性名称)	attr('checked')或attr('name')	获取指定的属性值，操作checkbox时，选中返回checked，没有选中返回undefined
prop(属性名称)	prop('checked')	获取具有true和false俩个属性的属性值

区别：

如果是固有属性，attr()和prop()均可获取
如果是自定义属性，attr()可获取，prop()不可获取
如果返回值是布尔类型的属性，若设置了属性，attr()返回具体的值，prop()返回true。若未设置属性，attr()返回undefined，prop()返回false

总结：如果属性的类型是boolean，则使用prop()方法，否则使用attr()方法。

<!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>
  <form action="" id="myform">
    <input type="checkbox" name="ch" id="aa" abc="aabbcc" checked="checked">aa
    <input type="checkbox" name="ch" id="bb">bb
  </form>

</body>
<!-- 在需要使用jQuery的页面引入jQuery核心js文件 -->
<script src="jquery-3.6.4.js"></script>
<script>
  /* 获取属性 */
  // attr("属性名")
  var name = $("#aa").attr("name")
  console.log(name);//ch
  // prop
  var name2 = $("#aa").prop("name")
  console.log(name2);//ch

  // 返回值是布尔的属性(元素设置了属性)
  var ck1 = $("#aa").attr("checked")
  var ck2 = $("#aa").prop("checked")
  console.log(ck1);//checked
  console.log(ck2);//true

  // 返回值是布尔的属性(元素未设置属性)
  var ck3 = $("#bb").attr("checked")
  var ck4 = $("#bb").prop("checked")
  console.log(ck3);//undefined
  console.log(ck4);//false

  // 自定义属性
  var ck5 = $("#aa").attr("abc")
  var ck6 = $("#aa").prop("abc")
  console.log(ck5);//aabbcc
  console.log(ck6);//undefined


  /* 设置属性 */
  //固有属性
  $("#aa").attr("value", "1");
  $("#bb").prop("value", "2");

  //返回值是Boolean的属性
  $("#bb").attr("checked", "checked");
  $("#bb").prop("checked", false)

  // 自定义属性
  $("#aa").attr("uname", "admin");
  $("#aa").prop("uage", 1)//无法操作


  /* 移除属性 */
  $("#aa").removeAttr("checked")

</script>

</html>

操作元素的样式

对于元素的样式，也是一种属性，由于样式用得特别多，所以对于样式除了当作属性处理外还可以有专门的方法进行处理。

方法	说明
attr("class")	获取class属性的值，即样式名称
attr("class","样式名")	修改class属性的值，修改样式
addClass("样式名")	添加样式名称
css()	添加具体的样式
removeClass(class)	移除样式名称

<!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>
    div {
      padding: 8px;
      width: 180px;
    }

    .blue {
      background: blue;
    }

    .larger {
      font-size: 30px;
    }

    .green {
      background: green;
    }
  </style>
</head>

<body>
  <h3>设置元素样式</h3>
  <div id="conBlue" class="blue larger">蓝色</div>
  <div id="conRed">大红色</div>
  <div id="remove" class="blue">蓝色</div>
</body>
<script src="jquery-3.6.4.js"></script>

<script>
  //attr("class") 获取元素样式名
  var cla = $("#conBlue").attr("class")
  console.log(cla);//blue larger

  //attr("class",样式名) 修改样式（会覆盖）
  $("#conBlue").attr("class", "green")

  //addClass("样式名") 添加样式(在原来的样式基础上添加样式，原来的样式保留，如果相同以后定义为准)
  $("#conBlue").addClass("larger")


  /* css()
            css("具体样式名", "样式值")设置单个 
            css({"具体样式名":"样式值","具体样式名":"样式值"})设置多个 */
  $("#conRed").css("font-size", "40px")
  $("#conRed").css({ "font-family": "楷体", "color": "red" })

  //removeClass("样式名") 移除样式
  $("#remove").removeClass("blue")

</script>

</html>

操作元素的内容

对于元素还可以操作其中的内容，例如文本、值，甚至是html。

方法	说明
html()	获取元素的html内容（非表单元素）
html("html,内容")	设置元素的html内容（非表单元素）
text()	获取元素的文本内容，不包含html标签
text("text 内容")	设置元素的文本内容，不包含html标签
val()	获取元素的value值（表单元素）
val("值")	设定元素的value值（表单元素）

表单元素：文本框text、密码框password、单选框radio、隐藏域hidden等

非表单元素：div、span、h1~h6、table、tr、td、li、p等等

<!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>
  <h3><span>html()和text()方法设置元素内容</span></h3>
  <div id="html1"></div>
  <div id="html2"></div>
  <div id="text1"></div>
  <div id="text2"></div>
  <input type="text" id="ok" name="uname" value="岳泽以">
</body>
<script src="jquery-3.6.4.js"></script>

<script>

  // html()
  $("#html1").html("<h2>上海</h2>")
  $("#html2").html("上海")

  var html1 = $("#html1").html();
  var html2 = $("#html2").html();
  console.log(html1);
  console.log(html2);

  // text()
  $("#text1").text("北京")
  $("#text2").text("<h2>北京</h2>")

  var text1 = $("#text1").text()
  var text2 = $("#text2").text()
  console.log(text1);
  console.log(text2);

  // val()
  var val = $("#ok").val()
  console.log(val);
  // val设置值
  $("#ok").val("岳泽以学习笔记")

</script>

</html>

创建元素和添加元素

创建元素直接使用核心函数即可

$('<p>岳泽以学习笔记</p>');

添加元素可以使用以下方法：

方法	说明
prepend(content)	在指定元素内部最前面追加内容，被追加的内容，可以是字符、HTML元素标记。
$(content).prependTo(selector)	把内容追加到selector元素最前面，内容可以是字符、HTML元素标记。
append(content)	在指定元素内部的结尾插入元素或内容，被追加的内容可以是字符、HTML元素标记。
$(content).appendTo(selector)	把内容插入selector元素内，默认是在尾部
before()	在元素前插入指定的元素或内容：$(selector).before(content)
after()	在元素后插入指定的元素或内容：$(selector).after(content)

<!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>
    div {
      margin: 10px 0px;
    }

    span {
      color: white;
      padding: 8px;
    }

    .red {
      background-color: red;
    }

    .blue {
      background-color: blue;
    }

    .green {
      background-color: green;
    }

    .pink {
      background-color: pink;
    }

    .gray {
      background-color: gray;
    }
  </style>
</head>

<body>
  <h3>prepend()</h3>
  <h3>prependTO()</h3>
  <h3>append()</h3>
  <h3>appendTo()</h3>

  <span class="red">我</span>
  <span class="blue">你</span>

  <div class="green">
    <span>他</span>
  </div>
</body>
<script src="jquery-3.6.4.js"></script>

<script>
  /* 创建元素 */
  var p = "<p>创建岳泽以文本</p>";
  console.log(p);
  // 转为jQuery包装集
  console.log($(p));

  /* 添加元素 */
  //如果元素本身不存在，先创建元素再追加，会将元素追加到指定位置
  //prepend  得到指定元素，并在元素内部最前面追加内容
  var span1 = "<span>岳泽以是</span>"
  $(".green").prepend(span1)
  var span2 = "<span>岳泽以还是</span>"
  $(span2).prependTo($(".green"))

  //append 得到指定元素，并在元素内部最后面追加内容
  var span3 = "<span>是岳泽以</span>"
  $(".green").prepend(span3)
  var span4 = "<span>还是岳泽以</span>"
  $(span4).prependTo($(".green"))

  //如果元素本身存在，会将原来元素直接剪切追加到指定位置
  $(".green").prepend($(".red"))


  // 同级追加
  var sp1 = "<span class='pink'>粉色的</span>";
  var sp2 = "<span class='gray'>灰色的</span>";

  $(".blue").before(sp1);
  $(".blue").after(sp2);

</script>

</html>

删除元素

方法	说明
remove()	删除所选元素或指定的子元素，包括整个标签和内容一起删
empty()	清空所选元素的内容

<!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>
    span {
      color: white;
      padding: 8px;
      margin: 5px;
      float: left;
    }

    .green {
      background-color: green;
    }

    .blue {
      background-color: blue;
    }

    .purprle {
      background-color: purple;
    }
  </style>
</head>

<body>
  <h3>删除元素</h3>
  <span class="green">jquery <a>删除</a> </span>
  <span class="blue">html</span>
  <span class="green">http</span>
  <span class="blue">vue</span>
</body>
<script src="jquery-3.6.4.js"></script>
<script>
  //删除元素
  $(".green").remove();
  // 清空元素
  $(".blue").empty();
</script>


</html>

遍历元素

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

function：为遍历时的回调函数

index：遍历元素的序列号，从0开始

element：当前的元素，此时是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">
  <title>Document</title>
  <style>
    span {
      color: white;
      padding: 8px;
      margin: 5px;
      float: left;
    }

    .green {
      background-color: green;
    }

    .blue {
      background-color: blue;
    }
  </style>
</head>

<body>
  <span class="green">jquery <a>删除</a> </span>
  <span class="blue">html</span>
  <span class="green">http</span>
  <span class="blue">vue</span>
</body>
<script src="jquery-3.6.4.js"></script>
<script>
  // 获取指定元素并遍历
  $(".green").each(function (i, e) {
    console.log(i);
    console.log(e);
    console.log($(this));
  })
</script>

</html>

jQuery事件

ready加载事件

预加载事件，当页面的DOM结构加载完毕后再执行。

ready()类似于onLoad()事件

ready()可以写多个，按顺序执行

$(document).ready(function(){})
//等价于
$(function(){})

bind()绑定事件

为指定元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$(selector).bind(eventType[,eventData],handler(eventObject))

eventType：是一个字符串类型的事件类型，也就是要绑定的事件。

[,eventData]：传递的参数，格式：{名:值,名2:值2}

handler(eventObject)：该事件触发执行的函数

<!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>
  <h3>bind()绑定事件</h3>
  <div id="test" style="cursor: pointer;">点击查看名言</div>
  <input type="button" id="btntest" value="点击不可用">

  <button type="button" id="btn1">按钮1</button>
  <button type="button" id="btn2">按钮2</button>
  <button type="button" id="btn3">按钮3</button>
  <button type="button" id="btn4">按钮4</button>
</body>
<script src="jquery-3.6.4.js"></script>
<script>
  // bind()绑定单个事件
  $("#test").bind("click", function () {
    console.log("生活才是一个人的全部");
  })

  // 原生js绑定
  document.getElementById("test").onclick = function () {
    console.log('原生绑定');
  }

  // 直接绑定
  $("#btntest").click(function () {
    // 禁用按钮
    console.log(this);
    $(this).prop("disabled", true);
  })

  /*   1.bind多个事件绑定同一个函数
    指定元素.bind("事件类型1 事件类型2 ..",function(){}) 
  */
  $("#btn1").bind("click mouseout", function () {
    console.log("按钮1绑定了click和mouseout事件");
  })


  /*   2.bind为一个元素绑定多个事件，并设置对应函数
       指定元素.bind("事件类型1",function(){}).bind("事件类型2",function(){}) 
  */
  $("#btn2").bind("click", function () {
    console.log("按钮2被点击");
  }).bind("mouseout", function () {
    console.log("按钮2离开了");
  })

  /*
  3.为元素绑定多个事件，并设置对应的函数
  指定元素.bind({
    "事件类型1":function(){

    },
    "事件类型2":function(){

    }
  })
  */
  $("#btn3").bind({
    "click": function () {
      console.log("按钮3被点击了");
    },
    "mouseout": function () {
      console.log("按钮3离开了");
    }
  })

  /*
  4.直接绑定
  指定元素.事件名(function(){}).事件名(function(){})
  */

  $("#btn4").click(function () {
    console.log("按钮4被点击了");
  }).mouseout(function () {
    console.log("按钮4离开了");
  })
</script>

</html>

jQuery Ajax

$.ajax

Ajax是一种异步无刷新技术。

jQuery调用ajax()方法：

  $.ajax({
    type: 请求方式GET / post,
    url: 请求地址url,
    async: 是否异步, 默认是true表示异步,
    data: 发送到服务器的数据,
    dataType: 预期服务器返回的数据类型,
    contentType: 设置请求头,
    success: 请求成功时调用此函数,
    error: 请求失败时调用此函数
  })

<!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>
  <button type="button" id="btn">查询数据</button>
</body>
<script src="jquery-3.6.4.js"></script>

<script>
  // 点击按钮，发送ajax请求，显示数据到页面
  $("#btn").click(function () {
    $.ajax({
      type: "get",//请求方式
      url: "data.txt",//请求地址
      data: {
        //请求数据，json对象
        /*       uname: "岳泽以",
              password: "123456", */
        //如果没有参数，则不需要设置
      },
      dataType: "json",//预期返回的数据类型 如果是json格式，在接收到返回值时会自动封装成json对象
      //请求成功调用函数
      success: function (data) {//data是一个形参名，代表的是返回的数据
        console.log(data);
        // 将字符串转成json对象，如果设置预期返回数据类型此处不用转
        // var obj = JSON.parse(data);
        // console.log(obj);
        var ul = $("<ul></ul>");
        //遍历返回的数组
        for (var i = 0; i < data.length; i++) {
          //得到数组中每一个元素
          var nav = data[i];
          var li = "<li>" + nav.navname + "</li>";
          ul.append(li);
        }
        console.log(ul);
        //将ul设置到body标签中
        $("body").append(ul)
      },
      // error: 请求失败时调用此函数
    })
  })

</script>

</html>

$.get

简单的GET请求功能以取代复杂的$.ajax，请求成功时可调用回调函数。

发送请求，没有参数，没有返回值

$.get("请求地址")

发送请求，传递参数，没有返回值

$.get('请求地址'，{name:"岳泽以",age:25})

发送请求，不传参数，有返回值

$.get('请求地址',function(data){
    console.log(data)
})

发送请求，传递参数，拿到返回值

$.get('请求地址',{name:'岳泽以',age:25},function(data){
    console.log(data)
})

$.post

发送请求，没有参数，没有返回值

$.post("请求地址")

发送请求，传递参数，没有返回值

$.post('请求地址'，{name:"岳泽以",age:25})

发送请求，不传参数，有返回值

$.post('请求地址',function(data){
    console.log(data)
})

发送请求，传递参数，拿到返回值

$.post('请求地址',{name:'岳泽以',age:25},function(data){
    console.log(data)
})

$.getJSON

使用语法和以上相同，但getJSON方式要求返回的数据格式满足JSON格式（JSON字符串）

  // $.get方式
  $.get('data.txt', function (data) {
    console.log("$.get返回的数据：");
    console.log(data);
  })

  // $.getJSON方式
  $.getJSON('data.txt', function (data) {
    console.log("$.getJSON返回的数据：");
    console.log(data);
  })

返回数据如下：