Front-end JavaScript JQuery

An overview of JQuery basis.

Table of Contents

  1. Intro
    1. What’s JQuery
    2. Add JQuery Library
    3. JQuery Example
    4. Available CDN
  2. Basic Syntax
  3. JQuery Selector
    1. Element
    2. Attribute
    3. CSS
    4. Other Selectors
  4. JQuery Events
    1. Individual Source File
    2. Conflicts
    3. Principles
  5. JQuery Hide & Show

Intro

What’s JQuery

  • JQuery 是一个 JavaScript 函数库
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js">
    </script>
    <script>
    $(document).ready(function() {
        $("p").click(function() {
            $(this).hide();
        });
    });
    </script>
</head>
<body>
    <p>If you click on me, I will disappear.
    </p>
</body>
</html>
  • JQuery 库包含以下特性 -
  1. HTML 元素选取
  2. HTML 元素操作
  3. CSS 操作
  4. HTML 事件函数
  5. JavaScript 特效和动画
  6. HTML DOM 遍历和修改
  7. AJAX
  8. Utilities

Add JQuery Library

1
2
3
4
<head>
  <script src="http://code.jquery.com/jquery-latest.js">
  </script>
</head>

JQuery Example

  • 下面的例子演示了 JQuery 的 hide() 函数，隐藏了 HTML 文档中所有的 <p> 元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js">
    </script>
    <script>
    $(document).ready(function() {
        $("button").click(function() {
            $("p").hide();
        });
    });
    </script>
</head>
<body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button">Click me
    </button>
</body>
</html>

Available CDN

  • JQuery.com
1
2
3
4
<head>
    <script src="http://code.jquery.com/jquery-latest.js">
    </script>
</head>
  • Google
1
2
3
4
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js">
    </script>
</head>
  • Microsoft
1
2
3
4
<head>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js">
    </script>
</head>

Basic Syntax

  • 通过 jQuery，您可以选取 (查询) query HTML 元素，并对它们执行操作 actions
1
2
3
4
5
$(document).ready(function() {
    ...
    $(selector).action();
    ...
});
  1. $ 定义 JQuery
  2. 选择符 selector 查询/查找 HTML 元素
  3. action() 对元素执行操作
1
2
3
4
$(this).hide(); //隐藏当前元素
$("p").hide(); //隐藏所有段落
$(".test").hide(); //隐藏所有class="test"的元素
$("#test").hide(); //隐藏所有id="test"的元素

JQuery Selector

Element

  • JQuery 使用 CSS 选择器选取 HTML 元素
1
2
3
$("p") //选取<p>元素
$("p.intro") //选取所有class="intro"的<p>元素
$("p#demo") //选取所有id="demo"的<p>元素

Attribute

  • JQuery 使用 XPath 表达式来选择带有给定属性的元素
1
2
3
4
$("[href]") //选取所有带有href属性的元素
$("[href='#']") //选取所有带有href属性并且值等于"#"的元素
$("[href!='#']") //选取所有带有href属性并且值不等于"#"的元素
$("[href$='.jpg']") //选取所有href值以".jpg"结尾的元素

CSS

  • JQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性
1
$("p").css("background-color","red");

Other Selectors

1
2
3
4
5
6
7
8
$(this) //当前HTML元素
$("p") //所有<p>元素
$("p.intro") //所有class="intro"的<p>元素
$(".intro") //所有class="intro"的元素
$("#intro") //id="intro"的元素
$("ul li:first") //每个<ul>的第一个<li>元素
$("[href$='.jpg']") //所有带有以".jpg"结尾的属性值的href属性
$("div#intro.head") //id="intro"的<div>元素中的所有class="head"的元素

JQuery Events

1
2
3
4
5
$(document).ready(function) //将函数绑定到文档的就绪事件
$(selector).click(function) //触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) //触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) //触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) //触发或将函数绑定到被选元素的鼠标悬停事件

Individual Source File

1
2
3
4
<head>
    <script src="jquery.js" />
    <script src="my_jquery_functions.js" />
</head>

Conflicts

  1. JQuery 使用 $ 符号作为 JQuery 的简介方式
  2. 某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号
  3. 使用名为 noConflict() 的方法来解决该问题
  4. var jq=jQuery.noConflict() 帮助您使用自己的名称（比如 jq）来代替 $ 符号

Principles

  1. 把所有 JQuery 代码置于事件处理函数中
  2. 把所有事件处理函数置于文档就绪事件处理器中
  3. 把 JQuery 代码置于单独的 .js 文件中
  4. 如果存在名称冲突，则重命名 JQuery 库

JQuery Hide & Show

See here

$$\frac{\partial u}{\partial t}
= h^2 \left( \frac{\partial^2 u}{\partial x^2} +
\frac{\partial^2 u}{\partial y^2} +
\frac{\partial^2 u}{\partial z^2}\right)$$