jQuery 简介及基本操作

简介

jQuery 是一个跨浏览器的免费开源 JavaScript 库，核心思想是：“write less do more”。它提供了一套易于使用的 API，这极大简化了客户端编程过程中的许多方面，包括：

HTML DOM 的遍历与操作
浏览器事件处理
Asynchronous JavaScript And XML编程
动画效果

获取 jQuery

从jQuery官网下载最新的 jQuery 文件，然后在<head>中添加引用，如下：

1	<script src="/本地相对路径/jquery.min.js"></script>

直接从百度静态资源库引入，同上在<head>元素内添加：

1	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

应用 jQuery 来编写 hello world

新建名为 helloWorld.html 的文档，内容如下：

<html>
  <head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
      function initpage(){
          $("#message").html("hello world, it is now: "+new Date().toLocaleString());
      }
  </script>
  </head>
  <body onload="initpage()">
      <span id="message"></span>
  </body>
</html>

以上代码中，onload 表示在页面 DOM 资源加载完后载入initpage函数，它的功能是将ID为message的<span>结点的内容改为hello world, it is now: " + new Date().toLocaleString()，即显示页面载入时的时间。

可知，jQuery 与 CSS 规则相似，都是选择元素，对其操作。语法规则为：

1	$(选择器).操作(操作参数);

在 helloWorld.html 文档中$("#message").html("hello world, it is now: "+new Date().toLocaleString());与下面原生 JavaScript 等价：

1 2	var msg = document.getElementById("message"); msg.firstChild.nodeValue = "hello world, it is now: " + new Date().toLocaleString();

很明显，jQuery 代码省略了定义变量和给变量赋值那部分，当页面内有多个这种操作时，优势更为明显。

以下教程是 jQuery 官方联合在线学习网站 code school 出的入门教程，共 14 篇约一小时，已翻译成中文jQuery教程。

jQuery 可以用来做什么？

前端包含 HTML, CSS, JavaScript 三个组成部分。其中 HTML 定义内容，CSS 给内容定义样式，而 JavaScript 用于与用户交互。jQuery 是 JavaScript 的一个库，它极大地简化了原生 JavaScript 的操作，使得可以快速高效地创建一个响应式页面。

它擅长于：

查找 html 元素
改变该元素
监听事件并快速响应
动画效果
AJAX交互

DOM

Document Object Model，由浏览器创建的树状结构，方便 JavaScript 查找 HTML 元素。如<head>和<body>都是<html>的直属子元素，<head>里包括<title>, <meta>, <description>等子元素。

用户输入网址后，浏览器与该服务器建立连接，服务器发送回用户所需页面内容。这时页面内容应当包括 HTML, CSS, JavaScript 等全部内容。浏览利用收到的资源生成 DOM 树，$(document).ready(function(){ ... });表示当 DOM 加载完后再执行function()里的 jQuery 语句。

符号介绍

选择元素

$("div.myClass") // 选择所有类名为myClass的 div 元素，如<div class="myClass">
$("input[name=turuir]") // 选择 name 为turuir的 input 元素，如<input name="uruir" type="button" />
$("a:first") // 一般写成$("a").first()，即选择第一个链接元素，同理$("a:last")指选择最后一个链接元素。而$("a:last").prev()则是倒数第二个，next()方法与prev()相反
$("tr:odd") // 选择表格里的偶数行，因为 index 从0开始
$("div:visible") // 选择所有可见的 div 元素
$("div:gt(2)") // 选择第三个及以后的 div 元素，gt 为 great
$("div").has("p") // 选择带有<p>的<div>
$("div").not(".myClass") // 选择所有不带myClass类的<div>
$(".myClass, #uId") // 选择类名是myClass且 id 名是uId的元素
$("li").find("#uId") // 在 li 元素里选择 id 名是uId的 li 元素
$("#uId").parent() // 选择 id 名是uId的父元素
$("#myLi").children("li") // 选择id名是myLi的直属子li元素。$("#myLi li");选择id名是myLi下的所有li元素

改变元素内容

var content = $("h1").text() // 把 h1 的文本赋值给 content 变量

var price = $("<p>$99.99</p>") // 把段落赋值给 price 变量

$("h1").text("lalala") // 直接改变 h1 的文本为”lalala”

添加元素

$(".vacation").append(price) // 把 price 元素加到.vacation的最后一个子元素的后面。比如：

<ul class="vacations">
    <li class="vacation"> <!-- $(".vacation")匹配到这个li元素 -->
        <p>fly to ShangHai</p> <!-- 匹配项的第一个子元素 -->
        <input type="button" value="show price" /> <!-- 匹配项的第二个子元素，也是最后一个子元素 -->
        <!-- append在这里 -->
    </li>
    <li class="vacation">
        <p>fly to BeiJing</p>
        <input type="button" value="show price" />
    </li>
</ul>

使用 jQuery 获取元素文本内容$('#x').text(); or $('#x').html();，对应 JavaScript 原生代码如下：

1 2	var p = document.getElementsByTagName('p')[0]; // 获取节点，注意其中的Element是复数 p.innerHTML; // 节点文本的内容，也可以用p.firstChild.nodeValue

js 实例

$(document).ready(function() {
    $("input").on("click", function() {
        var price = $("<p>$99.99</p>");
        $(this).closest(".vacation").append(price);
        $(this).remove(); // 删除button
    });
});

当点击了按钮时，显示价格并删除按钮。this指代button，即this所在作用域的所有者，closest(".vacation")指离this最近的含有类名为vacation的祖先元素。这样在上例中，this指代的button和price处于同一级。