jQuery事件

原创 黄良钵  2017-08-17 21:58  阅读 56 次 评论 0 条
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery事件</title>
  6.     <script src="jquery.js"></script>
  7.     <script src="index.js"></script>
  8. </head>
  9. <body>
  10.     <button>按钮</button>
  11.     <a href="https://www.bing.com" target="_blank">必应搜索</a>
  12.     <form action="http://www.baidu.com">
  13.        <input type="text" name="wd">
  14.        <input type="submit" value = "百度搜索">
  15.     </form>
  16. </body>
  17. </html>
  1. // alert(document.body)
  2. // 此时docment还没有创建出来 button是找不到的  所以代码无效
  3. // $('button').click(function(){
  4. //     alert('可以弹出吗')
  5. // })
  6. // 正确的做法使用这种$(loadedCallBack)
  7. // 这种写法在html加载完成之后会调用loadedCallBack
  8. // 比在<body onload="hhh()">更加灵活
  9. // $(function(){
  10. //    var time = new Date()
  11. // //    $('button').click(time,function (ev){ 
  12. // //              console.log(time)
  13. // //    })
  14. // })
  15. $(function(){
  16.     alert('加载完成')
  17. })
  18. // setInterval(function(){
  19. // //   $('a').click()  不起作用
  20. // //    location.href = $('a').attr('href')
  21. // // window.open($('a').attr('href'),'_blank')
  22. // },5*1000)
  23. setInterval(function(){
  24.     $(':submit').click()
  25. },5*1000)

jQuery事件2

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery事件</title>
  6.     <style>
  7.        div{
  8.            width:300px;
  9.            height: 300px;
  10.            border-radius: 50%;
  11.            background-color: red;
  12.            text-align: center;
  13.            color: white;
  14.            padding-top: 80px;
  15.            box-sizing: border-box;
  16.        }
  17.     </style>
  18. </head>
  19. <body>
  20.     <p>这段文件将要被删除<button>删除</button></p>
  21.     <div>
  22.         <h1>点击抽奖/签到</h1>
  23.         每天只有一次机会
  24.     </div>
  25.     <script src="jquery.js"></script>
  26.     <script src="index.js"></script>
  27. </body>
  28. </html>
  1. // $('button').one('click',function() {
  2. //     $(this).parent().remove()
  3. // })
  4. // $('div').one('click',function(){
  5. //     if(Math.random() >0.5){
  6. //         $('h1').text('恭喜你中奖500000000').css('color','yellow')
  7. //     }
  8. //     else{
  9. //         $('h1').text('抱歉再买一次吧')
  10. //     }
  11. // })
  12. // var time = 0
  13. // $('div').bind('click',4,function (ev){
  14. //     console.log(ev)
  15. //     time++
  16. //     if(time > ev.data){
  17. //          $('h1').text('不要太贪心')
  18. //          alert('还在监听 还会执行')
  19. //          $('div').unbind('click')
  20. //     }
  21. //     else{
  22. //         $('h1').text('+' + time)
  23. //     }
  24. // })
  25. // var time = 0
  26. // $('div').on('click',4,function (ev){
  27. //     console.log(ev)
  28. //     time++
  29. //     // if(time > ev.data){
  30. //     //      $('h1').text('不要太贪心')
  31. //     //     //  alert('还在监听 还会执行')
  32. //     //     // $('div').off('click')
  33. //     // }
  34. //     // else{
  35. //     //     $('h1').text('+' + time)
  36. //     // }
  37. //     if(time == 24){
  38. //         $('div').trigger('time.zhiyou.com.cn',[time,'HTML5'])
  39. //     }
  40. // })
  41. // $('div').on('time.zhiyou.com.cn',function(ev,time,course){
  42. //     console.log(ev)
  43. //      alert(ev.namespace + time + course + ev.type)
  44. // })
  45. // $('button').click(function(){
  46. //     $('div').trigger('click')
  47. // })
  48. // $('div').click(function(){
  49. //     alert('div被点击了')
  50. // })
  51. // $('body').delegate('div','click','dataName',function(ev){
  52. //     console.log(ev.data)
  53. //     alert('div被点击了')
  54. // })
  55. // $('button').click(function(){
  56. //     $('<div>新的</div>').appendTo('body')
  57. // })
  58. // document.documentElement.addEventListener('click',function(){
  59. //     $('<div>新的</div>').appendTo('body')
  60. // },true)
本文地址:https://xn--nf1a578axkh.xn--fiqs8s/1020.html
关注我们:请关注一下我们的微信公众号:扫描二维码黄良钵博客的公众号,公众号:HLB_Blog
版权声明:本文为原创文章,版权归 黄良钵 所有,欢迎分享本文,转载请保留出处!

发表评论


表情