jQuery的下載直接可以把官網上的源代碼復制粘貼下來，然后保存到本地即可。
jQuery選擇器
通過一個例子來說明jQuery的幾種選擇器的用法：
一個簡單的沒有任何意義的html代碼如下：
測試代碼1
#根據標簽的id選擇標簽：
$("#i1")
#根據標簽的class選擇標簽：
$(".c1")
#根據標簽的標簽名字選擇標簽：
$("span")
#選中所有的標簽
$("*")
#組合選擇器，選擇所有的id為i1的標簽和class為c1的標簽
$("#i1, .c1") #中間用逗號分隔。
層級標簽---根據標簽間關系來選擇，示例如下：
#選擇父標簽下的子標簽
$("body div") #選擇body標簽的子標簽中的所有的div標簽，包含子標簽的子標簽
#選擇父標簽下的子標簽(只父子關系這一層)
$("body >div") #不會再選擇，子標簽div下的子標簽。
#選擇當前標簽的下一個標簽
$("input + div") #選擇input標簽的下一個標簽,"+"后面的div可以省略
#選擇當前標簽的兄弟標簽：
$("input ~ ") #當前標簽的兄弟標簽，也就是同級標簽。
一些位置參數的基本標簽：
#匹配選中的第一個標簽
$("div:first") #匹配選中div標簽的第一個標簽
#匹配選中的最后一個標簽
$("div:last")
#根據索引匹配標簽
$("div:eq(0)") #選中的div標簽中，索引為0的標簽。
$("div:gt(1)") #選中的div標簽中，索引大於1的標簽。
$("div:lt(1)") #選中的div標簽中，索引小於1的標簽。
根據標簽的屬性選擇：
#選中html中具有name屬性的標簽
$('[name]')
#根據屬性的確定值來選擇標簽
$("[name='wxz']")
#選擇指定標簽中含有某屬性的標簽
$("div[name='wxz']")
#匹配所有的單行文本框
$(":text")
以上是jQuery選擇器的一部分，更詳細的jQuery介紹請參照，jQuery技術文檔
一個jQuery選擇器的小例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> </head> <body> <form> <input type="button" value="全選" onclick="checkAll()"> <input type="button" value="反選" onclick="reverse()"> <input type="button" value="取消" onclick="cancelAll()"> </form> <hr> <table border="1"> <thead> <tr> <th>選項</th> <th>IP</th> <th>PORT</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>10.0.102.204</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>10.0.102.204</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>10.0.102.204</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>10.0.102.204</td> <td>80</td> </tr> </tbody> </table> <script> function checkAll() { $(":checkbox").prop("checked", true); // prop()函數有兩個參數，如果只有一個參數則獲取這個屬性的值，如果有如上兩個參數，則個這個屬性設定值。 } function cancelAll() { $(":checkbox").prop("checked", false); } function reverse() { $(":checkbox").each(function () { /* 第一種寫法 if(this.checked){ this.checked = false; }else { this.checked = true; } */ /* 第二種寫法 if($(this).prop("checked")){ $(this).prop("checked", false); }else { $(this).prop("checked", true); } */ // 三元運算符 var v = $(this).prop("checked")?false:true; $(this).prop("checked",v); }) } </script> </body> </html>
篩選器
選擇器與篩選器的區別：選擇器就是定位html文檔中要選擇的某一類標簽，篩選器就是在定位的標簽中選擇需要的標簽。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <a>111</a> <a>222</a> <a id='i1'>333</a> <a>444</a> <a >555</a> <a id='i2'>666</a> </div> <script src="jquery.js"></script> </body> </html>
篩選器的一些用法如下：
#當前標簽的下一個標簽：
$("#i1").next()
#當前標簽下面所有的標簽：
$("#i1").nextAll()
#當前標簽下一個標簽直到“#i2”之間的標簽
$("#i1").nextUntil("#i2")
#與當前標簽下一個標簽相對的是前一個標簽：
$("#i1").prev()
$("#i1").prevAll()
$("#i1").prevUntil()
#當前標簽的孩子標簽：
$(".c1").children()
#當前標簽的父標簽
$('#i1').parent() #僅查詢一層，即當前標簽的父標簽
$('#i1').parents() #依次向上查詢，可以查詢到html標簽。
$('#i1').parentsUntil() #
#查詢當前標簽子標簽中的標簽：
$("div").find("span")
#查詢當前標簽的兄弟標簽
$("#i1").siblings()
$("#i1").siblings().first()
$("#i1").siblings().last()
樣式操作
樣式操作主要有以下幾個：
addClass #添加樣式
removeClass #移除樣式
toggleClass #樣式若存在就刪除，若不存在就添加
上面這三個操作是多種css樣式構成的css組合的集合操作，若單獨只想添加某標簽的背景顏色，可以使用如下：
$('t1').css('樣式名稱', '樣式值')；
文本操作
$(..).text() # 獲取文本內容 $(..).text(“<a>1</a>”) # 設置文本內容，內容中的標簽不會解析 $(..).html() #獲取文本內容 $(..).html("<a>1</a>") #設置內容，但是可以解析 $(..).val() # 獲取input，text，等標簽中輸入的內容。 $(..).val(..) #設置對應標簽的內容。
屬性操作
# 專門用於做自定義屬性 $(..).attr('n') #標簽上的屬性，獲取屬性 $(..).attr('n','v') #給屬性賦值 $(..).removeAttr('n') <input type='checkbox' id='i1' /> # 專門用於chekbox,radio選中類的操作 $(..).prop('checked') $(..).prop('checked', true) index 獲取索引位置
文檔操作
append：追加到當前標簽內容之后
prepend：插入到當前標簽內容之前
before：插入到當前標簽之前
after：追加到當前標簽之后
remove：刪除
empty：只是把標簽的內容清空
clone：克隆
一些操作的小例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> <style> .header{ background-color: #4c796a; color: red; } .content{ min-height: 50px; } .hide{ display: none; } </style> </head> <body style="height: 400px;width: 200px;border: 1px solid #dddddd"> <div class="item"> <div class="header">標題一</div> <div id="i1" class="content">內容一</div> </div> <div class="item"> <div class="header">標題二</div> <div class="content hide">內容二</div> </div> <div class="item"> <div class="header">標題三</div> <div class="content hide">內容三</div> </div> <script> $(".header").click(function () { $(this).next().removeClass("hide"); $(this).parent().siblings().find(".content").addClass("hide"); }) </script> </body> </html>
根據不同的導航按鈕，顯示不同內容的實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu{ height: 38px; background-color: #dddddd; line-height: 38px; } .menu-item{ float: left; border-right: 1px; padding: 0 5px; } .active{ background-color: brown; } .content{ height: 100px; border: 1px dashed wheat; } .hide{ display: none; } </style> </head> <body> <div style="width: 700px; margin: 0 auto;"> <div class="menu"> <div class="menu-item active" a="1">菜單一</div> <div class="menu-item" a="2">菜單二</div> <div class="menu-item" a="3">菜單三</div> </div> <div class="content"> <div b="1">內容一</div> <div class="hide" b="2">內容二</div> <div class="hide" b="3">內容三</div> </div> </div> <script src="jquery.js"></script> <script> $(".menu-item").click(function () { $(this).addClass("active").siblings().removeClass("active"); var current_index = $(this).attr("a"); // console.log(current_index); // 根據菜單的索引來對應內容的索引 $(".content").children("[b='"+ current_index +"']").removeClass("hide").siblings().addClass("hide"); }) </script> </body> </html>
點贊操作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ padding: 50px; border: 1px solid #dddddd; } .item{ position: relative; width: 30px; } </style> </head> <body> <div class="container"> <div class="item"> <span>贊</span> </div> </div> <div class="container"> <div class="item"> <span>贊</span> </div> </div> <div class="container"> <div class="item"> <span>贊</span> </div> </div> <div class="container"> <div class="item"> <span>贊</span> </div> </div> <div> <span>1</span> <span>2</span> </div> <script src="jquery.js"></script> <script> $(".item").click(function () { AddItem(this); }); function AddItem(self) { var fontSize = 15; var top = 0; var right = 0; var opacity = 1; var tag = document.createElement("span"); $(tag).text("+1"); $(tag).css("color", "green"); $(tag).css("position", "absolute"); $(tag).css("fontSize", fontSize + "px"); $(tag).css("top", top + 'px'); $(tag).css("right", right + "px" ); $(tag).css("opacity", opacity); $(self).append(tag); var obj = setInterval(function () { fontSize = fontSize + 10; top = top - 10; right = right - 10; opacity = opacity - 0.1; $(tag).css('fontSize',fontSize + "px"); $(tag).css('right',right + "px"); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity); if(opacity < 0){ clearInterval(obj); $(tag).remove(); } }, 40); } </script> </body> </html>
動態添加刪除操作：(待完善)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .zhc{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: black; opacity: 0.6; } .modal{ position: fixed; top: 50%; left: 50%; width: 400px; height: 400px; background-color: #dddddd; margin-top: -200px; margin-left: -200px; } </style> </head> <body> <table border="1"> <thead> <tr> <th>主機名</th> <th>端口</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>172.16.100.129</td> <td>80</td> <td class="a1"> <a class="edit">編輯</a> | <a class="delete">刪除</a> </td> </tr> <tr> <td>172.16.100.130</td> <td>81</td> <td class="a1"> <a class="edit">編輯</a> | <a class="delete">刪除</a> </td> </tr> <tr> <td>172.16.100.131</td> <td>82</td> <td class="a1"> <a class="edit">編輯</a> | <a class="delete">刪除</a> </td> </tr> </tbody> </table> <input type="button" onclick="addItem();" value="添加"> <!--遮罩層--> <div class="zhc hide"></div> <div class="modal hide"> <span style="color: #b73434">主機名</span> <input type="text" name="host"> <br> <span style="color: #b73434">端口號</span> <input type="text" name="port"> <br> <input type="button" value="添加"> <input type="button" value="取消"> </div> <script src="jquery.js"></script> <script> function addItem(){ $(".modal,.zhc").removeClass("hide"); } $(".edit").click(function () { $(".modal,.zhc").removeClass("hide"); var tds = $(this).parent().prevAll(); var port = tds[0].innerText; var host = tds[1].innerText; console.log(host, port); $(".modal input[name='host']").val(host); $(".modal input[name='port']").val(port); }); $(".modal input[value='添加']").click(function () { var host = $(".modal input[name='host']").val(); var port = $(".modal input[name='port']").val(); console.log(host, port); var tr = document.createElement("tr"); var td1 = document.createElement("td"); td1.innerHTML = host; var td2 = document.createElement("td"); td2.innerHTML = port; var td3 = document.createElement("td"); $(td3).addClass("a1"); td3.innerHTML = '<a class=\"edit\">編輯</a> | <a class=\"delete\">刪除</a>'; $(tr).append(td1); $(tr).append(td2); $(tr).append(td3); $("table").append(tr); $(".modal,.zhc").addClass("hide"); $(".modal input[type='text']").val(""); }); $(".modal input[value='取消']").click(function () { $(".modal,.zhc").addClass("hide"); $(".modal input[type='text']").val(""); }) </script> </body> </html>