JQuery

JQuery
- 1.JQuery内容
- 2. JQuery对象
- - 2.1.Jquery的下载与安装
  - - 2.1.1.下载
    - 2.1.3.优点
    - 2.1.4.安装
  - 2.2.Jquery核心
  - 2.3.Dom对象与Jquery包装集对象
  - - 2.3.1 javascript中获取Dom对象，Dom对象只有有限的属性和方法：
    - 2.3.2.Jqueryt包装集对象
    - 2.3.3.Dom对象转Jquery对象
    - 2.3.4.Jqueryi对象转Dom对象
- 3.Jqueryi选择器
- - 3.1基础选择器
  - 3.2层次选择器
  - 3.3表单选择器
- 4.Jquery Dom操作
- - 4.1.操作元素的属性
  - - 4.1.1.获取属性
  - 4.2操作元素的样式
  - 4.3操作元素的内容
  - 4.4创建元素
  - 4.5 添加元素
  - 4.6删除元素
  - 4.7遍历元素
- 5.Jquery事件
- - 5.1 ready()加载事件
  - 5.2 绑定事件
  - - 5.2.1简单的bind()事件
    - 5.2.2绑定多个事件
- 6.Jquery Ajax
- - 6.1 $.Ajax
  - 6.2 .get和.get和.get和.post
  - 6.3 $.getJSON

1.JQuery内容

2. JQuery对象

jQuery是一套兼容多浏览器的javascript脚本库。核心理念是写得更少，做得更多，使用jQuery将极大的提高编写javascript代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅，更加健壮，“如虎添翼”。同时网络上丰富的jQuery插件也让我们的工作变成了"有了jQuery,一切so easy。"因为我们已经站在巨人的肩膀上了。

jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQueryi已经成为最流行的javascript框架，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。。

2.1.Jquery的下载与安装

2.1.1.下载

http://jquery.com下载

2.1.3.优点

(1)提供了强大的功能函数
(2)解决浏览器兼容性问题
(3)实现丰富的UI和插件
(4)纠正错误的脚本知识

年球非带事求

2.1.4.安装

在页面引入即可

<script src="js/jquery-3.4.1.js"type="text/javascript"></script>

2.2.Jquery核心

$符号在jQuery中代表对jQuery对象的引用。"jQuery"是核心对象。通过该对象可以获取jQuery对像，调用jQuery提供的方法等。只有jQuery对像才能调用jQuery提供的方法。

$ <==> jQuery

2.3.Dom对象与Jquery包装集对象

明确Dom对象和jQuery包装集的概念，将极大的加快我们的学习速度。原始的Dom对象只有DOM接口提供的方法和属性，通过js代码获取的对象都是do对象；而通过jQuery获取的对象是jQuery包装集对象，简称jQuery对像，只有jQuery对象才能使用jQuery提供的方法。

2.3.1 javascript中获取Dom对象，Dom对象只有有限的属性和方法：

 /*Dom对象*/var divDom = document.getElementById("mydiv");console.log(divDom);var divsDom = document.getElementsByTagName("div")console.log(divsDom)//js获取不存在的元素var spansDom = document.getElementsByTagName("span");console.log(spansDom);var spanDom = document.getElementById("myspan");console.log(spanDom);

2.3.2.Jqueryt包装集对象

可以说是Dom对象的扩充在jQuery的世界中将所有的对象，无论是一个还是一组，都封装成一个jQuery包装集，比如获取包含一个元素的jQuery包装集：

/*Jquery 对象 */
//通过id选择器获取元素  $("#id属性值")
var divJquery = $("#mydiv");
console.log(divJquery);
/*Jquery获取不存在元素*/
var jquerySpan = $("#myspan");
console.log(jquerySpan);

2.3.3.Dom对象转Jquery对象

Dom对象转为jQueryi对象，只需要利用$0方法进行包装即可

/*Dom对象 转Jquery对象*/
/*Dom对象转为jQueryi对象，只需要利用$（）方法进行包装即可*/
var divDomToJquery = $(divDom);
console.log(divDomToJquery);

2.3.4.Jqueryi对象转Dom对象

jQuery对象转Dom对象，只需要取数组中的元素即可

/*Jquery对象 转Dom对象*/
var jqueryDiv = jQuery('#mydiv');
var JqueryToDom = jqueryDiv[0];
console.log(JqueryToDom);

3.Jqueryi选择器

和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找定位元素，称为jQueryi选择器，选择器可以说是最考验一个人jQuery功力的地方，通俗的讲，Selector选择器就是”一个表示特殊语意的字符串"。只要把选择器字符串传入上面的方法中就能够选择不同的D0对象并且以jQuery包装集的形式返回。
jQuery选择器按照功能主要分为"选择"和"过滤"。并且是配合使用的，具体分类如下。基础选择器掌握即可，其他用到再查阅。

3.1基础选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>03-基础选择器.html</title>
</head>
<body><div id="mydiv1" class="blue">元素选择器</div><div id="mydiv2">id选择器1<span>span选中的内容</span></div><span class="blue">样式选择器</span>
</body>
<!--
基础选择器
id选择器     #id属性值         $("#id属性值")         选择id为指定值的元素对象（如果有多个同名id,
类选择器     .class属性值      $(".c1ass属性值")      选择c1ass为指定值的元素对象
元素选择器    标签名/元素名      $("标签名/元素名")      选择所有指定标签的元素对象通用选择器    *                $("*")                选择页面中所有的元素对象
组合选择器    选择器1，选择器2   $("选择器1，选择器2..")  选择指定选择器选中的元素对象
-->
<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">//id选择器         #id属性值var mydiv = $("#mydiv1");console.log(mydiv);//类选择器   var clas = $(".blue");console.log(clas);//元素选择器var element = $("span");console.log(element);//通用选择器var all = $("*");console.log(all);//组合选择器var group = $("#mydiv1",".blue","span");console.log(group);</script>
</html>

3.2层次选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<!--层次选择器后代选择器格式：父元素 指定元素（空格隔开）示例：$("父元素指定元素")选择父元素的所有指定元素(包含第一代、第二代等)子代选择器I格式：父元素>指定元素（大于号隔开示例：$(“父元素>指定元素“)选择父元素的所有第一代指定元素相邻选择器格式：元素+指定元素(加号隔开)示例：$("元素+指定元素")选择元素的下一个指定元素（只会查找下一个元素，如果元素不存在，则获取不到)同辈选择器格式：元素~指定元素(波浪号隔开)示例：$(“元素~指定元素")选择元素的下面的所有指定元素
-->
<body>
<div id="parent">层次择器<div id="child" c1ass="testColor">父选择器<div class="gray">子选择器</div><img src="http://www.baidu.com/img/bd_logo1.png"width="270" height="129"/><img src="http://www.baidu.com/img/bd_logo1.png"width="270" height="129"/></div><div>选择器2<div>选择器2中的div</div></div>
</div>
</body>
<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8"></script>
<script>//后代选择器var hd = $("#parent div");console.log(hd);//子代选择器var zd = $("#parent>div");console.log(zd);//相邻选择器var xl = $("#child+div");console.log(xl);//同辈选择器var imgs = $(".gray ~ img");console.log(imgs);
</script>
</html>

3.3表单选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单选择器</title>
</head>
<body>
<form id='myform' name="myform" 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="radio" name="uage" value="o" checked-="checked"/>小屁孩<input type="radio" name="uage" value="1"/>你懂得<br/>爱好：<input type="checkbox" name="ufav" value="篮球"/>篮球<input type="checkbox'" name="ufav" value="爬床"/>爬床<input type="checkbox'" name="ufav" value="代码"/>代码<br/>来自：<select id="ufrom" name="ufrom'"><option values="-l" selected="selected">请选择</option><option value-="0">北京</option><option value="1">上海</option>
</select><br/><textarea rows="10" cols="30" name="uintro"></textarea><br/>头像：<input type="file"/><br/><input type="image" src="http://www.baidu.com/img/bd_logo1.png"width="20" height="20"/><button type="submit" onclick="return checkForm();"></button><button type="reset">重置</button>
</form>
</body>
<!--表单选择器表单选择器       :input          查找所有的input元素：$(":input"):注意：会匹配所有的input、textarea、select和button元素。文本框选择器       :text密码框选择器       :password单选按钮选择器     :radio多选按钮选择器     :checkbox提交按纽选择器     :sunmit图像按钮选择器     :image重置按钮选择器     :reset文件域选择器       :file按钮选择器         :button
-->
<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">//表单选择器var inputs = $(":input");console.log(inputs);//元素选择器var inputs2 = $("input");console.log(inputs2);</script>
</html>

4.Jquery Dom操作

jQueryt也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点：删除节点：删除、添加、修改、设定节点的CSS样式等。注意：以下的操作方式只适用于jQuery对象。

4.1.操作元素的属性

4.1.1.获取属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>操作元素的属性</title>
</head><body>
<!--操作元素的属性属性的分类固有属性：元素本身就有的属性(id、name、class、style)返回值是boolean的属性：checked、selected、disabled自定义属性：用户自己定义的属性attr（）和prop（）的区别：1.如果是固有属性，attr（）和prop（）方法均可操作2.如果是自定义属性，attr（）可操作，prop（）不可操作3,如果是返回值是boolean类型的属性若设置了属性，attr（）返回具体的值，prop（）返回true若未设置属性，attr（）返回undefined,prop（）返回false;1.获取属性attr("属性名")prop("属性名")2.设置属性attr("属性名"，"属性值")prop("属性名"，"属性值")3,移除属性removeAttr("属性名")总结：如果属性的类型是boolean(checked,select,disabled),则使用prop()方法，否则使用attr()方法。
--><input type="checkbox" name="ch" checked="checked" id="aa" abc="aabbcc"/>aa<input type="checkbox" name="ch" id="bb"/>bb</body><script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8"></script><script type="text/javascript">/*获取属性*///固有属性var name = $("#aa").attr("name");console.log(name);var name2 = $("#aa").prop("name");console.log(name2);//返回值是boolean的属性(元素设置了属性的)var ck1 = $("#aa").attr("checked"); //checked  //返回设置的值console.log(ck1);var ck2 = $("#aa").prop("checked"); //true     //返回boolean值console.log(ck2);//返回值是boolean的属性(元素没有设置了属性的)var ck3 = $("#bb").attr("checked"); //undefinedconsole.log(ck3);var ck4 = $("#bb").prop("checked"); //falseconsole.log(ck4);//自定义属性var abc1 = $("#aa").attr("abc");   //aabbccvar abc2 = $("#aa").prop("abc");   //undefinedconsole.log(abc1);console.log(abc2);/*设置属性*///固有属性$("#aa").attr("value","1");$("#bb").attr("value","2");//返回值是boolean属性$("#bb").attr("checked","checked");$("#bb").prop("checked",false);//自定义属性$("#aa").attr("username","admin");$("#aa").prop("age","18");/*移除属性*/$("#aa").removeAttr("checked");</script>
</html>

4.2操作元素的样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>操作元素的样式</title><style type="text/css">div {padding: 8px;width: 180px;}.blue {background: blue;}.larger {font-size: 30px;}.pink{background-color: pink;}.green {background: green;}</style>
</head>
<body>
<!--操作元素的样式attr("class")             获取元素的样式名attr("class","样式名")     设置元素的样式(设置样式，原本的样式会被覆盖)addClass("样式名")         添加样式(在原来的样式基础上添加样式，原本的样式会被保留，如果出现相同的样式，则演示中后定义的会被保留)css()                     添加具体的样式（添加行内样式，优先级高）css("具体样式名"，"样式值");   设置单个样式css({"具体样式名":“样式值"，“具体样式名":“样式值"})；设置多个样式removeClass("样式名")      移除样式
-->
<h3>css()方法设置元素样式</h3>
<div id="conBlue" class="blue larger">天蓝色</div>
<div id="conRed">大红色</div>
<div id="remove" class="blue larger">天蓝色</div>
</body>
<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">//attr("class")     获取元素样式名var cls = $("#conBlue").attr("class");console.log(cls);//attr("class","样式名")   设置元素的样式$("#conBlue").attr("class","green")//addClass("样式名")     添加样式$("#conBlue").addClass("larger");$("#conBlue").addClass("pink");//css()     添加具体的样式（添加行内样式，优先级高）$("#conRed").css("font-size","40px");$("#conRed").css({"font-family":"楷体","color":"blue"});// removeClass("样式名")      移除样式$("#remove").removeClass("larger");
</script>
</html>

4.3操作元素的内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>操作元素的内容</title>
</head>
<body>
<h3><span>html()和text()方法设置元素内容</span></h3>
<div id="html"></div>
<div id="html2"></div>
<div id="text">bj</div>
<div id="text2"><h2>bjbj</h2></div>
<input id="op" type="text" name="uname" value="oop"/>
</body>
<!--
操作元素的内容html()           获取元素的内容，包含html标签 （非表单元素）html("内容")      设置元素的内容，包含html标签（非表单元素）text()           获取元素的纯文本内容，不识别HTML标签（非表单元素）text("内容")      设置元素的纯文本内容，不识别HTML标签（非表单元素）val()            获取元素的值（表单元素）val("值")         设置元素的值（表单元素）表单元素：文本框text、密码框password、单选框radio、复选框checkbox、隐藏域hidden、文本域textarea、下拉框select非表单元素：div、span、h1~h6、table、tr、td、li、p等
-->
<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">//html("内容")      设置元素的内容，包含html标签（非表单元素）$("#html").html("<h2>上海</h2>");$("#html2").html("上海");//html()           获取元素的内容，包含html标签 （非表单元素）var html = $("#html").html();var html2 = $("#html2").html();console.log(html);console.log(html2);//text()           获取元素的纯文本内容，不识别HTML标签（非表单元素）$("#text").text("北京");$("#text2").text("<h2>北京</h2>");//text("内容")      设置元素的纯文本内容，不识别HTML标签（非表单元素）var text = $("#text").text();var text2 = $("#text2").text();console.log(text);console.log(text2);// val()            获取元素的值（表单元素）var op = $("#op").val();console.log(op);//val("值")         设置元素的值（表单元素）$("#op").val("今天天气不错")
</script>
</html>

4.4创建元素

4.5 添加元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">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;}</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>
<!--创建元素和添加元素创建元素$("内容")添加元素1,前追加子元素指定元素，prepend（内容）  指定元素内部的最前面追加内容，内容可以是字符串、html元素或jquery对象。$(内容).prependTo（指定元素）  把内容追加到指定元素内部的最前面，内容可以是字符串、html元素或jquery对象。2.后追加子元素指定元素，append（内容）  指定元素内部的最后面追加内容，内容可以是字符串、html元素或jquery对象。$(内容).appendTo（指定元素）  把内容追加到指定元素内部的最后面，内容可以是字符串、html元素或jquery对象。3.前追加同级元素before()            在指定元素的前面添加内容4.后追同级元素after()             在指定元素的后面追加内容注意：在添加元素时，如果元素本身不存在（新建的元素），此时会将元素追加到指定位置，如果元素本身存在（已有元素），会将原来元素直接剪切设置到指定位置
-->
<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">//创建元素var p = "<p>这是一个p标签</p>";console.log(p);console.log($("p"));/*添加元素*///前追加//1.创建元素var span = "<span>小奶狗</span>"//2.得到制定元素，并在元素内部的最前面添加内容$(".green").prepend(span);var span2 =  "<span>小狼狗</span>";$(span2).prependTo(".green");//后追加var span3 = "<span>小奶狗后</span>";$(".green").append(span3);var span4 = "<span>小狼狗后</span>";$(span4).appendTo(".green");//将以存在内容追加到指定元素中$(".green").append($(".red"));/*同级追加*/var sp1 = "<span class='pink'>女神</span>";var sp2 = "<span class='green'>歌手</span>";$(".blue").before(sp1);$(".blue").after(sp2);
</script>
</html>

4.6删除元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">span {color: white;padding: 8px;margin: 5px;float: left;}.green {background-color: green;}.blue {background-color: blue;}</style>
</head>
<body>
<h3>删除元素</h3>
<span class="green">jquery<a></a></span>
<span class="blue">javase</span>
<span class="green">http协议</span>
<span class="blue">servlet</span>
</body>
<!--
删除元素remove()删除元素及其对应的子元素，标签和内容一起删除指定元素。remove（）;empty()清空元素内容，保留标签指定元素。empty（）;
-->
<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">//删除元素$(".green").remove();//清空元素$(".blue").empty();
</script>
</html>

4.7遍历元素

each（）
$(selector).each(function(index,element))::遍历元素
参数function为遍历时的回调函数，
index为遍历元素的序列号，从0开始。
element是当前的元素，此时是dom元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">span {color: white;padding: 8px;margin: 5px;float: left;}.green {background-color: green;}.blue {background-color: blue;}</style>
</head>
<body>
<h3>遍历元素</h3>
<span class="green">jquery</span>
<span class="green">javase</span>
<span class="green">http协议</span>
<span class="green">servlet</span></body>
<!--each（）$(selector).each(function(index,element))::遍历元素参数function为遍历时的回调函数，index为遍历元素的序列号，从0开始。element是当前的元素，此时是dom元素。
-->
<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">//获取指定元素并遍历$(".green").each(function (index,element){console.log(index);console.log(element);console.log(this);console.log($(element));})
</script>
</html>

5.Jquery事件

5.1 ready()加载事件

ready(0类似于onLoad（）事件
ready(0可以写多个，按顺序执行
(document).ready(function())等价于(document).ready(function(){})等价于(document).ready(function())等价于(function(){})

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>加载事件</title><script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8"></script><script>$(function (){console.log("ready加载事件");})$(document).ready(function (){//获取元素console.log($("#p1"));});</script>
</head>
<!--ready加载事件预加载事件当页面的dom结构加载完毕后执行类似于js中1oad事件ready事件可以写多个语法：$(document).ready(function（）{})简写：$(function(){});
-->
<body><p id="p1">文本</p>
</body>
</html>

5.2 绑定事件

5.2.1简单的bind()事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<!--绑定事件bind绑定事件为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。语法：$(selector).bind(eventType [eventData],handler(eventobject));eventType:是一个字符串类型的事件类型，就是你所需要绑定的事件。[,eventData]:传递的参数，格式：{名：值，名2：值2}handler(eventObject):该事件触发执行的函数绑定单个事件bind绑定$("元素").bind("事件类型"，fucntion(){});直接绑定$("元素").事件名(function(){})
<body>
<h3>bind()简单的绑定事件</h3>
<!-- style="cursor:pointer" 设置鼠标图标 -->
<div id="test" style="cursor:pointer">点击查看名言</div>
<input id="btntest" type="button" value="点击就不可用了"/></body>
<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8"></script>
<script>/*1.确定为那些元素绑足事件获取元素2.绑定什么事件(事件类型)第一个参数：事件的类型3.相应事件触发的，执行的操作第二个参数：函数*//*绑定单个事件*/$("#test").bind("click", function () {console.log("世上无难事，只怕有心人");});//原生的js绑定事件/*document.getElementById("test").onclick = function (){console.log("test");}*///直接绑定$("#btntest").click(function () {//禁用按钮console.log(this);$(this).prop("disabled", true);});

5.2.2绑定多个事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head><!--绑定多个事件bind绑定1,同时为多个事件绑定同一个函数指定元素.bind("事件类型1  事件类型1..",function()(});2.为元素绑定多个事件，并设置对应的函数指定元素.bind("事件类型",function(){}).bind("事件类型",function(){});3.为元素绑定多个事件，并设置对应的函数指定元素.bind({"事件类型"：function(){},"事件类型"：function(){});直接绑定指定元素.事件名(function(){}).事件名(function（）{});-->
<body>
<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.1.js" type="text/javascript" charset="UTF-8"></script>
<script>/*绑定多个事件*///1.同时为多个事件绑定同意函数$("#btn1").bind("click mouseout", function () {console.log("按钮1.。。");});//2.为元素绑定多个事件，并设置对应的函数$("#btn2").bind("click",function () {console.log("按钮2被点击");}).bind("mouseout",function () {console.log("按钮2被离开");});//3.为元素绑定多个事件，并设置对应的函数$("#btn3").bind({"click":function () {console.log("按钮3被点击");},"mouseout":function () {console.log("按钮3被离开")}});//4.直接绑定$("#btn4").click(function () {console.log("按钮4被点击");}).mouseout(function () {console.log("按钮4被离开")});
</script>
</html>

6.Jquery Ajax

6.1 $.Ajax

get请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<!--
jquery调用ajax方法：格式：$.ajax（）);参数：type:请求方式GET/PoSTurl:请求地址urlasync:是否异步，默认是true表示异步data:发送到服务器的数据dataType:预期服务器返回的数据类型contentType:设置请求头success:请求成功时调用此函数error:请求失败时调用此函数
-->
<body>
<button type="button" id="btn">查询数据</button>
</body>
<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8"></script>
<script>$.ajax({type:"get", //请求方式url:"data.txt", //请求数据，json对象data:{ //请求数据，json对象username:"zhangSan" //如果没有参数，则不需要设置},// 请求成功调用的函数success:function (data) { //data是形参名，代表的是返回的数据console.log(data);//字符串//将字符串转换成json对象var obj = JSON.parse(data);console.log(obj);}});//点击按钮 发送ajax请求  将数据显示到页面$("#btn").click(function (){$.ajax({type:"get", //请求方式url:"data.txt", //请求数据，json对象data:{  //请求数据，json对象//username:"zhangSan" //如果没有参数，则不需要设置},dataType:"json", //预期返回的数据类型，如果是json格式，在接收到返回值时会自动封装成json对象// 请求成功调用的函数success:function (data) { //data是形参名，代表的是返回的数据console.log(data);    //字符串//将字符串转换成json对象//var obj = JSON.parse(data);如果本来就是jso对象，再进行转换会失败，因为是将字符串转为json。//console.log(obj);//Dom操作//创建ulvar ul = $("<ul></ul>");//遍历返回的数据数组for (let i = 0; i < data.length; i++) {//得到数组中的每一个元素var user = data[i];//创建li元素var li = "<li>"+user.username+"</li>";//将li元素设置到ul元素中ul.append(li);}//将ul设置到<body>标签中$("body").append(ul);}});})
</script>
</html>

6.2 .get和.get和.get和.post

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--$.get();语法：$("请求地址","请求参数",function(形参){})$.post();语法：$("请求地址","请求参数",function(形参){})
-->
</body>
<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8"></script>
<script>$.get("data.json",{},function (data) {console.log(data);})$.post("data.json",{},function (data) {console.log(data);})
</script>
</html>

6.3 $.getJSON

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--$.getJSON();语法：$("请求地址","请求参数",function(形参){})注：getJSON方式返回的数据格式满足json格式(json字符串)-->
</body>
<script src="jquery-3.6.1.js" type="text/javascript" charset="UTF-8"></script>
<script>$.getJSON("data.json",{},function (d) {console.log(d);});$.get("test.txt",{},function (d) {console.log(d);})//如果返回的数据不是json格式的，则无法获取$.getJSON("test.txt",{},function (d) {console.log(d);});</script>
</html>

JQuery详解（讲解+举例）--（后端开发适用）相关推荐

作为后端开发人员应该懂的TCP、HTTP、Socket、Socket连接池，一文详解丨Linux后端开发
前言:作为一名开发人员我们经常会听到HTTP协议.TCP/IP协议.UDP协议.Socket.Socket长连接.Socket连接池等字眼,然而它们之间的关系.区别及原理并不是所有人都能理解清楚,这篇 ...
完全手册-MATLAB使用详解：基础、开发及工程应用
[书名]完全手册-MATLAB使用详解:基础.开发及工程应用 [作者]董霖编著 [ISBN]978-7-121-07397-7 [出版社]电子工业出版社 [出版日期]2009年1月 [内容简介] M ...
详解 AJAX-SpringBoot 前后端数据交互
详解 AJAX-SpringBoot 前后端数据交互 1. Ajax 概述 Ajax 的英文全称是 "Asynchronous JavaScript and XML",即 &quo ...
详解微信小程序开发（项目从零开始）
关注公众号风色年代(itfantasycc) 280G前端&小程序资料随便拿! 详解微信小程序开发(项目从零开始) 一.序微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍 ...
Java基础——匿名内部类详解及举例
Java基础--匿名内部类详解及举例说明:定义在外部类的局部位置,比如方法中,并且没有类名匿名内部类的使用匿名内部类的基本语法 new 类或接口(参数列表){类体 }; 用途:有些时候为了简化开 ...
java基础(十三)-----详解内部类——Java高级开发必须懂的
java基础(十三)-----详解内部类--Java高级开发必须懂的目录为什么要使用内部类内部类基础静态内部类成员内部类成员内部类的对象创建继承成员内部类局部内部类推荐博客匿名内部 ...
html 5效果不显示,详解如何解决H5开发使用wx.hideMenuItems无效果不生效
情况:引入SDK 的签名不报错与调试工具生成的结果也是一模一样,但是使用hideMenuItems没有小效果,不会报错. 解决方式:把要执行的wx.hideMenuItems()放到wx.ready这 ...
jQuery详解（二) 函数和事件
文章目录 @[toc] 四.函数 2.第二组函数 1.remove():将数组中所有DOM对象及其子对象一并删除. 2.empty():将数组中所有DOM对象的子对象删除. 4.html():返回的结 ...
【Windows 应用程序开发详解】三.Windows开发工具配置与使用(一）
[Windows 应用程序开发详解]三.Windows开发工具配置与使用一.Visual C/C++ 我们都知道在应用程序开发的时候都是要依赖于开发工具的,Windows主机应用程序绝大多数都是使用 ...
【Windows 应用程序开发详解】四.Windows开发基本概念和相关术语（一）
[Windows 应用程序开发详解]四.Windows开发基本概念和相关术语一.Windows API 二.服务.函数和例程一.Windows API Windows API介绍: Windows ...

JQuery详解（讲解+举例）--（后端开发适用）

JQuery

JQuery

1.JQuery内容

2. JQuery对象

2.1.Jquery的下载与安装

2.1.1.下载

2.1.3.优点

2.1.4.安装

2.2.Jquery核心

2.3.Dom对象与Jquery包装集对象

2.3.1 javascript中获取Dom对象，Dom对象只有有限的属性和方法：

2.3.2.Jqueryt包装集对象

2.3.3.Dom对象转Jquery对象

2.3.4.Jqueryi对象转Dom对象

3.Jqueryi选择器

3.1基础选择器

3.2层次选择器

3.3表单选择器

4.Jquery Dom操作

4.1.操作元素的属性

4.1.1.获取属性

4.2操作元素的样式

4.3操作元素的内容

4.4创建元素

4.5 添加元素

4.6删除元素

4.7遍历元素

5.Jquery事件

5.1 ready()加载事件

5.2 绑定事件

5.2.1简单的bind()事件

5.2.2绑定多个事件

6.Jquery Ajax

6.1 $.Ajax

6.2 .get和.get和.get和.post

6.3 $.getJSON

JQuery详解（讲解+举例）--（后端开发适用）相关推荐

最新文章

热门文章