一：jQuery的加载DOM方式有哪些？
//JavaScript编写方式
window.onload = function() {
console.log("a")
}
function add(){
console.log(123) ;
}
window.load()=add();
<body onload="alert(123)"></body>
//jQuery编写方式
$(function() {
console.log("$a")
})
jQuery编写function()方法的完整方式
$(document).ready(function(){
console.log("你好")
})
二：jQuery的绑定事件方式有哪些？
//事件委托
// 将button的click事件委托给table
//删除单行
$("table").on("click","button",function(){
$(this).parents("tr").remove();
})
//删除全部
$("#delAll").click(function() {
$("tr:gt(0)").remove();
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件</title>
<script src="js/jquery-3.5.1.js"></script>
<style>
table,
td,
tr {
border: 1px solid black;
border-collapse: collapse;
}
.aa {
background: #2e2929;
color: white;
font-weight: bold;
text-align: center;
}
</style>
<script>
$(function() {
// 给表格的第一行添加aa样式
$("tr").first().addClass("aa");
//绑定事件的两种方式
//元素.on("事件名".function(){})
//元素.事件名(function(){})
//设置事件的方法
//javascript: onclick
//jquery:click
// $("td button").click(function(e) {
// // e 事件对象
// // e.target 当前点击的对象
// // 我得知道我点击了谁? this
// //parents() : $ 往上查找父元素
// //将this变成$对象 $(this)
// $(this).parents("tr").remove();
// })
//事件委托
// 将button的click事件委托给table
//删除单行
$("table").on("click","button",function(){
$(this).parents("tr").remove();
})
//删除全部
$("#delAll").click(function() {
$("tr:gt(0)").remove();
})
//增加一行
$("#addOne").click(function() {
//$新建标签
var tr = $("<tr>");
tr.append($("<td>赵匡胤</td>"));
tr.append($("<td>卧榻之侧,岂容他人酣睡</td>"));
tr.append($("<td><button>删除</button></td>"));
//将标签加入到table中
$("table").append(tr);
})
})
</script>
</head>
<body>
<table width="300px">
<tr>
<td>标题</td>
<td>内容</td>
<td>操作</td>
</tr>
<tr>
<td>李白</td>
<td>十步杀一人,千里不留行</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>李白</td>
<td>十步杀一人,千里不留行</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>李白</td>
<td>十步杀一人,千里不留行</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>李白</td>
<td>十步杀一人,千里不留行</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>陈汤</td>
<td>明犯我强汉者，虽远必诛</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>陈汤</td>
<td>明犯我强汉者，虽远必诛</td>
<td><button>删除</button></td>
</tr>
<tr>
<td>陈汤</td>
<td>明犯我强汉者，虽远必诛</td>
<td><button>删除</button></td>
</tr>
</table>
<button id="delAll">全部删除</button>
<button id="addOne">新增一行</button>
</body>
</html>
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件</title>
<script src="js/jquery-3.5.1.js"></script>
<style>
div {
border: 10px solid red;
}
</style>
<script>
//加载函数
$(function() {
//合成事件/事件切换
//hover() 鼠标悬停合成事件
$("img").hover(function(e) {
//鼠标移入第一个函数
$(this).css("border", "2px solid blue");
}, function(e) {
//鼠标移出
$(this).css("border", "");
})
//toggle() 鼠标点击合成事件
// 用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
//如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
$("div").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
})
</script>
</head>
<body>
<div>
<img src="img/1.gif" />
</div>
<button>来点我啊</button>
</body>
</html>
在一个对象上触发事件，如果此对象定义了此事件的处理程序，那么此事件就会调用该处理程序，如果没有定义此事件处理程序，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即 Dom对象
//事件传播/事件冒泡
$("img").click(function() {
console.log("img")
//阻止事件冒泡
return false;
})
//移除事件
//移除img的点击事件
$("img").unbind("click")
//one 具备一次点击事件
/**
$("button").one("click",function(){
console.log("aaaaa")
})
**/
//按钮只允许点击一次
var f = true;
$("button").click(function() {
if (f) {
console.log("aaaa")
}
f = !f;
})
三：动画效果
//基本动画效果
//隐藏 hide(Time)
//Time 毫秒
$("#d1").click(function() {
//让图片隐藏
$("img").hide(3000);
})
//显示 show(Time)
$("#d2").click(function() {
//让图片显示
$("img").show(3000);
})
//切换 toggle(Time)
$("#d3").click(function() {
//让图片显示
$("img").show(3000);
})
//滑动动画效果
//slideUp(Time) 动画收缩(向上滑动)---隐藏
$("#d4").click(function() {
//让图片隐藏
$("img").slideUp(3000);
})
//slideDown(Time) 动画展开(向下滑动)---显示
$("#d5").click(function() {
//让图片显示
$("img").slideDown(3000);
})
//淡入淡出(透明度)效果
//fadeIn(Time) 淡入(透明度减少)
$("#d6").click(function() {
//让图片显示
$("img").fadeIn(3000);
})
//fadeOut(Time) 淡出(透明度增加)
$("#d7").click(function() {
//让图片隐藏
$("img").fadeOut(3000);
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例</title>
<script src="js/jquery-3.5.1.js"></script>
<script>
$(function() {
$("li").click(function() {
//将当前点击的li里面的ul设置为下拉显示
$(this).children("ul").slideDown(1000);
//将其余li中的ul设置为上拉隐藏
$(this).siblings().children("ul").slideUp(1000);
})
})
</script>
</head>
<body>
<ul>
<li>
汉朝
<ul>
<li>霍去病</li>
<li>卫青</li>
<li>李广</li>
</ul>
</li>
<li>
明朝
<ul>
<li>徐达</li>
<li>常遇春</li>
<li>蓝玉</li>
</ul>
</li>
<li>
唐朝
<ul>
<li>李靖</li>
<li>薛仁贵</li>
<li>李白</li>
</ul>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义动画</title>
<script src="js/jquery-3.5.1.js"></script>
<style>
img {
position: absolute;
/*绝对布局*/
}
</style>
<script>
$(function() {
$("#d1").click(function() {
//自定义动画语法：
//元素.animate({
// 属性:属性值
//},Time)
// animate 动画
//缩放
//width
//height
$("img").animate({
width: 400 + "px",
height: 400 + "px"
}, 1000)
})
//移动
//top
//left
//移动(本元素),距离
//top="+="
//left="-="
//给document添加键盘按下事件
$(document).keydown(function(e) {
var top = $("img").offset().top
var left = $("img").offset().left
if (e.code == 'ArrowLeft') {
left -= 200;
}
if (e.code == 'ArrowRight') {
left += 200;
}
if (e.code == 'ArrowUp') {
top -= 200;
}
if (e.code == 'ArrowDown') {
top += 200;
}
$("img").animate({
left: left + "px",
top: top + "px"
}, 1000)
})
})
</script>
</head>
<body>
<img src="img/1.gif" alt="">
<button id="d1">点我变大~~~</button>
</body>
</html>
