$("li").index(this)
1.after() insertAfter(), on,bind delegate代理
插入 after()
A.after(B); A前B后
insertAfter()
A.insertAfter(B); A在B后面
on bind 可以利用事件的冒泡 实现事件的委托与代理
$("main").on("click",function () {
console.log("11111");
})
$("main").bind("click",function () {
console.log("bind");
})
delegate() 代理
// delegate 代理
$("main").delegate("div","click",function () {
console.log("代理完成了");
})2.元素的尺寸：
2.1获取元素大小 width() height() innerWidth() innerHeight() outWidth() outerHeight(true)
// width height 设置元素的大小 (内容大小)
console.log('元素大小 === ',$("div").width());
console.log('元素大小 === ',$("div").height());
// 包含了 padding + w / h
console.log('元素大小 === ',$("div").innerWidth()); //不包含滚动条
console.log('元素大小 === ',$("div").innerHeight());
// 包含 border + padding + w/h
console.log('元素大小 === ',$("div").outerWidth());
console.log('元素大小 === ',$("div").outerHeight());
// outerWidth 如果参数为true 包含 margin
console.log('元素大小 === ',$("div").outerWidth(true));
console.log('元素大小 === ',$("div").outerHeight(true));
2.2元素的位置 offset().top offset().left position().top position().left
offset() 相对于html根元素
position() 相对于拥有定位的父元素
// 位置
// offset() 返回的是对象 {top,left}
// 相对于 html根元素
console.log('位置 ==== ',$("div").offset().top);
console.log('位置 ==== ',$("div").offset().left);
// position
// 相对于 拥有定位的父元素
console.log('位置 === ',$("div").position().top);
console.log('位置 === ',$("div").position().left);
滚动 scrollTop()
$(window).on("scroll",function () {
console.log("滚动的值是: === ",$(window).scrollTop());
})3.显示与隐藏 动画 自定义动画
显示与隐藏 show() hide() toggle()
var isDis=true;
$("button").eq(0).click(function(){
// 之前的写法
// $("div").css("display", !isDis?"none":"block");
// isDis = !isDis;
//1. hide() shaow()
if(isDis){
$("div").hide();
}else{
$("div").show();
}
isDis = !isDis;
// toggle()
// $("div").toggle();
})
滑动动画 slideDown() slideUp() slideToggle()
参数：p1:持续时间 p2:动画结束后的回调函数 （所有参数可选 有默认时间）
if (isDis) {
// p1: 持续时间 p2:动画结束后的回调
// 所有参数 可选 有默认时间
$("div").slideUp(1000,function () {
console.log("动画效果结束了。。。。");
});
} else {
$("div").slideDown(1000,()=> {
$("div").css("background","blue");
});
}
isDis = !isDis;
//$("div").slideToggle();
淡入淡出动画 fadeIn() fadeOut() fadeToggle()
// if (isDis) {
// $("div").fadeOut();
// } else {
// $("div").fadeIn();
// }
// isDis = !isDis;
$("div").fadeToggle();
})
自定义动画 animate() stop()
参数：
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)---动画持续时间
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数，每个元素执行一次。
animate()方法支持链式调用 动画会按顺序执行
$("button").eq(1).click(function () {
// $("section").animate({
// width: 200,
// height: 200
// }, 2000, "linear",function () {
// $(this).css("background","green");
// })
$("section").animate()
// 支持链式调用 会以据顺序执行
$('section').animate({width:200},2000).animate({height:200},2000);
})
停止动画用stop()方法，当参数为true时为停止所有动画
$("button").eq(2).click(function () {
// 停止动画
// $("section").stop();
// 停止所有动画
$("section").stop(true);
})给背景图加透明度： .css("opacity",0.5);
给图片加透明度：.css({filter:"opacity(50%)"});
4.鼠标键盘事件
在绑定事件时，1.要考虑把时间绑定给谁，
2.考虑是否有冒泡
鼠标事件 enter leave 不冒泡
$("ul").mouseenter(function () {
console.log('ul 进入');
})
$("ul").mouseleave(function () {
console.log('ul 离开');
});
over out 冒泡
$('ul').mouseover(function () {
console.log('ul 进入');
});
$('ul').mouseout(function () {
console.log('ul 离开');
});
hover()
有两个回调函数 over和out
$(selector).hover(function () {
// over
}, function () {
// out
}
);
console.log(event.target);// 触发当前事件得元素
// 相关的目标 从哪个元素进入了 当前元素
console.log(event.relatedTarget);
console.log(event.currentTarget);// 当前事件的绑定者
mousedown() mouseup() 鼠标按下和松开
键盘按下与松开 keydown() keyup()
5.jquery实现放大镜
利用hover()方法实现鼠标进入盒子时mask与右边大图的显示与隐藏，在盒子的鼠标移动事件中，找到mask的移动位置=e.pageX - $(this).offset().left - $(".mask").width() / 2，并且要确定mask的最小最大移动距离，利用定位给mask设置top，left值，利用
mask的位置：mask的最大移动距离=右边大图的位置：右边大图的最大移动距离 的比例得到大图的top，left值
<script>
$(".box").hover(function () {
// over
$(".mask").show();
$(".rightbox").show();
}, function () {
// out
$(".mask").hide();
$(".rightbox").hide();
}
);
$(".box").mousemove(function (e) {
// values: e.clientX, e.clientY, e.pageX, e.pageY
var x = e.pageX - $(this).offset().left - $(".mask").width() / 2;
var y = e.pageY - $(this).offset().top - $(".mask").height() / 2;
var bigX = $(this).width() - $(".mask").width();
var bigY = $(this).height() - $(".mask").height();
x = x < 0 ? 0 : (x < bigX ? x : bigX);
y = y < 0 ? 0 : (y < bigY ? y : bigY);
$(".mask").css({
top:y,
left:x
});
var imgBigX = $(".rightbox").width() - $(".rightbox img").width();
var imgBigY = $(".rightbox").height() - $(".rightbox img").height();
// x / bigx = ? / imgbigx
$(".rightbox img").css({
top:y * imgBigY / bigY,
left:x * imgBigX / bigX
})
});
</script>6.下拉动画（仿小米商城）
给元素设置浮动后，会脱离文档流，但不会脱离文本流
设置了延时器，是鼠标进入离开事件延迟执行，避免鼠标划入过快，定义全局变量isSlider来记录鼠标是否移动li上，如果sliderUp方法调用了才调用sliderDown方法，让切换元素得到显示
var downTimer = null;
var upTimer = null;
var isSilder = false; // 用来记录当前是否已经移动到li元素上 直到调用了up 才更改状态,否则一直是切换元素得显示
$("li").hover(function () {
clearTimeout(upTimer);
// over
var index = $(this).index();
if (!isSilder) {
downTimer = setTimeout(() => {
$(".item").eq(index).slideDown(300);
isSilder = true;
}, 300);
}
else{
$(".item").hide().eq(index).show();
}
}, function () {
// out
clearTimeout(downTimer);
upTimer = setTimeout(() => {
$(".item").slideUp(300);
isSilder = false;
}, 300);
}
);
$(".item").hover(function () {
clearTimeout(upTimer);
},function () {
upTimer = setTimeout(() => {
$(".item").slideUp(300);
isSilder = false;
}, 300);
})7.手风琴
改变大盒子的宽度实现
for(var i =0;i < 3;i++){
$(".left").eq(i).css("background-image",`url(./images/imgs/img${i+1}.png)`);
$(".content").eq(i).css("background-image",`url(./images/imgs/img0${i+1}.png)`).css("background-color","yellow");
}
$(".left").click(function () {
// 1.只有是展开的
// $(this).animate({width:600}).siblings().animate({width:100});
// 2.可以同时展开
// $(this).width() === 600 ? $(this).animate({width:100}) : $(this).animate({width:600})
// 3.
// 根据当前点击的 确定是否要更改宽度
// $(this).width() === 600 ? $(this).animate({width:100}) : $(this).animate({width:600}).siblings().animate({width:100});//1,2,3都是根据item的点击事件写的
$(".item").eq($(".left").index(this)).width() === 600 ? $(".item").eq($(".left").index(this)).
animate({width:100}) : $(".item").eq($(".left").index(this)).animate({width:600}).siblings().animate({width:100});
console.log($(".left").index(this));//jquery中找到在不同父元素的下的相同元素索引怎么合并
})本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
