您的位置:首页 > Web前端 > JQuery

前端——JQuery进阶

2019-06-15 18:45 1621 查看

1.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”

swing:动画执行效果先慢,中间快,最后又慢
linear:动画执行效果匀速

  • fn:动画执行时完成的函数,每个元素执行一次

2.JQuery遍历

2.1.JS的遍历方式

for(初始化值,循环结束条件,步长)

2.2.JQuery的遍历方式

  • JQuery对象.each(callback)
  • $.each(Object,[callback])
  • for…of:3.0以后版本提供
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遍历</title>
<script src = "js/jquery-3.3.1.min.js"></script>

<script type="text/javascript">
$(function () {
//1.获取所有ul下的li
let city = $("#city li");

//2.遍历li

//2.1.JS的遍历方式
//for(初始化值,循环结束条件,步长)
// for (var i = 0; i < city.length; i++) {
//     //获取内容
//     alert(i + ":" + city[i].innerHTML);
// }

//2.2.JQuery的遍历方式
// //* JQuery对象.each(callback)
// city.each(function (index,element) {
//     //1.获取li第一种方法,但是无法获取索引
//     //alert(this.innerHTML);
//
//     //2.获取li第二种方法
//     //在回调函数中定义参数
//     //index(索引) element(元素对象)
//     alert(index + ":" + element.innerHTML);
// })

// //* $.each(Object,[callback])
// $.each(city,function () {
//     alert($(this).html());
// })

//* for..of:
for(li of city){
alert($(li).html());
}

})
</script>

</head>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>

3.JQuery事件绑定

  • 1.JQuery标准绑定方式

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery绑定事件</title>
<script src = "js/jquery-3.3.1.min.js"></script>

<script type="text/javascript">
$(function () {
// //获取name对象,绑定click对象
// $("#name").click(function () {
//     alert("我被点击了")
// });

// //给name绑定鼠标移动到元素之上的事件,绑定鼠标移出事件
// $("#name").mouseover(function () {
//     alert("鼠标来了")
// });
// $("#name").mouseout(function () {
//     alert("鼠标走了")
// });

//简化操作,链式编程
$("#name").mouseover(function () {
alert("鼠标来了")
}).mouseout(function () {
alert("鼠标走了")
});
});
</script>

</head>
<body>
<input id="name" type="text" value="绑定事件">
</body>
</html>
  • 2.on绑定事件/off解除绑定

JQuery对象.on(“事件名称”,回调函数)
JQuery对象.off(“事件名称”)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery绑定事件</title>
<script src = "js/jquery-3.3.1.min.js"></script>

<script type="text/javascript">
$(function () {
//使用on绑定单击事件
$("#btn").on("click",function () {
alert("我被点击了");
})

//使用off解除btn1按钮的单击事件
$("#btn1").click(function () {
//解除btn按钮的单击事件
$("#btn").off("click")//将组件上的所有事件全部解绑
});
})
</script>

</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn1" type="button" value="使用off解绑点击事件">
</body>
</html>
  • 3.事件切换:toggle
  • JQuery对象.toggle(fn1,fn2…):当单击JQuery对象对应的组件后,会执行fn1,第二次点击会执行fn2…
  • !!!注意
    :1.9版本之后toggle事件绑定的功能移除了,但是动画效果还能使用,如果要使用的话,需要引入Migrate插件恢复此功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery绑定事件</title>
<script src = "js/jquery-3.3.1.min.js"></script>

<script type="text/javascript">
$(function () {
//获取按钮,调用toggle方法
$("#btn").toggle(function () {
//改变div背景色为绿色
$("#mydiv").css("backgroundColor","green");
},function () {
//改变背景色为粉色
$("#mydiv").css("backgroundColor","pink");
});
});
</script>

</head>
<body>
<input id="btn" type="button" value="事件切换">
<div id="myDiv" style="width:300px;hight:300px;background: pink">
点击按钮变成绿色,再次点击变粉色
</div>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: