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. [C13] 应用实例：图片文字识别(Application Example: Photo OCR)

    应用实例:图片文字识别(Application Example: Photo OCR) 问题描述和流程图(Problem Description and Pipeline) 图像文字识别应用所作的事是 ...

  2. ajax技术初识与应用

    一.ajax技术初识 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.Ajax不是一种新的编 ...

  3. 选择排序法（C语言）

    基本思路 在每一次的排序中选出最小(或最大)的数,将其放在数组最前端,然后在后面的数中重复此步骤,最终达到排序的目的. 算法描述 将存于数组首位数与后面的数依次比较,将其中的较小的数放到数组放到数组首 ...

  4. 有缓存区的管道channel

    package main import ( "fmt" "time" ) func main() { //创建一个有缓存区的管道 ch := make(chan ...

  5. vue项目搭建介绍01

    目录 vue项目搭建介绍01 vue 项目框架环境搭建: 创建项目: vue 项目创建流程: vue项目搭建介绍01 vue 项目框架环境搭建: vue 项目框架: vue django(类似)(vu ...

  6. ksync

    #include <linux/init.h> #include <linux/module.h> #include <linux/types.h> #includ ...

  7. Vue.js 源码分析(二十三) 指令篇 v-show指令详解

    v-show的作用是将表达式值转换为布尔值,根据该布尔值的真假来显示/隐藏切换元素,它是通过切换元素的display这个css属性值来实现的,例如: <!DOCTYPE html> < ...

  8. jenkins环境自动部署

    https://my.oschina.net/tonystark/blog/1920889 示例脚本: #!/bin/bash #export BUILD_ID=dontKillMe这一句很重要,这样 ...

  9. JavaScript ES6新特性介绍

    介绍 ES6:ECMScript6 首先,一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系? ECMAScript是一个国际通过的标准化脚本语言: JavaScript ...

  10. Solr集群（即SolrCloud）搭建与使用

    1.什么是SolrCloud SolrCloud(solr 云)是Solr提供的分布式搜索方案,当你需要大规模,容错,分布式索引和检索能力时使用 SolrCloud.当一个系统的索引数据量少的时候是不 ...