jQuery 简易教程

ID: bastengao

微博: weibo.com/bastengao

教程源代码在GitHub

is a kind of JavaScript Library.

write less, do more

Using/如何使用

1 step:引用jQuery

Using/如何使用

2 step:调用

    <!-- 1 step -->
    <script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
    <!-- 2 step -->
    <script type="text/javascript" >
    jQuery(function () {
        //所有jQuery代码都写在这里
        alert("hello world");
    });
    </script>
</body>

小例子

jQuery(function () {
    jQuery("#myButton").click(function () {
        alert("你点我了");
    });
});

<button id="myButton">性感的按钮</button>

文档加载事件

也可以这样写

jQuery(document).ready(function () {
    //do something
});

我喜欢

jQuery(function () {
    //do something
});

$ === jQuery

$和jQuery是一样的

$(function () {

    $("#myButton").click(function () {
        alert("你又点我了");
    });

});

jQuery的哲学

选择

//document.getElementById("button");
$("#button");

调用

$("#button").click(function () {
    alert("你点我了");
});

深入jQuery,让我们一起摇滚吧

selector/选择器

与 css 选择器语法几乎一样

id选择器
#id
标签选择器
tagName
类选择器
.className

selector/选择器

id选择器

$("#my");

<p id="my">hello</p>

selector/选择器

标签选择器

$("p");

<p>hello</p>

selector/选择器

类选择器

$(".myClass");

<p class="myClass">hello</p>

selector/选择器

直接孩子

$("#my > a");

<div id="my">
    <a>i will be selected</a>
    <div>
        <a>but me</a>
    </div>
</div>

selector/选择器

后代（孩子的孩子的...）

$("#my a");

<div id="my">
    <a>you</a>
    <div>
        <a>and me</a>
    </div>
</div>

selector/选择器

其他选择器

太多了，靠大家自己通过API挖掘吧。

集合操作

$("button") 返回jQuery集合

$("button").each(function () {
    $(this).click(function () {
        alert($(this).text());
    });
});

<button>111</button>
<button>222</button>
<button>333</button>

神奇的集合操作

$("button") 返回jQuery集合

$("button").click(function () {
    alert($(this).text());
});

<button>111</button>
<button>222</button>
<button>333</button>

选择之后，我们该做什么了？

没错，该调用方法

属性

获取属性

var href = $("a").attr("href");

<a href="http://jquery.com">jQuery</a>

设置属性

$("img").attr("src", "big.png");

<img src="small.png">

<img src="big.png">

属性/class

addClass

$("#my").addClass("good");

<p id="my">hello</p>

result

<p id="my" class="good">hello</p>

属性/class

removeClass

$("#my").removeClass("good");

<p id="my" class="good bad">hello</p>

result

<p id="my" class="bad">hello</p>

属性/text

var text = $("p").text();

<p>i am text</p>

i am text

属性/value

$("input").val("初始值");
$("button").click(function () {
    alert($("input").val());
});

<input type="text">    <button>value</button>

文档处理

内部插入
外部插入
删除

文档处理

内部插入/append

$("p").append("<a>李四</a>");

<p>
    <a>张三</a>
</p>

result

<p>
    <a>张三</a>
    <a>李四</a>
</p>

文档处理

内部插入/prepend

$("p").prepend("<a>王二</a>");

<p>
    <a>张三</a>
</p>

result

<p>
    <a>王二</a>
    <a>张三</a>
</p>

文档处理

外部插入/after

$("p").after("<p>李四</p>");

<p>张三</p>

result

<p>张三</p><p>李四</p>

文档处理

外部插入/before

$("p").before("<p>王二</p>");

<p>张三</p>

result

<p>王二</p><p>张三</p>

文档处理

删除/empty

$("p").empty();

<p>我真的还想再活五百年</p>

result

<p></p>

文档处理

删除/remove

$("#you").remove();

<a id="you">you and</a><a>me</a>

result

<a>me</a>

Travasering/遍历

$("div").parent()
$("div").children()
$("div").siblings()
$("div").first()
$("div").last()
$("div").next()
$("div").pre()

父亲
儿子
兄弟
第一个
最后一个
下一个
前一个

事件

支持

鼠标事件
键盘事件
表单事件
浏览器事件

事件

click
dblclick
mousedown
mouseup
mousemove
mouseover
mouseout
mouseenter
mouseleave

blur
change
focus
focusin
focusout
select
submit

load
ready
unload

keydown
keypress
keyup

resize
scroll
error

绑定事件

click

$("#button").click( function () {
    alert("click me");
});

bind

$("#button").bind("click", function () {
    alert("click me (by bind )");
});

取消绑定

unbind

$("input").focusout(function () {
    alert("focus out");
});

$("button").click(function () {
    $("input").unbind("foucsout");
};

触发事件

$("p").click(function() {
    alert($(this).text());
});

click

$("p").click();

trigger

$("p").trigger("click");

喜欢加班的程序员不好程序员

一次性事件

one

$("#button").one("click", function () {
    alert("good bye");
});

现在和将来

bind 只管现在

$(".my-btn").bind("click", function () {
    alert("haha");
});

$("#add-btn").click(function () {
    var newBtn = "<button class='my-btn'>new button</button>";
    $("#buttons").append(newBtn);
});

<div id="buttons">
    <button id="add-btn">add button</button>
    <button class="my-btn">my button</button>
</div>

现在和将来

on 可以穿越未来

$("#buttons").on("click", ".my-btn", function () {
    alert("haha");
});

<div id="buttons">
    <button id="add-btn">add button</button>
    <button class="my-btn">my button</button>
</div>

取消 on 事件绑定

off

$("#buttons").off("click", ".my-btn", function () {
    alert("haha");
});

动画/效果

show / hide

$("button").click(function () {
    $("pre").toggle();
});

fadeIn / fadeOut

$("button").click(function () {
    $("pre").fadeToggle();
});

slideUp / slideDown

$("button").click(function () {
    $("pre").slideToggle();
});

动画/效果

animate

$("button.big").click(function () {
    $("p").animate({"font-size" : "300%"});
});

$("button.small").click(function () {
    $("p").animate({"font-size" : "100%"});
});

hello world

Ajax

ajax

$.ajax({
    url : "api/fetchUser",
    type : "POST",
    data : {userId : '5201314'},
    dataType : "json",
    success : function(user) {
        console.log("i am back");
    },
    error : function(){
        console.log("sorry, something is broken");
    }
});

Ajax

post

$.post("api/fetchUser", {userId : '5201314'}, function(user) {
    console.log("i am back");
});

Ajax

get

$.get("api/fetchUser", {userId : '5201314'}, function(user) {
    console.log("i am back");
});

链式调用/fluent interface

<div id="person">
    <a>bastengao<a/>
    <em>Basten Gao</em>
</div>

$("#person").css("color", "#ccc")
   .find("a")
        .addClass("highlighted")
   .end()
   .find("em")
        .css("color", "red")
   .end();

编码风格

jQuery对象用 "$xxx" 表示

var str = "hello";
var $button = $("#button");

this 并不是 jQuery 对象

$("#button").click(function(){
    // this is not jQuery object
    // $this is jQuery object
    var $this = $(this);
});