1. jQuery安装
- 打开jQuery官网：https://jquery.com/
jQuery官网.png - 点击按钮【Download jQuery】打开下载页，并下接页面到下载链接
download jQuery.png - 开发环境选择链接【Download the uncompressed, development jQuery 3.6.0】下载
生产环境选择链接【Download the compressed, production jQuery 3.6.0】下载
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>测试网页</title>
<script src="jquery-3.6.0.js"></script>
</head>
<body>
</body>
</html>
2. jQuery的使用
选择器
元素选择器
$("p")
#id 选择器
$("#test")
.class 选择器
$(".test")事件方法
$(document).ready()
$(document).ready(function(){
});
click()：当按钮点击事件被触发时会调用一个函数。
$("p").click(function(){
$(this).hide();
});
dblclick()：当双击元素时，会发生 dblclick 事件。
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()：当鼠标指针穿过元素时，会发生 mouseenter 事件。
$("#p1").mouseenter(function(){
alert('您的鼠标移到了 id="p1" 的元素上!');
});
mouseleave()：当鼠标指针离开元素时，会发生 mouseleave 事件。
$("#p1").mouseleave(function(){
alert("再见，您的鼠标离开了该段落。");
});
mousedown()：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下！");
});
mouseup()：当在元素上松开鼠标按钮时，会发生 mouseup 事件。
$("#p1").mouseup(function(){
alert("鼠标在段落上松开。");
});
hover()：hover()方法用于模拟光标悬停事件。
$("#p1").hover(
function(){
alert("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
}
);
focus()：当元素获得焦点时，发生 focus 事件。
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
blur()：当元素失去焦点时，发生 blur 事件。
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
- 效果方法
hide() 和 show()：隐藏和显示
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
toggle()：切换 hide() 和 show() 方法
$("button").click(function(){
$("p").toggle();
});
淡入淡出
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
滑动
slideDown()
slideUp()
slideToggle()
animate()：动画方法
# $(selector).animate({params},speed,callback);
$("button").click(function(){
$("div").animate({left:'250px'});
});
stop()：停止动画
# $(selector).stop(stopAll,goToEnd);
$("#stop").click(function(){
$("#panel").stop();
});
- HTML / CSS 方法
text()、html() 以及 val()：获得内容
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
alert("值为: " + $("#test").val());
});
设置内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
attr()：设置属性
$("button").click(function(){
$("#runoob").attr("href","http://www.runoob.com/jquery");
});
添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
$("p").append("追加文本");
$("p").prepend("在开头追加文本");
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");
删除元素
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
$("#div1").remove();
$("#div1").empty();
获取并设置 CSS 类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
css() 方法
# css("propertyname");
$("p").css("background-color");
设置 CSS 属性
# css("propertyname","value");
$("p").css("background-color","yellow");
尺寸
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
- 遍历方法
向上遍历 DOM 树
parent()
parents()
parentsUntil()
$(document).ready(function(){
$("span").parent();
});
$(document).ready(function(){
$("span").parents();
});
$(document).ready(function(){
$("span").parentsUntil("div");
});
向下遍历 DOM 树
children()
find()
$(document).ready(function(){
$("div").children();
});
$(document).ready(function(){
$("div").find("span");
});
- AJAX 方法
load() 方法
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
get() 和 post() 方法
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
