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 ...
随机推荐
- golang的垃圾回收（GC）机制
golang的垃圾回收采用的是 标记-清理(Mark-and-Sweep) 算法 就是先标记出需要回收的内存对象快,然后在清理掉: 在这里不介绍标记和清理的具体策略(可以参考https://lengz ...
- Jmeter（三十三）Stepping Thread Group
碰巧最近在做性能测试,就记一下Jmeter的第三方插件Stepping Thread Group. 具体一些插件信息,可以去:jmeter-plugins.org去进行下载. 该插件目前是已经被弃用的 ...
- hive之权限问题AccessControlException Permission denied: user=root, access=WR
问题描述:在集群上,用hive分析数据出现如下错误 FAILED: Execution Error, return code from org.apache.hadoop.hive.ql.exec.D ...
- Javascript的闭包及其使用技巧实例
Javascript的闭包及其使用技巧实例 一.闭包的基本概念 闭包(Closure)是一个引用了自由变量的函数,记录了该函数在定义时的scope chain.又称词法闭包(Lexical Closu ...
- solr7.4 安装与使用
1.solr7环境要求 solr7需要java8环境,且需要在环境变量中添加 JAVA_HOME变量. 2.solr 安装 下载地址 https://lucene.apache.org/solr/mi ...
- MySQL提供了以下三种方法用于获取数据库对象的元数据
MySQL提供了以下三种方法用于获取数据库对象的元数据: 1)show语句 2)从INFORMATION_SCHEMA数据库里查询相关表 3)命令行程序,如mysqlshow, mysqldump 用 ...
- linux进程端口防火墙
进程端口: 1.netstat –apn :查看所有的进程和端口使用情况 2.查看8080端口是否被占用 [root@localhost bin]# lsof -i:8080 3.查看防火墙开放的端口 ...
- 文件替换（交互式）Replace
在增量发版博文里,自动识别目标文件路径是采用了标记目录特征.当部署环境多变时,会多有不便.这个替换程序,在使用时需要手动输入目标目录.当需要进一步自动化时,可以与 fint 配合使用. 程序发布时,需 ...
- SQLServer树查询
感觉这个CTE递归查询蛮好用的,先举个例子: use City; go create table Tree ( ID int identity(1,1) primary key not null, N ...
- Failed to execute request because the App-Domain could not be created. Error: 0x80070002 系统找不到指定的文件。
360更新补丁后,网站就打不开aspx文件了,后来一查是framework2.0的KB2844285这个补丁引起的.把它卸载掉就ok了!