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. 三、排序算法总结一（冒泡排序，插入排序，选择排序）（C++版本）

    一.引言 对于各种排序算法也算是有了一定的了解,所以这里做一个总结. 二.冒泡排序法. 这是比较经典的排序算法,主要是通过内外两层的循环比较,使得乱序变为顺序. 下面是一个测试代码 #include ...

  2. Git之SSH公钥与私钥

    今天来探讨一下如何使用Git的操作,来进一步的实现代码的下载到本地,我原来也不是很明白git中生成公钥和私钥的作用,我一直在想,git里面你把自己的公钥发给了git的服务器,他是怎么判断的,每一次我换 ...

  3. 动态添加Redis密码认证的方法

    1.定制jedis 对redis返回的错误的处理,做两处修改: 忽略 (error) ERR Client sent AUTH, but no password is set.使配置了密码的jedis ...

  4. css 文本外观属性(text) 和 字体样式属性(font)

    css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...

  5. 【2019.8.14 慈溪模拟赛 T1】我不是！我没有！别瞎说啊！（notme）（BFS+DP）

    \(IDA^*\) 说实话,这道题我一开始没想出正解,于是写了一个\(IDA^*\)... 但神奇的是,这个\(IDA^*\)居然连字符串长度分别为\(2500,4000\)的数据都跑得飞快,不过数据 ...

  6. 1130不允许连接到MySql server

    连接远程服务器mysql时,报错: 1130-host ... is not allowed to connect to this MySql server 这是因为默认只让localhost的主机连 ...

  7. C++中enum（转载）

    原文地址:http://www.cnblogs.com/ForFreeDom/archive/2012/03/22/2412055.html 1.为什么要用enum       写程序时,我们常常需要 ...

  8. fiddler抓包-7-C端弱网测试

    前言大家平时也会发现我们有时候在地铁.高铁.电梯等等某个时候网络信号比较差导致网络延迟较大,这时是否有友好提示呢?甚至有可能发生崩溃等等...所以我们是可以通过fiddler来对web.APP.PC客 ...

  9. Go 程序编译成 DLL 供 C# 调用。

    Go 程序编译成 DLL 供 C# 调用. C# 结合 Golang 开发   1. 实现方式与语法形式 基本方式:将 Go 程序编译成 DLL 供 C# 调用. 1.1 Go代码 注意:代码中 ex ...

  10. 普通的行专列；oracle行专列；更新中。。。

    题记 本来想写一个完整的表创建,但是其他人都写过啦,要不这样,你们有什么行转列的问题给我留言,我直接回答如何 Oracle的行转列 这篇文章不错:https://blog.csdn.net/huay_ ...