一事件
常用事件
- click(function(){...}) // 单击事件
- hover(function(){...}) // 鼠标经过事件
- blur(function(){...}) // 失去光标
- focus(function(){...}) // 获取光标
- change(function(){...}) // 修改事件
- keyup(function(){...}) // 松开键盘
- keydown(function(){...}) // 按下键盘
事件绑定
语法:
.on( events [, selector ],function(){})
events: 事件
selector: 选择器(可选的)
function: 事件处理函数
移除事件
语法:
.off( events [, selector ][,function(){}])
events: 事件
selector: 选择器(可选的)
function: 事件处理函数
阻止后续事件执行
return false; // 常见阻止表单提交等
页面载入
当 DOM 载入就绪可以查询及操纵时绑定一个要执行的函数这是事件模块中最重要的一个函数, 因为它可以极大地提高 web 应用程序的响应速度
两种写法:
- $(document).ready(function(){
- // 在这里写你的 JS 代码...
- })
简写:
- $(function(){
- // 你在这里写你的代码
- })
事件委托
事件委托是通过事件冒泡的原理, 利用父标签去捕获子标签的事件
示例:
表格中每一行的编辑和删除按钮都能触发相应的事件
- $("table").on("click", ".delete", function () {
- // 删除按钮绑定的事件
- })
二动画效果
- // 基本
- show([s,[e],[fn]])
- hide([s,[e],[fn]])
- toggle([s],[e],[fn])
- // 滑动
- slideDown([s],[e],[fn])
- slideUp([s,[e],[fn]])
- slideToggle([s],[e],[fn])
- // 淡入淡出
- fadeIn([s],[e],[fn])
- fadeOut([s],[e],[fn])
- fadeTo([[s],o,[e],[fn]])
- fadeToggle([s,[e],[fn]])
- // 自定义(了解即可)
- animate(p,[s],[e],[fn])
三其他知识补充
- each
- jQuery.each(collection, callback(indexInArray, valueOfElement)):
描述: 一个通用的迭代函数, 它可以用来无缝迭代对象和数组数组和类似数组的对象通过一个长度属性 (如一个函数的参数对象) 来迭代数字索引, 从 0 到 length - 1 其他对象通过其属性名进行迭代
- li =[10,20,30,40]
- $.each(li,function(i, v){
- console.log(i, v);//index 是索引, ele 是每次循环的具体元素
- })
输出:
- 010 120 230 340
- .each(function(index, Element)):
描述: 遍历一个 jQuery 对象, 为每个匹配元素执行一个函数
.each() 方法用来迭代 jQuery 对象中的每一个 DOM 元素每次回调函数执行时, 会传递当前循环次数作为参数 (从 0 开始计数) 由于回调函数是在当前 DOM 元素为上下文的语境中触发的, 所以关键字 this 总是指向这个元素
- // 为每一个 li 标签添加 foo
- $("li").each(function(){
- $(this).addClass("c1");
- });
注意: jQuery 的方法返回一个 jQuery 对象, 遍历 jQuery 集合中的元素 - 被称为隐式迭代的过程当这种情况发生时, 它通常不需要显式地循环的 .each()方法:
也就是说, 上面的例子没有必要使用 each()方法, 直接像下面这样写就可以了:
$("li").addClass("c1"); // 对所有标签做统一操作
注意:
在遍历过程中可以使用 return false 提前结束 each 循环
终止 each 循环
- return false;
- .date()
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值
.data(key, value):
描述: 在匹配的元素上存储任意相关数据
- $("div").data("k",100);// 给所有 div 标签都保存一个名为 k, 值为 100
- .data(key):
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值通过 .data(name, value)或 html5 data-* 属性设置
- $("div").data("k");// 返回第一个 div 标签中保存的 "k" 的值
- .removeData(key):
描述: 移除存放在元素上的数据, 不加 key 参数表示移除所有保存的数据
$("div").removeData("k"); // 移除元素上存放 k 对应的数据
插件
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>
- jQuery.fn.extend(object)
一个对象的内容合并到 jQuery 的原型, 以提供新的 jQuery 实例方法
- <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>
单独写在文件中的扩展:
- (function(jq){
- jq.extend({
- funcName:function(){
- ...
- },
- });
- })(jQuery);
来源: http://www.bubuko.com/infodetail-2529065.html