jQuery常见案例
通过jQuery实现全选，反选取消；
| 选择 | 地址 | 端口 |
|---|---|---|
| 1.1.1.1 | 80 | |
| 1.1.1.1 | 80 | |
| 1.1.1.1 | 80 | |
| 1.1.1.1 | 80 |
| 选择 | 地址 | 端口 |
|---|---|---|
| 1.1.1.1 | 80 | |
| 1.1.1.1 | 80 | |
| 1.1.1.1 | 80 | |
| 1.1.1.1 | 80 |
通过jQuery实现左侧菜单；
菜单1
内容1
内容1
内容1
菜单2
菜单3
菜单4
CSS部分代码：
.hide{
display: none;
}
.bodycontent{
300px;
height: 700px;
border: solid 1px #dddddd
}
.header{
height: 35px;
background-color: #000795;
color: white;
line-height: 35px;
}
.content{
min-height: 50px;
}
HTML部分代码和JS部分代码：
<body>
<div class="bodycontent">
<div class="item">
<!--this 就表示当前点击的标签-->
<div class="header" >菜单1</div>
<div class="content">
<div>内容1</div>
<div>内容1</div>
<div>内容1</div>
</div>
</div>
<div class="item">
<div class="header" >菜单2</div>
<div class="content hide">
<div>内容2</div>
<div>内容2</div>
<div>内容2</div>
</div>
</div>
<div class="item">
<div class="header" >菜单3</div>
<div class="content hide">
<div>内容3</div>
<div>内容3</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div class="header" >菜单4</div>
<div class="content hide">
<div>内容4</div>
<div>内容4</div>
<div>内容4</div>
</div>
</div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
$(".item >.header").click(function () {
// 删除选中标签的，下一个标签中的 hide 属性
$(this).next().removeClass("hide");
// 找到当前标签的，所有父类标签的所有兄弟标签，查找父亲兄弟标签里面儿子标签带有content属性的加上hide属性
$(this).parent().siblings().find(".content").addClass("hide");
})
</script>
</body>
通过jQuery实现商城菜单内容详情页的切换；
话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉。汉朝自高祖斩白蛇而起义，一统天下;后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃共相辅佐。时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。
CSS部分代码：
<style>
.bodcontent{
700px;
margin: 0 auto;
}
.hide{
display: none;
}
.menu{
height: 38px;
background-color: #dddddd;
line-height: 38px;
}
.menu .menu-item{
float: left;
border-right: 1px solid red;
padding: 0 8px;
cursor: pointer;
}
.menu .active{
background-color: #2dccc5
}
.content{
min-height: 100px;
border: 1px solid red;
}
</style>
HTML部分代码和JS部分代码：
<body>
<div class="bodcontent">
<div class="menu">
<div class="menu-item active" >菜单一</div>
<div class="menu-item" >菜单二</div>
<div class="menu-item" >菜单三</div>
</div>
<div class="content">
<div >话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉。汉朝自高祖斩白蛇而起义，一统天下;后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃共相辅佐。时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横</div>
<div class="hide">蜀汉建兴七年夏四月，孔明兵在祁山，分作三寨，专候魏兵。却说司马懿引兵到长安，张郃接见，备言前事。懿令?为先锋，戴陵为副将，引十万兵到祁山，于渭水之南下寨。郭淮、孙礼入寨参见。懿问曰："汝等曾与蜀兵对阵否？"二人答曰："未也。"懿曰："蜀兵千里而来，利在速战；今来此不战，必有谋也。陇西诸路，曾有信息否？"淮曰："已有细作探得各郡十分用心，日夜提防，并无他事。只有武都、阴平二处，未曾回报。"懿曰："吾自差人与孔明交战。汝二人急从小路去救二郡，却掩在蜀兵之后，彼必自乱矣。"</div>
<div class="hide">汉朝天数当桓灵，炎炎红日将西倾。奸臣董卓废少帝，刘协懦弱魂梦惊。曹操传檄告天下，诸侯奋怒皆兴兵。议立袁绍作盟主，誓扶王室定太平。温侯吕布世无比，雄才四海夸英伟。护躯银铠砌龙鳞，束发金冠簪雉尾。参差宝带兽平吞，错落锦袍飞凤起。龙驹跳踏起天风，画戟荧煌射秋水。出关搦战谁敢当？诸侯胆裂心惶惶。踊出燕人张冀德，手持蛇矛丈八枪。虎须倒竖翻金线，环眼圆睁起电光。酣战未能分胜败，阵前恼起关云长。青龙宝刀灿霜雪，鹦鹉战袍飞蛱蝶。马蹄到处鬼神嚎，目前一怒应流血。枭雄玄德掣双锋，抖擞天威施勇烈。三人围绕战多时，遮拦架隔无休歇。喊声震动天地翻，杀气迷漫牛斗寒。吕布力穷寻走路，遥望家山拍马还。倒拖画杆方天戟，乱散销金五彩幡。顿断绒绦走赤兔，翻身飞上虎牢关。</div>
</div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
$(".menu-item").click(function () {
$(this).addClass("active").siblings().removeClass("active");
// $(this).index() 表示获取索引
$(".content").children().eq($(this).index()).removeClass("hide").siblings().addClass("hide");
})
</script>
</body>
通过jQuery实现点赞变大的效果；
赞
CSS部分代码：
<style>
.container{
padding: 50px;
border: 1px solid #dddddd;
}
.item{
position: relative;
30px;
}
</style>
HTML部分代码和JS部分代码：
<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>
<script src="jquery-3.2.1.js"></script>
<script>
$(".item").click(function () {
AddFavor(this)
});
function AddFavor(self) {
var fontSize = 15;
var top = 0;
var right = 0;
var opacity=1;
var tag = document.createElement("span");
$(tag).text("+赞");
$(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+5;
top = top-5;
right = right-5;
opacity = opacity-0.1;
$(tag).css("fontSize",fontSize +"px");
$(tag).css("top",top +"px");
$(tag).css("right",right +"px");
$(tag).css("opacity",opacity);
if (opacity< 0){
clearInterval(obj);
$(tag).remove();
}
},40)
}
</script>
</body>