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>jQuery使用总结
原文地址：https://www.cnblogs.com/wxzhe/p/9519910.html