注：jquery是插件，需要导包
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <P>示范文本</P> <img src="图片地址"> </body> </html>
1.自运行函数
因为加载顺序的问题，不能在script中直接获取html中的内容，这时我们可以使用
自运行函数，其会在html加载完成后才开始运行.写法：
$(function(){
$("p").css("","")
})
2.事件模拟操作
模拟操作，用代码发动事件
$("p").trigger("click"); //触发点击p标签元素
$("p").click(); //简写版
3.冒泡处理
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>事件冒泡处理机制</title> <script type="text/javascript" src="../JQ1/jquery-3.2.1.js"></script> <script type="text/javascript"> $(function(){ $("#d3").click(function(e){ alert("点了D3"); e.stopPropagation(); //JQ取消事件冒泡 }) $("#d2").click(function(e){ alert("点了D2"); e.stopPropagation(); }) $("#d1").click(function(e){ alert("点了D1"); e.stopPropagation(); }) }); </script> <style type="text/css"> div{ border:1px solid #ccc; margin:10px; padding:20px; } #d1{ width:300px; height:300px; background-color:red; } #d2{ width:200px; height:200px; background-color:blue; } #d3{ width:100px; height:100px; background-color:green; } </style> </head> <body> <div id="d1" >D1 <div id="d2" >D2 <div id="d3" >D3</div> </div> </div> </body> </html>
4.合成事件
（1）hover（mouseenter,mouseleave）；模拟鼠标移入、移出事件
$("img").hover(function(){} , function(){} );
(2)toggle（function（）{}）; 取消操作，第一次执行，第二次取消
$("img").click(functon(){
$("img").toggle( function(){$(this.width("200px").height("200px"))} )
});
5.动画效果
（1）show / hide
作用：通过改变元素的高度和宽度来显示或者隐藏
用法：node.show(执行时间，回调函数)
执行时间：slow（慢）、normal（一般速度）、fast（快）、或者写数字（单位为毫秒）
$(function(){
function show(){
$("img").show(1000,hide)
}
function hide(){
$("img").show(1000,show)
}
$("img").click(hide);
})
(2) slideDown() / slideUp
上下滑动效果，通过改变高度来隐藏和显示，用法同上
（3）fadIn（）/ fadOut()
淡入淡出，用法同上
（4）animate（偏移位置，执行时间，回调函数）
自定义动画效果
$(function{
$("img").css("position","absolute");
function move(){
$("img").animate( {left:"500px",opacity:"0.1"},2000 );
$("img").animate( {top:"500px",opacity:"1"},2000 );
$("img").animate( {left:"0px",opacity:"0.1"},2000 );
$("img").animate( {top:"0px",opacity:"1"},2000 );
}
$("img").click(move);
})
