jQuery_02
一、常用方法
1.1、addClass || removeClass
概述：它们两者是JQ函数库提供的。他们两者主要的作用是，可以给匹配节点添加类型或移除类名操作。
<script type="text/javascript">
//绑定事件
$('button:eq(0)').click(function(){
//给div添加类名
$("div").addClass('cur');
});
$("button:eq(1)").click(function(){
//div移除类名
$("div").removeClass("cur");
});
//链式语法：连续打点【从左到有】
$("button:eq(2)").click(function(){
$("div").html("我爱你").css({'width':100}).addClass('erha');
});
</script>
1.2、index
概述：它是JQ函数库提供一个常用方法。它主要的作用是可以获取到某一个匹配节点索引值。
<script type="text/javascript">
//index:获取匹配节点的索引值
console.log($(".cur").index());
</script>
1.3、each
概述：它也是jQuery函数库给我们提供方法。他们主要的作用是可以遍历全部匹配节点。
<script>
$("li").each(function(index,element){
$(element).css({
"width":index * 10 + 50,
});
});
</script>
each的function有两个参数，一个是index，表示当前匹配到节点的索引值，一个是element，在函数中匹配节点时要用element
二、节点关系方法
概述：在HTML骨架下，标签与标签之间是有嵌套关系。就导致出现父子节点、爷孙节点等关系。
jQuery函数库中给我们封装了很多节点关系方法。
2.1、parent
概述：它是jQuery函数库中提供一个方法，它主要的作用是可以获取到某一个匹配节点【父节点】。
$("li").parent().css({"background":"red"});
2.2、函数上下文【this】
概述：函数上下文【this】，如果在函数中出现（只能在函数体中使用）。
事件处理函数中下文this，就是当前这个触发事件元素。
<script>
$("li").click(function(){
$(this).css({"background":"red"});
});
</script>
2.3、siblings
概述：它是jQuery函数库给我们提供节点关系方法。它主要的作用是可以获取到某一个匹配节点的姊妹节点。
说白了，就是同级元素。
<script>
//siblings可以匹配当前所选节点的所有兄弟节点，如果传参数就是匹配指定的节点，不传参数就是匹配所有的兄弟节点
console.log($("p").siblings());
console.log($("p").siblings("p"));
$("div").click(function(){
$("p").siblings("p").css({"background":"red"});
});
</script>
$(this).css({"background":"red"}).siblings().css({"background":"cyan"});
2.4、children
概述：它也是jQuery函数库提供一个方法。主要的作用是可以获取到某一个匹配节点的全部子节点。
<script>
console.log($("div").children());
console.log($("div").children(".cur"));
</script>
实战练习：折叠卡片
<script type="text/javascript">
//给新闻标题绑定单机事件
$("h3").click(function(){
//写的少,做的多---链式语法
$(this).siblings().slideDown(500).parent().siblings().children("p").slideUp(500);
});
</script>
三、animate函数
3.1.animate的基本使用
用途：实现动画
语法格式：$(selector).animate(json,time,callback);
其中只有第一个参数json是必须的，json数据格式用来设置动画最终完成的属性样式（所有与颜色相关的样式都不能参与animate函数的变化）；
第二个参数time是动画时间的设置【ms】；
第三个参数是当动画完成之后立即执行一次回调函数。
<script>
$("div").animate({"left":1000,
"top":500,
"opacity":.3,
},2000,function(){
console.log("动画函数结束后立即调用一次");
});
</script>
注：在用$选中标签时，要给标签加上双引号。
3.2，animate函数注意事项
一个匹配节点可以添加多个animate动画。
<script>
$("div").animate({"left":200,},2000);
$("div").animate({"top":200,},2000);
$("div").animate({"left":0,},2000);
$("div").animate({"top":0,},2000);
</script>
一个匹配标签若添加了多个animate动画，则会按照添加顺序来一一执行animate函数。
3.3，动画积累问题
方法：用stop.(true)来解决
stop：终止当前函数积累的全部动画
语法格式：$(selector).stop(true).animate();
只能放在animate前面，链式语法顺序执行。
<script>
$("button:eq(0)").click(function(){
$("div").stop(true).animate({"left":100});
});
$("button:eq(1)").click(function(){
$("div").stop(true).animate({"left":0});
});
</script>
3.4，传统轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css.css">
<script src = "jQuery.min.js"></script>
</head>
<body>
<div>
<ul>
<li class = "cur"><img src="../images/1.jpg" alt=""></li>
<li><img src="../images/2.jpg" alt=""></li>
<li><img src="../images/3.jpg" alt=""></li>
<li><img src="../images/4.jpg" alt=""></li>
<li><img src="../images/5.jpg" alt=""></li>
</ul>
<button class = "lbtn"><</button>
<button class = "rbtn">></button>
<ol>
<li class = "show">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
<script>
var idx = 0;
//左侧按钮单击事件
$(".lbtn").click(function(){
$("ul li:eq("+idx+")").css({"left":0}).stop(true).animate({"left":600},300);
idx--;
idx = idx<0?4:idx;
$("ul li:eq("+idx+")").css({"left":-600}).stop(true).animate({"left":0},300);
$("ol li:eq("+idx+")").addClass("show").siblings().removeClass("show");
});
//右侧按钮单击事件
$(".rbtn").click(function(){
$("ul li:eq("+idx+")").css({"left":0}).stop(true).animate({"left":-600},300);
idx++;
idx = idx>4?0:idx;
$("ul li:eq("+idx+")").css({"left":600}).stop(true).animate({"left":0},300);
$("ol li:eq("+idx+")").addClass("show").siblings().removeClass("show");
});
</script>
四、百度新闻导航
4.1、获取节点宽高的常用方法
<script>
//width与height方法：可以获取到匹配节点的内容的宽高
console.log($("div").width());
console.log($("div").height());
//innerWidth与innerHeight方法：可以获取到匹配节点的内容+内边距的宽高
console.log($("div").innerWidth());
console.log($("div").innerHeight());
//outerWidth与outerHeight方法：默认值为false：可以获取到匹配节点的内容+内边距+外边框的宽高，若设置值为true则可获取到内容+内边距+外边框+外边距的宽高
console.log($("div").outerWidth());
console.log($("div").outerHeight());
console.log($("div").outerWidth(true));
console.log($("div").outerHeight(true));
</script>
4.2，其他节点关系方法
4.2.1next||nextAll
可以获取到下一个或者后面所有的姊妹节点。
4.2.2prev||prevAll
可以获取到前面一个或者前面所有的姊妹节点。
<script>
//绑定鼠标移上事件
$("li").mouseenter(function(){
var sum = 300;
$(this).prevAll().each(function(index,element){
sum += $(element).innerWidth();
});
$(".cur").stop(true).animate({"left":sum,"width":$(this).innerWidth()},1000);
});
//绑定鼠标移除事件
$("div").mouseleave(function(){
$(".cur").stop(true).animate({"left":300,"width":$("li:eq(0)").innerWidth},1000);
});
</script>
注意事项：$(this)与$(element)不需要加双引号
浙公网安备 33010602011771号