动画

显示和隐藏元素的三种方式

1. 默认方式

① show(speed,easing,fn)：显示元素

② hide(speed,easing,fn)：隐藏元素

③ toggle(speed,easing,fn)：切换显示/隐藏

2. 滑动方式

① slideDown(speed,easing,fn)：滑动显示元素

② slideUp(speed,easing,fn)：滑动隐藏元素

③ slideToggle(speed,easing,fn)：切换滑动显示/滑动隐藏

3. 淡入淡出方式

① fadeIn(speed,easing,fn)：淡入

② fadeOut(speed,easing,fn)：淡出

③ fadeToggle(speed,easing,fn)：切换淡入/淡出

方法参数

• speed：动画速度，预定义值—slow、normal、fast 或 表示动画时长的毫秒值
• easing：指定切换效果，默认值为 swing（慢-快-慢），可用参数linear（匀速切换）
• fn：动画执行完毕后执行的函数，每个元素执行一次

遍历

for

for（单次表达式;条件表达式;末尾循环体）

{

​ 循环体;

}

<!-- 遍历ul下的li并弹出所有li的内容 -->
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
 	<li>4</li>
</ul>
<script>
	var list = $("ul li");
	for (var i = 0; i < list.length ; i++) {
		alert(list[i].innerHTML);
	}
</script>

each()

$(selector).each(function(index,element))

index：索引

element：当前元素，为js对象，可使用this选择器

// 遍历ul下的li并弹出li的索引和内容
var list = $("ul li");
list.each(function (index,element) {
	alert(index + " " + element.innerHTML);
})

在for循环中，我们可以使用break关键字来跳出循环、用continue关键字来结束本次循环

for(var i = 0; i < 10; i++){
	if(i == 2) continue; // 若i等于2 则结束本次循环 进入下次循环
	if(i == 5) break; //若i等于5 则跳出该循环
    alert(i);
}

在each()方法中，可以设置function的布尔类型返回值来实现

如果返回值为false，则结束循环（break）

如果返回值为true，则结束本次循环（continue）

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
</ul>
<script>
	var list = $("ul > li");
    list.each(function (index,element) {
        if ($(element).text() == "2"){
            	return true; // 等同于continue
        }
        if ($(element).text() == "4"){
                return false; // 等同于break
        }
        alert($(element).text()); //弹出1和3
     })
</script>

全局each

$.each(object,function(index,element))

object：需要遍历的对象

// 遍历ul下的li并弹出li的索引和内容
var list = $("ul > li");
$.each(list,function (index,element) {
	alert(index + " " + element.innerHTML);
})

for...of

JQuery 3.0版本之后提供的方式

for(变量 of 对象)

// 遍历ul下的li并弹出li的索引和内容
var list = $("ul > li");
for (var li of list) {
	alert(li.innerHTML);
}

事件绑定

标准绑定

JQ对象.事件方法(回调函数)

// 点击按钮弹出窗口
$("#btn").click(function () {
	alert("click");
})

on & off 绑定&解除绑定

JQ对象.on("事件名称",回调函数)

JQ对象.off("事件名称")

<input id="btn" type="button" value="click">
<input id="on" type="button" value="绑定" onclick="on()">
<input id="off" type="button" value="解绑" onclick="off()">
<script>
    function on() {
        // 给btn绑定click事件
        $("#btn").on("click",function () {
            alert("click");
        })
        alert("绑定成功");
    }
    function off() {
        // 解除btn上绑定的事件
        $("#btn").off("click");
        alert("解除绑定");
    }
</script>