11、jQuery其余操作
上篇主要介绍了jQuery,和一些基本用法,这篇主要讲解动画、常用事件、还有一些jQuery的补充内容。
本篇导航:
1、基本
show([s,[e],[fn]]) 显示隐藏的匹配元素
hide([s,[e],[fn]]) 隐藏显示的元素
toggle([s],[e],[fn]) 如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的
2、滑动
slideDown([s],[e],[fn]) 通过高度变化(向下增大)来动态地显示所有匹配的元素
slideUp([s,[e],[fn]]) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素
slideToggle([s],[e],[fn]) 通过高度变化来切换所有匹配元素的可见性
3、淡入淡出
fadeIn([s],[e],[fn]) 淡入 fadeOut([s],[e],[fn]) 淡出 fadeTo([[s],o,[e],[fn]]) - 淡出到到固定(自己定义)透明度 fadeToggle([s,[e],[fn]]) - .fadeToggle(3000, function () { alert("真没用3"); }); 切换
4、自定义动画
animate(p,[s],[e],[fn]) 自定义动画
5、示例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画示例</title> <style> .hide { display: none; } </style> </head> <body> <img src="http://www.iyi8.com/uploadfile/2017/0523/20170523114637271.jpg" alt=""> <button id="b1">召唤</button> <button id="b2">淡出</button> <button id="b3">淡入</button> <button id="b4">淡出到0.66</button> <button id="b5">淡入淡出</button> <button id="b6">边框变大</button> <script src="jquery-3.2.1.js"></script> <script> $("#b1").on("click", function () { // $("img").show(); $("img").toggle(); }) // 淡出 $("#b2").on("click", function () { $("img").fadeOut("fast"); }) // 淡入 $("#b3").on("click", function () { // 掌握了增加时间的方法 $("img").fadeIn(3000, function () { alert("真没用"); }); }) // 淡出到0.66透明度 $("#b4").on("click", function () { // 掌握了新知识 $("img").fadeTo(3000, 0.66, function () { alert("真没用2"); }); }) // 淡入淡出 $("#b5").on("click", function () { $("img").fadeToggle(3000, function () { alert("真没用3"); }); }) // 动画-图片变小 $("#b6").on("click", function () { $("img").animate({ width: "100px", height: "60px", }, 3000, function () { // 这是回调函数 alert(123); }); }) </script> </body> </html>
1、常用事件
blur([[data],fn]) -失去焦点 focus([[data],fn]) - 获取焦点 change([[data],fn]) - 当元素的值发生改变(select) click([[data],fn]) - 点击 dblclick([[data],fn]) - 双击 scroll([[data],fn]) - 滚动 submit([[data],fn]) -提交
2、补充
文档树加载完之后绑定事件(绝大部分情况下) $(document).ready(function(){ // 绑定事件的代码 .... }) 简写: $(function($){ // 绑定事件的代码 .... });
3、示例
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用事件示例</title> </head> <body> <input type="text" name="search" value="苹果手机" data-show=""> <button>搜索</button> <select name="" id="s1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <script src="jquery-3.2.1.js"></script> <script> $(":input").focus(function () { var data = $(this).val(); $(this).val(""); $(this).attr("data-show", data); }); $(":input").blur(function () { $(this).val($(this).attr("data-show")); }); $(":input").data("items", ["苹果手机", "苹果电脑", "烟台红富士"]); // change $("#s1").change(function () { console.log($(this).val()); }); </script> </body> </html>
4、事件处理
之前绑定事件的方式: 1. onclick=clickMe(); function clickMe() {} 2. ele.onclick = function(){} 3. ele.addEventListener("click", function(){}) jQuery绑定事件的方式: 1. $(ele).on("click", function(){}) 2. $("tbody").delegate(".btn-warning", "click", function(){}) 事件委派 1.x版本使用 最新版本已经不能使用 3. $("tbody").on("click",".btn-warning",function(){}) 我们要用的事件委派
1、jQuery.extend(object)
jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。
<script> jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); jQuery.min(2,3); // => 2 jQuery.max(4,5); // => 5 </script>
2、jQuery.fn.extend(object)
一个对象的内容合并到jQuery的原型,以提供新的jQuery实例方法。jQuery.fn.extend(object)
<script> jQuery.fn.extend({ check: function() { return this.each(function() { this.checked = true; }); }, uncheck: function() { return this.each(function() { this.checked = false; }); } }); // jQuery对象可以使用新添加的check()方法了。 $( "input[type='checkbox']" ).check(); </script>
3、单独写在文件里的扩展
(function(jq){ jq.extend({ funcName: function(){ ... }, }); })(jQuery); 或 (function (jq) { jq.fn.extend({ funcName: function(){ ... } }) })(jQuery);
上一篇jQuery初识和本篇所有的jquery的所有操作只是一些常用操作很少的一部分,如果想了解jquery的其他操作的话可以去查一些(jQuery API 中文文档)在百度上就可以搜到很多。
推荐一个:http://jquery.cuishifeng.cn/
样图: