详解jQuery的核心函数和事件处理

目录

• 事件
• 页面载入 
• 事件委派 
• 事件切换 
• 事件 
• 总结

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

// 给p标签添加点击事件监听
$("p").on("click", function(){
	alert( $(this).text() );
});
// 第二种写法 等效于上面
$("p").click(function(){
	alert( $(this).text() );
});

// 移除p标签绑定的所有事件监听
$("p").off()
// 移除p标签绑定的click事件监听
$("p").off( "click")

// 移除p标签绑定的所有事件监听
$("p").bind("click", function(){
  alert( $(this).text() );
});
// 同时绑定多个事件类型
$('#foo').bind('mouseenter mouseleave', function() {
  alert();
});

// 把所有段落的所有事件取消绑定
$("p").unbind()
// 将段落的click事件取消绑定
$("p").unbind( "click" )

// 当所有段落被第一次点击的时候，显示所有其文本
$("p").one("click", function(){
  alert( $(this).text() );
});

  <div style="background-color:red">
      <p>这是一个段落。</p>
      <button>请点击这里</button>
  </div>

// 当点击button时，隐藏或显示 p 元素
  $("div").delegate("button", "click", function () {
      $("p").slideToggle();
  });

// 从p元素删除由 delegate() 方法添加的所有事件处理器
$("p").undelegate();
// 从p元素删除由 delegate() 方法添加的所有click事件处理器
$("p").undelegate( "click" )

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

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

// 触发被选元素的 change 事件
$(selector).change();

// 触发页面内所有段落的点击事件
$("p").click();

// 给页面上每个段落的双击事件绑上 "Hello World!" 警告框
$("p").dblclick( function () { alert("Hello World!"); });

// 在服务器端记录JavaScript错误日志:
$(window).error(function(msg, url, line){
  jQuery.post("js_error_log.php", { msg: msg, url: url, line: line });
});

// 当页面加载后将 id 为 'login' 的元素设置焦点:
$(document).ready(function(){
  $("#login").focus();
});

<p><input type="text" /> <span>focusout fire</span></p>
<p><input type="password" /> <span>focusout fire</span></p>

// 获得焦点后会触发动画
$("p").focusin(function() {
	$(this).find("span").css('display','inline').fadeOut(1000);
});

// 获得焦点后会触发动画
$("p").focusout(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});

// 在页面内对键盘按键做出回应，可以使用如下代码
$(window).keydown(function(event){
  switch(event.keyCode) {
    // ...
    // 不同的按键可以做不同的事情
    // 不同的浏览器的keycode不同
    // 更多详细信息:     http://unixpapa.com/js/key.html
    // ...
  }
});

// 计算在输入域中的按键次数
$("input").keydown(function(){
  $("span").text(i+=1);
});

// 当按下按键时，改变文本域的颜色
$("input").keyup(function(){
  $("input").css("background-color","#D6D6FF");
});

// 当按下鼠标按钮时，隐藏或显示元素
$("button").mousedown(function(){
  $("p").slideToggle();
});

// 当鼠标指针进入（穿过）元素时，改变元素的背景色
$("p").mouseenter(function(){
  $("p").css("background-color","yellow");
});

// 当鼠标指针离开元素时，改变元素的背景色$("p").mouseleave(function(){  $("p").css("background-color","#E9E9E4");});// 当鼠标指针离开元素时，改变元素的背景色
$("p").mouseleave(function(){
  $("p").css("background-color","#E9E9E4");
});

// 获得鼠标指针在页面中的位置
$(document).mousemove(function(e){
  $("span").text(e.pageX + ", " + e.pageY);
});

// 当鼠标从元素上移开时，改变元素的背景色：
$("p").mouseout(function(){
  $("p").css("background-color","#E9E9E4");
});

// 当鼠标指针位于元素上方时时，改变元素的背景色
$("p").mouseover(function(){
  $("p").css("background-color","yellow");
});

// 当松开鼠标按钮时，隐藏或显示元素
$("button").mouseup(function(){
  $("p").slideToggle();
});

// 改变页面窗口的大小时弹出警告窗
$(window).resize(function(){
  alert("Stop it!");
});

// 当页面滚动条变化时，执行的函数:
$(window).scroll( function() { 
 	 alert("Stop it!");
});

// 触发所有input元素的select事件:
$("input").select();

// 提交本页的第一个表单:
$("form:first").submit();
// 阻止表单提交:
$("form").submit( function () {
  return false;
} );

// 页面卸载的时候弹出一个警告框:
$(window).unload( function () { alert("Bye now!"); } );