JQuery 学习简单整理_H5之家 - 中国HTML5教程资源分享第一站

JQuery 学习简单整理，有需要的朋友可以参考下。

JQuery 笔记
一、Jq简介
文档就绪函数
$(document).ready(function(){});

元素选择器
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:first")每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")id="intro" 的 <div> 元素中的所有 class="head" 的元素

事件函数
$(selector).click(function(){});//点击后触发
$(selector).hide();//隐藏

jq名称冲突的解决办法：
var jq = jQuery.noConflict();//使用”jq“代替”$“

遵循的规则：
1.把所有 jQuery 代码置于事件处理函数中
2.把所有事件处理函数置于文档就绪事件处理器中
3.把 jQuery 代码置于单独的 .js 文件中
4.如果存在名称冲突，则重命名 jQuery 库

常用JQ事件
$(document).ready(function)将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件

二、Jq效果

隐藏和显示：speed表示隐藏或显示的速度，callback：隐藏或显示完成后执行的函数名

$(selector).hide(speed，callback);//隐藏
$(selector).show(speed，callback);//显示

$(selector).toggle(speed,callback);//用作切换隐藏与显示，显示被隐藏的元素，隐藏已显示的元素

淡入淡出
fadeIn(speed，callback) //淡入
fadeOut(speed，callback)//淡出
fadeToggle(speed，callback)//切换
fadeTo(speed,opacity,callback)//opacity:介于0到1之间透明度（必须的参数）speed：必须的参数：slow，fast，或者毫秒

滑动
slideDown()//向下滑动
slideUp()//向上滑动
slideToggle()//切换

动画
语法：$(selector).animate({params},speed,callback);

params:定义形成动画的css属性，必需参数，其他的为可选参数

停止动画或效果
stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，
即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。

callback函数
语法：
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
})
Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）

三、JQuery HTML

获得内容的三个方法：
text();设置或返回所选元素的文本内容
val();设置或返回表单字段的值
html();设置或返回所选元素的内容（包括HTML标记）
*回调函数
回调函数由两个参数：
被选元素列表中当前元素的下标，以及原始（旧的）值。
然后以函数新值返回您希望使用的字符串。
获取属性
attr("href");//获取所选元素的href属性
设置属性

$(selector).attr("href","");
$(selector).attr({
"":"",
"":""
}
);

回调函数：
$(selector).attr("href", function(i,origValue){
return origValue + "/jquery";
});

添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

删除元素
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

$("p").remove(".italic");//删除class 为italic的p元素

操作css
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

css();//设置或返回css属性的值
$("p").css({"background-color":"yellow","font-size":"200%"});//设置多个属性值
$("p").css("background-color");//返回属性值

设置或返回尺寸
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。
设置宽高
$("#div1").width(500).height(500);

四、遍历

向上遍历 DOM 树
parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
$("span").parents("ul");//返回所有span元素的祖先，且必须为ul元素

parentsUntil() //方法返回介于两个给定元素之间的所有祖先元素
$("span").parentsUntil("div");//返回介于 <span> 与 <div> 元素之间的所有祖先元素

遍历后代
children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
$("div").children("p.1");//返回class名为”1“的下一级元素

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
$("div").find("*");//返回所有后代

遍历同胞
siblings() 方法返回被选元素的所有同胞元素
next() 方法返回被选元素的下一个同胞元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：
它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）

过滤
first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素。与filter()相反

五、AJAX

load方法
$(selector).load(URL,data,callback);//从服务器加载
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

$.get(URL,callback);
$.post(URL,data,callback);