我自己总结了一下知识，希望对大家有用，也方便自己查阅（最主要是可以Ctrl+F，在这里查询），API大部分是从“锋利的jQuery”里总结出来的（非常感谢这本书的作者），小部分来源于工作和网络！！
这篇博客的API分类：
1. 选择器
2. 节点操作
3. 触发事件
4. 事件对象event
5. 动画类型
6. 功能API
选择器
//基本选择器
$("#one").css("background","#bbffaa"); //获取id为one的节点
$(".two").css("background","#bbffaa"); //获取class为two的节点
$("input").css("background","#bbffaa"); //获取页面所有的input元素
$("*").css("background","#bbffaa"); //获取页面所有元素
$("div, input, #aone").css("background","#bbffaa"); //获取所有页面div和input和id为aone的元素
//层次选择器
$("div input").css("background","#bbffaa"); //获取div下所有的input节点(包括嵌套下的所有input节点), 这就称为"后代节点"
$("#two > input").css("background","#bbffaa"); //获取div下所有的input节点(不包括嵌套下的所有input节点,只获取下一层), 这就称为"子节点"
$("#two + div").css("background","#bbffaa"); //获取id为one的节点的下一个同辈节点
$("#two").next("div").css("background","#bbffaa"); //等价于$("#two + div") 获取id为one的节点的下一个同辈节点
$("#one ~ div").css("background","#bbffaa"); //获取id为one的节点,后面的所有div节点
$("#one").nextAll("div").css("background","#bbffaa"); //等价于$("#two ~ div")
$("#one").prev("div").css("background","#bbffaa"); //获取id为one的节点的上一个同辈节点
$("#two").siblings("div").css("background","#bbffaa"); //获取所有同辈的div节点(不包含自身), 不论前后
$("#one").children(); //获取id为one的节点下所有子节点(只获取子节点,不包含后代节点(就是子节点的子节点...))
$("#one").parent(); //获取id为one的节点的父节点
$("#one").parents(); //获取id为one的节点的祖先节点(会一直获取父节点直到<html>)
$("#one").find("span").css("background","#bbffaa"); //获取id为one的节点下,所有的子节点和后代节点(就是子节点的子节点...)
$("input").filter(":even").css("background","#bbffaa");//获取所有偶数列的input元素(filter和not相反)
$("input").each( function() { $(this)... }); //获取input的节点,循环每一个input节点,$(this)代表每次循环的节点元素
//基本过滤选择器
$("#one:first").css("background","#bbffaa"); //选择id为"one"的节点中的第一个节点(就是自身)
$("#one :first").css("background","#bbffaa"); //选择id为"one"的节点下,第一个子节点, 注意空格
$("#one:last").css("background","#bbffaa"); //选择id为"one"的节点中的最后1个节点(就是自身)
$("#one :last").css("background","#bbffaa"); //选择id为"one"的节点下,最后1个子节点, 注意空格
$("input:not(#one)").css("background","#bbffaa"); //获取所有input节点,除了id为one的节点
$("#one input:not(:last)").css("background","#bbffaa"); //获取id为one的节点下所有input节点,除了最后一个节点
$("input:even").css("background","#bbffaa"); //获取所有input节点的偶数节点,索引从0开始
$("input:odd").css("background","#bbffaa"); //获取所有input节点的奇数节点,索引从0开始
$("input:eq(1)").css("background","#bbffaa"); //获取索引为1的input节点
$("input:gt(1)").css("background","#bbffaa"); //获取索引大于1的input节点
$("input:lt(1)").css("background","#bbffaa"); //获取索引小于1的input节点
$("input:animated").css("background","#bbffaa"); //获取正在执行动画的div
$(":focus").css("background","#bbffaa"); //获取当前获得焦点的节点
//内容过滤器
$("span:contains('hello')").css("background","#bbffaa"); //获取文本中含有hello的span节点
$("div:empty").css("background","#bbffaa"); //获取所有空的div(不含子节点,不含文本)
$("div:has('span')").css("background","#bbffaa"); //获取所有含有span子节点的div
$("div:parent").css("background","#bbffaa"); //获取所有含有子节点的div
//隐藏过滤器 和 显示过滤器
$("input:hidden").show(); //获取所有隐藏的input节点(书上说可以获取<input type="hidden">,但我测试了一下,好像拿不了,只能拿样式 displan:none)
$("input:visible").hide(); //获取所有可见(显示)的input节点
//属性过滤器
$("div[title]").css("background","#bbffaa"); //获取所有拥有title属性的div节点
$("div[title='hello']").css("background","#bbffaa"); //获取title为hello的div节点
$("div[title^=hello]").css("background","#bbffaa"); //获取title为hello开头的div节点
$("div[title$=hello]").css("background","#bbffaa"); //获取title为hello结尾的div节点
$("div[title*=hello]").css("background","#bbffaa"); //获取title含有hello的div节点
$("div[title|=hello]").css("background","#bbffaa"); //获取title为"hello"开头的div节点 或 title为"hello-"开头的div节点
$("div[title~=uk]").css("background","#bbffaa"); //获取title为" hello "的div节点(注意空格,获取title带有空格的节点)
$("div[id][title='hello']").css("background","#bbffaa"); //可多属性选择, 获取含有id并且title为hello的div节点(可拥有多个属性)
//子节点过滤器
$("div :nth-child(2)").css("background","#bbffaa"); //获取div节点下,第二个子节点(注意索引从1开始)(不同于eq,nth-child会获取所有div下的第二个节点,返回一个数组)
$("div :first-child").css("background","#bbffaa"); //获取div节点下,第一个子节点(获取所有div下的第一个子节点)
$("div :last-child").css("background","#bbffaa"); //获取div节点下,最后一个子节点(获取所有div下的最后一个子节点)
$("div :only-child").css("background","#bbffaa"); //获取只有一个子节点的div节点
//表单过滤器
$("#form1 :enabled").css("background","#bbffaa"); //获取id为form1的表单下的所有节点
$("#form1 :disabled").css("background","#bbffaa"); //获取id为form1的表单下的所有禁用节点
$("input :checked").css("background","#bbffaa"); //获取选中的input节点(单选框和复选框)
$("select option:selected").text(); //获取所有select节点的选中选项的节点(下拉框)
$(":input").css("background","#bbffaa"); //获取表单所有节点(包含<input><select><textarea><button>)
$(":text").css("background","#bbffaa"); //获取所有文本框
$(":password").css("background","#bbffaa"); //获取所有密码
$(":checkbox").css("background","#bbffaa"); //获取复选框
$(":radio").css("background","#bbffaa"); //获取单选框
$(":submit").css("background","#bbffaa"); //获取所有提交按钮
$(":image").css("background","#bbffaa"); //获取图片按钮
$(":reset").css("background","#bbffaa"); //获取重置按钮
$(":button").css("background","#bbffaa"); //获取所有按钮(只获取type="button"和<button>)
$(":file").css("background","#bbffaa"); //获取上传的文本域按钮
// 高/宽 和 定位
$("#one").width(); //获取id为one的节点的节点宽度
$("#one").width(300); //获取id为one的节点,设置节点的宽度300 (也可以为像素或其它: width("10px"))
$("#one").height(); //获取id为one的节点的节点高度(注意该方法与CSS的设置无关,是获取实际节点到页面间的高度)
$("#one").height(300); //获取id为one的节点,设置节点的高度300 (也可以为像素或其它: height("10px"))
$("#one").offset().left;//获取id为one的节点,该节点距离浏览器左边的偏移量是多少
$("#one").offset().top; //获取id为one的节点,该节点距离页面浏览器上边的偏移量是多少
$("#one3id").position().left; //获取id为one的节点,获取相对于它左边最近的具有相对位置(position:relative或position:absolute)的父级节点的距离(就是父节点要设置样式position:relative)
$("#one3id").position().top; //获取id为one的节点,获取相对于它上边最近的具有相对位置(position:relative或position:absolute)的父级节点的距离(就是父节点要设置样式position:relative)
//滚动条
$("#one").scrollTop(); //获取id为one的节点, 该节点的垂直滚动条高度(如果是滚动到顶端就是返回0)
$("#one").scrollTop(300); //获取id为one的节点, 设置该节点的垂直滚动条高度(如果是滚动到顶端就是返回0)
$("#one").scrollLeft(); //获取id为one的节点, 该节点的横向滚动条左侧位置(如果是滚动到最左边就是返回0)
$("#one").scrollLeft(300);//获取id为one的节点, 设置该节点的横向滚动条左侧位置(如果是滚动到最左边就是返回0)节点操作
//新增节点
var $li1 = $("<li title='title'>five</li>"); //创建节点
var $p1 = $("<p title='title'>paragraph</p>"); //创建节点
$("#one").append($li1); //获取id为one的节点,在该节点内追加节点(作为子节点)
$("#one").prepend($li1); //获取id为one的节点,在该节点内添加前置节点(作为该节点的第一个子节点)
$("#one").after($p1); //获取id为one的节点,在该节点后面追加节点(作为同辈节点)
$("#one").before($p1); //获取id为one的节点,在该节点前面追加节点(作为同辈节点)
//在指定位置插入节点
var $li1 = $("<li title='title'>special element</li>"); //创建节点
var two_li = $("ol li:eq(1)"); //获取ol列表下第二个li节点(eq索引从0开始)
two_li.after($li1); //在ol列表下第二个li后面,追加新节点
//删除节点
$("ol li:eq(1)").remove(); //获取ol列表下第二个li节点(eq索引从0开始),并删除改节点
$("ol li:eq(1)").detach(); /* 并不是真正删除节点,节点还保留在Jquery对象中(可以理解为把节点离线了),只要使用append就可以重新加载该节点,该节点的绑定事件,附加样式也会保留下来 */
$("ol li:eq(1)").empty(); //清空该节点的内
//复制节点
$("#one").clone().appendTo("body"); //获取id为one的节点,并复制(不包含绑定事件,只复制节点),在body里面追加
$("#one").clone(true).appendTo("body");//获取id为one的节点,并复制(包含绑定事件),在body里面追加
//替换节点
$("#one").replaceWith("<strong>不是吧</strong>"); //获取id为one的节点,并替换成strong节点
$("<strong>不是吧</strong>").replaceAll("#one"); //获取id为one的节点,并替换成strong节点(同上)
//属性操作(只存在true/false的属性应该用prop,如:checked,disabled,readonly...)(attr在获取这些属性时可能会出现bug)
$("#one").attr("title"); //获取id为one的节点的title属性
$("#one").attr("title","twotitle") //获取id为one的节点, 修改title属性的值
$("#one").removeAttr("title") //获取id为one的节点, 删除title属性的值
$("#one").prop("checked"); //获取id为one的节点的checked属性
//CSS样式操作
$("#one").css("background"); //获取id为one的节点, 该节点的css属性为"background"
$("#one").css("background","#bbffaa"); //获取id为one的节点, 设置该节点的css属性"background"
$("#one").css({"background":"#bbffaa", "fontSize":"30px"}); //获取id为one的节点, 设置该节点的多个css属性
$("#one").addClass("myclass"); //获取id为one的节点, 追加myclass样式(不会移除本来的样式)
$("#one").removeClass(); //获取id为one的节点, 移除所有样式(可同时删除多个)
$("#one").removeClass("myclass1 myclass2"); //获取id为one的节点, 移除myclass1,myclass2样式(可同时删除多个)
$("#one").hasClass("myclass"); //获取id为one的节点, 判断该节点中是否含有myclass样式
//获取html,文本,值
$("#one").html(); //获取id为one的节点下的html内容(只是作为文本信息)
$("#one").text(); //获取id为one的节点下的文本内容(只是作为文本信息)
$("#one").text("hello"); //获取id为one的节点, 为该节点设置的文本信息("hello")(如果原本有文本信息,则覆盖)
$("#text1").val(); //获取id为text1的节点的value
$("#text1").val("请输入"); //获取id为text1的节点, 并设置该节点的value值触发事件
//当页面结构加载完后执行该方法(等于 $(function(){...}) 或者 $().ready(function(){...})),里面的方法只是绑定还没执行(或理解为声明)
$(document).ready(function(){...}); //初始化页面
//模拟点击事件
$("#btn1").trigger("click"); //模拟点击事件。获取id为btn1的按钮,触发点击
$("#btn1").click(); //模拟点击事件的简写。等于trigger("click")
//触发事件
$("#one").bind("click", function(){...}); // 获取id为one的节点,并绑定点击事件。 bind(点击事件名, 执行该事件的方法)
$("#one").unbind("click"); // 获取id为one的节点,并移除点击事件。 unbind(点击事件名)
$("#one").one("click", function(){...}); // 获取id为one的节点,并绑定点击事件, 但该方法只会执行一次点击事件
$("#one").click(function(){...}); // 获取id为one的节点, 单击该节点时,执行方法
$("#one").dblclick(function(){...}); // 获取id为one的节点, 双击该节点时,执行方法
$("#one").show(); //获取id为one的节点, 并显示
$("#one").hide(); //获取id为one的节点, 并隐藏
$("#one").is(":focus"); //获取id为one的节点, 判断是否获取焦点(返回true或false)
$("#one").mouseover(function(){...}); // 获取id为one的节点, 当鼠标经过时,执行function方法(当鼠标在该节点内移动,也会多次执行)
$("#one").mouseout(function(){...}); // 获取id为one的节点, 当鼠标离开时,执行function方法(当鼠标在该节点内移动,也会多次执行)
$("#one").mouseenter(function(){...}); // 获取id为one的节点, 当鼠标进入时,执行function方法(该方法只会在每次进入该节点时执行一次)
$("#one").mouseleave(function(){...}); // 获取id为one的节点, 当鼠标离开时,执行function方法(该方法只会在每次离开该节点时执行一次)
$("#one").hover(function(){...}, function(){...}); // 获取id为one的节点, 当鼠标进入该节点时执行第一个function, 当鼠标离开该节点时执行第二个function
$("#one").toggle(function(){...}, function(){...}); // 获取id为one的节点, 如果节点原本是隐藏的则显示它,并执行第一个function。 如果节点是显示的则隐藏它,并执行第二个function。
$("#one").change(function(){...}); // 获取id为one的节点, 当该节点文本被改变时,执行方法
$("#one").keydown(function(){...}); // 获取id为one的节点, 当键盘按下时触发方法
$("#one").keyup(function(){...}); // 获取id为one的节点, 当键盘弹上来时触发方法
$("#text1").focus(function(){...}); //获取id为text1的节点, 当该节点获得焦点时
$("#text1").blur(function(){...}); //获取id为text1的节点, 当该节点失去焦点时事件对象event
event.stopPropagation(); //阻止冒泡事件(比如内层节点带有click事件,包裹它的div也有click事件,点击的时候就会两个click事件都触发了)
event.preventDefault(); //阻止默认事件(比如超链接的跳转,from表单的提交行为)(也可以直接在该方法中return false)
event.type; //获取点击事件的类型(就是 click,mouseout....)
event.target; //获取事件对象(如:event.target.value或event.target.title)(注意该对象不能使用JQuery的方法,只能使用JavaScript的)
event.pageX; //获取鼠标光标在页面中 x坐标
event.pageY; //获取鼠标光标在页面中 y坐标
event.which; //获取鼠标的左,中,右键,返回1,2,3 (1:鼠标左键, 2:鼠标中键, 3:鼠标右键)
event.target; //返回的是当前的元素节点
event.currentTarget; //始终返回的是绑定事件的元素动画类型
//动画类型
$("#one").fadeOut(3000,function(...)); //获取id为one的节点,效果:内容慢慢消失(淡出)(参数:3000毫秒,回调函数)
$("#one").fadeIn(3000,function(...)); //获取id为one的节点,效果:内容慢慢显现(淡入)(参数:3000毫秒,回调函数)
$("#one").slideUp(3000,function(...)); //获取id为one的节点,效果:内容由下到上隐藏(参数:3000毫秒,回调函数)
$("#one").slideDown(3000,function(...)); //获取id为one的节点,效果:内容由上到下隐藏(与slideUp相反)(参数:3000毫秒,回调函数)
$("#one").slideToggle(3000,function()); //slideToggle()方法可以在slideDown()与slideUp()方法之间进行切换。如果显示就隐藏,如果隐藏就显示
//自定义动画(注意:页面节点必须设置position:relative属性)
$("#flashId").animate({"left":"500px"}, 3000); //获取id为flashId的节点,效果:宽度在3000(毫秒)内,向右移动500px。
$("#flashId").animate({"left":"+=500px"}, 3000); //获取id为flashId的节点,效果:宽度在3000(毫秒)内,当前位置累加500px(默认+=累加)
$("#flashId").animate({"left":"-=500px"}, 3000); //获取id为flashId的节点,效果:宽度在3000(毫秒)内,当前位置累减500px(默认-=累减)
//多个效果同时执行
$("#flashId").animate({"left":"500px","width":"500px"}, 3000);
//执行完一个效果,再执行下一个效果
$("#flashId").animate({"left":"500px"}, 3000)
.animate({"width":"500px"}, 3000)
.fadeOut();
//回调函数,动画执行完后执行的方法
$("#flashId").animate({"left":"500px"}, 3000, function(){
$("#flashId").css("background","#bbffaa");
});
$("#flashId").stop(); //立即停止当前正在执行的动画,然后会马上执行下一个动画
$("#flashId").stop(true); //stop方法的第一个参数为true,清空动画序列(停止所有的动画)
$("#flashId").stop(true,true); //stop方法的第二个参数为true,停止当前动画并直接达到当前动画的末尾状态
if($("#flashId").is(":animated")){....} //判断动画是否正在执行
$("#flashId").delay(3000).animate({"left":"500px"}, 3000); //延迟3000毫秒执行动画功能API
//全选/全不选 复选框
$("#ck").click(function(){
$("input[name='cb']").prop("checked", $("#ck").prop("checked"));
});
//反选
$("input[name='cb']").each( function () {
$(this).prop("checked", !$(this).prop("checked"));
});
//表单中添加小红星(代表必填项),如:提示文本框必须填写
class="required"
//函数自己调用自己(用于递归)
function(参数1,参数2...){
arguments.callee(参数1,参数2...)
}以上的JQuery API并不完善，以后再工作中或碰到新的API再添加到这里！！
扫一扫
765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
