jQuery
2017-10-24 本文已影响0人
童_268a
一、jQuery的简介：
- jQuery是一个快速、简洁的JavaScript框架。John Resig是jQuery的第一创始人。
- jQuery的核心特性：
具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。
二、JQuery常用方法：
1、选择器:
1. 标签选择器
$("tagName"); // 引号里面是标签名，例：div
2. 类（class）选择器
$(".className"); // 引号里面是类名。
3. id 选择器
$("#idName"); // 引号里面是id名。
4. 通配符
$("*"); // 引号里面是*，表示所有元素。
5. 交集选择器
$("#idName.className"); // 引号里是标签名 /类名 /id名等中间用 . 连接。
6. 后代选择器
$("#idName .className"); // 两个元素有空格，引号里是标签名/类名/id名等。
2、元素CSS属性获取
// 获取
$("#div1").css("width")
// 设置
$("#div1").css("width", 200)
$("#div1").css("width", "200px")
$("#div1").css({"width": 200})
整个页面加载完成
document.onload = 函数
// 只是加载DOM结构
$(document).ready(函数)
$(函数) 【重点】
// 所有资源都加载完毕
$(window).ready(函数)
3、序与迭代
eq()方法
$("p").eq(0)
index()方法
$(this).index()
each() 方法
$(".box2 p").each(function(i) {
// i 就是遍历的下标
// this 代表的是当前的dom元素对象
if (i > 0 && i < 3) {
$(this).css({"color": "red"})
}
})
length属性
$("p").length
is() 方法
$("p").is(":animated") 当前元素是否在执行动画
get()方法 // jQuery 对象 --> js元素对象\DOM对象
// 得到js元素对象
var a = $("p").get(0)
a.xxx = "1024";
var b = $("p").get(0)
console.log(b.xxx);
// 1024 只有1个p，原生对象只有1个
4、动画相关方法
1. animate
$("p").animate(JS对象, 动画时间, 回调函数/动画类型)
2.内置方法:
show()展示、hide()隐藏、toggle()如果元素可见,则隐藏这些元素,如果元素隐藏,则显示这些元素。
3.其他方法：
slideDown() // 以滑动方式显示隐藏的 <p> 元素：
$(".btn").click(function(){
$("p").slideDown();
});
slideUp() // 以滑动方式显示显示的 <p> 元素：
slideToggle() // 通过使用滑动效果，在显示和隐藏状态之间切换 <p> 元素：
fadeIn() // 使用淡入效果来显示一个隐藏的 <p> 元素：
$(".btn").click(function(){
$("p").fadeIn();
});
fadeOut() // 使用淡出效果来隐藏一个 <p> 元素。
fadeTo() // 将被选元素的不透明度逐渐地改变为指定的值。
语法:
$(selector).fadeTo(speed,opacity,callback)
fadeToggle() // 用于切换所有匹配的元素,并带有淡入/淡出的过渡动画效果。
stop() // 停止当前正在运行的动画。
finish() // 完成当前正在运行的动画。
delay() // 对不同的 <div> 元素设置延迟：
$("button").click(function(){
$("#div1").delay("slow").fadeIn();
$("#div2").delay("fast").fadeIn();
});
is(":animated") // 判断元素是否处于动画状态。
5、 JQuery中的插件
- 滚轮事件
<script>
var y = 0;
// mousewheel 鼠标滚轮事件
$(document).mousewheel(function(e) {
// e 是事件对象，只要发生这个事件，系统会自动传递过来
// 如果物体正在运动，截流
if ($("#big").is(":animated")) {
return ;
}
// e.deltaY: 正： 往上滚， 负： 往下滚
// console.log(e.deltaY);
if (e.deltaY > 0) {
y--;
} else {
y++;
}
// 判断
if (y < 0) {
y = 0;
}
if (y > 4) {
y = 4;
}
// 更新页面
// 获取页面高度
var h = $("body").innerHeight();
$("#big").animate({"top": -y*h}, 1000);
})
</script>
- 轮播图
<script>
// 【练习】 用 jQuery 实现改变图片位置
// 轮播图思路：
// 1. 改变 m_unit 的 left 值，实现移动效果
// 获取图片的宽度
var w = $("#m_unit ul li").innerWidth();
// 点击右边的按钮
$("#rightBtn").click(function() {
move();
});
setInterval(move, 1000);
// 保存轮播图的下标
var i = 0;
// 切换图片
function move() {
// 函数截流
// 判断图片是否正在动，如果是返回true，否则返回false
if ($("#m_unit").is(":animated")) {
// 立刻终止函数
return ;
}
// 指向下一张轮播图
i++;
// -w 说明往左边移动 1张图片的宽度
// i-1 ==> i
$("#m_unit").animate({"left": -i*w}, 500, function() {
// 0, 1, 2, 3, 4, 5
// 第5张【动画结束】之后，改变指向下标 i,
if (i >= 5) {
i = 0; // 变成0
$("#m_unit").css({"left": 0}); // 图片瞬间切换到第0张
}
// 移除所有li的 current样式
$(".circles ol li").removeClass("current");
// eq(i) 代表匹配下标为 i 的jQuery对象
$(".circles ol li").eq(i).addClass("current");
});
}
</script>
3.百叶窗
/*
思路：
1. 给 li 绑定 mouseover (或者 mouseenter)
2. 改变 li 的 left 值
前面的
后面的
mouseout 事件，具有 事件冒泡的特性
切换 li， 相当于 移出了某个li ===> 会传播给外层的 div
1. 阻止li的 mouseout
2. 添加不会冒泡的事件 mouseenter mouseleave
*/
$("li").mouseleave(function() {
$("li").stop(true);
$(".no0").animate({"left": 0});
$(".no1").animate({"left": 120});
$(".no2").animate({"left": 240});
$(".no3").animate({"left": 360});
$(".no4").animate({"left": 480});
})
// 1. 给所有的li都添加 鼠标移入的事件（mouseenter不会冒泡的）
$("li").mouseenter(function() {
$("li").stop(true);
// 2. 找出变化值
// （1） 当前是哪个li， li 的下标 i
// （2） <= i 的就是 往左边偏
// 0,60,120,180,240
// > i 的就是 往右边偏
// 0,560,620,680,740
var i = $(this).index();
var left = [0,60,120,180,240]; // 左边偏的值
var right = [ 0,560,620,680,740]; // 右边偏的值
// 遍历所有的li
$("li").each(function(j) { // j 是遍历的下标
if (j <= i) { // j <= i 的就是 往左边偏 的元素
$(this).animate({"left": left[j]});
} else { // j > i 的就是 往右边偏 的元素
$(this).animate({"left": right[j]});
}
});
})
