示例代码:?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery3.4.1.js"></script> <style> .containr{ position: relative; width: 120px; height: 40px; float: right; background-color: lemonchiffon; } .car{ position: absolute; top: 0; right: 0; width: 120px; /*height: 40px;*/ line-height: 40px; text-align: center; } .cd{ position: absolute; top: 40px; right: 0; width: 300px; height: 150px; background-color: rosybrown; display: none; } </style> </head> <body> <div class="containr"> <div class="car">购物车</div> <div class="cd"></div> </div> </body> <script> $(function () { /* 显示,隐藏,切换 show hidden toggle */ // toggle $('.containr').hover(function () { //停止动画,保证动画效果不叠加 $('.cd').stop() //自动切换 $('.cd').toggle() }) //状态表示位 var flag=false // show hide $('.containr').hover(function () { if (flag){ $('.cd').hide() flag=false }else { $('.cd').show() flag=true } }) }) </script> </html>示例代码:?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery3.4.1.js"></script> <style> .containr{ position: relative; width: 120px; height: 40px; float: right; background-color: lemonchiffon; } .car{ position: absolute; top: 0; right: 0; width: 120px; /*height: 40px;*/ line-height: 40px; text-align: center; } .cd{ position: absolute; top: 40px; right: 0; width: 300px; height: 150px; background-color: rosybrown; display: none; } </style> </head> <body> <div class="containr"> <div class="car">购物车</div> <div class="cd"></div> </div> </body> <script> $(function () { // 滑动系列: slideDown 下滑, slideUp 上滑 , ,top()清除动画叠加的动画效果 $('.containr').hover(function () { // 关闭动画, 防止动画叠加 $('.cd').stop() // 自动切换 $('.cd').slideToggle(400,fn) // 回调函数 function fn() { } }) // slideDown 滑出 , slideUp 滑入 //鼠标进入和移除,使用滑动动画 $('.containr').mouseenter(function () { $('.cd').stop() $('.cd').slideDown(300) }) $('.containr').mouseleave(function () { $('.cd').stop() $('.cd').slideUp(300) }) }) </script> </html>示例代码:?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery3.4.1.js"></script> <style> .containr{ position: relative; width: 120px; height: 40px; float: right; background-color: lemonchiffon; } .car{ position: absolute; top: 0; right: 0; width: 120px; /*height: 40px;*/ line-height: 40px; text-align: center; } .cd{ position: absolute; top: 40px; right: 0; width: 300px; height: 150px; background-color: rosybrown; display: none; } </style> </head> <body> <div class="containr"> <div class="car">购物车</div> <div class="cd"></div> </div> </body> <script> $(function () { /* 淡入淡出系列 fadeIn fadeOut fadeToggle */ //fadeToggle $('.containr').hover(function () { $('.cd').stop() // fn 是回调函数 $('.cd').fadeToggle(1000,fn) }) // 回调函数, 执行完动画执行此函数 function fn() { $('.car').css('color','red') } // fadeOut 淡出 , fadeIn 淡入 var flag=false $('.containr').hover(function () { if (flag){ $('.cd').stop() $('.cd').fadeOut(100,fn1) flag=false }else { $('.cd').stop() $('.cd').fadeIn(100,fn2) flag=true } }) function fn1() { $('.car').css('color','black') } function fn2() { $('.car').css('color','red') } }) </script> </html> 示例代码:?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery3.4.1.js"></script> <style> /*div{*/ /* width: 100px;*/ /* height: 100px;*/ /* background-color: mediumaquamarine;*/ /*}*/ div { position: absolute; left: 20px; top: 30px; width: 100px; height: 100px; background-color: green; } </style> </head> <body> <div></div> </body> <script> $(function () { //自定制动画效果1 var json1={ "width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100 } // 自定制动画效果2 var json2={ "width": 100, "height": 100, "left": 100, "top": 100, "border-radius": 100, "background-color": "red" }; //触发动画 $('div').animate(json1,3000,function () { $('div').animate(json2,3000,function () { alert('自定制动画完毕!!') }) }) }) </script> </html>bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
如果没有参数，则删除所有绑定的事件。
如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
/* bind/unbind */ $('选择器').bind(type,data,fn) //绑定事件 $('选择器').unbind(type) // 解绑事件 /* 参数说明 type (String) : 事件类型 data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象 fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数 */示例代码:?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery3.4.1.js"></script> </head> <body> <button>bind绑定事件</button> </body> <script> // bind(type,data,fn) // type: 事件类型 // data: 传参 // fn : 匿名方法 $('button').bind('click',{'a':'b'},function () { alert('bind') }) </script> </html> 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同
//语法: one(type,data,fn) /* 参数解释 type (String) : 事件类型 data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象 fn (Function) : 绑定到每个匹配元素的事件上面的处理函数 */ 示例代码:?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery3.4.1.js"></script> </head> <body> <p>21312</p> </body> <script> $("p").one("click", function(){ //只有第一次点击的时候才会触发，再次点击不会触发了 alert( $(this).text() ); }); </script> </html>委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。
原理：利用冒泡的原理，把事件加到父级上，触发执行效果。
作用：
1.性能要好 2.针对新创建的元素，直接可以拥有事件
事件源 :
跟this作用一样(他不用看指向问题，谁操作的就是谁),event对象下的
使用情景：
为DOM中的很多元素绑定相同事件； 为DOM中尚不存在的元素绑定事件；
//语法: on(type,selector,data,fn); /*参数解释: events( String) : 一个或多个空格分隔的事件类型 selector( String) : 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素 data: 当一个事件被触发时，要传递给事件处理函数的event.data。 fn:回调函数 */示例代码:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="jquery3.4.1.js"></script> </head> <body> <!--on--> <div> <button>事件委托</button> </div> </body> <script> // 没有事件委托,只有第一个按钮执行弹框 $('button').click(function () { alert('没有事件委托') }) var btn=document.createElement('button') btn.innerText='123' $('body').append(btn) /* 事件委托 */ $('body').on('click','button',function () { alert('事件委托') }) var btn=document.createElement('button') btn.innerText='123' $('div').append(btn) </script> </html>先捕获再冒泡
事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。
事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。
无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是事件传播，
简易理解: 事件冒泡就是触发子元素事件,父元素的事件也会执行 /* 解决事件冒泡 */ 方法1: event.stopPropagation() 方法2: return false
示例代码:?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .father{ width: 200px; height: 200px; background-color:mediumaquamarine; margin: 0 auto; } .son1{ width: 100px; height: 100px; background-color: red; } </style> <script src="jquery3.4.1.js"></script> </head> <body> <div class="father"> <div class="son1">1</div> </div> </body> <script> // 事件冒泡就是事件叠加, // 进入了子框,父框的事件也会被触发,造成用户体验极差 $('.father').click(function () { alert('进入父div框') }) $('.son1').click(function (event) { // 清除事件冒泡 console.log(event) alert('进入子son1div框') //方式一: event.stopPropagation() event.stopPropagation() //方式二: return false return false }) </script> </html> 示例代码：?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="a">123</div> </body> <script src="jquery3.4.1.js"></script> <script> /* 浏览器窗口加载: 加载所有的音频,视频,资源文件 * 缺点: 耗时, 只能加载一次 * */ window.onload(function () { alert('浏览器当前窗口加载所有资源,音频视频.') }) /*jQuery 加载所有的视频,音频,所有得资源*/ $(window).ready( function () { alert('jq加载所有的资源') } ) /*jQuery 加载文档树*/ $(document).ready( function () { alert('jQ加载文档树上的资源') } /*在页面没有完全显示，即白屏的时侯就弹出提示对话框了。说明mytest在页面没有显示完成时就被调用*/ document.onload = myTest() document.onload = function () { alert('13132112311') } function myTest() { alert('弹出一个弹框') } ) </script> </html>转载于:https://www.cnblogs.com/dengl/p/11380892.html
