jQuery 笔记

贡献者： addis

本文处于草稿阶段。

预备知识　JavaScript 入门笔记

如果你使用 React 或 Vue 这样的框架，就不许需要 jQuery
jQuery 命令通常在 document ready 内部使用 $(document).ready(function(){/*jQuery 命令*/});，另一种等效的格式为 $(function(){/*jQuery 命令*/})
Selector: $("p") 选择所有 <p>...</p> 元素。例如：$(document).ready(function(){$("button").click(function(){$("p").hide();});}); 其中 click(回调函数) 设置按钮的回调函数，即 $("p").hide()，隐藏所有段落。相反，.show() 重新显示。
.hide(speed, callback) 其中 speed 是毫秒，callback 是完成后的回调
.toggle() 或者 .toggle(speed, callback) 让隐藏的元素显示，显示的元素隐藏
$("#id") 选中所有指定 id 的元素
$(".class") 选中所有指定 class 的元素

　　事件

$(document).ready() 网页渲染完成
.click() 按下，.dbclick() 双击
.mouseenter() 鼠标进入元素。例子：$(document).ready(function(){$("#p1").mouseenter(function(){做一些事});});
.mouseleave() 离开元素，.mousedown() 按下鼠标左键，.mouseup() 松开鼠标左键。
.hover(fun1,fun2) 相当于 .mouseenter(fun1); .mouseleave(fun2);
<input> 元素有 $("input").focus() 和 .blur()，分别是光标选中和离开
动画没有执行完就可以执行下面的代码（异步）

1. DOM manip

Document Object Model (DOM) 代表整个 html 页面的结构树。
allows programs and scripts to dynamically access and update the content, structure, and style of a document
attr(属性) 获取元素的属性，如 $("#id").attr("href")

　　一个实时获取鼠标坐标的例程

<!DOCTYPE html>
<html>
<head>
	<script src=
	"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script>
		$(document).mousemove(function(event) {
			$("#btn1").text(event.pageX + ", " + event.pageY);
		});
	</script>
</head>
<body>
	<button id="btn1">Show Text</button>
</body>
</html>