一：jquery实现全选取消反选
3元运算：条件？真值：假值
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body> ???<input type="button" value="全选" onclick="selectAll()"> ????<input type="button" value="取消" onclick="cancelAll()"> ????<input type="button" value="dom反选" onclick="reverserAll()"> ???<input type="button" value="jQuery反选" onclick="reverserAll2()"> ?????<input type="button" value="jQuery三元运算实现反选" onclick="reverserAll3()"> ???<table id="tb" border="1"> ???????<tr> ???????????<td><input type="checkbox"></td> ???????????<td>1.1.1.1</td> ???????????<td>1191</td> ???????</tr> ???????<tr> ???????????<td><input type="checkbox"></td> ???????????<td>1.1.1.2</td> ???????????<td>1192</td> ???????</tr> ???????????????<tr> ???????????<td><input type="checkbox"></td> ???????????<td>1.1.1.3</td> ???????????<td>1193</td> ???????</tr> ???</table> ???<script src="jquery-1.12.3.js"></script> ???<script> ???????function selectAll(){ ???????????$("#tb :checkbox").prop("checked",true);//jquery默认自带循环 ???????} ???????function cancelAll(){ ???????????$("#tb :checkbox").prop("checked",false); ???????} ???????//反选两种方法dom实现和jquery实现 ???????//dom实现 ???????function reverserAll(){ ???????????$("#tb :checkbox").each(function(){//each遍历 ???????????????????if (this.checked) //this这里是dom对象 ???????????????????{ ???????????????????????this.checked=false; ???????????????????}else { ???????????????????????this.checked=true; ???????????????????} ???????????????} ???????????) ???????} ???????function reverserAll2(){ ???????????$("#tb :checkbox").each(function() {//each遍历 ???????????????if($(this).prop("checked"))//$(this)转jquery对象 ???????????????{ ???????????????????$(this).prop("checked",false); ???????????????}else ???????????????{ ??????????????????$(this).prop("checked",true); ???????????????} ???????????} ???????????) ???????} ???????//3元运算实现反选 ???????// 条件？真值：假值 ???????function reverserAll3(){ ???????????$("#tb :checkbox").each( ???????????????????function(){ ???????????????????????var v=$(this).prop("checked")?false:true; ???????????????????????$(this).prop("checked",v); ???????????????????} ???????????) ???????} ???</script></body></html>二：jquery实现菜单栏功能
1)找到header标签所在位置
??????? 1)在找到header标签加入onclick事件
??????? 2)找到下一个标签所在位置content
??????? 3)去除当前content的hide类，显示本标栏
??????? 4)找到当前header的父标签item
??????? 5)找到item所有兄弟标签
??????? 6)找到item兄弟标签下面的content
??????? 7)在找到content加入hide类，隐藏标题栏
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.menu{ ???????????height: 400px; ???????????width: 200px; ???????????border: 1px solid #dddddd; ???????} ???????.header{ ???????????background-color: black; ???????????color: white; ???????} ???????.content{ ???????????height: 50px; ???????} ???????.hide{ ???????????display: none; ???????} ???</style></head><body> ???<div class="menu"> ???<div class="item"> ???????<div class="header">标题1</div> ???????<div class="content">内容1</div> ???</div> ???<div class="item"> ???????<div class="header">标题2</div> ???????<div class="content hide">内容2</div> ???</div> ???<div class="item"> ???????<div class="header">标题3</div> ???????<div class="content hide">内容3</div> ???</div> ???</div> ???<script src="jquery-1.12.3.js"></script> ???<script> ???????/* ???????1)找到header标签所在位置 ???????1)在找到header标签加入onclick事件 ???????2)找到下一个标签所在位置content ???????3)去除当前content的hide类，显示本标栏 ???????4)找到当前header的父标签item ???????5)找到item所有兄弟标签 ???????6)找到item兄弟标签下面的content ???????7)在找到content加入hide类，隐藏标题栏 ???????*/ ???????$(".header").click( ???????????????function() { ???????????????????$(this).next().removeClass("hide") ???????????????????//找到header父级标签的所有兄弟标签的孩子content,并加入hide类 ???????????????????$(this).parent().siblings().find(".content").addClass("hide") ???????????????} ???????) ???</script></body></html>三：jquery模态编辑1
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.hide{ ???????????display: none; ???????} ???????.shadow{ ???????????position: fixed; ???????????top: 0; ???????????left: 0; ???????????right: 0; ???????????bottom:0; ???????????background-color: black; ???????????opacity: 0.6; ???????????z-index: 9; ???????} ???????.model{ ???????????position: fixed; ???????????top:50%; ???????????left: 50%; ???????????margin-left: -250px; ???????????maigin-top: -200px; ???????????background-color: white; ???????????z-index: 10; ???????????height: 200px; ???????????width: 400px; ???????} ???</style></head><body> ???<a onclick="addElement();" style="color: red">增加</a> ???<input type="button" value="+" onclick="addElement();"> ???<table border="1px"> ???????<tr> ???????????<td target="hostname">1.1.1.1</td> ???????????<td target="port">1182</td> ???????????<td> ???????????????<a class="edit">编辑</a>| ???????????????<a class="del">删除</a> ???????????</td> ???????</tr> ???????????????<tr> ???????????<td target="hostname">1.1.1.2</td> ???????????<td target="port">1182</td> ???????????<td> ???????????????<a class="edit">编辑</a>| ???????????????<a class="del">删除</a> ???????????</td> ???????</tr> ???????????????<tr> ???????????<td target="hostname">1.1.1.3</td> ???????????<td target="port">1182</td> ???????????<td> ???????????????<a class="edit">编辑</a>| ???????????????<a class="del">删除</a> ???????????</td> ???????</tr> ???????????????<tr> ???????????<td target="hostname">1.1.1.4</td> ???????????<td target="port">1182</td> ???????????<td> ???????????????<a class="edit">编辑</a>| ???????????????<a class="del">删除</a> ???????????</td> ???????</tr> ???</table> ???<div class="shadow hide"></div> ???<div class="model hide"> ???????<input type="text" name="host"> ???????<input type="text" name="port"> ???????<input type="button" value="取消" onclick="cancelElement();"> ???</div> ???<script src="jquery-1.12.3.js"></script> ???<script> ???????function addElement(){ ???????????console.log(1) ???????????$(".model,.shadow").removeClass(‘hide‘); ???????} ???????function cancelElement(){ ???????????$(".model,.shadow").addClass("hide"); ???????????$(‘.model input[name="host"]‘).val(""); ???????????$(‘.model input[name="port"]‘).val(""); ???????} ???????$(".edit").click( ???????????????function(){ ???????????????????addElement() ???????????????????var tds=$(this).parent().prevAll(); ???????????????????var host=$(tds[1]).text(); ???????????????????var port=$(tds[0]).text(); ???????????????????console.log(host,port); ???????????????????$(‘.model input[name="host"]‘).val(host); ???????????????????$(‘.model input[name="port"]‘).val(port); ???????????????} ???????) ???</script></body></html>四：jquery模态编辑-改进版
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.hide{ ???????????display: none; ???????} ???????.shadow{ ???????????position: fixed; ???????????top: 0; ???????????left: 0; ???????????right: 0; ???????????bottom:0; ???????????background-color: black; ???????????opacity: 0.6; ???????????z-index: 9; ???????} ???????.model{ ???????????position: fixed; ???????????top:50%; ???????????left: 50%; ???????????margin-left: -250px; ???????????maigin-top: -200px; ???????????background-color: white; ???????????z-index: 10; ???????????height: 200px; ???????????width: 400px; ???????} ???</style></head><body> ???<a onclick="addElement();" style="color: red">增加</a> ???<input type="button" value="+" onclick="addElement();"> ???<table border="1px"> ???????<tr> ???????????<td target="host">1.1.1.1</td> ???????????<td target="port">1182</td> ???????????<td> ???????????????<a class="edit">编辑</a>| ???????????????<a class="del">删除</a> ???????????</td> ???????</tr> ???????????????<tr> ???????????<td target="host">1.1.1.2</td> ???????????<td target="port">1182</td> ???????????<td> ???????????????<a class="edit">编辑</a>| ???????????????<a class="del">删除</a> ???????????</td> ???????</tr> ???????????????<tr> ???????????<td target="host">1.1.1.3</td> ???????????<td target="port">1182</td> ???????????<td> ???????????????<a class="edit">编辑</a>| ???????????????<a class="del">删除</a> ???????????</td> ???????</tr> ???????????????<tr> ???????????<td target="host">1.1.1.4</td> ???????????<td target="port">1182</td> ???????????<td> ???????????????<a class="edit">编辑</a>| ???????????????<a class="del">删除</a> ???????????</td> ???????</tr> ???</table> ???<div class="shadow hide"></div> ???<div class="model hide"> ???????<input type="text" name="host"> ???????<input type="text" name="port"> ???????<input type="button" value="取消" onclick="cancelElement();"> ???</div> ???<script src="jquery-1.12.3.js"></script> ???<script> ???????function addElement(){ ???????????console.log(1) ???????????$(".model,.shadow").removeClass(‘hide‘); ???????} ???????function cancelElement(){ ???????????$(".model,.shadow").addClass("hide"); ???????????$(‘.model input[name="host"]‘).val(""); ???????????$(‘.model input[name="port"]‘).val(""); ???????}// ???????$(".edit").click(// ???????????????function(){// ???????????????????addElement()// ???????????????????var tds=$(this).parent().prevAll();// ???????????????????var host=$(tds[1]).text();// ???????????????????var port=$(tds[0]).text();//// ???????????????????console.log(host,port);// ???????????????????$(‘.model input[name="host"]‘).val(host);// ???????????????????$(‘.model input[name="port"]‘).val(port);//// ???????????????}// ???????) ???????/*上面直接使用tds[0]等存在这个问题，就是如果在增加一列，所有tds及下面的赋值都要修改 ???????处理方法：给每个td绑定个属性，并且这个属性值和model中name属性的值相对应，通过each循环获取并把属性值相等的设置 ???????*/ ???????$(".edit").click( ???????????????function(){ ???????????????????addElement(); ???????????????????var tds=$(this).parent().prevAll(); ???????????????????tds.each( ???????????????????????????function(){ ???????????????????????????????var v1=$(this).attr("target"); ???????????????????????????????var value=$(this).text(); ???????????????????????????????var a1=".model input[name="; ???????????????????????????????var a2="]"; ???????????????????????????????//字符串拼接 ???????????????????????????????var tmp=a1+v1+a2; ???????????????????????????????$(tmp).val(value) ???????????????????????????} ???????????????????) ???????????????} ???????) ???</script></body></html>五：jquery实现tab页
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.hide{ ???????????display: none; ???????} ???????.menu{ ???????????width:400px; ???????????height: 38px; ???????????margin: 0 auto; ???????????line-height: 38px; ???????} ???????.menu .menu-item{ ???????????float: left; ???????????padding: 0 10px; ???????????border-right: 1px solid red; ???????????cursor: pointer; ???????} ???????.active{ ???????????background-color: rebeccapurple; ???????} ???????.content{ ???????????min-height: 100px; ???????????width: 400px; ???????????border:1px solid #2459a2; ???????????margin: 0 auto; ???????} ???</style></head><body> ???<div class="menu"> ???????<div class="menu-item active" target="1">菜单1</div> ???????<div class="menu-item " target="2">菜单2</div> ???????<div class="menu-item "target="3">菜单3</div> ???????<div style="clear:both"></div> ???</div> ???<div class="content"> ???????<div class="content-pg" target="1">内容1</div> ???????<div class="content-pg hide" target="2">内容2</div> ???????<div class="content-pg hide" target="3">内容3</div> ???</div> ???<script src="jquery-1.12.3.js"></script> ???<script> ???????$(".menu-item").click( ???????????????function(){ ???????????????????//菜单切换 ???????????????????$(this).addClass("active").siblings().removeClass("active"); ???????????????????var target=$(this).attr("target"); ???????????????????console.log($(".content-pg [target=‘"+target+"‘]")); ??????????????????$(‘.content‘).children("[target=‘"+ target+"‘]").removeClass(‘hide‘).siblings().addClass(‘hide‘); ???????????????} ???????) ???</script></body></html>jquery-实用例子
原文地址：http://www.cnblogs.com/lixiang1013/p/7629168.html