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>Titletitle>
<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>IPth>
<th>PORTth>
tr>
thead>
<tbody>
<tr>
<td><input type="checkbox">td>
<td>10.0.102.204td>
<td>80td>
tr>
<tr>
<td><input type="checkbox">td>
<td>10.0.102.204td>
<td>80td>
tr>
<tr>
<td><input type="checkbox">td>
<td>10.0.102.204td>
<td>80td>
tr>
<tr>
<td><input type="checkbox">td>
<td>10.0.102.204td>
<td>80td>
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>
实例-1
筛选器
选择器与筛选器的区别：选择器就是定位html文档中要选择的某一类标签，筛选器就是在定位的标签中选择需要的标签。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle>head><body> <div> <a>111a> <a>222a> <a id='i1'>333a> <a>444a> <a >555a> <a id='i2'>666a> 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>1a>”) # 设置文本内容，内容中的标签不会解析
$(..).html() #获取文本内容
$(..).html("<a>1a>") #设置内容，但是可以解析
$(..).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>Titletitle>
<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>Titletitle>
<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>
View Code
点赞操作：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Titletitle>
<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>1span>
<span>2span>
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>Titletitle>
<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.129td>
<td>80td>
<td class="a1">
<a class="edit">编辑a> | <a class="delete">删除a>
td>
tr>
<tr>
<td>172.16.100.130td>
<td>81td>
<td class="a1">
<a class="edit">编辑a> | <a class="delete">删除a>
td>
tr>
<tr>
<td>172.16.100.131td>
<td>82td>
<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 = '编辑 | 删除';
$(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>
View Code