jQYERY
2024-09-02 13:31:46
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
最新文章
- Sublime Text3插件管理
- JMeter专题系列(二)录制脚本
- Linux下MySQL/MariaDB Galera集群搭建过程
- jpcap
- EXTJS 4.2 资料 将store 传到后台
- css 小知识
- 关于分布式锁原理的一些学习与思考-redis分布式锁,zookeeper分布式锁
- R语言︱处理缺失数据&;&;异常值检验、离群点分析、异常值处理
- 初识gispro
- C#中执行Dos命令
- Windows下的Qt Creator的安装
- Eclispe IDE集成Maven
- github中删除一个repository
- SQL SERVER 2008R2 执行大脚本文件时,管理工具提示“内存不足”的解决方法
- Java 继承关系中:static,构造函数,成员变量的加载顺序
- Noip前的大抱佛脚----赛前任务
- E题:Water Problem(快速幂模板)
- 实现虚拟机和宿主机之间的复制、粘贴(ubuntu系统)
- 【lct】poj2763 Housewife Wind
- Java-从堆栈常量池解析equals()与==