技术备忘 jQueryJavaScript前端

⚠️ 本文写于 2013 年，当时 jQuery 是前端开发的主流库。现代开发推荐使用原生 JavaScript 或框架。

最近在做公司网站的一些小功能，用到了 jQuery，边用边查文档，索性整理一份常用操作的备忘录，方便以后查阅。

什么是 jQuery

jQuery 是一个快速、简洁的 JavaScript 库，由 John Resig 在 2006 年创建。它封装了 JavaScript 常用的功能，提供了更简单的 API，主要优势：

  • 选择器 - 类似 CSS 选择器，操作 DOM 很方便
  • 链式调用 - 可以连续调用多个方法
  • 兼容性好 - 抹平了浏览器差异
  • 体积小 - 压缩后只有 30 多 KB

引入 jQuery

CDN 引入（推荐）

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

或者用百度的 CDN：

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

本地引入

去 jQuery 官网下载，目前最新版本是 1.10.2。

html
<script src="js/jquery.min.js"></script>
NOTE

jQuery 1.x 支持 IE6/7/8，jQuery 2.x 不支持老版本 IE，性能更好一些。根据项目需求选择。

基础语法

javascript
$(selector).action()
  • $ - jQuery 的简写，也可以写成 jQuery
  • selector - 选择器
  • action() - 要执行的操作

文档就绪事件

等页面加载完成后再执行代码：

javascript
$(document).ready(function(){
   // 代码
});


// 简写
$(function(){
   // 代码
});

选择器

jQuery 的选择器和 CSS 选择器基本一致。

选择器示例说明
元素选择器$("p")选择所有 <p> 元素
ID 选择器$("#test")选择 id=“test” 的元素
类选择器$(".test")选择 class=“test” 的元素
后代选择器$("div p")选择 <div> 内所有 <p>
子元素选择器$("div>p")选择 <div> 的直接子元素 <p>
属性选择器$("a[target='_blank']")选择 target=“_blank” 的链接
:first$("p:first")第一个 <p> 元素
:last$("p:last")最后一个 <p> 元素
:even$("tr:even")偶数行
:odd$("tr:odd")奇数行
javascript
// 示例
$("p").hide();              // 隐藏所有段落
$("#demo").text("Hello");   // 设置 id="demo" 的内容
$(".intro").hide();         // 隐藏所有 class="intro" 的元素
$("p:first").css("color", "red");  // 第一个段落文字变红

事件

常用事件

事件说明
click()点击
dblclick()双击
mouseenter()鼠标进入
mouseleave()鼠标离开
hover()鼠标悬停（进入+离开）
focus()获得焦点
blur()失去焦点
change()值改变
submit()表单提交
javascript
// 点击事件
$("p").click(function(){
  $(this).hide();
});


// 悬停事件
$("p").hover(
  function(){
    $(this).css("background-color", "yellow");
  },
  function(){
    $(this).css("background-color", "white");
  }
);


// 获得焦点
$("input").focus(function(){
  $(this).css("background-color", "#cccccc");
});

DOM 操作

获取内容

javascript
$("#test").text();      // 获取文本内容
$("#test").html();      // 获取 HTML 内容
$("#test").val();       // 获取表单值
$("#test").attr("href"); // 获取属性值

设置内容

javascript
$("#test").text("Hello World");
$("#test").html("<b>Hello World</b>");
$("#test").val("新值");
$("#test").attr("href", "http://www.baidu.com");

添加元素

javascript
$("p").append("追加文本");     // 在被选元素结尾插入
$("p").prepend("前置文本");    // 在被选元素开头插入
$("p").after("之后插入");      // 在被选元素之后插入
$("p").before("之前插入");     // 在被选元素之前插入

删除元素

javascript
$("#div1").remove();        // 删除元素及其子元素
$("#div1").empty();         // 清空元素内容
$("p").remove(".test");     // 删除 class="test" 的 <p> 元素

CSS 操作

添加/删除/切换 CSS 类

javascript
$("p").addClass("intro");       // 添加类
$("p").removeClass("intro");    // 删除类
$("p").toggleClass("intro");    // 切换类（有就删，没有就加）

CSS 样式

javascript
$("p").css("color");                    // 获取颜色
$("p").css("color", "red");             // 设置颜色
$("p").css({"color":"red","font-size":"20px"});  // 设置多个样式

尺寸

javascript
$("#div1").width();         // 宽度
$("#div1").height();        // 高度
$("#div1").innerWidth();    // 宽度（包含 padding）
$("#div1").innerHeight();   // 高度（包含 padding）
$("#div1").outerWidth();    // 宽度（包含 padding 和 border）
$("#div1").outerHeight();   // 高度（包含 padding 和 border）

动画效果

显示/隐藏

javascript
$("#div1").hide();              // 隐藏
$("#div1").show();              // 显示
$("#div1").toggle();            // 切换


// 带速度参数（毫秒或 slow、fast）
$("#div1").hide(1000);
$("#div1").show("slow");

淡入/淡出

javascript
$("#div1").fadeIn();            // 淡入
$("#div1").fadeOut();           // 淡出
$("#div1").fadeToggle();        // 切换
$("#div1").fadeTo("slow", 0.5); // 淡化到指定透明度

滑动

javascript
$("#div1").slideDown();         // 向下滑动
$("#div1").slideUp();           // 向上滑动
$("#div1").slideToggle();       // 切换

自定义动画

javascript
$("#div1").animate({
  left: '250px',
  opacity: '0.5',
  height: '150px',
  width: '150px'
}, 1000);

停止动画

javascript
$("#div1").stop();              // 停止当前动画

AJAX

load() 方法

javascript
$("#div1").load("demo.txt");                    // 加载文件内容
$("#div1").load("demo.html #p1");               // 加载指定元素

get() 方法

javascript
$.get("demo.php", function(data, status){
  alert("数据: " + data + "\n状态: " + status);
});

post() 方法

javascript
$.post("demo.php",
  {
    name: "张三",
    city: "北京"
  },
  function(data, status){
    alert("数据: " + data + "\n状态: " + status);
  }
);

ajax() 方法

javascript
$.ajax({
  type: "POST",
  url: "demo.php",
  data: {name: "张三", city: "北京"},
  success: function(msg){
    alert("保存成功: " + msg);
  },
  error: function(xhr, status, error){
    alert("出错了: " + error);
  }
});

实用技巧

判断元素是否存在

javascript
if ($("#test").length > 0) {
  // 元素存在
}

阻止默认行为

javascript
$("a").click(function(e){
  e.preventDefault();  // 阻止链接跳转
});

延迟执行

javascript
$("button").click(function(){
  $("div").delay(1000).fadeIn();  // 延迟 1 秒后淡入
});

链式调用

javascript
$("#p1").css("color", "red")
  .slideUp(2000)
  .slideDown(2000);

遍历元素

javascript
$("li").each(function(){
  alert($(this).text());
});

常见问题

$ 符号冲突

如果页面同时使用了其他库（如 Prototype），可能会冲突：

javascript
// 解决方法 1：使用 jQuery 代替 $
jQuery(document).ready(function(){
  jQuery("p").click(function(){
    jQuery(this).hide();
  });
});


// 解决方法 2：自定义简写
var jq = jQuery.noConflict();
jq(document).ready(function(){
  jq("p").click(function(){
    jq(this).hide();
  });
});

选择器性能

javascript
// 不推荐：多次查询
$(".class").show();
$(".class").css("color", "red");


// 推荐：缓存选择器
var $elem = $(".class");
$elem.show();
$elem.css("color", "red");

总结

jQuery 极大地简化了 JavaScript 开发，特别是 DOM 操作和 AJAX 请求。上面列的都是最常用的操作，基本够日常开发用了。

更详细的文档可以查阅 jQuery 官方文档或者 jQuery 中文文档。

参考资料