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/

 <!doctype html>

 <html lang="en">

 <head>

   <meta charset="utf-8">

   <title>jQuery UI 排序（Sortable） - 默认功能</title>

   <link rel="stylesheet" href="./css/jquery-ui.css">

   <script src="./js/jquery-1.9.1.js"></script>

   <script src="./js/jquery-ui.js"></script>

   <link rel="stylesheet" href="./css/style.css">

   <style>

   #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }

   #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }

   #sortable li span { position: absolute; margin-left: -1.3em; }

   </style>

   <script>

   $(function() {

     $( "#sortable" ).sortable();

     $( "#sortable" ).disableSelection();

   });

   </script>

 </head>

 <body>

 <ul id="sortable">

   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>

   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>

   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>

   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>

   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>

   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>

   <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>

 </ul>

 </body>

 </html>

jQuery的小栗子

animate的例子

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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <!--1.这部是必须添加的引用源文件-->

     <link rel="stylesheet"

   href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">

   <style>

       #box{

           width:200px;

           height: 200px;

           line-height: 200px;

           text-align: center;

           background-color: green;

           color: #fff;

           position: absolute;

           top: 1000px;

       }

   </style>

 </head>

 <body style="height: 2000px;">

 <!--2.这里是通过定义好的方法直接调用-->

     <div id="box"  class="animate bounceOutLeft">wusir</div>

     <script src="jquery.js"></script>

     <!-- <h2 class="animated fadeOutRight delay-2s">alex</h2> -->

     <script>

         $(function () {

             // $('#box').addClass('animated bounceOutLeft');

             $(document).scroll(function () {

                 console.log($(this).scrollTop());

                 var scrollTopHeight = $(this).scrollTop();

                 if (scrollTopHeight >= 1000) {

                      $('#box').addClass('animated slideInDown');

                 }

             })

         });

     </script>

 </body>

 </html>

animate

jQYERY的更多相关文章

  1. jQyery实现轮播器

    看到各大网站上都有一个轮播器的效果,自己不禁也想做一个,查了资料,看了轮播器的原理,慢慢的试着做了做,最终效果勉勉强强 原理:如图,试想一下,若是将<ul>的width属性值设置的很宽,直 ...

  2. jqyery dataTable 基本用法

    一:官方网站:[http://www.datatables.net/] 二:基本使用:[http://www.guoxk.com/node/jquery-datatables] 1.DataTable ...

  3. 左右推拽显示对比图 - jQyery封装 - 附源文件

    闲来无事,做了一个模块效果 左右拖拽显示对比图,是用jq封装的 利用鼠标距离左侧(0,0)坐标的横坐标位移来控制绝对定位的left值 再配合背景图fixed属性,来制作视觉差效果 代码如下 <! ...

  4. 视觉差效果 - jqyery scrollTop原理

    原理是用页面的滚动高度scrollTop()来控制背景图的位置 附上源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...

  5. 解决Jqyery的Trigger事件中两个按钮相互触发至死循环问题

    今天做项目,其中有个功能需要两个图表的联动,用到两个按钮,这两个按钮分别控制两个图表,第一次直接在btn1的单击事件中使用了$("btn2").trigger("clic ...

  6. jQyery 整体架构

    jQuery的模块 一.jQuery一共有13个模块: 1. 核心方法 2. 回调模块(callbacks) 3. 数据缓存 4. 异步队列(Deffered) 5. 选择器操做 6. 属性操作 7. ...

  7. jQyery简史和下载引用方法

    1.jQuery简介 jQuery是一个快速,小型且功能丰富的JavaScript库.借助易于使用的API(可在多种浏览器中使用),使HTML文档的遍历和操作,事件处理,动画和Ajax等事情变得更加简 ...

  8. MVC +Jqyery+Ajax 实现弹出层提醒

    CSS部分: /*登录提示*/ * {margin: 0; padding: 0; } .layer { width: 350px; padding: 20px; background: #fff; ...

  9. jQuery中的事件和动画效果

    刚刚学习了jqyery的一些事件和动画,下面我来总结一下: 1.基础事件 1.window事件,它的对应方法是ready(),$(document).ready()方法是事件模块中最重要的一个函数,可 ...

随机推荐

  1. python函数加括号于不加括号的区别

    一.不带括号时,调用的是这个函数本身 ,是整个函数体,是一个函数对象,不须等该函数执行完成二.带括号(参数或者无参),调用的是函数的执行结果,须等该函数执行完成的结果 def test(a): ret ...

  2. C++ trais技术 模板特化的应用

    // traits 的应用 /////////////////////////////////////////// // traits template <typename T> clas ...

  3. Spring Boot 自定义Filter

    一.Filter功能 它使用户可以改变一个 request和修改一个response. Filter 不是一个servlet,它不能产生一个response,它能够在一个request到达servle ...

  4. LG3237 「HNOI2014」米特运输 树形DP

    问题描述 LG3237 题解 问题转化为: 要求将这棵树,满足 结点 \(x\) 所有孩子权值相等 结点 \(x\) 权值等于所有孩子权值和 将乘法转化为 \(\log\) 加法 \(\mathrm{ ...

  5. LeetCode236. 二叉树的最近公共祖先

    * @lc app=leetcode.cn id=236 lang=cpp  *  * [236] 二叉树的最近公共祖先  *  * https://leetcode-cn.com/problems/ ...

  6. 怎样用cmd脚本添加Qt的环境变量

    在网上遍历了很久,终于找到了一个简单且令人满意的答案: 定位到PyQt5发布文件所需的plugins的位置: 新建一个名为“设置环境变量”的cmd脚本,在里面写上: wmic ENVIRONMENT ...

  7. orchard 中文文档 中英对照版

    ORCHARD CMS a free, open source, community-focused Content Management System built on the ASP.NET MV ...

  8. JVM＆NIO＆HashMap简单问

    JVM&NIO&HashMap简单问 背景:前几天在网上看到关于JVM&NIO&HashMap的一些连环炮的面试题,整理下以备不时之需. 一.JVM Java的虚拟机的 ...

  9. pixijs shader 制作百叶窗效果

    pixijs shader 制作百叶窗效果 直接贴代码了 const app = new PIXI.Application({ transparent: true }); document.body. ...

  10. SqlBulkCopy将DataTable中的数据批量插入数据库中

    #region 使用SqlBulkCopy将DataTable中的数据批量插入数据库中 /// <summary> /// 注意:DataTable中的列需要与数据库表中的列完全一致.// ...