$()函数
$()函数，是招牌功能，能够根据CSS选择元素。
比如：
1 $("#box")
选择页面上id为box的盒子。
jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。
引号问题
1 $("选择器")
注意引号不能丢！！在jQuery世界中，只有三个东西不能加引号，其他必须加引号：
1 $(this)
2 $(document)
3 $(window)
jQuery 事件
jQuery 是为事件处理特别设计的。
什么是事件？
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：
在元素上移动鼠标。
选取单选按钮
点击元素
在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。
常见 DOM 事件：
鼠标事件 键盘事件 表单事件 文档/窗口事件
image.png
jQuery 效果- 隐藏和显示
show()显示、hide()隐藏、toggle()切换
1 $("div").show(); //让一个本身是display:none;元素显示
2 $("div").hide(); //隐藏元素display:none;
3 $("div").toggle(); //切换显示状态。
4 //自行带有判断，如果可见，就隐藏；否则显示。
特别的，如果show()、hide()、toggle()里面有数值，将变为动画：
jQuery 效果 - 淡入淡出
fadeIn()淡入
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
fadeOut()淡出
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
fadeTo() 淡到那个数
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
fadeToggle() 淡出入切换
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
jQuery 效果 - 滑动
slideDown : 下滑展开
$("#flip").click(function(){
$("#panel").slideDown();
});
slideUp：上滑收回
$("#flip").click(function(){
$("#panel").slideUp();
});
slideToggle : 滑动切换
$("#flip").click(function(){
$("#panel").slideToggle();
});
jQuery 效果- 动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 2000px;
}
#div1 {
width: 100px;
height: 30px;
background: blue;
color: white;
/* 定位方式： 用固定定位 */
position: fixed;
right: 0;
bottom: 0;
/* 默认是隐藏状态 */
display: none;
}
</style>
</head>
<body>
<button id="div1"> 回到顶部 </button>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script>
// 给按钮绑定点击事件处理函数
$("#div1").click(function() {
// 滚动到顶部， 通过设置
// "body,html" 兼容写法，确保所有浏览器都可以正常设置滚动条
$("body,html").animate({scrollTop: 0});
});
// 到达一定位置才显示“回到顶部”按钮
// 思路：
// 1. 获取滚动条的位置
// 2. 根据位置判断，是否显示“回到顶部” 按钮
$(document).scroll(function() {
var top = $(document).scrollTop();
if (top > 200) {
$("#div1").show();
} else {
$("#div1").hide();
}
})
</script>
</body>
</html>
jQuery 停止动画
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello world!</div>
</body>
</html>
网友评论