$("div").addClass("special");

jQuery("div").addClass("special");

<div id="body">
  <h2>Some Header</h2>
  <div class="contents">
    <p>...</p>
    <p>...</p>
  </div>
</div>

• 對 DOM 進行操作，例如對文件節點的新增或修改
• 添加事件處理
• 做一些基本的視覺效果，例如隱藏、顯示、下拉顯示、淡出淡入等等
• 使用 AJAX 傳送表單內容或取得遠端文件

$("a[target]").append(" (Opens in New Window)");

<a href="http://jsgears.com">jsGears</a>
<a href="http://google.com" target="_blank">Google</a>
<a href="http://amazon.com" target="_blank">Amazon</a>

<a href="http://jsgears.com">jsGears</a>
<a href="http://google.com" target="_blank">Google (Opens in New Window)</a>
<a href="http://amazon.com" target="_blank">Amazon (Opens in New Window)</a>

$("#body").css({
  border: "1px solid green",
  height: "40px"
});

<div id="body">
  ...
</div>

<div id="body" style="border: 1px solid green; height: 40px">
  ...
</div>

$("form").submit(function() {
  if ($("input#username").val() == "")
    $("span.help").show();
});

<style type="text/css">
  .help {display: none}
</style>
<form>
  <label for="username">請輸入大名</label>
  <input type="text" id="username" name="username" />
  <span class="help">這個欄位必填喔</span>
</form>

$("a#open").click(function() {
  $("#menu").show();
  return false;
});

<style type="text/css">
  #menu {display: none}
</style>
<a id="open" href="#">控制面板</a>
<ul id="menu">
  <li><a href="#1">控制面板首頁</a></li>
  <li><a href="#2">編輯個人資料</a></li>
  <li><a href="#3">個人空間管理</a></li>
</ul>

$("#menu").slideDown("fast");

<style type="text/css">
  #menu {display: none}
</style>
<ul id="menu">
  <li><a href="#1">控制面板首頁</a></li>
  <li><a href="#2">編輯個人資料</a></li>
  <li><a href="#3">個人空間管理</a></li>
</ul>

$("div").animate({
    width: '300px',
    padding: '20px'
  }, 'slow');

<div style="width: 100px; border: solid 1px red;">
  Hello world!
</div>

$("div").hide(500, function(){
  // $(this) 是每一個各別的 <div>
  $(this).show(500);
});

<div style="width: 100px; border: solid 1px red;">
  Hello world!
</div>
<div style="width: 100px; border: solid 1px red;">
  jsGears.com!
</div>

$("#body").load("sample.html div > h1");

<div id="body"></div>

<div>
  <h1>Hello world!</h1>
  <h2>This is H2</h2>
  <h1>jsGears.com!</h1>
</div>

<div id="body">
  <h1>Hello world!</h1>
  <h1>jsGears.com!</h1>
</div>

$.getJSON("test.json", function(data){
  for (var idx in data)
    $("#menu").append("<li>" + data[idx] + "</li>");
});

<ul id="menu">
  <li>項目1</li>
</ul>

[
  "Hello world!", 
  "jsGears.com!"
]

<ul id="menu">
  <li>項目1</li>
  <li>Hello world!</li>
  <li>jsGears.com!</li>
</ul>

$("div").hide();
$("div").css("color", "blue");
$("div").slideDown();

$("div").hide().css("color", "blue").slideDown();

$("ul.open")                // [ ul, ul, ul ]
  .children("li")           // [ li, li, li ]
  .addClass("open")         // [ li, li, li]
  .end()                    // [ ul, ul, ul ]
  .find("a")                // [ a, a, a ]
  .click(function(){
    $(this).next().toggle();
    return false;
  })                        // [ a, a, a ]
  .end();                   // [ ul, ul, ul ]

• 找出文件內所有 class 為 open 的 <ul>
• 過濾出下一層的所有 <li>
• 對這些 <li> 新增一個 class
• 回前一次搜尋的結果，也就是所有的 <ul>
• 再找出底下所有的 <a>
• 對 <a> 新增事件處理
• 回前一次搜尋的結果

$(document).ready(function() {
  alert('您好，歡迎來到 jsGears.com ～');
});

window.onload = function() {
  alert('Hello world!');
};
window.onload = function() {
  alert('您好，歡迎來到 jsGears.com ～');
};

$(document).ready(function() {
  alert('Hello world!');
});
$(document).ready(function() {
  alert('您好，歡迎來到 jsGears.com ～');
});

$(function() {
  alert('您好，歡迎來到 jsGears.com ～');
});

jQuery(document).ready(function() {
  jQuery("div").addClass("special");
});

jQuery.noConflict();
jQuery(document).ready(function() {
  jQuery("div").addClass("special");
});

var $j = jQuery.noConflict();
$j(document).ready(function() {
  $j("div").addClass("special");
});