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 ...
随机推荐
- CentOS7.3编译hadoop2.7.3源码
在使用hive或者是kylin时,可以选择文件的压缩格式,但是这个需要有hadoop native库的支持,默认情况下,hadoop官方发布的二进制包中是不包含native库的,所以无法使用一些压缩相 ...
- (转)C#操作Word文档
原文1地址:http://www.cnblogs.com/lantionzy/archive/2009/10/23/1588511.html 原文2地址: http://www.cnblogs.com ...
- luoguP1368 工艺(最小表示法 后缀自动机）
最小表示法就是直接扫过去 后缀自动机就是每次找最字典序最小儿子输出 最小表示法 /* 最小表示法裸题, 我好像学过来着?? 怎么忘得这么干净 */ #include<cstdio> #in ...
- Docker使用札记 - Dockerfile指令
ARG ARG跟ENV都可以定义变量,不同在于ARG在构建期结束时是销毁,而ENV定义的是系统中的环境变量,不会在构建结束时销毁,在以后的构建中直接使用. 当ARG和ENV定义相同名称的变量时,ENV ...
- Python并发编程二（多线程、协程、IO模型）
1.python并发编程之多线程(理论) 1.1线程概念 在传统操作系统中,每个进程有一个地址空间,而且默认就有一个控制线程 线程顾名思义,就是一条流水线工作的过程(流水线的工作需要电源,电源就相当于 ...
- WPF 异常其他信息: “对类型“BaseControl.KImgButton”的构造函数执行符合指定的绑定约束的调用时引发了异常。”，行号为“38”，行位置为“22”。
引发的异常:“System.Windows.Markup.XamlParseException”(位于 PresentationFramework.dll 中) 其他信息: “对类型“BaseCont ...
- 解决从客户端(Content="<div><p ><p>12312...")中检测到有潜在危险的Request.Form 值。
[HttpPost] [ValidateInput(false)]//解决从客户端(Content="<div><p ><p>12312..." ...
- 网络表示学习Network Representation Learning/Embedding
网络表示学习相关资料 网络表示学习(network representation learning,NRL),也被称为图嵌入方法(graph embedding method,GEM)是这两年兴起的工 ...
- 使用Hexo + Github Pages搭建个人独立博客
使用Hexo + Github Pages搭建个人独立博客 https://linghucong.js.org/2016/04/15/2016-04-15-hexo-github-pages-blog ...
- 1.1使用java数组，并开始封装我们自己的数组
今天感冒了,全身酸软无力,啥样不想做,就来学习吧,此节我们从初步使用java中提供的数组,然后分析相关情况,过渡到封装我们自己的数组. 一.我们先来感受一下java提供的数组,以整型数组(int[]) ...