jquery接触初级-----juqery 动画函数
1. window.onload(), 一次只能保存对一个函数的引用；如果多次调用，他会自动用后面的函数覆盖前面的函数
2.$(document).ready(); 会在现有行为上追加新的行为，这些函数行为会按照注册的顺序进行依次执行，避免了window.onload()的覆盖行为；
$(document).ready() 有三种写法：
2.1 $(document).ready(function(){});
2.2 $(function(){});
2.3 $().ready(function(){})
例子：要求：写一个事件：鼠标移入H3 标签范围，和这相关的内容显示，鼠标移出，内容消失
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
<style>
div {
width: 500px;
background: #ccc;
}
h3 {
text-align: center;
}
ul {
margin: 0;
padding: 10px;
display: none;
}
</style>
<script>
$(document).ready(function() {
$("h3").bind("mouseover", function() {
$(this).next().show();
}).bind("mouseout", function() {
$(this).next().hide();
})
})
</script>
</head>
<body>
<div>
<h3>这里是标题</h3>
<ul>这里是内容，我们今天说的是关于jquery的事情，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件，将要介绍与标题相关的显示和影藏事件</ul>
</div>
</body>
</html>
运行结果：
可以使用hover()事件来改写：效果还是一样的
<script>
$(document).ready(function() {
$("h3").hover(function() {
$(this).next().show();
}, function() {
$(this).next().hide();
})
});
</script>
3.1 事件对象的属性：event.type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
<script>
$(function() {
$('.type').click(function(event) {
alert(event.type);
});
})
</script>
</head>
<body>
<div class="box">
<input type="button" value="点击一下" class="type">
</div>
</body>
</html>
运行结果：点击，就会弹出事件的type值
3.2 event.preventDefault() :阻止事件的默认行为，例如a标签的跳转；
3.3 event.stopPropagation() :阻止事件冒泡
3.4 event.target 目标事件的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
<script>
$(function() {
$("a").click(function(event) {
console.log(event.target.href);
event.preventDefault();
});
})
</script>
</head>
<body>
<div class="box">
<a href="https://www.baidu.com/">百度</a>
</div>
</body>
</html>
运行结果：点击后，阻止默认行为，即阻止跳转，并且输出 目标元素a的href 属性值
3.5 event.pageX , event.pageY 获取光标相对于浏览器的X坐标和Y坐标 ：
<script>
$(function() {
$(document).click(function(event) {
var Op = $("<p></p>");
Op.html("当前鼠标的位置是:" + event.pageX + "," + event.pageY);
$(".box").append(Op);
event.preventDefault();
});
})
</script>
3.6 event.which; 获取鼠标的左键，中间键，和右键值 ，分别对应1.2.3
$(function() {
$(document).click(function(event) {
console.log(event.which)
event.preventDefault();
});
})
试了一下：左键有用，单击左键，会输出1
4. jquery 中的动画：
4.1 show()方法和hide()方法 ，实现对元素的显示和隐藏
4.2 fadeIn() 和fadeOut() : 实现元素不透明度的改变，fadeIn()从无到有，fadeOut()从有到无
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
<style>
div.cc {
background: #ccc;
display: none;
}
</style>
<script>
$(function() {
$("a").on("click", function(e) {
e.preventDefault();
if ($("div.cc").is(":hidden")) {
$(this).parent().next().fadeIn();
} else {
$(this).parent().next().fadeOut();
}
});
});
</script>
</head>
<body>
<div class="box">
<a href="https://www.baidu.com/">百度</a>
</div>
<div class="cc">改变不透明度的区块</div>
</body>
</html>
4.3 slideUp(),slideDown() : 改变高度的属性。slideUp(),高度从0到最大；slideDown()，相反，高度从大到0；
4.4 animate();可以改变所有属性，是一个自定义动画；
$(selector).animate(styles,speed,easing,callback) 分别代表样式，速度，动画效果，回调函数 自定义动画效果：改变div的宽，高，然后加上边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
<style>
div.cc {
background: #ccc;
width: 200px;
height: 200px;
}
</style>
<script>
$(function() {
$("a").on("click", function(e) {
e.preventDefault();
$("div.cc").animate({
"width": "400px"
}, 2000).animate({
"height": "300px",
"color": "red"
}, 3000, function() {
$("div.cc").css("border", "3px solid blue")
});
});
});
</script>
</head>
<body>
<div class="box">
<a href="https://www.baidu.com/">百度</a>
</div>
<div class="cc">改变不透明度的区块</div>
</body>
</html>
运行效果：
4.5 stop()方法，可以停止动画队列
语法：stop([clearqueue],[gotoend]);
参数clearqueue和gotoend 都是可选参数，为Boolean 值
clearqueue： 是否要清空未执行的动画队列，
gotoend：是否直接将正在执行的动画跳转到末尾状态。
stop()方法在做轮播图的时候，会用到，具体参考jquery 轮播制作页面
动画函数总结如下：
jquery接触初级-----juqery 动画函数的更多相关文章
- jquery接触初级-----juqery DOM操作实例，动态图片显示
1. 要求:对一个a标签元素,当鼠标操作,移入时,显示a标签title属性的信息,鼠标移出时,隐藏a标签属性的title属性信息 a 标签本身的title 属性具有自我显示的特性,但是这个特性比较慢, ...
- jquery接触初级-----juqery DOM操作 之二
DOm 操作之: 1.1 children(),这个函数只是查找元素的子元素,而不考虑其他后代元素 <body> <p title="请选择你最喜欢的水果"&g ...
- jquery接触初级-----juqery DOM操作 之一
1. DOM 分为三个部分:DOM core ,HTML_DOM,CSS_DOM: 1.1.document.getElementById(),document.getElementsByTagNam ...
- jquery接触初级-----juqery选择器实例
jquery 选择器用于触发事件,可以少写很多js代码,一般来说,基本的特效功能都能够完成 这里列举一个简单的jquery写的例子: 要求:有两种情况: 1.产品最初状态显示简约形式的品牌,即显示部分 ...
- jquery接触初级----- 一种新奇的选择器用法
今天看到一个新奇的jquery 选择器的用法,因为以前没有见过,所以记录下来 1.jquery 选择器: 给body添加一个元素,添加元素的时候,同时把属性和点击事件都一起进行添加 <!DOCT ...
- jquery接触初级-----ajax 之：jquery_ajax 方法
1. $.get() 方法: 格式:$.get( url,[,data],[,callback],[,type] ); data: 采用键值对的方式存储于对象中; callback: 载入成功时(当 ...
- jquery接触初级-----ajax 之：load()方法
jquery _ajax 请求主要有几种方式:load(),$.get(),$.post(),$.ajax(),$.getScript(),$.getJson() 1.load()方法 格式:load ...
- jquery接触初级----jquery 选择器
css 选择器主要有:元素选择器,ID选择器,类选择器,群组选择器,后代选择器,普通配符选择器等,通过css选择,我们可以很方便的给元素添加样式,使网页看起来更加好看 jquery 选择器也有相似的功 ...
- jquery接触初级----jquery 对象和Dom对象
1. DOM 对象,每一份DOm对象(Document Object model)都可以表示成一棵树,一个基本的网页如下: <!DOCTYPE html> <html lang=&q ...
随机推荐
- seo优化之域名泛解析优缺点分析
原文地址:http://www.phpddt.com/web/analysis-of-domain-name.html 自己也算半个SEOER,虽然没从事过优化工作,由于自己很感兴趣,每天还是会去看很 ...
- Linux创建桥接网络
图形化创建 #nm-connection-editor & 选择桥接 设置桥接网络 点击添加 模式选择以太网 添加上行网卡 # brctl show 删除桥接 # nmcli connecti ...
- Java基础：IO流之字节流和字符流
1. 流的概念 流(stream)的概念源于UNIX中管道(pipe)的概念.在UNIX中,管道是一条不间断的字节流,用来实现程序或进程间的通信,或读写外围设备.外部文件等. 一个流,必有源端和目的端 ...
- RAC集群安装校验输出信息
RAC集群安装校验输出信息 作者:Eric 微信:loveoracle11g [grid@rac-node1 grid]$ [grid@rac-node1 grid]$ ./runcluvfy.sh ...
- html代码段
添加icon<link rel="shortcut icon" href="img/100du.ico"/>
- MySQL-MMM实现MySQL高可用
一.MMM简介 MMM(Master-Master replication manager for MySQL)是一套支持双主故障切换和双主日常管理的脚本程序.MMM使用Perl语言开发,主要用来监控 ...
- SP1812 LCS2 - Longest Common Substring II
能匹配上子串的节点对它的所有parent都有贡献 在树上转移即可 #include<cstdio> #include<algorithm> #include<cstrin ...
- es6(10)--Set,Map(1)
//Set { let list=new Set(); list.add(5);//添加 list.add(7); //属性size就是长度 console.log('size',list.size) ...
- linux文件基本权限-基本权限的修改
基本权限的修改 当我们在linux或unix系统的terminal输入"ls -l"命令时,将输出文件的详细信息.第一列,如“drwxr-xr-x”就是文件的权限信息. yinti ...
- 闭包 -> 函数的嵌套
内层函数对外层函数中的变量的使用 好处: 1. 保护变量不被侵害 2. 让一个变量常驻内存 如何通过代码查看一个闭包 __closure__: 有东西就是闭包. 没东西就不是闭包 # 闭包的优点: # ...