60、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、示例
<!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、示例
<!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 API 中文文档
上一篇jQuery初识和本篇所有的jquery的所有操作只是一些常用操作很少的一部分，如果想了解jquery的其他操作的话可以去查一些（jQuery API 中文文档）在百度上就可以搜到很多。
推荐一个：http://jquery.cuishifeng.cn/
样图：
60、jQuery其余操作的更多相关文章
- jQuery框架操作CSS
3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScript设置标签的样式相对来说比较麻烦 ...
- JavaScript jQuery 中定义数组与操作及jquery数组操作
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
- IE7中使用Jquery动态操作name问题
问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...
- 深入学习jQuery节点操作
× 目录 [1]创建节点 [2]插入节点 [3]删除节点[4]复制节点[5]替换节点[6]包裹节点 前面的话 DOM节点操作包括创建节点.插入节点.移除节点.替换节点和复制节点.jQuery也有类似的 ...
- JQuery中操作Css样式的方法
JQuery中操作Css样式的方法//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#tw ...
- jQuery HTML 操作
jQuery 包含很多供改变和操作 HTML 的强大函数. 改变 HTML 内容 语法 $(selector).html(content) html() 函数改变所匹配的 HTML 元素的内容(inn ...
- Jquery DOM 操作列表
jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). jQuery 属性操作方法 下面列出的这些方法获得或设置元素的 DOM 属性. 这些方法对于 ...
- 转：jQuery 常见操作实现方式
http://www.cnblogs.com/guomingfeng/articles/2038707.html 一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备 ...
- jQuery Ajax 操作函数及deferred对象
jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 描述 jQuery.ajax() 执行异步 H ...
- jQuery Ajax 操作函数
jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 函数 描述 jQuery.ajax() 执行异步 H ...
随机推荐
- MySQL阿里云安装问题小记
1. [root@iZ2zeg11g0cdei5171kqskZ mysql]# ./scripts/mysql_install_db --user=mysql FATAL ERROR: please ...
- #postman接口测试系列：基本操作总结
最近项目需要接口测试,所以选择了不少工具对比,最终决定使用postman进行接口测试,这个工具目前使用比较简单,但是有点还是比较多的,如下: 方便切换不同的环境进行接口测试工作,而不用修改变量或代码 ...
- 移动应用开发者最应该知道的8款SDK
2017年双11全球狂欢节结束后,据大数据公司统计显示,2017年双11全网销售额达2539.7亿,移动端销售占比91.2%.不难看出,智能手机因随身携带.时刻在线等特点,已取代PC,成为网络生活新的 ...
- 吞吐量（TPS）、QPS、并发数、响应时间（RT）概念
开发的原因,需要对吞吐量(TPS).QPS.并发数.响应时间(RT)几个概念做下了解,查自百度百科,记录如下:1. 响应时间(RT) 响应时间是指系统对请求作出响应的时间.直观上看,这个指标与人对软 ...
- css3实现聊天气泡
1: <div class="comment"></div><style type="text/css"> .comment ...
- 部分小程序无法获取UnionId原因
问题背景 通过观察数据,发现有一部分用户是无法获取到UnionId的 也就是接口返回的参数中不包含UnionId参数 看了微信文档的解释,只要小程序在开放平台绑定,就一定会分配UnionId 网上也有 ...
- JavaEE中的MVC（四）AOP代理
咱们来吹牛,JDK的动态代理在AOP(Aspect Oriented Programming,面向切面编程)中被称为AOP代理,而AOP是Spring框架中的重要组成部分. 代理模式 但是什么是代理模 ...
- 如何使用MFC连接Access数据库
(1)新建一个Access数据库文件.将其命名为data.mdb,并创建好表.字段. (2)为系统添加数据源.打开“控制面板”—>“管理工具”—>“数据源”,选择“系统DSN”,点击右边的 ...
- 安装memcached
简介 memcached是免费和开放源代码的高性能分布式内存对象缓存系统,旨在通过减轻数据库负载来加速动态Web应用程序.其有以下特点: 基于简单的文本行协议 全部数据按照k/v形式存放在内存中,无持 ...
- 简介CentOS与 Ubuntu的不同
1.关于登录用户 centos可以使用root登录 ubuntu不能使用root登录 centos普通用户默认不能通过sudo取得root权限执行命令, ubuntu可以,centos需要sudo时 ...