jQuery其他事件
| <style type="text/css"> |
| | |
| | </style> |
| | <script type="text/javascript" src="[js/jquery-1.12.4.min.js] (js/jquery-1.12.4.min.js)"></script> |
| | <script type="text/javascript"> |
| | // //JS原生写法 |
| | // window.onload = function(){ |
| |
|
| | // } |
| |
|
| | // //jQuery写法，等同于上面写法 |
| | // $(window).load(function(){ |
| |
|
| | // }) |
| |
|
| | // //ready的写法 |
| | // $(document).ready(function(){ |
| |
|
| | // }) |
| |
|
| | // //ready的简写 |
| | // $(function(){ |
| |
|
| | // }) |
| |
|
| | // 窗口改变尺寸的时候，会高频触发 |
| | $(window).resize(function() { |
| | console.log('3'); |
| | }); |
| | </script> |
| | </head> |
| | <body> |
| | <div id="div1"></div> |
| | </body> |
绑定事件bind
| <style type="text/css"> |
| | |
| | </style> |
| | <script type="text/javascript" src="[js/jquery-1.12.4.min.js](js/jquery-1.12.4.min.js)"></script> |
| | <script type="text/javascript"> |
| | $(function(){ |
| | // //只能绑定click事件，不能绑定其他的了 |
| | // $('#btn').click(function() { |
| | // /* Act on the event */ |
| | // }); |
| |
|
| | //bind方式可绑定多个事件 |
| | $('#btn').bind('click mouseover', function() { |
| | alert('hello!'); |
| |
|
| | //取消绑定事件 |
| | $(this).unbind('mouseover'); |
| | }); |
| | }) |
| | </script> |
| | </head> |
| | <body> |
| | <input type="button" value="按钮" id="btn"> |
| | </body> |
| | </html> |
自定义事件
| <style type="text/css"> |
| | |
| | </style> |
| | <script type="text/javascript" src="[js/jquery-1.12.4.min.js](js/jquery-1.12.4.min.js)"></script> |
| | <script type="text/javascript"> |
| | $(function(){ |
| | //自定义事件只能用bind方式绑定，第一个参数是事件的名字，第二个参数是事件发生时执行的函数 |
| | $('#btn1').bind('hello', function(){ |
| | alert('hello'); |
| | }) |
| | $('#btn1').bind('click', function(){ |
| | alert('click'); |
| | }) |
| | $('#btn2').click(function() { |
| | // trigger即可以触发自定义事件，也可以触发原始的事件 |
| | $('#btn1').trigger('hello'); |
| | $('#btn1').trigger('click'); |
| | }); |
| | |
| | //不一定点击按钮触发，也可页面加载时触发，也可在满足某种if条件时触发 |
| | // $('#btn1').trigger('hello'); |
| | }) |
| | </script> |
| | </head> |
| | <body> |
| | <input type="button" value="按钮" id="btn1"> |
| | <input type="button" value="按钮2" id="btn2"> |
| | </body> |
| | </html> |
事件冒泡
| <style type="text/css"> |
| | .grandfather{ |
| | width: 300px; |
| | height: 300px; |
| | background-color: green; |
| | position: relative; |
| | } |
| | .father{ |
| | width: 200px; |
| | height: 200px; |
| | background-color: gold; |
| | } |
| | .son{ |
| | width: 100px; |
| | height: 100px; |
| | background-color: red; |
| | position: absolute; |
| | left: 0; |
| | top: 400px; |
| | } |
| | </style> |
| | <script type="text/javascript" src="[js/jquery-1.12.4.min.js](js/jquery-1.12.4.min.js)"></script> |
| | <script type="text/javascript"> |
| | $(function(){ |
| | $('body').click(function() { |
| | alert(4); |
| | }); |
| | $('.grandfather').click(function() { |
| | alert(3); |
| | }); |
| | $('.father').click(function() { |
| | alert(2); |
| | }); |
| | $('.son').click(function(event) {//event代表当前事件 |
| | alert(1); |
| | // console.log(event);//显示很多属性，其中clientX、clientY就是点击的坐标 |
| | // alert("X轴坐标：" + event.clientX); |
| |
|
| | // //阻止事件冒泡 |
| | // event.stopPropagation(); |
| |
|
| | //合并阻止操作：把阻止冒泡和阻止默认行为合并 |
| | return false; |
| | }); |
| |
|
| | //阻止右键菜单 |
| | $(document).contextmenu(function(event){ |
| | // //阻止默认行为（原来右键能弹出菜单，阻止后无法弹出） |
| | // event.preventDefault(); |
| |
|
| | //合并阻止 |
| | return false; |
| | }) |
| | }) |
| | </script> |
| | </head> |
| | <body> |
| | <div class="grandfather"> |
| | <div class="father"> |
| | <div class="son"></div> |
| | </div> |
| | </div> |
| | </body> |
定时器弹框
| <style type="text/css"> |
| | .pop_con{ |
| | display: none;/*默认不显示，用定时器显示*/ |
| | } |
| | .pop{ |
| | width: 400px; |
| | height: 300px; |
| | background-color: #fff; |
| | border: 1px solid #000; |
| | position: fixed;/*使用固定定位*/ |
| | left: 50%;/*左上角位于页面中心*/ |
| | top: 50%; |
| | margin-left: -200px;/*让div向左偏移半个宽度、向上偏移半个高度，使div位于页面中心*/ |
| | margin-top: -150px; |
| | z-index: 9999;/*弹窗在最前面*/ |
| | } |
| | /*遮罩样式*/ |
| | .mask{ |
| | position: fixed; |
| | width: 100%; |
| | height: 100%; |
| | background-color: #000; |
| | left: 0; |
| | top: 0; |
| | /*设置透明度30%，兼容IE6、7、8*/ |
| | opacity: 0.3; |
| | filter: alpha(opacity=30); |
| | z-index: 9990;/*遮罩在弹窗后面*/ |
| | } |
| | </style> |
| | <script type="text/javascript" src="[js/jquery-1.12.4.min.js](js/jquery-1.12.4.min.js)"></script> |
| | <script type="text/javascript"> |
| | $(function(){ |
| | $('#btn').click(function() { |
| | $('#pop').show(); |
| | return false; |
| | }); |
| | $('#shutoff').click(function() { |
| | $('#pop').hide(); |
| | }); |
| | //点弹框以外的地方，也能让弹框消失 |
| | $(document).click(function(){ |
| | // setTimeout(function(){ |
| | // $('#pop').hide(); |
| | // },2000); |
| |
|
| | $('#pop').hide(); |
| | }); |
| | $('.pop').click(function() { |
| | return false; |
| | }); |
| | |
| | //阻止默认行为（原来超链接可跳转到百度，阻止后无法跳转） |
| | $('#link1').click(function() { |
| | return false; |
| | }); |
| | }) |
| | </script> |
| | </head> |
| | <body> |
| | <h1>首页标题</h1> |
| | <p>页面内容</p> |
| | <a href="[http://www.baidu.com](http://www.baidu.com)" id="link1">百度网</a> |
| | <input type="button" name="" value="弹出" id="btn"> |
| |
|
| | <div class="pop_con" id="pop"> |
| | <div class="pop"> |
| | <h3>提示信息！</h3> |
| | <a href="[#](#)" id="shutoff">关闭</a> |
| | <input type="text" name=""> |
| | </div> |
| | <!-- 遮罩层 --> |
| | <div class="mask"></div> |
| | </div> |
| | </body> |
| | </html> |
事件委托
| <style type="text/css"> |
| | .list{ |
| | list-style: none; |
| | } |
| |
|
| | .list li{ |
| | height: 30px; |
| | background-color: green; |
| | margin-bottom: 10px; |
| | color: #fff; |
| | } |
| | </style> |
| | <script type="text/javascript" src="[js/jquery-1.12.4.min.js](js/jquery-1.12.4.min.js)"></script> |
| | <script type="text/javascript"> |
| | $(function(){ |
| | /* |
| | 给每个li绑定事件，一共绑定了8次，性能不高 |
| | $('.list li').click(function() { |
| | alert($(this).html()); |
| | }); |
| | */ |
| |
|
| | /* |
| | 事件委托：方法delegate，只绑定一次事件，冒泡触发 |
| | 参数： |
| | selector选择器：写入ul下面的所有要发生事件的元素，多个元素用空格隔开，例如‘li a span’ |
| | eventType事件 |
| | function要执行的操作 |
| | |
| | $('.list').delegate('li', 'click', function() { |
| | //$(this)指发生事件的子集，即每个li |
| | alert($(this).html()); |
| |
|
| | //全部取消委托 |
| | $('.list').undelegate(); |
| | }); |
| | }) |
| | </script> |
| | </head> |
| | <body> |
| | <ul class="list"> |
| | <li>1</li> |
| | <li>2</li> |
| | <li>3</li> |
| | <li>4</li> |
| | <li>5</li> |
| | <li>6</li> |
| | <li>7</li> |
| | <li>8</li> |
| | </ul> |
| | </body> |
| | </html> |
网友评论