FrontEnd笔记 -- JQuery

最新推荐文章于 2022-03-29 13:41:24 发布
最新推荐文章于 2022-03-29 13:41:24 发布
阅读量177 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42480750/article/details/111241361
版权

文章目录

简介

JQuery是JS库，是对JavaScript的一个封装，也即是说JQ提供了大量的API；于2006年开源，现在已经发展成为集JS、CSS、DOM、Ajax于一体的强大的框架体系。

中文文档：https://www.jquery123.com/

API学习或查询：https://jquery.cuishifeng.cn/

  • JQuery功能
  1. 控制页面样式
  2. 访问和操作DOM
  3. 事件处理
  4. 提供了大量的插件
  5. 与Ajax技术的封装
  6. 提供了大量动画处理
  • 引入
<!-- 本地引入（开发） -->
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<!-- CDN引入（生产） -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<!-- 查看是否引入成功 -->
<script type="text/javascript">
	//ƒ jQuery( selector, context )
	console.dir($);
</script>
  • 第一个例子

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
</head>
<body>
	<div class="box"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
	$(".box").html("Hello World！")
			 .css("color", "red")
			 .hover(function() {
			 	$(this).fadeOut(2000);
			 });
</script>
</html>
  • JQ代码位置
<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	<script type="text/javascript">
		// 如果JQ代码写在body前，必须将代码写在ready事件中，表示所有DOM加载完成后才执行
		$(document).ready(function() {
			console.log($(".box"));
		})

		//简化写法
		$(function() {
			console.log($(".box"));
		})
	</script>
</head>
<body>
	<div class="box"></div>
</body>
</html>

在这里插入图片描述

选择器

选择器说明
基本选择器
层次选择器
过滤选择器
表单选择器

基本选择器

操作说明
id#id
class.class
elementelement
*选择所有标签
,选择多个DOM

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	<script type="text/javascript">
		$(function() {
			$(".box").css({
				color: "red",
				background: "#eee",
				marginBottom: "10px"
				//"margin-bottom": "10px"
			})

			$("#box").css({
				color: "blue"
			})

			$("p").css({
				color: "green"
			})

			console.log($("*"))

			$("#box, .box, p").click(function() {
				console.log($(this).html());
			})
		})
	</script>
</head>
<body>
	<div class="box">box1</div>
	<div class="box">box2</div>
	<div class="box">box3</div>
	<div id="box">box4</div>
	<p>This is a p</p>
</body>
</html>

层次选择器

操作说明
选择器1 选择器2空格，选择选择器1的所有后代元素（选择器2）
选择器1>选择器2大于号，只选择选择器1的子元素
选择器1+选择器2加号，选择紧挨着选择器1的第一个兄弟元素
选择器1~选择器2波浪号，选择选择器1的所有兄弟元素
<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
</head>
<body>
	<div class="wrapper">
		<span>span1</span>
		<div class="box">
			<span>span2</span>
		</div>
	</div>
	<p>This is p1</p>
	<p>This is p2</p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
	//空格：选择所有的后代元素
	$(".wrapper span").html("new span");

	//大于号：只选择子元素
	$(".wrapper>span").css("color", "red");

	//加号：紧挨的第一个兄弟元素
	$(".wrapper+p").css("font-size", "25px");

	//波浪号：所有的兄弟元素
	$(".wrapper~p").css("font-weight", "bolder");
</script>
</html>

在这里插入图片描述

过滤选择器

  • 简单过滤选择器
操作说明
:first/first()第一个元素
:last/last()最后一个元素
:not(selector)除selector之外的元素
:even偶数
:odd奇数
:eq(index)第n个元素
:gt(index)大于第n个元素
:lt(index)小于第n个元素
:header选择h1-h6所有标题元素
<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
</head>
<body>
	<ul>
		<li>li 1</li>
		<li>li 2</li>
		<li class="li3">li 3</li>
		<li>li 4</li>
		<li>li 5</li>
	</ul>
	<h1>h1</h1>
	<h2>h2</h2>
	<h6>h6</h6>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
	$("ul li:first").css("color", "red");
	$("ul li").last().css("color", "blue");

	$("ul li:not(.li3)").css("font-size", "25px");

	$("ul li:even").css("background-color", "#eee");
	$("ul li:odd").css("background-color", "pink");

	$("ul>li:eq(1)").css("font-weight", "bold");
	$("ul>li:gt(2)").css("margin-top", "10px");
	$("ul>li:lt(3)").css("border", "3px solid green");

	$(":header").css("color", "green");
</script>
</html>

在这里插入图片描述

  • 内容选择器
操作说明
:contains(text)获取包含指定文本内容的元素
:empty获取不包含子元素和文本内容的元素
:parent获取含有子元素或文本的元素
:has(selector)获取含有特定选择器的元素
<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
</head>
<body>
	<p>Today is a good day!</p>
	<p>I am going to swim tomorrow.</p>
	<p>Have a good day~</p>
	<p></p>
	<p><span>P has a SPAN</span></p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
	$("p:contains(day)").css("color", "gray");
	$("p:empty").html("Not empty anymore");
	$("p:parent").css("background-color", "#eee");
	$("p:has(span)").css("font-weight", "bold");
</script>
</html>

在这里插入图片描述

  • 可见性过滤选择器
操作说明
:hidden选择display:none或隐藏文本域（hidden）
:visible选择display:block的元素
<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
</head>
<body>
	<div class="box1">box1</div>
	<div class="box2">box2</div>
	<p>P</p>
	<input type="hidden" value="secret">
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
	$("input:hidden").attr("type", "text");
	$("div:visible").css("color", "red");
</script>
</html>

在这里插入图片描述

  • 属性选择器
操作说明
[attr]含有特定属性
[attr=value]含特定属性且值为特定值
[attr!=value]含特定属性但值不为特定值
[attr^=value]含特定属性且以特定值开头
[attr$=value]含特定属性且以特定值结尾
[attr*=value]含特定属性且值包含特定值
[attr1][attr2][attr3]同时含有特定多个属性
<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
</head>
<body>
	<p title="para">attr is title, value is para</p>
	<p title="ParA">attr is title, valie is not PARA</p>
	<p>attr is empty</p>
	<p id="para" title="title">attr is id</p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
	$("p[title]").css("color", "red");
	$("p[title=para]").css("font-size", "25px");
	$("p[title!=para]").css("font-weight", "bold");
	$("p[title^=p]").css("background-color", "#eee");
	$("p[title$=A]").css("background-color", "pink");
	$("p[title*=ar]").css("border", "3px solid green");
	$("p[title][id]").css("border", "3px solid yellow");
</script>
</html>

在这里插入图片描述

  • 表单选择器
操作说明
:input
:button
:submit
:text
:password
<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
</head>
<body>
	<form>
		<input type="text"><br>
		<input type="password"><br>
		<input type="button"><br>
		<input type="submit"><br>
		<button>button</button>
	</form>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
	$(":input").val("general");
	$(":button").css("color", "red");
	$(":submit").css("font-size", "25px");
	$(":password").css("background-color", "pink");
</script>
</html>

在这里插入图片描述

DOM操作

属性操作

操作说明
获取属性attr(属性名)
设置属性attr(属性名, 属性值)
删除属性removeAttr(属性名)
<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
</head>
<body>
	<p title="title1" id="id1"></p>
	<p title="title2" id="id2"></p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
	console.log($("p").eq(0).attr("title")); //title1

	$("p").eq(1).attr("title", "new-title");
	console.log($("p").eq(1).attr("title")); //new-title

	console.log($("p").eq(0).attr("id")); //id1
	$("p").eq(0).removeAttr("id");
	console.log($("p").eq(0).attr("id")); //undefined
</script>
</html>

文本内容操作

获取设置删除说明
html()html(内容)html("")可以操作标签
text()text(内容)text("")只能操作文本内容，不操作标签
val()val(内容)val("")只能用于表单组件
<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
</head>
<body>
	<p><a href="#"><span>This is span</span></a></p>
	<div>This is div</div>
	<input type="text" value="this is input-text">
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
	console.log($("p").html());
	console.log($("p").text());
	console.log($(":text").eq(0).val()); 

	$("p").html("<strong>strong</strong>");
	$("div").text("<span>span</span>");
	$(":input").eq(0).val("new-value");
</script>
</html>

在这里插入图片描述

元素样式操作

操作说明
css(“属性名”, “属性值”)设置一个样式
css({“属性名1”: “属性值1”, “属性名2”: “属性值2”, …})设置多个样式
addClass(“类名”)添加一个类名
addClass(“类名1 类名2 …”)添加多个类名
removeClass(“类名”)删除一个类名
removeClass(“类名1 类名2”)删除多个类名
removeClass()清空
<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
	<style type="text/css">
		.background-color {
			background-color: gray;
		}
		.border {
			border: 3px solid green;
		}
	</style>
</head>
<body>
	<p class="border">This is a p</p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
	$("p").css("color", "red");
	$("p").css({"font-size":"20px", "font-weight":"bold"});

	$("p").addClass("background-color");
	$("p").removeClass("border");
</script>
</html>

在这里插入图片描述

页面元素操作

操作说明
$(dom节点内容)创建DOM节点
——
append()在内部最后添加DOM节点
appendTo()同时，将DOM节点添加到内部的最后
prepend()在内部最前添加DOM节点
prependTo()同上，将DOM节点添加到内部的最前
——
before()在外部前面添加DOM节点
insertBefore()同上，将DOM节点添加到外部前面
after()在外部后面添加DOM节点
insertAfter()同上，将DOM节点添加到外部后面
——
clone()复制DOM节点（节点本身）
clone(true)深度克隆，连同DOM节点上绑定的事件
——
remove()删除当前DOM及其子元素
remove(dom节点)在同级DOM中删除指定的DOM
empty()删除当前DOM下的子元素，保留当前DOM
<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
</head>
<body>
	<div class="box" style="background-color: #eee">
		<span>这是已有的内容</span>
	</div>
	<p class="p1">This is a p</p>
	<p class="p2">This is another p</p>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
	var dom1 = $("<p><span>这是添加到后面的内容</span></p>");
	var dom2 = $("<p><span>这是添加到前面的内容</span></p>");

	$(".box").append(dom1);
	//等同于：$(dom1).appendTo($(".box"));
	$(".box").prepend(dom2);
	//等同于：$(dom2).prependTo($(".box"));

	$(".box").before($("<strong>strong before</strong>"));
	//等同于：$("<strong>strong</strong>").insertBefore($(".box"));
	$(".box").after($("<strong>strong after</strong>"));
	//等同于：$("<strong>strong after</strong>").insertAfter($(".box"));

	$(".p1, .p2").click(function() {
		$(this).css("color", "red");
	})
	$(".box").append($(".p1").clone()); // 克隆节点本身，点击不变色
	$(".box").append($(".p2").clone(true)); // 深度克隆，变色
</script>
</html>

在这里插入图片描述

小练习：动态删除表格条目

  1. 布局

在这里插入图片描述

  1. 全选

在这里插入图片描述

  1. 删除

在这里插入图片描述

  1. 大图预览

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
	<style>
	    body {
	      font-size: 12px;
	    }

	    table {
	      width: 360px;
	      border-collapse: collapse;
	      margin: 0 auto;
	    }

	    table tr th, td {
	      border: solid 1px #666;
	      text-align: center;
	    }

	    table tr td img {
	      border: solid 1px #ccc;
	      padding: 3px;
	      width: 42px;
	      height: 60px;
	      cursor: hand;
	    }

	    table tr td span {
	      float: left;
	      padding-left: 12px;
	    }

	    table tr th {
	      background-color: #ccc;
	      height: 32px;
	    }

	    .clsImg {
	      position: absolute;
	      border: solid 1px #ccc;
	      padding: 3px;
	      width: 85px;
	      height: 120px;
	      background-color: #eee;
	      display: none;
	    }

	    .btn {
	      border: #666 1px solid;
	      padding: 2px;
	      width: 50px;
	      filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#ECE9D8);
	    }
  </style>
</head>
<body>
<!-- 内容表 -->
<table class="data">
  <tr>
    <th>选项</th>
    <th>编号</th>
    <th>封面</th>
    <th>购书人</th>
    <th>性别</th>
    <th>购书价</th>
  </tr>
  <tr id="0">
    <td><input id="Checkbox1" type="checkbox" value="0"/></td>
    <td>1001</td>
    <td><img src="images/01.jpg" alt=""/></td>
    <td>李小明</td>
    <td>男</td>
    <td>35.60 元</td>
  </tr>
  <tr id="1">
    <td><input id="Checkbox2" type="checkbox" value="1"/></td>
    <td>1002</td>
    <td><img src="images/02.jpg" alt=""/></td>
    <td>刘明明</td>
    <td>女</td>
    <td>37.80 元</td>
  </tr>
  <tr id="2">
    <td><input id="Checkbox3" type="checkbox" value="2"/></td>
    <td>1003</td>
    <td><img src="images/03.jpg" alt=""/></td>
    <td>张小星</td>
    <td>女</td>
    <td>45.60 元</td>
  </tr>
</table>
<!-- 全选/删除 尾部表 -->
<table>
  <tr>
    <td style="text-align:left;height:28px">
      <span><input id="chkAll" type="checkbox"/>全选</span>
      <span><input id="btnDel" type="button" value="删除" class="btn"/></span>
    </td>
  </tr>
</table>
<!-- 显示预览图 -->
<img id="imgTip" class="clsImg" src="images/01.jpg"/>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
	// 隔行变色
	$(".data tr:nth-child(even)").css("background-color", "#eee");

	// 单击全选时选中所有条目
	$("#chkAll").click(function() {
		if(this.checked)
			$(".data input[type=checkbox]").attr("checked", true);
		else
			$(".data input[type=checkbox]").attr("checked", false);
	});

	// 单击删除按钮，执行删除操作
	$("#btnDel").click(function() {
		var chAll = $(".data input[type=checkbox]");
		$.each(chAll, function(index, item) {
			if(this.checked)
				$(chAll[index]).parent().parent().empty();
		});
	});

	//单击图片时显示预览图
	var x=5, y=15;//图片的初始位置
	$(".data img").mousemove(function(event) {
		$(".clsImg").attr("src", $(this).attr("src"))
					.show()
					.css({
						top: (event.pageY + y) + "px",
						left: (event.pageX + x) + "px"
					});//显示
		$(".data img").mouseout(function(event) {
			$(".clsImg").fadeOut();
		});//隐藏
	});
</script>
</html>

事件和动画

元素相关尺寸获取

  • 获取和设置元素的尺寸
方法说明
$(dom).width()/height()获取元素的宽度/高度
$(dom).innerWidth()/innerHeight()获取包括padding的宽度/高度
$(dom).outerWidth()/outerHeight()获取包括padding和border的宽度/高度
$(dom).outerWidth(true)/outerHeight(true)获取包括padding、border和margin的宽度/高度
  • 获取相对页面的绝对位置
方法说明
$(dom).offset()
  • 获取浏览器可视区的宽高
方法说明
$(window).width()
$(window).height()
  • 获取页面文档的宽高
方法说明
$(document).width()
$(document).height()
  • 获取页面滚动距离
方法说明
$(document).scrollTop()
$(document).scrollLeft()
<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.box {
			width: 300px;
			height: 300px;
			margin: 50px;
			padding: 20px;
			border: 1px solid red;
		}
		span {
			display: none;
			border: 1px solid #000;
			padding: 3px;
			float: right;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	<span>回到顶部</span>
	<div style="height: 1000px;"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
	function log(info) {
		console.log(info);
	}

	//获取和设置元素的尺寸
	log($(".box").width()); //300
	$(".box").width("400");
	log($(".box").width()); //400
	log($(".box").innerWidth()); //440 = 400 + 20*2
	log($(".box").outerWidth()); //442 = 400 + 20*2 + 1*2
	log($(".box").outerWidth(true)); //542 = 400 + 20*2 + 1*2 + 50*2

	//获取相对页面的绝对位置
	log($(".box").offset()); //{top: 50, left: 50}

	//获取浏览器可视区的宽高
	log($(window).width());

	//获取页面文档的宽高
	log($(document).width());

	//获取页面滚动距离
	log($(document).scrollTop());//当前位置距顶部距离

	//页面滚动到100时显示“回到顶部”
	function topShow() {
		var top = Math.round($(document).scrollTop());
		if(top >= 100) 
			$("span").fadeIn(400);
		else
			$("span").fadeOut(400);
	}
	topShow(); //初始判断是否需要显示
	$(window).scroll(function() {topShow()});//滚到时动态判断
	$("span").click(function() {
		$(document).scrollTop(0);
	});//单击“回到顶部”，回到顶部
</script>
</html>

在这里插入图片描述

遍历DOM

$(dom).each(function(index, dom) { … });

<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
</head>
<body>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
	$("ul li").each(function(index, dom) {
		$(dom).html("列表项" + ++index);
	});
</script>
</html>

在这里插入图片描述

事件

事件说明
click()鼠标单击
mouseover()鼠标进入（进入子元素也触发）
mouseout()鼠标离开（离开子元素也触发）
mouseenter()鼠标进入（进入子元素不触发）
mouseleave()鼠标离开（离开子元素不触发）
keydown()按下键盘键
keyup()松开键盘键
keypress()按下和松开，即从键盘输入字符时
blur()元素失去焦点
focus()元素获得焦点
submit()用户提交表单时
hover()同时为mouseenter和mouseleave事件指定处理函数
ready()DOM加载完成时
resize()浏览器窗口的位置发生变化时
scroll()滚动条的位置发生变化时
<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
</head>
<body>
	<div class="box">box</div>
	<input type="text" name="user">
	<form>
		<input type="text">
		<input type="submit">
	</form>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
	//基本动作
	$(".son").click(function() {
		$(this).html("clicked");
	}).mouseover(function() {
		$(this).css("color", "red");
	}).mouseout(function() {
		$(this).css("color", "black");
	}).on("mouseover mouseout", function() { //多个动作绑定同个事件
		console.log("Change Color");
	});

	//当按下回车时，打印输入的值
	$("input[name=user]").keydown(function(event) {
		if(event.keyCode == 13) //回车键
			console.log($(this).val());
	});

	//输入时变灰，离开时变回白
	$("input[name=user]").focus(function() {
		$(this).css("background-color", "#eee");
	});
	$("input[name=user]").blur(function() {
		$(this).css("background-color", "#fff");
	});

	$("form").submit(function() {
		alert("Done");
	});
	//或者
	//	$("input[type=submit]").click(function() {
	//		alert("Done");
	//	});

	//hover()：同时为mouseenter和mouseleave事件指定处理函数
	$(".box").hover(function() {
		$(this).css("font-size", "28px");
	}, function() {
		$(this).css("font-size", "14px");
	});

	$(window).resize(function() {
		console.log("Wow, UR changing");
	});
</script>
</html>

动画

方法说明
show()显示
hide()隐藏
toggle()切换(显示<—>隐藏)
slideDown()向下滑动
slideUp()向上滑动
fadeIn()淡入
fadeOut()淡出
fadeTo()调整不透明度
animate()动画
<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
</head>
<body>
	<button>显示</button>
	<button>隐藏</button>
	<button>切换</button><br>
	<div class="box1" style="display: none;height: 100px;">box1</div>

	<button>向下滑动</button>
	<button>向上滑动</button><br>
	<div class="box2" style="display: none;height: 100px;">box2</div>

	<button>淡入</button>
	<button>淡出</button>
	<button>淡出到指定的不透明度</button><br>
	<div class="box3" style="display: none;height: 100px;">box3</div>

	<button>演示动画</button>
	<div class="box4" style="height: 200px;width: 200px;background-color: pink;">box4</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
	$("button").eq(0).click(function() {
		$(".box1").show();
	});
	$("button").eq(1).click(function() {
		$(".box1").hide();
	});
	$("button").eq(2).click(function() {
		$(".box1").toggle();
	});

	$("button").eq(3).click(function() {
		$(".box2").slideDown();
	});
	$("button").eq(4).click(function() {
		$(".box2").slideUp();
	});

	$("button").eq(5).click(function() {
		$(".box3").fadeIn();
	});
	$("button").eq(6).click(function() {
		$(".box3").fadeOut();
	});
	$("button").eq(7).click(function() {
		$(".box3").fadeTo(2000, .5);//时间，不透明度
	});

	$("button").eq(8).click(function() {
		$(".box4").animate({
			width: "100px",
			height: "100px"
		});
	});
</script>
</html>
  1. 显示/隐藏/切换

在这里插入图片描述

  1. 滑动

在这里插入图片描述
3. 淡入淡出

在这里插入图片描述
4. 演示动画

在这里插入图片描述

支持以下属性：backgroundPosition、borderWidth、borderBottomWidth、borderLeftWidth、borderRightWidth、borderTopWidth、borderSpacing、margin、marginBottom、marginLeft、marginRight、marginTop、outlineWidth、padding、paddingBottom、paddingLeft、paddingRight、paddingTop、height、width、maxHeight、maxWidth、minHeight、maxWidth、font、fontSize、bottom、left、right、top、letterSpacing、wordSpacing、lineHeight、textIndent

小练习：删除确认框

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
	<style type="text/css">
	    body {
	      font-size: 13px;
	    }

	    .divShow {
	      line-height: 32px;
	      height: 32px;
	      background-color: #eee;
	      width: 280px;
	      padding-left: 10px;
	      margin: 0 auto;
	    }

	    .divShow span {
	      padding-left: 50px
	    }

	    .dialog {
	      width: 360px;
	      border: solid 5px #666;
	      position: absolute;
	      display: none;
	      z-index: 101;
	    }

	    .dialog .title {
	      background-color: #fbaf15;
	      padding: 10px;
	      color: #fff;
	      font-weight: bold;
	    }

	    .dialog .title img {
	      float: right;
	    }

	    .dialog .content {
	      background-color: #fff;
	      padding: 25px;
	      height: 60px;
	    }

	    .dialog .content img {
	      float: left;
	    }

	    .dialog .content span {
	      float: left;
	      padding-top: 10px;
	      padding-left: 10px
	    }

	    .dialog .bottom {
	      text-align: right;
	      padding: 10px 10px 10px 0px;
	      background-color: #eee
	    }

	    .mask {
	      width: 100%;
	      height: 100%;
	      background-color: #000;
	      position: absolute;
	      top: 0px;
	      left: 0px;
	      filter: alpha(opacity=30);
	      display: none;
	      z-index: 100;
	    }

	    .btn {
	      border: #666 1px solid;
	      padding: 2px;
	      width: 65px;
	      filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#ECE9D8);
	    }
  </style>
</head>
<body>
	<!-- 数据显示 -->
	<div class="divShow">
		<input type="checkbox" id="checkbox1">
		<a href="$">这是一条可以删除的数据</a>
		<span>
			<input type="button" id="button1" value="删除" class="btn">
		</span>
	</div>
	<!-- 遮罩 -->
	<div class="mask"></div>
	<!-- 删除的对话框 -->
	<div class="dialog">
		<div class="title">
			<img class="close" src="images/close.gif" alt="点击可以关闭">删除时提示
		</div>
		<div class="content">
			<img src="images/delete.jpg">
			<span>您真的要删除该条记录吗</span>
		</div>
		<div class="bottom">
			<input type="button" id="button3" value="确定" class="btn">&nbsp;&nbsp;
    		<input type="button" id="button4" value="取消" class="btn">
		</div>
	</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
	//对话框动态居中
	function showDialog() {
		var objW = $(window);
		var objC = $(".dialog");
		//窗口的宽高
		var brsW = objW.width();
		var brsH = objW.height();
		//滚动条的距离
		var sclL = objW.scrollLeft();
		var sclT = objW.scrollTop();
		//对话框的宽高
		var curW = objC.width();
		var curH = objC.height();

		var left = sclL + (brsW - curW) / 2;
	    var top = sclT + (brsH - curH) / 2;
	    objC.css({
	      left: left,
	      top: top
	    })
	}
	//调整窗口大小时，对话框动态居中
	$(window).resize(function() {
		if($(".dialog").is(":visible"))
			showDialog();
	});

	//单击删除按钮时，显示对话框和遮罩，且居中对话框
	$("#button1").click(function() {
		$(".dialog").show();
		$(".mask").show();
		showDialog();
	});

	//单击右上角的“X”图标或取消时，执行关闭对话框和遮罩
	$(".close").click(function() {
		$(".dialog").hide();
		$(".mask").hide();
	});
	$("#button4").click(function() {
		$(".dialog").hide();
		$(".mask").hide();
	});

	//单击确定的时候，删除数据
	$("#button3").click(function() {
		//如果条目被选中，才进行删除
		if($("input:checked").length != 0)
			$(".divShow").remove();
		$(".dialog").hide();
		$(".mask").hide();
	});
</script>
</html>

JSON、Ajax和跨域

JSON

JSON（JavaScript Object Notation）JS对象简谱是一种轻量级的数据交换格式。

它实际上就是一个对象或数组，或对象中含有数组，或数组中含有对象。

  • JSON的表示方式
<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
</head>
<body>
	<table class="employee" border="1" width="400">
		<tr>
			<th>员工编号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>家庭住址</th>
		</tr>
	</table>
	<ul class="score"></ul>
	<table border="1" width="800" class="students">
	  <caption>学生成绩表</caption>
	  <thead>
		  <tr>
		    <th>学号</th>
		    <th>姓名</th>
		    <th>性别</th>
		    <th>年龄</th>
		    <th>成绩</th>
		    <th>住址</th>
		  </tr>
	  </thead>
	</table>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
	//1.对象表示方式
	var obj = {
		"id": "928142",
		"name": "Tom",
		"sex": "male",
		"age": 24,
		"addr": "GuangZhou China"
	};
	$(".employee").append("<tr><td>" + obj.id + "</td>"
							+ "<td>" + obj.name + "</td>"
							+ "<td>" + obj.sex + "</td>"
							+ "<td>" + obj.age + "</td>"
							+ "<td>" + obj.addr + "</td></tr>");
	//2.数组表示方式
	var score = [78,42,63,22,72,93];
	score.forEach(function(value, index) {
		$(".score").append("<li>" + value + "</li>");
	})

	//3.复杂表示法（对象+数组）
	var students = [
		{
			"id": "928142",
			"name": "Tom",
			"sex": "male",
			"age": 24,
			"addr": "GuangZhou China",
			"score": [78,42,63,22,72,93]
		},
		{
			"id": "212452",
			"name": "Ema",
			"sex": "female",
			"age": 27,
			"addr": "SuZhou China",
			"score": [26,62,83,22,72,93]
		}
	];
	for(var i in students) {
		$(".students").append("<tr><td>" + students[i].id + "</td>"
								+ "<td>" + students[i].name + "</td>"
								+ "<td>" + students[i].sex + "</td>"
								+ "<td>" + students[i].age + "</td>"
								+ "<td>" + students[i].score + "</td>"
								+ "<td>" + students[i].addr + "</td></tr>");
	}
</script>
</html>

在这里插入图片描述

  • JSON文件
  1. 不需要将数据赋给一个变量
  2. 键和字符型值（除数值型、布尔型、null、undefined之外）必须用双引号引起来，不能用单引号或不用引号
  3. 不允许出现分号和多余的逗号
  4. 不允许出现注释
[
	{
		"id": "928142",
		"name": "Tom",
		"sex": "male",
		"age": 24,
		"addr": "GuangZhou China",
		"score": [78,42,63,22,72,93]
	},
	{
		"id": "212452",
		"name": "Ema",
		"sex": "female",
		"age": 27,
		"addr": "SuZhou China",
		"score": [26,62,83,22,72,93]
	}
]

Ajax

Ajax（Asynchronous Javascript And XML）异步的Javascript和XML：目的是让Javascript发送http请求，与后台通信获取数据和信息；

Ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信；在通信过程中不会影响后续的JS执行，从而实现异步操作。

Ajax可以自己发送请求，不用通过浏览器地址栏，用来实现局部刷新。

  • 用Ajax发送请求
$.ajax({
	type: "get/post",
	url: "",
	async: "true/false",
	data: {
		//上传到服务器端的数据
	},
	dataType: "json/jsonp/xml/text/javascript",		//返回的数据类型或解决跨域（jsonp）
	timeout: ""	//请求超时时间（毫秒）
}).then(function(result) {
	//成功回调的处理代码
}).catch(function() {
	//失败回调的处理代码
});
  • 请求示例
<!DOCTYPE html>
<html>
<head>
	<title>SimWor</title>
	<meta charset="utf-8">
</head>
<body>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script type="text/javascript">
	$.ajax({
		url: "https://v0.yiketianqi.com/api",
		data: {
			version: "v61",
			appid: "62532765",
			appsecret: "PkSo6DqW"
		}
	}).then(function(result) {
		console.log(result);
	}).catch(function(err){
		console.log(err);
	});
</script>
</html>

在这里插入图片描述

跨域（JSONP）

同源策略：指的是协议、域名和端口相同；浏览器处于安全方面的考虑，只允许本域名下的接口交互，不同源的客户端脚本，在没有明确授权的情况下，不能读写对方的资源。

前端解决跨域：指定“dataType”为“jsonp”

L小Ray想有腮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery-1.12.4.js
10-02
jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
FrontEnd笔记 -- React
L小Ray想有腮
12-29 679
React 框架的初次学习笔记。参考的课程为《尚硅谷React全家桶2021》，B站课程的链接是：https://www.bilibili.com/video/BV184411x7F9?p=122。
FrontEnd笔记 -- Ajax
L小Ray想有腮
02-01 160
文章目录一、概述二、环境准备三、原生 Ajax3.1 GET3.2 POST3.3 参数设置3.4 JSON 数据处理3.4 nodemon 插件 一、概述 简介 全称为 Asynchronous Javascript And XML，就是异步的 JS 和 XML； 通过 Ajax 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据； Ajax 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。 优点 可以无需刷新页面而与服务端进行通信； 允许根据用户事件来更新部分页面
FrontEnd-js_2 & jQuery
Jimmy的博客
10-27 390
js四则运算小坑，除法结果太小时会转化成科学技术法，此时期待的商为0就成了非0值，出现在取商取余时，divmod 中坑 setTimeout setTimeInterval, 一个界面独独写两个setTimeInterval不做其他处理时间一定会错乱，暂且012-3456789 https://blog.csdn.net/clark_fitz817/article/details/7931...
轩小陌的Python笔记-day09 文件操作相关
hjjqazwsx的博客
03-29 3872
第二模块 函数&模块 第一模块主要是学习python基础知识，从第二模块开始就可以通过程序去解决工作中实际的问题。 第二模块的内容主要包含两大部分： 函数 一个用于专门实现某个功能的代码块（可重用）。 内置函数 len、bin、oct、hex...等 自定义函数 # 定义了一个函数，相当于封装了一个功能代码块 def send_email(): # 写了10行代码，实现了发送邮件。 pass goods = [ {"name": "电脑", "price": 1
cxf-rt-frontend-jaxws-3.0.16.jar 下载
09-30
cxf-rt-frontend-jaxws-3.0.16.jar jar包下载3.0.16版本下载
fcitx-frontend-qt5
03-28
fcitx-frontend-qt5的离线安装包
frontend-project-lvl3
03-22
Hexlet测试和棉绒状态：
frontend-starter-react-redux
05-09
前端启动器Reactredux 具有react-redux和flow的转载程序项目使用流程类型$ yarn install$ yarn flowyarn run v1.7.0$ /Users/mz/proj/frontend-starter-react-redux/node_modules/.bin/flowNo errors!面向前端学习者...
电力系统调度过程连续潮流matlab代码.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
【基于Java+Springboot的毕业设计】付费问答系统(源码+演示视频+说明).rar
04-26
【基于Java+Springboot的毕业设计】付费问答系统(源码+演示视频+说明).rar 【项目技术】 开发语言：Java 框架：Spingboot+vue 架构：B/S 数据库：mysql 【演示视频-编号：330】 https://pan.quark.cn/s/8dea014f4d36 【实现功能】 付费问答系统通过MySQL数据库与Spring Boot框架进行开发，付费问答系统能够实现新闻类型管理，问题帖子管理，付费记录管理，新闻信息管理，用户管理，轮播图管理等功能。
关于旁路电容和耦合电容-(详细说明)
最新发布
04-26
关于旁路电容和耦合电容-(详细说明)
Git 与 Simulink 测试：远程测试的最佳实践.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
重庆大学电气工程学院2011级电机学课堂测验 直流电机.pdf
04-26
重庆大学期末考试试卷，重大期末考试试题，试题及答案
LabVIEW 数据采集模板.zip
04-26
labview 与 C 和BASIC 一样，LabVIEW [2]也是通用的编程系统，有一个完成任何编程任务的庞大函数库。LabVIEW [3]的函数库包括数据采集、GPIB、串口控制、数据分析、数据显示及数据存储，等等。LabVIEW [3]也有传统的程序调试工具，如设置断点、以动画方式显示数据及其子程序（子VI）的结果、单步执行等等，便于程序的调试。 LabVIEW [2]（Laboratory Virtual Instrument Engineering Workbench）是一种用图标代替文本行创建应用程序的图形化编程语言。传统文本编程语言根据语句和指令的先后顺序决定程序执行顺序，而 LabVIEW 则采用数据流编程方式，程序框图中节点之间的数据流向决定了VI及函数的执行顺序。VI指虚拟仪器，是 LabVIEW 的程序模块。 LabVIEW [2] 提供很多外观与传统仪器（如示波器、万用表）类似的控件，可用来方便地创建用户界面。用户界面在 LabVIEW 中被称为前面板。使用图标和连线，可以通过编程对前面板上的对象进行控制。这就是图形化源代码，又称G代码。
营业额日报.xlsx
04-26
Excel数据看板，Excel办公模板，Excel模板下载，Excel数据统计，数据展示
Matlab菌丝检测识别项目.zip
04-26
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。
PictureUnlock_s_678376.pictureunlock
04-26
PictureUnlock_s_678376.pictureunlock

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值