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. JS的节流、防抖及使用场景

    前言 据说阿里有一道面试题就是谈谈函数节流和函数防抖. 糟了,这可触碰到我的知识盲区了,好像听也没听过这2个东西,痛定思痛,赶紧学习学习.here we go! 概念和例子 函数防抖(debounce ...

  2. 泛型T

    作用: 使用泛型类型可以最大限度地重用代码.保护类型的安全以及提高性能. 泛型最常见的用途是创建集合类 1.性能:如List<object> 与 List<T> 将一个 int ...

  3. oracle序列相关

    一. oracle中如何实现一列的规律增长呢(通常是指number类型的列)? 这就需要借助序列来实现了; 1. 什么是序列? 可以理解为序列是一组sql语法创建出来的函数, 该函数中定义     好 ...

  4. CF1041C Coffee Break

    CF1041C Coffee Break 题目大意: 给定nn个数和一个kk,这nn个数都不超过mm 每次从没被去掉的数里面选一个数aa,去掉aa,然后可以任意一个b(b>a+k)b(b> ...

  5. Vue todos示例 在class中的应用表达式

    本篇博客用到了v-if,v-on,v-for三个没有写到的知识点,以后会详细写三篇博客,详细写这三个方法的用处 直接上代码: <!doctype html> <html lang=& ...

  6. Codeforces Round #552 (Div. 3) EFG(链表+set,dp,枚举公因数)

    E https://codeforces.com/contest/1154/problem/E 题意 一个大小为n(1e6)的数组\(a[i]\)(n),两个人轮流选数,先找到当前数组中最大的数然后选 ...

  7. Gradle java使用

    安装 去gradle官网下载然后解压,把bin路径添加到PATH变量即可 查看版本号 gradle -v 生成gradle项目 在新建/已有项目目录下初始化项目 gradle init 配置仓库源 编 ...

  8. Vue router-link路由不同的写法，不一样的效果

    我想要的路径:http://localhost:8080/#/main/hato/realtime/eventDetail/238 情况一:未进行路由配置:  {      path: 'eventD ...

  9. ThinkPHP框架获取上一条插入语句产生的id

    今天在fastAdmin框架想搞一个拖动进行排序的功能 遇到一个问题是权重的字段值一样的话拖动会出bug,所以想让权重字段(weigh)的值等于当前id的值, 搜索看到的方法如下 实际应用的地方,是写 ...

  10. Entity Framework Core 练习参考

    项目地址:https://gitee.com/dhclly/IceDog.EFCore 项目介绍 对 Microsoft EntityFramework Core 框架的练习测试 参考文档教程 官方文 ...