jQ事件及操作大汇总

事件

bind()       为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

focus()       当元素获得焦点时，发生 focus 事件。

blur( )       当元素失去焦点时发生 blur 事件。

<script type="text/javascript">
$(document).ready(function(){
  $("input").focus(function(){
    $("input").css("background-color","#FFFFCC");
  });
  $("input").blur(function(){
    $("input").css("background-color","#D6D6FF");
  });
});
</script>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>

change()   该事件仅适用于文本域（text field），以及 textarea 和 select 元素。

<script type="text/javascript">
$(document).ready(function(){
  $(".field").change(function(){
    $(this).css("background-color","#FFFFCC");
  });
});
</script>
<p>在某个域被使用或改变时，它会改变颜色。</p>
Enter your name: <input class="field" type="text" />
<p>Car:
<select class="field" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</p>

click()       当点击元素时，会发生 click 事件。
dblclick()         当双击元素时，会发生 dblclick 事件。

delegate()    为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序

<script type="text/javascript">
$(document).ready(function(){
  $("div").delegate("button","click",function(){
    $("p").slideToggle();
  });
});
</script>
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>

$(document).ready(function(){
  $("div").delegate("button","click",function(){
    $("p").slideToggle();
  });
});
</script>
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>
die()           移除所有通过 live() 函数添加的事件处理程序。
error()          触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented()            返回 event 对象上是否调用了 event.preventDefault()。
event.pageX         相对于文档左边缘的鼠标位置。

event.pageY         相对于文档上边缘的鼠标位置。

// 显示鼠标指针在文档中的当前坐标位置
$(document).bind("mousemove", function(event){
$("#message").text('当前鼠标坐标:(' + event.pageX + ', ' + event.pageY + ')');
});

<div id="message"></div>

event.preventDefault()        阻止事件的默认动作。
event.result         包含由被指定事件触发的事件处理器返回的最后一个值。
event.target         触发该事件的 DOM 元素。
event.timeStamp        该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type          描述事件的类型。

event.which        指示按了哪个键或按钮。

<script type="text/javascript">
$(document).ready(function(){
  $("input").keydown(function(event){ 
    $("div").html("Key: " + event.which);
  });
});
</script>
请随意键入一些字符：<input type="text" />
<p>当您在上面的框中键入文本时，下面的 div 会显示键位序号。</p>
<div>
</div>

keydown()           触发、或将函数绑定到指定元素的 key down 事件
keypress()          触发、或将函数绑定到指定元素的 key press 事件
keyup()           触发、或将函数绑定到指定元素的 key up 事件
live()           为当前或未来的匹配元素添加一个或多个事件处理器
load()        触发、或将函数绑定到指定元素的 load 事件

mousedown()       当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

mouseleave()       当鼠标指针离开元素时，会发生 mouseleave 事件。

mouseout()       当鼠标指针从元素上移开时，发生 mouseout 事件。

mouseenter()       当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseover()        当鼠标指针位于元素上方时，会发生 mouseover 事件。 该事件大多数时候会与  mouseout  事件一起使用。

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。

只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

mousemove()       当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
mouseup()         当在元素上放松鼠标按钮时，会发生 mouseup 事件。 与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件
one()          向匹配元素添加事件处理器。当使用 one() 方法时，每个元素只能运行一次事件处理器函数。
ready()          文档就绪事件（当 HTML 文档就绪可用时）

resize()        当调整浏览器窗口的大小时，发生 resize 事件

<script type="text/javascript">
x=0;
$(document).ready(function(){
$(window).resize(function() {
  $("span").text(x+=1);
});

});
</script>
<p>窗口大小被调整过 <span>0</span> 次。</p>
<p>请试着重新调整浏览器窗口的大小。</p>

scroll()          当用户滚动指定的元素时，会发生 scroll 事件。

<script type="text/javascript">
$(function(){

   $(window).scroll(function(){

    if($(window).scrollTop()>500){

     $('html,body').animate({scrollTop:0},300);

     return false;

   }

  });

});
</script>

select()          触发、或将函数绑定到指定元素的 select 事件
submit()             触发、或将函数绑定到指定元素的 submit 事件

toggle()        如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").toggle();
  });
});
</script>
<p>This is a paragraph.</p>
<button class="btn1">Toggle</button>

trigger()        trigger() 方法触发被选元素的指定事件类型。

<script type="text/javascript">
$(document).ready(function(){
  $("input").select(function(){
    $("input").after("文本被选中！");
  });
  $("button").click(function(){
    $("input").trigger("select");
  });
});
</script>
<input type="text" name="FirstName" value="Hello World" />
<br />
<button>激活 input 域的 select 事件</button>

triggerHandler()      

triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。 第一个被匹配元素的指定事件

triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件（比如表单提交）的默认行为，而且只影响第一个匹配元素。

<script type="text/javascript">
$(document).ready(function(){
  $("input").select(function(){
    $("input").after("发生 Input select 事件！");
  });
  $("button").click(function(){
    $("input").triggerHandler("select");
  });
});
</script>
<input type="text" name="FirstName" value="Hello World" />
<br />
<button>激活 input 域的 select 事件</button>
<p>请注意，与 trigger() 方法不同，triggerHandler() 方法不会引起所发生事件的默认行为（文本不会被选中）。</p>

与 trigger() 方法相比的不同之处

• 它不会引起事件（比如表单提交）的默认行为
• .trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。
• 由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。
• 该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。

unbind()          从匹配元素移除一个被添加的事件处理器
undelegate()       undelegate() 方法删除由 delegate() 方法添加的一个或多个事件处理程序。

unload()          触发、或将函数绑定到指定元素的 unload 事件

操作

文档

addClass()        向匹配的元素添加指定的类名。
attr()           设置或返回匹配元素的属性和值。

clone()       clone() 方法生成被选元素的副本，包含子节点、文本和属性。

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append($("p").clone());
  });
});
</script>
<p>This is a paragraph.</p>
<button>复制每个 p 元素，然后追加到 body 元素</button>
detach()      移除被选元素，包括所有文本和子节点。这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素, 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。

<script type="text/javascript">

$(document).ready(function(){
  var x;
  $("#btn1").click(function(){
    x=$("p").detach();
  });
  $("#btn2").click(function(){
    $("body").prepend(x);
  });
});
</script>
<p>这是一个段落。</p>
<button id="btn1">删除 p 元素</button>
<button id="btn2">恢复 p 元素</button>
hasClass()    hasClass() 方法检查被选元素是否包含指定的 class。
html()       返回或设置被选元素的内容 (inner HTML)。

after()        在被选元素后插入指定的内容。

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").after("<p>Hello world!</p>");
  });
});
</script>
<p>This is a paragraph.</p>
<button>在每个 p 元素后插入内容</button>
before()      在被选元素前插入指定的内容。

<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").before("<p>Hello world!</p>");
  });
});
</script>
<p>This is a paragraph.</p>
<button class="btn1">在每个段落前面插入新的段落</button>
insertAfter()      在被选元素之后插入 HTML 标记或已有的元素。

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("<span>你好！</span>").insertAfter("p");
  });
});
</script>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个 p 元素之后插入 span 元素</button>
insertBefore()     在被选元素之前插入 HTML 标记或已有的元素。

append()       在被选元素的结尾（仍然在内部）插入指定内容。

$("button").click(function(){
  $("p").append(" <b>Hello world!</b>");
});

appendTo()  在被选元素的结尾（仍然在内部）插入指定内容。

$("button").click(function(){
  $("<b>Hello World!</b>").appendTo("p");
});

prepend()             在被选元素的开头（仍位于内部）插入指定内容。

$(".btn1").click(function(){
  $("p").prepend("<b>Hello world!</b>");
});

prependTo()        在被选元素的开头（仍位于内部）插入指定内容。

$(".btn1").click(function(){
  $("<b>Hello World!</b>").prependTo("p");
});

empty()        从被选元素移除所有内容，包括所有文本和子节点。

remove()           移除被选元素，包括所有文本和子节点。该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。
<p>Hello</p>
World
<p>welcome</p> 
执行$("p").empty()其结果是
<p></p>
World
<p></p> 

执行$("p").remove()其结果是
World
removeAttr()        从所有匹配的元素中移除指定的属性。
removeClass()        从所有匹配的元素中删除全部或者指定的类。
replaceAll()           用指定的 HTML 内容或元素替换被选元素。

replaceWith()        用指定的 HTML 内容或元素替换被选元素。

replaceWith() 与 replaceAll() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceAll() 无法使用函数进行替换。

<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").replaceWith("<b>Hello world!</b>");
  });
});
</script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">用粗体文本替换所有段落</button>
text()        设置或返回匹配元素的内容。
toggleClass()      对设置或移除被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
unwrap()        删除被选元素的父元素。

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").unwrap();
  });
});
</script>
<style type="text/css">
div{background-color:yellow;}
article{background-color:pink;}
</style>
<div>
<p>这是 div 元素中的段落。</p>
</div>
<article>
<p>这是 article 元素中的段落。</p>
</article>
<button>删除每个 p 元素的父元素</button>
val()          返回或设置被选元素的值。
wrap()      把每个被选元素放置在指定的 HTML 内容或元素中

<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").wrap("<div></div>");
  });
});
</script>
<style type="text/css">
div{background-color:yellow;}
</style>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">用 div 包裹每个段落</button>
wrapAll()        在指定的 HTML 内容或元素中放置所有被选的元素。
wrapinner()      使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)。
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").wrapInner("<b></b>");
  });
});
</script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">在每个 p 元素的内容上包围 b 元素：</button>

属性

addClass()            向匹配的元素添加指定的类名。
attr()            设置或返回匹配元素的属性和值。
hasClass()           检查匹配的元素是否拥有指定的类。
html()        设置或返回匹配的元素集合中的 HTML 内容。
removeAttr()        从所有匹配的元素中移除指定的属性。
removeClass()        从所有匹配的元素中删除全部或者指定的类。
toggleClass()        从匹配的元素中添加或删除一个类。
val()           设置或返回匹配元素的值。


css

css()            设置或返回匹配元素的样式属性。
height()          设置或返回匹配元素的高度。
offset()         返回或设置匹配元素相对于文档的偏移（位置）。

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    x=$("p").offset();
    $("#span1").text(x.left);
    $("#span2").text(x.top);
  });
});
</script>
<p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>
<button>获得 offset</button>
offsetParent()       获得被定位的最近祖先元素。
position()           返回匹配元素相对于父元素的位置（偏移）。

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    x=$("p").position();
    alert("Left position: " + x.left + " Top position: " + x.top);
  });
});
</script>
<p>This is a paragraph.</p>
<button>获得 p 元素的位置坐标</button>
scrollLeft()         返回或设置匹配元素的滚动条的水平位置。
scrollTop()         返回或设置匹配元素的滚动条的垂直位置。 scroll top offset 指的是滚动条相对于其顶部的偏移
width()        返回或设置匹配元素的宽度。

效果

animate()          对被选元素应用“自定义”的动画
delay()         对队列中的下一项的执行设置延迟。
dequeue()       为匹配元素执行序列中的下一个函数。

  <style>
    div {margin:3px; width:50px; position:absolute;height:50px; left:10px; top:30px;background-color:yellow; }
    div.red { background-color:red; }  
  </style>
<button>开始</button>
<div></div>
<script>
$("button").click(function () {
  $("div").animate({left:'+=200px'}, 2000);
  $("div").animate({top:'0px'}, 600);
  $("div").queue(function () {
    $(this).toggleClass("red");
    $(this).dequeue();
  });
  $("div").animate({left:'10px', top:'30px'}, 700);
});
</script>

queue()         

.queue(queueName)

参数	描述
queueName	可选。字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

<style>
  div { margin:3px; width:40px; height:40px;
  position:absolute; left:0px; top:60px; 
  background:green; display:none; }
  div.newcolor { background:blue; }
  p { color:red; }  
</style>
<p>队列长度是：<span></span></p>
<div></div>
<script>
var div = $("div");
function runIt() {
  div.show("slow");
  div.animate({left:'+=200'},2000);
  div.slideToggle(1000);
  div.slideToggle("fast");
  div.animate({left:'-=200'},1500);
  div.hide("slow");
  div.show(1200);
  div.slideUp("normal", runIt);
}
function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );      
  setTimeout(showIt, 100);
}
runIt();
showIt();
</script>

clearQueue()      方法从序列中删除仍未运行的所有项目。
fadeIn()         逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()          逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()         把被选元素逐渐改变至给定的不透明度
hide()         隐藏被选的元素
show()         显示被选的元素
slideDown()     通过使用滑动效果，显示隐藏的被选元素。
slideToggle()     通过使用滑动效果（高度变化）来切换元素的可见状态。
slideUp()        使用滑动效果，隐藏被选元素，如果元素已显示出来的话。
stop()        停止当前正在运行的动画。
toggle()        切换元素的可见状态。如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。