• jQYERY


    1.事件流:

    (1)事件捕获

    (2)处于目标阶段

    (3)事件冒泡

    2.事件对象

    对每一个事件都会回调函数,会有一个默认的事件对象,就是this

    event.target 触发的目标对象 

    event.type 事件类型

    event.keyCode 键码

    3.事件冒泡

    event.stopPropagation() 阻止冒泡

    event.preventDefault() 阻止默认事件

    return false 以上两者包括

    4.事件代理

    自己做不了的事件,交给别人去做 原理 :运行冒泡的机制 

    现有的 p 以及 未来后添加的p 都能做事件操作

    $("div").on("click","p",fn)   后边第一个 执行的事件,第二个需要可以实现的对象 最后就是函数啦

    5.事件

    click 单击事件
    dblclick 双击事件
    mouseenter 经过父元素
    mouseleave 离开父元素
    mouseout 经过父元素和子元素
    mouseover 离开父元素和子元素
    mousedown
    mouseup
    change()
    select()

    6.位置信息

    width()
    height()
    innerWidth() 不包含border
    outerWidth() 包含border
    offset().top 对象
    top: 获取的是到页面顶部的距离 这里可以用到百度的下滑鼠标显示固定搜索 对象是decument
    scrollTop() 动态监听鼠标的滚动

    jQueryUI的例子

    引用网址 :http://www.jqueryui.org.cn/

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4   <meta charset="utf-8">
     5   <title>jQuery UI 排序(Sortable) - 默认功能</title>
     6   <link rel="stylesheet" href="./css/jquery-ui.css">
     7   <script src="./js/jquery-1.9.1.js"></script>
     8   <script src="./js/jquery-ui.js"></script>
     9   <link rel="stylesheet" href="./css/style.css">
    10   <style>
    11   #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    12   #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
    13   #sortable li span { position: absolute; margin-left: -1.3em; }
    14   </style>
    15   <script>
    16   $(function() {
    17     $( "#sortable" ).sortable();
    18     $( "#sortable" ).disableSelection();
    19   });
    20   </script>
    21 </head>
    22 <body>
    23  
    24 <ul id="sortable">
    25   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    26   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    27   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    28   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    29   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    30   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    31   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
    32 </ul>
    33  
    34  
    35 </body>
    36 </html>
    jQuery的小栗子

    animate的例子

    引用网址:https://github.com/daneden/animate.css

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Document</title>
     6     <!--1.这部是必须添加的引用源文件-->
     7     <link rel="stylesheet"
     8   href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
     9   <style>
    10       #box{
    11           width:200px;
    12           height: 200px;
    13           line-height: 200px;
    14           text-align: center; 
    15           background-color: green;
    16           color: #fff;
    17           position: absolute;
    18           top: 1000px;
    19       }
    20   </style>
    21 </head>
    22 <body style="height: 2000px;">
    23 <!--2.这里是通过定义好的方法直接调用-->
    24     <div id="box"  class="animate bounceOutLeft">wusir</div>
    25     <script src="jquery.js"></script>
    26 
    27     <!-- <h2 class="animated fadeOutRight delay-2s">alex</h2> -->
    28     <script>
    29         
    30         $(function () {
    31             // $('#box').addClass('animated bounceOutLeft');
    32 
    33             $(document).scroll(function () {
    34                 
    35                 console.log($(this).scrollTop());
    36 
    37                 var scrollTopHeight = $(this).scrollTop();
    38 
    39                 if (scrollTopHeight >= 1000) {
    40                      $('#box').addClass('animated slideInDown');
    41 
    42                 }
    43             })
    44         });
    45     </script>
    46 </body>
    47 </html>
    animate
  • 相关阅读:
    一、代码风格
    Nginx之Eclipse开发环境配置
    Linux之tail命令实时收集[纠正误解]
    Java之"Mozilla Rhino"引擎(二)
    linux之tail -F命令异常file truncated
    Java之nio性能比较
    Java之nio MappedByteBuffer的资源释放问题
    Java之java.lang.IllegalMonitorStateException
    Java之线程池管理
    Java之NIO传输数据
  • 原文地址:https://www.cnblogs.com/zhangqing979797/p/9760982.html
Copyright © 2020-2023  润新知