注：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);
})
jquery的事件处理方法
原文地址：https://www.cnblogs.com/zhangzonghua/p/jquery_event.html