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 ...
随机推荐
- ping一个网段的cmd程序
ping一个网段的cmd程序 今天发现只在cmd命令行工具中输入: FOR /L %i IN (1,1,254) DO ping -n 1 192.168.1.%i 即可.
- es6数组的方法
1.复习的函数 函数是由关键字function声明的,他是一个引用数据类型,是Function的实例,在调用的时候会开辟一个私有空间 2.函数的成员 arguments:null (是实参构成的数组 ...
- centos 7扩展磁盘分区容量
一.fdisk -l 查看磁盘空间大小 二. 1.fdisk /dev/sda 增加分区 2.判断应增加的分区号 键入n,增加一个分区 3.键入p,主分区,并键入(编号) 4.起始扇区和结束扇区(默认 ...
- JVM内存调优
JVM性能调优有很多设置,这个参考JVM参数即可. 主要调优的目的: 控制GC的行为.GC是一个后台处理,但是它也是会消耗系统性能的,因此经常会根据系统运行的程序的特性来更改GC行为 控制JVM堆栈大 ...
- js对象-平铺与嵌套的互相转换
一个json对象,包含嵌套关系,传输过来的时候是平铺的,顺序打乱,用parentCode属性来关联,如下 { "1":{ "name": "中国&qu ...
- MyBatis配置Mapping，JavaType和JDBCType的对应关系，#与$区别
Mybatis中javaType和jdbcType对应关系:JDBC Type Java TypeCHAR StringVARCHAR StringLONGVARCHAR StringNUMERIC ...
- C# webbrowser遍历网页元素
//不引用其他单元 foreach(HtmlElement ele in WB1.Document.All) { if(ele.I ...
- 通过mapreduce把mysql的一张表的数据导到另外一张表中
怎么安装hadoop集群我在这里就不多说了,我这里安装的是三节点的集群 先在主节点安装mysql 启动mysql 登录mysql 创建数据库,创建表格,先把数据加载到表格 t ,表格t2是空的 mys ...
- Centos7使用pxe安装KVM虚拟机
Centos7使用pxe安装KVM虚拟机 一.安装服务所需的软件 [root@localhost ~]yum install nginx dhcp vsftpd syslinux -y [root@l ...
- SpringBoot 实现前后端分离的跨域访问（CORS）
序言:跨域资源共享向来都是热门的需求,使用CORS可以帮助我们快速实现跨域访问,只需在服务端进行授权即可,无需在前端添加额外设置,比传统的JSONP跨域更安全和便捷. 一.基本介绍 简单来说,CORS ...