JQuery+Ajax

JavaAhao

已于 2022-03-22 20:06:38 修改

阅读量713

点赞数 1

分类专栏：前端文章标签： jquery ajax

于 2022-03-07 20:58:53 首次发布

本文链接：https://blog.youkuaiyun.com/qq_48642210/article/details/123339618

版权

前端专栏收录该内容

3 篇文章

订阅专栏

jQuery

什么是jQuery？

jQuery是一款JavaScript库，query的用途是来做查询
使用jQuery让我们的对html文档遍历和操作，事件处理、动画以及Ajax变得简单（write less,do more）

jQuery的使用

下载jQuery库
- 下载地址：https://jquery.com/download/

引入jQuery库

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://code.jquery.com/jquery-1.4.1.min.js"></script>

编写jQuery代码

<!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>jQuery的使用</title>
    <script src="https://code.jquery.com/jquery-1.4.1.min.js"></script>
    <script>
        //原生JS的固定写法
        window.onload = function() {};
        //jQuery的固定写法
        $(document).ready(function() {
            alert("hello jquery");
        });
    </script>
</head>

<body>

</body>

</html>

JS和jQuery的加载模式

原生的JS会等到DOM元素加载完毕，并且图片也会加载完毕才会执行
jQuery会等到DOM元素加载完毕，但是不会等到图片也会加载完毕就会执行
原生的JS如果编写了多个入口函数，后面写的会覆盖前面写的
jQuery中编写多个入口函数，后面的不会覆盖前面的

JS入口函数的写法

<script src="https://code.jquery.com/jquery-1.4.1.min.js"></script>
    <script>
        //1.第一种写法
        $(document).ready(function() {
            alert("hello");
        });

        //2.第二种写法
        jQuery(document).ready(function() {
            alert("hello");
        });

        //3.第三种写法(推荐写法)
        $(function() {
            alert("hello");
        });

        //4.第四种写法
        jQuery(function() {
            alert("hello");
        });
    </script>

解决$符号的冲突问题

释放$符号的使用权

jQuery.noConflict();//改为用jQuery
jQuery(function() {
            alert("hello");
        });

自定义一个访问符号

var nj = jQuery.noConflict();
nj(function() {
            alert("hello");
        });

jquery的三种基本选择器

选择器的名称	语法
id选择器	$("#名称")(单个)
类选择器	$(".名称")(多个)
标签选择器	$(“标签”)(多个)

注意点:类选择器与标签选择器返回是多个是js对象返回单个是jquery对象

jquery中常用的事件

注意点:jquery中事件将on去除

事件名称	事件的描述
click	点击事件
dbclick	双击事件
blur	失去焦点
focus	获取焦点
mouseout	移出
mouseover	移入
hover	移入移出

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		</style>
		<script src="https://code.jquery.com/jquery-1.4.1.min.js"></script>
	</head>
	<body>
		<input type="button" id="tv_but01" value="点击" />
		<input type="button" id="tv_but02" value="双击" />
		<p>昨晚睡的很舒服</p>
		<input type="text" id="tv_u" />
		<h3>今天敲代码了吗</h3>
		<script>
			$("#tv_but01").click(function(){
				 alert("点击事件");
			});
			$("#tv_but02").dblclick(function(){
				 alert("双击");
			});
			$("p").mouseout(function(){
				//alert("移出");
				console.log("移出")
			}).mouseover(function(){
				//alert("移入");
				console.log("移入")
			})
			$("#tv_u").blur(function(){
				  $(this).css({"background-color":"red"});
			}).focus(function(){
				  $(this).css({"background-color":"#ffffff"});
			});
			$("h3").hover(function(){
				console.log("1111");
			},function(){
				console.log("2222");
			})	
		</script>
	</body>
</html>

jquery 特效

显示与隐藏

方法的名称	方法的描述	方法参数的说明
$(selector).toggle(speed,callback));	显示隐藏	同下
$(selector).hide(speed,callback);	隐藏	隐藏/显示的速度 ,显示完成后所执行的函数名称
$(selector).show(speed,callback);	显示	同上

淡入淡出

方法的名称	方法的描述	方法参数的说明
$(selector).fadeToggle()(speed,callback));	淡入淡出	同下
$(selector).fadeIn(speed,callback);	淡入	隐藏/显示的速度 ,显示完成后所执行的函数名称
$(selector).fadeOUT(speed,callback);	淡出	同上

滑动

方法的名称	方法的描述	方法参数的说明
$(selector).slideToggle(speed,callback));	向上与向下滑动	同下
$(selector).slideUp(speed,callback);	向上滑动	隐藏/显示的速度 ,显示完成后所执行的函数名称
$(selector).slideDown(speed,callback);	向下滑动	同上

jQuery的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>attr方法的使用</title>
    <script src="https://code.jquery.com/jquery-1.4.1.min.js"></script>

    <script>
        $(function() {
            /*
      1.attr（name|pro|key,val|fn）
      作用：获取或者设置属性节点的值
      如果传递一个参数，代表获取属性节点的值
      如果传递两个参数，代表设置属性节点的值

      注意点：
      如果是获取，都只会返回第一个指定的属性节点的值
      如果是设置：找到多少个元素就会设置多少个元素
      如果是设置：如果设置的属性节点不存在，系统会自动新增
    
      2.removeAttr(name)删除属性节点  只能传递一个参数，当有多个参数需要传递时，用空格隔开
      例如：$("span").removeAttr("class name")
      
      注意点：
      会删除所有找到元素指定的属性节点
      */

            //console.log($("span").attr("class"));
            //$("span").attr("class","box");
            //$("span").attr("abc", "123");

            $("span").removeAttr("class name")
        });
    </script>
</head>

<body>
    <span class="span1" name="it666"></span>
    <span class="span2" name="lnj"></span>
</body>

</html>

jquery动画

方法的名称	方法的描述
animate({params},speed,callback)	设置动画
stop()	方法用于在动画或效果完成前对它们进行停止

jquery 操作DOM

属性操作方法

方法的名称	方法的描述
attr()	设置或返回匹配元素的属性和值
html()	设置或返回匹配的元素集合中的 HTML 内容
val()	设置或返回匹配元素的值
text()	设置文本内容
prop()	设置或返回匹配元素的属性和值

jQuery的prop方法

prop方法不仅能操作属性，还能操作属性节点

官方推荐：

在操作属性节点时，具有true和false两个属性的属性节点，如checked，selected或者disabled使用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>jQuery的prop方法</title>
    <script src="https://code.jquery.com/jquery-1.4.1.min.js"></script>

    <script>
        $(function() {
            /*
            1.prop方法
            特点和attr方法一致
            2.removeProp方法
            特点和removeAttr方法一致
            */

            // $("span").eq(0).prop("demo", "999");
            // $("span").eq(1).prop("demo", "lnj");
            // $("span").removeProp("demo");

            console.log($("input").prop("checked"));//true  false
            console.log($("input").attr("checked"));//checked  undefined

        });
    </script>
</head>

<body>
    <span class="span1" name="it666"></span>
    <span class="span2" name="lnj"></span>

    <input type="checkbox" checked>
</body>

</html>

jQuery事件绑定

eventName（fn）；
on(eventName,fn);

<script>
        $(function() {
            1.
            $("button").click(function() {
                alert("hello");
            });
            $("button").click(function() {
                alert("ddddd");
            });


            // 2.
            // $("button").on("click", function() {
            //     alert("hello2");
            // });
            // $("button").click(function() {
            //     alert("ggggg");
            // });
        });
    </script>

<body>
        <button>点我一下</button>
</body>

事件的解绑

$("button").off()//不传参，移除所有事件
//传入一个参数，会移除所有指定类型的所有事件
//传入两个参数， 会移除所有指定类型的指定事件

事件冒泡和默认行为

事件冒泡—在点击儿子时会响应儿子事件和父亲事件
阻止事件冒泡
- return false;
- event.stopPropagation();

<script>
        $(function() {
            $(".son").click(function() {
                alert("son");
                //return false;//组织事件冒泡
                event.stopPropagation();//组织事件冒泡
            });
        });

        $(function() {
            $(".father").click(function() {
                alert("father");
            });
        });
    </script>

默认行为—标签自带的功能

阻止默认行为

例：阻止 a 标签

$("a").click(function(event) {
            alert("默认行为");
            return false; //阻止默认行为
            event.preventDefault(); //阻止默认行为
        })

自动触发事件

trigger：会触发事件冒泡

triggerHandler：不会触发事件冒泡

$(" ").triggerHandler("要触发的事件");

trigger：会触发默认行为

triggerHandler：不会触发‘默认行为

a标签使用trigger时不能触发默认，把a不触发默认行为，在a内加上span后就变成了trigger触发事件冒泡

jquery与js之间的相互转换

1.jquery 转换为js ==> jquery[0] 或者 jquery.get(0);
2.js 转换为jquery ==>$(js对象)

案例

按钮倒计时

效果图
在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>

<body>
    <input type="button" value="点击同意并开始" id="tv_id">
</body>

<script>
   var time = 60;
    $("#btn").click(function() {
        $("#btn").prop("disabled", true)
        var t = setInterval(function() {
            if (time > 0) {
                $("#btn").val("请认真阅读" + "(" + --time + ")秒");
            } else {
                clearInterval(t);
                $("#btn").val("再来一次");
                $("#btn").prop("disabled", false)
                time = 60;
            }
        }, 1000);
    })
</script>

</html>

jq添加元素

方法的名称	方法的描述
append()	在被选元素的结尾插入内容
prepend()	在被选元素的开头插入内容
after()	在被选元素下面插入内容
before()	在被选元素上面插入内容

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <title>Document</title>
</head>

<body>
    <p>今天超级困</p>
    <input type="button" id="operate_id" value="操作">
</body>

<script>
    $("#operate_id").click(function() {
        // $("p").append("啊啊啊啊");
        // $("p").prepend("昨晚熬夜了，");
        // $("p").after("66666");
        $("p").before("484");
    })
</script>

</html>

删除元素

方法的名称	方法的描述
remove()	删除被选元素（及其子元素）(删除子元素包括本身)
empty()	从被选元素中删除子元素(删除子元素)

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="box">
        <p>java</p>
        <p>C++</p>
        <p>python</p>
        <p>go</p>
    </div>
    <input type="button" value="删除" class="btn">
</body>
<script>
    $(".btn").click(function() {
        //$("#box").remove(); //删除子元素和本身
        $("#box").empty(); //删除子元素
    })
</script>

</html>

添加与删除类样式

方法的名称	方法的描述
addClass()	向匹配的元素添加指定的类名
removeClass()	从所有匹配的元素中删除全部或者指定的类
toggleClass()	从匹配的元素中添加或删除一个类。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.getClass{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<input type="button" id="tv_but01" value="添加" />
		<input type="button" id="tv_but02" value="删除" />
		<input type="button" id="tv_but03" value="删除与添加" />
		<div></div>
		<script>
			$("#tv_but01").click(function(){
				$("div").addClass("getClass");
			});
			$("#tv_but02").click(function(){
				$("div").removeClass("getClass");
			});
			
			$("#tv_but03").click(function(){
				$("div").toggleClass("getClass");
			});
		</script>
	</body>
</html>

jq操作css样式

1.语法：$(选择器).css({"属性名":"属性值","属性名":"属性值"})

示例代码：

<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>
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
</head>

<body>
    <p>明天放假了</p>
    <input type="button" value="操作" class="btn">
</body>
<script>
    $(".btn").click(function() {
        $("p").css({
            "font-size": "25px",
            "color": "red"
        })
    })
</script>

</html>

Jquery常用的选择器

过滤选择器

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	</head>
	<body>
		<div>0000000000000</div>
		<div>1111111111111</div>
		<div>2222222222222</div>
		<div>3333333333333</div>
		<div>4444444444444</div>
		<div>5555555555555</div>
		<div>6666666666666</div>
		<div>7777777777777</div>
		<div>8888888888888</div>
		<div>9999999999999</div>
		<script>
			function showInfo(){
				//alert($("div:first").html());
				//alert($("div:last").html());
				//var arrays =$("div:even");
				//var arrays =$("div:odd");
				//alert($("div:eq(2)").html());
				//var arrays =$("div:gt(2)");
				//var arrays =$("div:lt(2)");
				var arrays =$("div:not('div:even')");
				for(var i=0;i<arrays.length;i++) {
					 alert(arrays[i].innerHTML);
				}
			}
			showInfo();
		</script>
	</body>
</html>

层级选择器

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	</head>
	<body>
		<div id="tv_main">
			<div>000000</div>
			<span>
				<div>1111</div>
			</span>
			
			<div><span>2222</span></div>
			<div>3333</div>
			<span>
				<div><span><div>44444</div></span></div>
			</span>
		</div>
		<div>5555</div>
		<div>6666</div>
		<span>
			<div>77777</div>
		</span>
		<script>
			function showInfo(){
				
				//alert($("#tv_main + div").html());
			   //var arrays=	$("#tv_main div");
			   //var arrays=	$("#tv_main > div");
			   var arrays= $("#tv_main ~ div")
			   for(var i=0;i<arrays.length;i++) {
			   	  alert(arrays[i].innerHTML);
			   }
			}
			showInfo();
		</script>
	</body>
</html>

属性选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w8lnS9uc-1647949434440)(day06.assets/image-20220322143436964.png)]

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	</head>
	<body>
		<a href="#">aaaa</a>
		<a href="www.baidu.com">bbb</a>
		<a href="xxxx.jpg">ccc</a>
		<a>ddd</a>
		<a href="abc.html">eee</a>
		<script>
			 function showInfo(){
			 	//alert($("[href='xxxx.jpg']").html())
//			 	var arrays =$("[href]");
                //var arrays =  $("[href!='xxxx.jpg']")
                //alert($("[href$='.jpg']").html());
                alert($("[href^='abc']").html());
//			 	for(var i=0;i<arrays.length;i++) {
//			 		 alert(arrays[i].innerHTML);
//			 	}
			 }
			 showInfo();
		</script>
	</body>
</html>

Ajax

1. 什么是Ajax

异步的JavaScript和XML
无需再刷新整个页面的情况下，能够更新部分页面的内容
不是新的编程语言，是多种技术的综合应用
使用Ajax实现局部刷新。

2. 异步对象XMLHttpRequest属性和方法

创建异步对象
```
var xhr = new XMLHttpRequest();
```
XMLHttpRequest方法
1. open（请求方式，服务器访问地址，异步还是同步Boolean）
  
  例如：
```
xhr.open("get","loginServlet",true);
```
2. 使用异步对象发送请求
```
send();
```
XMLHttpRequest属性
1. readyState属性：请求的状态
  - 0：表示创建异步对象时
  - 1：表示初始异步对象的请求参数，执行open方法
  - 2：使用send（）方法发送请求
  - 3：使用异步对象从服务器端接收了数据
  - 4：表示异步对象接收了数据并在异步对象内部处理完成
2. status属性：网络状态，和http的状态码对应
  - 200~300请求成功
  - 404：服务器资源未找到
  - 500：服务器内部错误
3. responseText属性：表示服务端返回的数据
```
var data = xhr.responseText;
```

3.jQuery Ajax

jquery调用Ajax方法：

格式：$.ajax({});

参数：

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

发送Ajax请求

<script src="https://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $.ajax({
            type: "get", //请求方式
            url: ja / data.txt, //请求地址
            data: { //请求数据，JSON对象
                username: "zhangsan" //没有参数不需要设置
            },
            //请求成功时调用函数
            success: function(data) {
                //字符串转化为JSON对象
                var obj = JSON.parse(data);
                console.log(obj);
            }
        });
    </script>

预期返回数据类型

<script src="https://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $.ajax({
            type: "get", //请求方式
            url: ja / data.txt, //请求地址
            data: { //请求数据，JSON对象
                username: "zhangsan" //没有参数不需要设置
            },
    dataType:"json",
            //请求成功时调用函数
            success: function(data) {
                console.log(data);
            }
        });
    </script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9lzdivLf-1646657840244)(C:\Users\Ahao\AppData\Roaming\Typora\typora-user-images\image-20210909204504088.png)]

4. $.get

$.get("请求地址","请求参数",function(形参){
    
});

5.$post

$.post("请求地址","请求参数",function(形参){
    
});

$.getJSON

$.getJSON("请求地址","请求参数",function(形参){
    
});

//要求返回的数据满足JSON格式