jQuery基础

简介

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。官网： https://jquery.com/.write less,do more.
网页中添加 jQuery:
jQuery库： https://pan.baidu.com/s/1s_eWWbkqWIzaM2BztZaoSQ .
提取码：5yci
jQuery 库是一个 JavaScript 文件可以使用 HTML 的

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

---

jQuery选择器

语法	描述
$("*")	选取所有元素
$(".class")	给定的css类名匹配元素
$("#id")	给定ID匹配元素
$(“element”)	给定的元素标签名匹配所有元素
$(this)	选取当前 HTML 元素
$(“p:first”)	选取第一个 元素
$(“ul li:first”)	选取第一个 ul 元素的第一个 li 元素
$(“ul li:first-child”)	选取每个 ul元素的第一个 li 元素
$("[href]")	选取带有 href 属性的元素
$(“a[target=’_blank’]”)	选取所有 target 属性值等于 “_blank” 的a元素
$(":button")	选取所有 type=“button” 的 元素 和 元素
$(“tr:even”)	选取偶数位置的 tr 元素
$(“tr:odd”)	选取奇数位置的 tr元素

---

事件

页面对不同访问者的响应叫做事件。

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave	blur	unload
hover

常用jQuery事件方法

1. on
   向元素添加事件处理程序

$(document).ready(function(){
  	$("p").on("click",function(){
    	alert("段落被点击了。");
		  });
	});

2. off
   移除通过 on() 方法添加的事件处理程序

$("button").click(function(){
   $("p").off("click");
});

3. one
   当所有段落被第一次点击的时候，显示所有其文本。

jQuery 代码:
$("p").one("click", function(){
  alert( $(this).text() );
});

4. trigger()
   触发绑定到被选元素的所有事件

5. $(document).ready()
   $(document).ready() 方法允许我们在文档完全加载完后执行函数。

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

6. click()
   click() 方法是当按钮点击事件被触发时会调用一个函数。
   当点击事件在某个 < p> 元素上触发时，隐藏当前的 < p> 元素：

$("p").click(function(){
  $(this).hide();
});

---

效果

方法	描述
show()	显示被选元素
hide()	隐藏被选元素
toggle()	hide() 和 show() 方法之间的切换
slideDown()	通过调整高度来滑动显示被选元素
slideToggle()	slideUp() 和 slideDown() 方法之间的切换
slideUp()	通过调整高度来滑动隐藏被选元素
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	把被选元素逐渐改变至给定的不透明度
fadeToggle()	在 fadeIn() 和 fadeOut() 方法之间进行切换
animate()	对被选元素应用"自定义"的动画