事件
$(document).ready() $() load() |
加载 |
click() dblclick() |
点击 |
keydown() keypress() keyup |
键盘 |
mousedown() mouseup() mousemove() mouseenter() mouseleave() mouseover() mouseout() |
鼠标 |
focus() blur() |
焦点 |
change() | 改变 |
submit() | 提交 |
on() | 绑定事件 |
trigger() | 触发事件 |
页面加载有两种方式表示
1. $(document).ready();
2. $(); 这种比较常用
图片加载用load()函数
keydown 表示按下键盘
keypress 表示按住键盘
keyup 表示键盘弹起
这三者的区别分别表现在发生的 先后顺序,获取到的键盘按钮值,已经对输入框的文本取值这三方面
先后顺序: 按照 keydown keypress keyup 顺序发生
键盘按钮值:
通过event对象的which属性获取键盘的值
keydown和keyup 能获取所有按键,不能识别大小写
keypress 不能获取功能键,如F1 SHIFT等,能够识别大小写
文本取值:
keydown和keypress:不能获取最后一个字符
keyup: 获取所有字符
进入事件有3个 mousemove mouseenter mouseover
mousemove :当鼠标进入元素,每移动一下都会被调用
mouseenter :当鼠标进入元素,调用一下,在其中移动,不调用
mouseover:当鼠标进入元素,调用一下,在其中移动,不调用
mouseenter 和 mouseover的区别
mouseenter: 当鼠标经过其子元素不会被调用
mouseover:当鼠标经过其子元素会被调用
mouseleave 和 mouseout的区别
mouseleave: 当鼠标经过其子元素不会被调用
mouseout:当鼠标经过其子元素会被调用
focus() 获取焦点
blur() 失去焦点
以上所有的事件处理,都可以通过on() 绑定事件来处理
$("selector").on("event",function);
触发事件,比如文档加载好之后,就触发dblclick双击事件,而不是通过去手动双击。
$("selector").trigger("event");
AJAX
$.ajax() | 提交AJAX请求 |
$.get() | 使用get方式提交ajax |
$.post | 使用post方式提交ajax |
load() | 最简单的调用ajax的方式 |
serialize() | 格式化form下的输入数据 |
.ajax()
$.ajax采用参数集的方式 {param1,param2,param3} 不同的参数之间用,隔开
第一个参数 url:page 表示访问的是page页面
第二个参数 data:{name:value} 表示提交的参数
第三个参数 success: function(){} 表示服务器成功返回后对应的响应函数
$.ajax({
url: page,
data:{"name":value},
success: function(result){
$("#checkResult").html(result);
}
});
$.get 是 $.ajax的简化版,专门用于发送GET请求
$.get 使用3个参数
第一个参数: page 访问的页面
第二个参数: {name:value} 提交的数据
第三个参数: function(){} 响应函数
只有第一个参数是必须的,其他参数都是可选
$.get(
page,
{"name":value},
function(result){
$("#checkResult").html(result);
}
);
$.post 是 $.ajax的简化版,专门用于发送POST请求
load比起 $.get,$.post 就更简单了
$("#id").load(page,[data]);
id: 用于显示AJAX服务端文本的元素Id
page: 服务端页面
data: 提交的数据,可选。
serialize(): 格式化form下的输入数据
有的时候form下的输入内容比较多,一个一个的取比较麻烦,就可以使用serialize() 把输入数据格式化成字符串
数组操作
关键字 | 简介 |
---|---|
$.each() | 遍历 |
$.unique() | 去除重复 |
$.inArray() | 是否存在$.inArray |
$.each遍历
$.each( a, function(i, n){
document.write( "元素[" + i + "] : " + n + "<br>" );
})
$.unique() 去掉重复的元素
注意 : 执行unique之前,要先调用sort对数组的内容进行排序。
$.inArray 返回元素在数组中的位置 ,如果不存在返回-1
$.inArray(9,a)
字符串操作 $.TRIM()
$.trim() 去除首尾空白
将JSON格式的字符串,转换为JSON对象
$.parseJSON 将JSON格式的字符串,转换为JSON对象
对象和DOM节点对象进行互相转换
学习到这里已经使用了大量的JQuery对象的方法,比如show() 、toggle()等等,这些方法都是属于JQuery对象的,而原生的DOM对象不具备这些方法。
同样的DOM对象也具备JQuery对象所没有的属性和方法,比如checked属性。
在某些场景下,需要对JQuery对象和DOM节点对象进行互相转换
1、通过get(0)或者[0] 把JQuery对象转为DOM对象43
$("#b1").click(function(){
var div= $("#d");
var d = div[0];
var s ="JQuery对象是 " + div;
s +="\n对应的DOM对象是 " + d
alert(s);
});
2、通过$() 把DOM对象转为JQuery对象
$("#b1").click(function(){
var div= document.getElementById("d");
var d = $(div);
var s ="DOM对象是 " + div;
s +="\n对应的JQuery对象是 " + d
alert(s);
});
学习网站: