blog
原创

JQuery——动画、遍历和事件绑定

动画

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

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>
JQuery
  • 作者:Melonico
  • 发表时间:2021-03-15 17:45
  • 更新时间:2021-03-15 17:45

评论

暂无评论,快来发表第一个评论吧!
留言
TOP