jQuery 是一个 JavaScript 库， 极大地简化了 JavaScript 编程。
借助于菜鸟教程做了一些方法记录，几乎都是项目中常用到的方法。
jQuery 选择器
$(“p”) 选取所有p元素;
$("*") 选取所有元素;
$(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 元素;
jQuery 事件
$(document).ready() DOM加载完成后执行函数；
1、 鼠标事件
$(“p”).click() 点击事件；
$(“p”).dblclick() 双击事件；
$(“p”).mouseenter() 当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。
$(“p”).mouseleave() 当鼠标指针离开元素时，会发生 mouseleave 事件。
$(“p”).mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
$(“p”).mouseup() 当在元素上松开鼠标按钮时，会发生 mouseup 事件。
$(“p”).hover(1,2) 当鼠标移动到元素上时，会触发指定的函数1;当鼠标移出这个元素时，会触发指定的函数2。
2、键盘事件：
$(“input”).keypress() 键盘键被按下。
$(“input”).keydown() 键盘键被按下时触发。
$(“input”).keyup() 键盘键被松开。
3、表单事件：
$(“form”).submit() 当提交表单时，会发生 submit 事件。
$(“input”).change() 当 input字段改变触发事件。
$(“input”).focus() 当 input字段获得焦点时触发事件。
$(“input”).blur() 当 input字段失去焦点时触发事件。
jQuery 效果- 隐藏和显示
$(“p”).hide(speed,callback) 隐藏.
$(“p”).show(speed,callback) 显示.
$(“p”).toggle(speed,callback) 来回切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素。
注：1、可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
2、 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
jQuery 效果 - 淡入淡出
$(“p”).fadeIn(speed,callback) 淡入
$(“p”).fadeOut(speed,callback) 淡出
$(“p”).fadeToggle(speed,callback) 淡出/淡入
$(“p”).fadeTo(speed,opacity,callback) 允许渐变为给定的不透明度（值介于 0 与 1 之间）。
注： 1、可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
2、 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
3、可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
jQuery 效果 - 滑动
$(“p”).slideDown(speed,callback) 向下滑动。
$(“p”).slideUp(speed,callback) 向上滑动。
$(“p”).slideToggle(speed,callback) 向下滑动/向上滑动。
注： 1、可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。***
2、可选的 callback 参数是滑动完成后所执行的函数名称。
jQuery 停止动画
$(“p”).stop(stopAll,goToEnd) 停止动画
注： 1、可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
2、可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
jQuery - 链
链接的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
例如： $(“p”).css(“color”,“red”).slideUp(2000).slideDown(2000); “p” 元素首先会变为红色，然后向上滑动，再然后向下滑动：
jQuery 获取内容和属性
$("#test").text() 设置或返回所选元素的文本内容
$("#test").html() 设置或返回所选元素的内容（包括 HTML 标记）
$("#test").val() 设置或返回表单字段的值
$("#test").attr() 获取属性值
注： attr 和 prop 的区别介绍：
1、对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。
2、对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。
jQuery 设置内容和属性
例如： $("#test1").text(“Hello world!”);
$("#test2").html("<b>world!</b>");
$("#test3").val(“Hello world!”);
$("#test4").attr(“href”,“http://www.runoob.com/jquery”);
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
例如：
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
$("#test2").html(function(i,origText){
return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
attr() 方法也允许您同时设置多个属性。
例如：
$("#test4").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
attr() 也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值
例如：
$("#test4").attr("href", function(i,origValue){
return origValue + "/jquery";
});
jQuery 添加元素
$(“p”).append(“追加文本”); 在被选元素的结尾插入内容
$(“p”).prepend(“在开头追加文本”); 在被选元素的开头插入内容
$(“p”).after(“在后面添加文本”); 在被选元素之后插入内容
$(“p”).before(“在前面添加文本”); 在被选元素之前插入内容
注： append/prepend和after/before有什么区别？
1、append/prepend 是在选择元素内部嵌入。
2、after/before 是在元素外面追加。
例如
<p>
<span class="s1">s1</span>
</p>
$("p").append('<span class="s2">s2</span>');
//<p>
//<span class="s1">s1</span>
//<span class="s2">s2</span>
//</p>//结果是这样的
$("p").after('<span class="s2">s2</span>');
//<p>
// <span class="s1">s1</span>
//</p>
//<span class="s2">s2</span>//结果是这样的
jQuery 删除元素
$(“p”).remove(); 删除被选元素（及其子元素）
$(“p”)…empty(); 从被选元素中删除子元素
$(“p”).after(“在后面添加文本”); 在被选元素之后插入内容
$(“p”).before(“在前面添加文本”); 在被选元素之前插入内容
注： remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
例如
$("button").click(function(){
$("p").remove(".italic");//删除class为italic的元素
});
jQuery 获取并设置 CSS 类
jQuery 拥有若干进行 CSS 操作的方法，常用的方法如下：
$(“h1,h2,p”).addClass(“blue”); 向被选元素添加一个或多个类
$(“h1,h2,p”).removeClass(“blue”); 从被选元素删除一个或多个类
$(“h1,h2,p”).toggleClass(“blue”); 对被选元素进行添加/删除类的切换操作
$(“p”).css(); 设置或返回被选元素的一个或多个样式属性。
jQuery 尺寸
$(“p”).width(); 设置或返回元素的宽度（不包括内边距、边框或外边距）。
$(“p”).height(); 设置或返回元素的高度（不包括内边距、边框或外边距）。
$(“p”).innerWidth(); 返回元素的宽度（包括内边距）。
$(“p”).innerHeight(); 返回元素的高度（包括内边距）。
$(“p”).outerWidth(); 返回元素的宽度（包括内边距和边框）。
$(“p”).outerHeight(); 返回元素的高度（包括内边距和边框）。
jQuery 遍历
$(“p”).parent(); 返回被选元素的直接父元素。
$(“p”).parents(); 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (html)。
$(“p”).parents(“ul”); 返回所有 p 元素的所有祖先，并且它是 ul 元素：
$(“p”).parentsUntil(“div”); 返回介于两个给定元素之间的所有祖先元素。
$(“p”).children(); 返回被选元素的所有直接子元素。
$(“div”).children(“p.1”); 返回类名为 “1” 的所有 p 元素，并且它们是 div 的直接子元素：
$(“p”).find(“span”); 返回被选元素的后代元素，一路向下直到最后一个后代.
$(“p”).siblings(); 返回被选元素的所有同胞元素。
**$(“h2”).siblings(“p”);**返回属于 h2 的同胞元素的所有 p元素：
$(“p”).next(); 返回 p 的下一个同胞元素：
$(“p”).nextAll(); 返回 p 的所有跟随的同胞元素：
$(“h2”).nextUntil(“h6”); 返回介于 h2 与 h6 元素之间的所有同胞元素
注：
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。
$(“div”).first(); 返回被选元素的首个元素。
$(“div”).last(); 返回被选元素的最后一个元素。
$(“p”).eq(); 返回被选元素中带有指定索引号的元素。
$(“p”).filter(".url"); 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
$(“p”).not(); 返回不匹配标准的所有元素。
jQuery AJAX 方法
$.ajax({
async:true,//布尔值，表示请求是否异步处理。默认是 true。
url:"向后台地址发送请求",//规定发送请求的 URL
type:'post',//请求的方式
data:{'name':'muzidigbig','age':'20'},//请求的数据,传给后台的数据
success:function (backdata) {//请求成功后返回的数据会封装在回调函数的第一个参数中
//通过backdata来获取所需要的数据
alert(backdata.name+backdata.age);
},
error:function () {//响应不成功时返回的函数
console.log('请求失败！')
},
dataType:'json'//设置返回的数据类型
})
至此,关于项目开发中常用到的jQuery方法事件就记录完了，最后就是有时间的话可以去研究一下jQuery源码，收获大大的！
915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
