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 ...
随机推荐
- 1125 Chain the Ropes （25 分）
1125 Chain the Ropes (25 分) Given some segments of rope, you are supposed to chain them into one rop ...
- Recyclerview 实现上拉加载更多
LinearLayoutManager layoutManager; layoutManager = new LinearLayoutManager(getActivity()); layoutMan ...
- 0000 - Spring Cloud 概述
1.概述 Spring Cloud是一系列框架的有序集合,它利用Spring Boot的开发便利性简化了分布式系统的开发,比如服务发现.服务网关.服务路由.链路追踪等.Spring Cloud并不重复 ...
- FileMaker Server 15 Windows 安装
FileMaker 国外流行,国内研究的人不多.这玩意的好处是: 标准的数据库软件,同时带界面,相当于Access. 手机上安装FileMaker Go,Windows & IOS上安装 Fi ...
- 【TensorFlow学习笔记 】name_socpe variable_scope
[引言]TensorFlow中的命名域是非常重要的概念,涉及到参数共享,方便命名参数管理,定义图结构 本文主要介绍name_scope 和 variable_scope,slim包中的arg_scop ...
- (转)驱动程序安装类(C#)
原文地址:http://www.cnblogs.com/BoyXiao/archive/2011/03/31/2001535.html 回忆刚进公司那会儿,手头的第一个工作就是完成虚拟键盘,也就是通过 ...
- Android WebView无法播放视频或直播，关闭界面后任在播放的问题；
1.设置webview属性: webView.setWebChromeClient(new MyWebChromeClient()); webSettings = webView.ge ...
- ECharts学习记录
一.ECharts在GitHub的地址以及需要引入文件地址: 1.Github地址:https://github.com/ecomfe/echarts 2.官网下载文件地址:http://echart ...
- ELK新手教程（二）
暂不排版,后面整理. logstash 使用配置文件 在bin目录下创建一个名为test.conf的文件,内容为: input { stdin {} } output { stdout{} } 执行命 ...
- 零基础学习python_字典（25-26课）
今天学到后面的知识,突然发现之前学习到的字典列表啥的都有点忘了,打算补一下之前学到的字典,到时候你看的时候,字符串.列表.字典.元祖这几个没啥顺序,刚开始学的时候了解下方法,当然你可以死记硬背下,后面 ...