1.动画
显示/隐藏元素
-
方法的参数描述
- speed:动画的速度。可用参数(“slow”, “normal”, “fast”),或者表示动画时常的毫秒数值。
- easing :切换效果。默认是"swing"(始末快,中间慢),可用参数(“linear” 动画速度是均速的)。
- fn:动画完成时执行的函数,每个元素执行一次。
-
默认显示/隐藏/切换
- show([speed], [easing], [fn])
- hide([speed], [easing], [fn])
- toggle([speed], [easing], [fn])
-
滑动显示/隐藏/切换
- slideDown([speed], [easing], [fn])
- slideUp([speed], [easing], [fn]])
- slideToggle([speed], [easing], [fn])
-
淡入淡出显示/隐藏/切换
- fadeIn([speed], [easing], [fn])
- fadeOut([speed], [easing], [fn])
- fadeToggle([speed], [easing], [fn])
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <script src="jquery-3.4.1.js"></script> <script> function hideFn() { $("#show").slideUp("slow", "swing", function (){ alert("show"); }); } function showFn() { $("#show").fadeIn("slow", "swing"); } function toggleFn() { $("#show").toggle("slow", "swing"); } </script> </head> <body> <input type="button" value="隐藏" onclick="hideFn()"> <input type="button" value="显示" onclick="showFn()"> <input type="button" value="切换" onclick="toggleFn()"> <div id="show" style="width: 100px; height: 100px; background: red"> divdivdiv --9807 56太132徐v你们 </div> /body> </html>
2.遍历
-
js的遍历方式
- for(初始值; 条件; 步长)
-
jQuery的遍历方式
-
jq对象.each(callback) 退出循序用return false,退出本轮循环用return true
-
$.each(object, [callback])
-
for…of:jquery3.0提供的新方式
-
3.事件绑定
-
jQuery绑定方式
jq对象.事件方法(回调函数);
-
on绑定事件/off解除绑定
jq对象.on(“事件名称”,回调函数)
jq对象.off(“事件名称”)
-
事件切换:toggle (jQuery1.9删除了这个方法,要使用得导入jQuery Migrate插件)
jq对象.toggle(fn1, fn2…)
-
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绑定事件</title> <script src="../jquery-3.4.1.js"></script> <script> $(function () { // 绑定方式1 $("#test1").click(function () { alert("点击"); }); // 绑定方式2 // 链式编程 $("#test1").on("mouseover", function () { alert("mouseover"); }).on("mouseout", function () { alert("mouseout"); }); $("#test2").on("click", function () { $("#test1").off("mouseover").off("mouseout"); }); // // 事件切换 jquery1.9 删除了这个方法 // $("#test3").toggle(function () { // $("#div1").css("backgroundColor", "black"); // }, // function () { // $("#div1").css("backgroundColor", "yellow"); // }); }) </script> </head> <body> <input id="test1" type="button" value="绑定事件"> <input id="test2" type="button" value="解除两个mouse事件"> <input id="test3" type="button" value="切换事件"> <div id="div1" style="width: 100px; height: 100px;"></div> </body> </html>
4.链式编程
在jQuery中,如果一直对同一个元素或元素的其他关系元素(兄弟元素,父子元素)进行操作,那么可以使用 .方法,一直写下去。
原理:jQuery中方法结束时,会返回自己this。
5.插件
-
$.fn.extend(object) 给jQuery获取的对象添加功能。
// 用法 $.fn.extend({ 函数名1:function() { }, 函数名2:function() { } });
-
$.extend() 给 jQuery对象添加方法
$.extend({ 函数名1:function() { }, 函数名2:function() { } })