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. ubuntu pdfium

    dept_tool export PATH=`pwd`/depot_tools:"$PATH" gn工具在内

  2. SpringCloud学习笔记（九、SpringCloud Stream）

    目录: 什么是SpringCloud Stream 如何使用SpringCloud Stream 消息分流 什么是SpringCloud Stream: SpringCloud Stream是一个用于 ...

  3. c# 第22节 c#四大方法 静态方法、实例方法、虚方法、重新方法

    本节内容: 1:静态方法和实例方法什么 2:虚方法是什么 3:重写方法 4:禁止重写方法 1:静态方法和实例方法是什么 静态方法,一般是类的常用方法,允许在不创建类的实例的情况下,直接调用. 静态方法 ...

  4. python 连接oracle -- sqlalchemy及cx_Oracle的使用详解

    python连接oracle -- sqlalchemy import cx_Oracle as orcl import pandas as pd from sqlalchemy import cre ...

  5. GET POST 区分

    get传送的数据量较小,不能大于2KB.post传送的数据量较大,一般被默认为不受限制.但理论上,IIS4中最大量为80KB,IIS5中为100KB. get安全性非常低,get设计成传输数据,一般都 ...

  6. MongoDB高级知识（六）

    1. document的关系 多个文档之间在逻辑上可以相互联系,可以通过嵌入和引用来建立联系. 文档之间的关系可以有: 1对1 1对多 多对1 多对多 一个用户可以有多个地址,所以是一对多的关系. # ...

  7. （day54）六、事务、分组、F、Q、常用字段、事务

    目录 一.聚合查询aggregate 二.分组查询annotate 三.F与Q查询 (一)F查询 1. 查询库存数大于卖出数的书籍 2. 将所有书的价格上涨100块 3.将所有书的名称后面全部加上 & ...

  8. CF915E Physical Education Lessons 珂朵莉树

    问题描述 CF915E LG-CF915E 题解 \(n \le 10^9\) 看上去非常唬人. 但是这种区间操作的题,珂朵莉树随便跑啊. \(\mathrm{Code}\) #include< ...

  9. chentos7 安装jdk1.8（二进制安装）

    首先下载jdk1.8 去官网下载jdk:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.h ...

  10. 解决 Github 图片加载慢的问题

    一.前言 本文主要介绍一种解决 Github 图片加载慢的方法,亲测有效. 笔者博客是使用 Github 作为图床,每次打开博客时的图片加载很慢或者根本加载不出来.这是因为 GitHub 的 CDN ...