搜索
博主信息
博文 36
粉丝 1
评论 0
访问量 40829
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
12月24日jQuery事件-jQuery动画-九期线上班
WJF
原创
1917人浏览过

jQuery事件


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>jQuery事件</title>
  6. <script src="jquery-3.4.1.min.js"></script>
  7. <style>
  8. #phpcn{
  9. background-color: #0C9A9A;
  10. border-radius: 2px;
  11. padding: 20px;
  12. }
  13. button{
  14. background-color: #0E9A00;
  15. border: 0;
  16. border-radius: 2px;
  17. padding: 10px;
  18. margin-top: 5px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <button id="btn1">按钮1</button>
  24. <button id="btn2">按钮2</button>
  25. <button id="btn3" onclick="offw()">移除button所有事件</button>
  26. <button id="btn4" onclick="onew()">ONE</button>
  27. </body>
  28. <script>
  29. //one 第一次点击先添加元素 第二次点击时执行
  30. function onew(){
  31. $('button').one('click',function () {
  32. $('#btn4').after('<p id="phpcn">php</p>');
  33. })
  34. }
  35. //移除指定类元素事件
  36. function offw(){
  37. $('button').off()
  38. }
  39. $('#btn1').on('click',function () {
  40. alert('按钮1被点击了')
  41. });
  42. $('#btn2').on( "click", function() {
  43. alert($( this ).text() + '666' );
  44. });
  45. </script>
  46. </html>


jQuery动画


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>jQuery动画</title>
  6. <script src="jquery-3.4.1.min.js"></script>
  7. <style>
  8. #phpcn{
  9. background-color: #0C9A9A;
  10. border-radius: 2px;
  11. padding: 20px;
  12. }
  13. button{
  14. background-color: #0E9A00;
  15. border: 0;
  16. border-radius: 2px;
  17. padding: 10px;
  18. margin-top: 5px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div id="nav">
  24. <p>AA</p>
  25. <p>BB</p>
  26. <p>CC</p>
  27. </div>
  28. <button onclick="hidet()">隐藏#NAV</button>
  29. <button onclick="showt()">显示#NAV</button>
  30. <button onclick="slideUpt()">滑动隐藏#NAV</button>
  31. <button onclick="slideDownt()">滑动显示#NAV</button>
  32. <button onclick="slideTogglet()">滑动显示+隐藏#NAV</button>
  33. <button onclick="fadeInt()">淡入显示#NAV</button>
  34. <button onclick="fadeOutt()">淡出隐藏#NAV</button>
  35. </body>
  36. <script>
  37. //淡出隐藏 fadeOut
  38. function fadeOutt() {
  39. $('#nav').fadeOut(1000);
  40. }
  41. //淡入显示 fadeIn
  42. function fadeInt() {
  43. $('#nav').fadeIn(1000);
  44. }
  45. //滑动显示+隐藏 slideTogglet
  46. function slideTogglet() {
  47. $('#nav').slideToggle();
  48. }
  49. //滑动显示 slideDownt
  50. function slideDownt() {
  51. $('#nav').slideDown();
  52. }
  53. //滑动隐藏 slideUp
  54. function slideUpt() {
  55. $('#nav').slideUp();
  56. }
  57. //隐藏 hide
  58. function hidet() {
  59. $('#nav').hide();
  60. }
  61. //显示 show
  62. function showt() {
  63. $('#nav').show();
  64. }
  65. </script>
  66. </html>
批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:这些基本的动画还是很简单的吧
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学