$("p"); //元素选择器
$("p, span"); //元素选择器
$("#test"); //#id 选择器
$(".test"); //.class 选择器
$("*"); //选取所有元素;
$(this); //选取当前 HTML 元素;
$("p.intro"); //选取 class 为 intro 的 <p> 元素;
$("p:first"); //选取第一个 <p> 元素;
$("ul li:first"); //选取第一个 <ul> 元素的第一个 <li> 元素;
$("ul li:first-child"); //选取每个 <ul> 元素的第一个 <li> 元素;
$("[href]"); //选取带有 href 属性的元素;
$("a[target='_blank']"); //选取所有 target 属性值等于 "_blank" 的 <a> 元素;
$("a[target!='_blank']"); //选取所有 target 属性值不等于 "_blank" 的 <a> 元素;
$(":button"); //选取所有 type="button" 的 <input> 元素 和 <button> 元素;
$("tr:even"); //选取偶数位置的 <tr> 元素;
$("tr:odd"); //选取奇数位置的 <tr> 元素
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload | |
hover |
$("p").click();
$("p").click(function(){
// 动作触发后执行的代码!!
});
文档就绪事件
$(document).ready(function(){
// 开始写 jQuery 代码...
});
$(function(){
// 开始写 jQuery 代码...
});
$(selector).addClass() //向被选元素添加一个或多个类
$(selector).removeClass() //从被选元素删除一个或多个类
$(selector).toggleClass() //对被选元素进行添加/删除类的切换操作
$(selector).css("attr") //返回样式属性
$(selector).css("attr", "value") //设置样式属性
$(selector).css({
"attr": "value",
"attr": "value"
}) //设置样式属性
$(selector).width() //设置或返回元素的宽度(不包括内边距、边框或外边距)
$(selector).height() //设置或返回元素的高度(不包括内边距、边框或外边距)
$(selector).innerWidth() //方法返回元素的宽度(包括内边距)
$(selector).innerHeight() //方法返回元素的高度(包括内边距)
$(selector).outerWidth() //方法返回元素的宽度(包括内边距和边框)
$(selector).outerHeight() //方法返回元素的高度(包括内边距和边框)
$(selector).hide(speed,callback); //隐藏
$(selector).show(speed,callback); //显示
$(selector).toggle(speed,callback); //显示被隐藏的元素或隐藏已显示的元素
$(selector).fadeIn(speed,callback); //淡入已隐藏的元素
$(selector).fadeOut(speed,callback); //淡出可见元素
$(selector).fadeToggle(speed,callback); //在 fadeIn() 与 fadeOut() 方法之间进行切换
$(selector).fadeTo(speed,opacity,callback); //渐变为给定的不透明度(值介于 0 与 1 之间)
$(selector).animate({params},speed,callback); //创建自定义动画
params:
{
left:'250px', //操作多个属性
height:'+=150px', //使用相对值
marginRight:'10px' //使用 Camel 标记法书写所有的属性名
}
- 停止动画
$(selector).stop(stopAll,goToEnd);
//可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
//可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
//因此,默认地,stop() 会清除在被选元素上指定的当前动画。
$(selector).text() //返回所选元素的文本内容
$(selector).html() //返回所选元素的内容(包括 HTML 标记)
$(selector).val() //返回表单字段的值
$(selector).attr("attribute") //方法用于获取属性值
$(selector).text("value") //设置所选元素的文本内容
$(selector).html("value") //设置所选元素的内容(包括 HTML 标记)
$(selector).val("value") //设置表单字段的值
$(selector).attr("attribute", "value") //方法用于设置属性值
$(selector).attr({
"attribute" : "value",
"attribute" : "value"
}) //方法用于设置属性值
$(selector).append(); //在被选元素的结尾插入内容
$(selector).prepend(); //在被选元素的开头插入内容
$(selector).after(); //在被选元素之后插入内容
$(selector).before(); //在被选元素之前插入内容
$(selector).remove() //删除被选元素(及其子元素)
$(selector).empty() //从被选元素中删除子元素
$(selector).parent(); //返回被选元素的直接父元素,只会向上一级对 DOM 树进行遍历。
$(selector).parents(); //返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)
$(selector).parentsUntil(selector); //方法返回介于两个给定元素之间的所有祖先元素。
$(selector).children(); //方法返回被选元素的所有直接子元素
$(selector).find(); //返回被选元素的后代元素,一路向下直到最后一个后代
$(selector).siblings(); //方法返回被选元素的所有同胞元素。
$(selector).next(); //方法返回被选元素的下一个同胞元素。
$(selector).nextAll(); //返回被选元素的所有跟随的同胞元素。
$(selector).nextUntil(); //返回介于两个给定参数之间的所有跟随的同胞元素
$(selector).prev();
$(selector).prevAll()
$(selector).prevUntil()
$(selector).first(); //方法返回被选元素的首个元素。
$(selector).last(); //方法返回被选元素的最后一个元素。
$(selector).eq(); //方法返回被选元素中带有指定索引号的元素。
$(selector).filter(selector); //方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
$(selector).not(selector); //方法返回不匹配标准的所有元素。
$(selector).load(URL,data,callback);
function callback(responseTxt,statusTxt,xhr){
//responseTxt - 包含调用成功时的结果内容
//statusTXT - 包含调用的状态
//xhr - 包含 XMLHttpRequest 对象
}
$.get(URL,callback);
$.get(URL,function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
$.post(URL,data,callback);
$.post(
"/api.php",
{
name:"name",
id:"id"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});