jquery 学习 总结

　　OM = Document Object Model（文档对象模型）

一.基础

1.    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

　　<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

　　<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

　　<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">

　　可以减少加载时间，提高加载速度

2.    选择器

　　$(this)　　$("p:first")　　:even　　:odd

3.    事件

　　鼠标事件　　键盘事件　　表单事件　　文档窗口事件

4.    hide() 和 show() 方法来隐藏和显示 HTML 元素  toggle()切换 hide() 和 show() 方法

5.    淡入淡出效果  fadeIn() fadeOut()  fadeToggle()  fadeTo()

6.    滑动 slideDown()  slideUp() slideToggle()

7.    动画  animate({left:'100px'},"slow") 方法用于创建自定义动画  使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right    

　　也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=   $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' });

　　 stop() 方法用于停止动画或效果，在它们完成之前

　　stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

8.    $(document).ready(function(){

　　　　$("button").click(function(){

　　　　　　$("p").hide("slow",function(){
　　　　　　　　alert("段落现在被隐藏了");
　　　　　　});
　　　　});
　　}); //回调函数
　　$(document).ready(function(){
　　　　$("button").click(function(){
　　　　　　$("p").hide(1000);
　　　　　　　　alert("现在段落被隐藏了");
　　　　});
　　}); //非回调函数

二.操作 HTML 元素和属性

• text() - 设置或返回所选元素的文本内容 
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

　　attr() 方法用于获取属性值。 $("#runoob").attr("href")

　　$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; }); }); ///回调函数 return 

　　append/prepend 是在选择元素内部嵌入。

　　after/before 是在元素外面追加。

　　删除元素和内容 

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

　　remove(".italic"); 对被删元素进行过滤

三.遍历 DOM 树

• parent()
• parents()
• parentsUntil（）方法返回介于两个给定元素之间的所有祖先元素
• children() 方法返回被选元素的所有直接子元素。
• find（）方法返回被选元素的后代元素，一路向下直到最后一个后代。
• siblings() 方法返回被选元素的所有同胞元素。
• next() 方法返回被选元素的下一个同胞元素。
• nextAll() 方法返回被选元素的所有跟随的同胞元素。
• nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
• prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元
• first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素
• filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

• not() 方法返回不匹配标准的所有元素。

  提示：not() 方法与 filter() 相反。

四.Ajax

$(document).ready(function(){
　　$("button").click(function(){
　　　　$("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
　　　　　　if(statusTxt=="success")
　　　　　　　　alert("外部内容加载成功!");
　　　　　　if(statusTxt=="error")
　　　　　　　　alert("Error: "+xhr.status+": "+xhr.statusText);
　　　　});
　　});
});