jQuery学习笔记

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）“查询”和“查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

$(document).ready(function(){

--- jQuery functions go here ----

});
防止文档在完全加载（就绪）之前运行 jQuery 代码。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

$(document).ready(function)将函数绑定到文档的就绪事件（当文档完成加载时）

$(selector).click(function) 触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件

$(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件

jQuery 效果

隐藏和显示

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

淡入淡出

jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});
淡入方式
淡出，切换的方式相同

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$(selector).fadeTo(speed,opacity,callback);
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

滑动

$(selector).slideDown(speed,callback); //滑动向下
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

动画

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({'100px',opacity:'0.8'},"slow");
});
队列功能

停止动画

$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

 

jQuery - 获得内容和属性

三个简单实用的用于 DOM 操作的 jQuery 方法：

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

• attr() - 获取属性

• $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
  

  $("#btn1").click(function(){
    alert("Value: " + $("#test").val());
  });

  $("button").click(function(){
    alert($("#w3s").attr("href"));
  });

设置内容和属性

　　

jQuery attr() 用于设置/改变属性值。

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
可以改变标签值

 添加元素

添加新的 HTML 内容

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

删除元素

删除元素/内容
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
$("#div1").remove();
$("#div1").empty();

获取并设置 CSS 类

jQuery 拥有若干进行 CSS 操作的方法

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

  css("propertyname");
  更改css样式 

尺寸

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

$("#div1").width() 返回元素宽度

 $("#div1").height() 返回元素高度

jQuery 遍历

 祖先

向上遍历 DOM 树
parent()  //直接父
parents()  //所有祖先（或者内置参数，规定返回祖先类型）
parentsUntil()  

$(document).ready(function(){
  $("span").parentsUntil("div");
}); //返回“span”与“div”之间的类型

后代

向下遍历 DOM 树

• children() //仅仅到儿子
• find() //可以到最后一个

都能够像parentsUntil()一样设置参数

同胞

在 DOM 树中水平遍历

• siblings() //所有同胞元素，内置参数的话，可以规定返回的类型
• next()  //下一个同胞元素
• nextAll()  //后面所有元素
• nextUntil()  //指定范围的同胞元素
• prev()  //前一个同胞元素
• prevAll() //前面所有元素
• prevUntil() //指定范围前面所有元素

过滤

first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

filter(“.ooo”)  //所有类为ooo的元素

not(".ooo")  //所有类不为ooo的元素

$(document).ready(function(){
  $("div p").first();
});  //第一个<div> <p> 标签

$(document).ready(function(){
  $("div p").last();
});  //最后一个<div><p>标签

$(document).ready(function(){
  $("p").eq(1);
});  //索引标签，从0开始

$(document).ready(function(){
  $("p").filter(".intro");
});  //返回所有class="intro"的元素

$(document).ready(function(){
  $("p").not(".intro");
});  //返回所有class不为"intro"的元素

jQuery - AJAX 简介

用户按继续加载时，才会从服务器调用剩余内容。

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

$(document).ready(function(){
  $("#btn1").click(function(){
    $('#test').load('/example/jquery/demo_test.txt');
  })
}) //获得外部内容

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

• GET - 从指定的资源请求数据
• POST - 向指定的资源提交要处理的数据

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "
Status: " + status);
  });
});  

 详见：http://www.w3school.com.cn/jquery/index.asp