前端——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>
相关文章推荐
- 【前端学习笔记】JQuery事件细节、JQ进阶常用方法
- 前端修炼——jQuery进阶!
- Web前端——JQuery的进阶(动态的显示某个div控件,选择器的构建)
- 二十四、python学习之前端(七):JQuery进阶
- 前端基础进阶(八):详细图解jQuery对象,以及如何扩展jQuery插件
- Web前端——JQuery的进阶(测试使用 jQuery进行指定的操作)
- 前端基础进阶(十一):详细图解jQuery对象,以及如何扩展jQuery插件
- 2019最新某Web前端开发Jquery高级进阶及移动端开发教程
- 项目分析之:设计一种前端数据延迟加载的jQuery插件(2)
- 源码-JavaScript&jQuery交互式前端开发-第3章-函数、方法与对象-String对象
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-使用事件委托
- 前端开发 - JQuery - 上
- ASP.NET MVC和WebForm 轻松实现前端和后端的双重验证 jquery.validate+ValidationSugar
- 【web前端】jQuery – 鼠标经过(hover)事件的延时处理
- 前端入门10个css bug顺口溜(转自www.jqueryba.com)
- Jquery Web 前端验证框架插件,jquery-validate资料,validation
- 【前端学习笔记】JQuery的基本思想、常用方法
- 使用前端使用jQuery获取 在apsx页面的page_load方法直接返回json数据
- 【jQuery基础学习】09 jQuery与前端(这章很水)
- 前端必备:jQuery 1.7.1API手册