jQuery(二)

位置

1. 窗口偏移 offset([coordinates])
概述：获取匹配元素在当前视口的相对偏移。

• top：距顶部像素值
• left：距左侧像素值

var offset = $('p:last').offset(); // 获取段落的偏移
$("p:last").offset({top: 10, left: 30}); // 设置段落的偏移

CSS

1. 样式 css(name | prop[, val | fn])
概述：访问匹配元素的样式属性。

• name：要访问的属性名称，或者多个 CSS 属性组成的数组
• properties：要设置为样式属性的名/值对
• name, value：属性名，属性值
• name, function(index, name) {}：属性名，函数返回要设置的属性值

$("p").css("color"); // 取得第一个段落的 color 样式属性的值。
$("p").css("color","red"); // 将所有段落字体设为红色。
// 将所有段落的字体颜色设为红色并且背景为蓝色。
$("p").css({"color": "#ff0011", "background": "blue"});

页面载入

1. 就绪 ready(fn)
概述：当 DOM 载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){
  // 在这里写你的代码...
});
// 使用 $(document).ready() 的简写
$(function($) {
  // 你可以在这里继续使用$作为别名...
});

1. 绑定事件 on(events, [selector], [data], fn)
概述：在选择元素上绑定一个或多个事件的事件处理函数。

• events：一个或多个用空格分隔的事件类型和可选的命名空间。
• selector：一个选择器字符串用于过滤器的触发事件的选择器元素的后代。
• data：当一个事件被触发时要传递 event.data 给事件处理函数。
• fn：该事件被触发时执行的函数。

// 点击段落，弹框显示段落内容
$("p").on("click", function(){
  alert($(this).text());
});
// 点击段落，向事件触发函数传递参数
function myHandler(event) {
  alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler);
// 表单点击提交按钮时，阻止表单执行默认提交
$("form").on("submit", function(event) {
  event.preventDefault();
});

2. 移除事件 off(events, [selector], [fn])
概述：在选择元素上移除一个或多个事件的事件处理函数。

• events：一个或多个空格分隔的事件类型和可选的命名空间
• selector：一个最初传递到.on()事件处理程序附加的选择器。
• fn：事件处理程序函数以前附加事件上

$("p").off(); // 移除段落的所有绑定事件

var foo = function () {// ...};
$("body").on("click", "p", foo);
// 移除段落添加的点击事件
$("body").off("click", "p", foo); 

事件切换

1. 悬浮 hover([over, ]out)
概述：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。

// 鼠标悬停的表格加上特定的类
$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

2. 切换 toggle([speed], [easing], [fn])
概述：用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

• speed：隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。
• easing：用来指定切换效果，默认是"swing"，可用参数"linear"。
• fn：在动画完成时执行的函数，每个元素执行一次。

$('td).toggle(); // 对表格切换显示/隐藏
$("p").toggle("slow"); // 段落缓慢的切换显示状态
// 段落迅速切换显示状态，之后弹出一个对话框。
$("p").toggle("fast",function(){
  alert("Animation Done.");
});

事件

1. 失焦 blur([[data,] fn])
概述：当元素失去焦点时触发 blur 事件。

$(":text").blur(); // 触发所有文本框的 blur 事件
// 触发所有文本框的 blur 事件，打印输入值
$(":text").blur(function() {
  console.log($(this).val());
});

2. 单击 click([[data,] fn])
概述：触发每一个匹配元素的 click 事件。

$('button').click(); // 触发页面内所有按钮的点击事件
// 点击按钮隐藏所有段落
$('#btn1').click(function () { 
  $('p').hide(); 
});

3. 双击 dblclick([[data,] fn])
概述：当双击元素时，会发生 dblclick 事件。

$("button").dblclick(function () { 
  alert("Hello World!");
});

4. 聚焦 focus([[data,] fn])
概述：当元素获得焦点时，触发 focus 事件。

// 当页面加载后将 id 为 'login' 的元素设置焦点
$(document).ready(function(){
  $("#login").focus();
});
// 获得焦点时，打印的文本框的值
$(":text").focus(function(){
  console.log($(this).val());
});

5. 滚动 scroll([[data,] fn])
概述：当用户滚动指定的元素时，会发生 scroll 事件。

// 当页面滚动条变化时，进行提示
$(window).scroll(function(event) {
  console.log('正在滚动页面');
  console.log(event);
});

6. 提交 submit([[data,] fn])
概述：当提交表单时，会发生 submit 事件。

$("form:first").submit(); // 提交表单
// 阻止表单提交
$("form").submit(function (event) {
  return false;
});

文档处理

1. 追加 append(content | fn)
概述：向每个匹配的元素内部追加内容。

$("p").append("<b>Hello</b>"); // 向所有段落中追加一些 HTML 标记。

2. 之后插入 after(content | fn)
概述：在每个匹配的元素之后插入内容。

$("p").after("<b>Hello</b>"); // 在所有段落之后插入一些 HTML 标记代码。

3. 之前插入 before(content | fn)
概述：在每个匹配的元素之前插入内容。

$("p").before("<b>Hello</b>"); // 在所有段落之前插入一些 HTML 标记代码。

4. 清空 empty()
概述：删除匹配的元素集合中所有的子节点。

$("p").empty(); // 把所有段落的子元素（包括文本节点）删除

效果

1. 显示 show([speed, [easing], [fn]])
概述：显示隐藏的匹配元素。

• speed：三种预定速度字符串(slow、normal、fast)或表示动画时长的毫秒数值(如：1000)
• easing：用来指定切换效果，默认是"swing"，可用参数"linear"
• fn：在动画完成时执行的函数，每个元素执行一次。

$("p").show(); // 显示所有段落
$("p").show("slow"); // 用缓慢的动画将隐藏的段落显示出来

2. 隐藏 hide([speed, [easing], [fn]])
概述：隐藏显示的元素。

• speed：三种预定速度字符串(slow、normal、fast)或表示动画时长的毫秒数值(如：1000)
• easing：用来指定切换效果，默认是"swing"，可用参数"linear"
• fn：在动画完成时执行的函数，每个元素执行一次。

$("p").hide(); // 隐藏所有段落
$("p").hide("slow"); // 缓慢隐藏所有段落

3. 切换 toggle([speed], [easing], [fn])
概述：用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

• speed：三种预定速度字符串(slow、normal、fast)或表示动画时长的毫秒数值(如：1000)
• easing：用来指定切换效果，默认是"swing"，可用参数"linear"
• fn：在动画完成时执行的函数，每个元素执行一次。

$('button').click(function() {
  $('p').toggle();
}); // 点击按钮切换显示所有段落 

4. 上滑隐藏 slideUp([speed], [easing], [fn])
概述：通过高度变化（向上减小）来动态地隐藏所有匹配的元素。

$(".btn2").click(function(){
  $("p").slideDown();
}); // 点击按钮，段落隐藏

5. 下滑显示 slideDown([speed], [easing], [fn])
概述：通过高度变化（向下增大）来动态地显示所有匹配的元素。

$(".btn2").click(function(){
  $("p").slideDown();
}); // 点击按钮，段落显示

6. 切换显示 slideToggle([speed], [easing], [fn])
概述：通过高度变化来切换所有匹配元素的可见性。

$(".btn2").click(function(){
  $("p").slideDown();
}); // 点击按钮，切换段落滑动显示隐藏

7. 动画 animate(params, [speed], [easing], [fn])
概述：用于创建自定义动画的函数。

• params：一组包含作为动画属性和终值的样式属性和及其值的集合。
• speed：三种预定速度字符串(slow、normal、fast)或表示动画时长的毫秒数值(如：1000)
• easing：用来指定切换效果，默认是"swing"，可用参数"linear"
• fn：在动画完成时执行的函数，每个元素执行一次。

// 让指定元素左右移动
$("#right").click(function(){
  $(".block").animate({left: '+50px'}, "slow");
});
$("#left").click(function(){
  $(".block").animate({left: '-50px'}, "slow");
});
// 点击按钮后 div 元素的几个不同属性一同变化
$("#go").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});

8. 延迟 delay(duration[, queueName])
概述：设置一个延时来推迟执行队列中之后的项目。

// 在.slideUp() 和 .fadeIn()之间延时 800 毫秒。
$('#foo').slideUp(300).delay(800).fadeIn(400);

ajax

1. 异步请求 $.ajax(url, [settings])
概述：通过 HTTP 请求加载远程数据。

• url：一个用来包含发送请求的 URL 字符串。
• settings：请求设置。

// 保存数据到服务器，成功时显示信息。
$.ajax({
   type: "POST",
   url: "some.do",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});
// 获取服务器数据
$.ajax({
  type: "GET",
  url: "some.do",
  dataType: "json",
  success: function(result) {
    console.log(result);
  }
});

2. $.get(url, [data], [fn], [type])
概述：通过远程 HTTP GET 请求载入信息。

• url：待载入页面的 URL 地址
• data：待发送 Key/value 参数。
• callback：载入成功时回调函数。
• type：返回内容格式，xml, html, script, json, text, _default。

$.get("test.php"); // 请求 test.php 网页，忽略返回值。
// 请求 test.php 网页，传送 2 个参数，忽略返回值。
$.get("test.php", {name: "John", time: "2pm"});
// 显示 test.php 返回值。
$.get("test.php", function(data){
  alert("Data Loaded: " + data);
});

3. 序列化 serialize()
概述：序列表单内容为字符串。

$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );

4. 序列化 serialzeArray()
概述：序列化表单元素，返回 JSON 数据结构数据。

// 取得表单内容并插入到网页中。
var fields = $("select, :radio").serializeArray();
jQuery.each( fields, function(i, field){
  $("#results").append(field.value + " ");
});