jQuery常见案例

通过jQuery实现全选，反选取消；

	1.1.1.1	80
	1.1.1.1	80
	1.1.1.1	80
	1.1.1.1	80

代码实现

<body>
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="reverseAll()">
<input type="button" value="取消" onclick="cancAll()">
<table border="1"><thead><th>选择</th><th>地址</th><th>端口</th></thead><tbody id="tb1"><tr><td><input type="checkbox"></td><td>1.1.1.1</td><td>80</td></tr><tr><td><input type="checkbox"></td><td>1.1.1.1</td><td>80</td></tr><tr><td><input type="checkbox"></td><td>1.1.1.1</td><td>80</td></tr><tr><td><input type="checkbox"></td><td>1.1.1.1</td><td>80</td></tr></tbody>
</table><script src="jquery-3.2.1.js"></script><script>function checkAll() {$("#tb1 :checkbox").prop("checked",true)}function cancAll() {$("#tb1 :checkbox").prop("checked",false)}function reverseAll() {// 对某一些标签进行特殊设置使用 each 加匿名函数实现$(":checkbox").each(function() {// this,代指当前循环的那一个元素// 方式一：DOM方法// this.checked 表示当前标签是否选中（DOM方法）if (this.checked){this.checked=false;}else {this.checked=true;}// 方式二：使用jQuery的prop属性判断//  一下方法使用jQuery判断是否为选择//  if($(this).prop("checked")){//      $(this).prop("checked",false)//  }else {//      $(this).prop("checked",true)//  }// 方式三：使用三元运算方式：// var v = 条件？真值：假值         //(如果条件为真，真值赋给v;如果条件为假，假值赋给v)// var v = this.checked?false:true;// this.checked=v})}
</script>
</body>

通过jQuery实现左侧菜单；

菜单1

内容1

菜单2

内容2

菜单3

内容3

菜单4

内容4

CSS部分代码：

    .hide{display: none;}.bodycontent{width: 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{width: 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实现点赞变大的效果；

用到的知识点：

//  $("t1").append();
//  $("t1").remove();
//  setInterval
//  透明度 1 ->  0;
//  position
//  字体大小，位置变化

CSS部分代码：

<style>.container{padding: 50px;border: 1px solid #dddddd;}.item{position: relative;width: 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>

通过jQuery实现表单提交验证内容是否为空；

表单一：

表单二：

表单三：

表单四：

表单五：

表单提交,如果表格为空提示输入内容：

<body>
<form id="f1" action="https://www.sogou.com/web?query" method="post"><div>表单一：<input name="n1" type="text"></div><div>表单二：<input name="n2" type="password"></div><div>表单三：<input name="n3" type="text"></div><div>表单四：<input name="n4" type="text"></div><div>表单五：<input name="n5" type="text"></div><input type="submit" value="提交">
</form><script src="jquery-3.2.1.js"></script>
<script>$(":submit").click(function () {// 默认 flag 为 truevar flag = true;$(".error").remove();$("#f1").find("input[type='text'],input[type='password']").each(function () {var v = $(this).val();if (v.length<=0){// 单表单中值为0 时，将flag 设置为 falseflag = false;// 创建span标签var tag = document.createElement("span");// 创建一个 class 属性tag.className = "error";tag.innerHTML="* 必填项";// 将创建的 span标签 添加到 input标签后面$(this).after(tag);// 这里return false;遇到错误时将后方的循环全部终止，退出当前循环// return false;}});// return flag 如果 flag 为ture 提交表单，如果为 false 时，终止提交return flag})
</script>
</body>

转载于:https://www.cnblogs.com/baolin2200/p/7745690.html

jQuery常见案例相关推荐

jquery常见的选择器
jquery常见的选择器具体参考官方API:http://jquery.cuishifeng.cn/ 1. 基本选择器 1.通配符选择器 * 用于选择所有元素2.元素选择器选择文档的元素如htm ...
JQuery-学习笔记07【高级——JQuery高级案例】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
JQuery-学习笔记04【基础——JQuery基础案例】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
jQuery综合案例——打地鼠(教学版本·附源码)
jQuery综合案例--打地鼠非常经典的案例,完整的训练[jQuery]并且针对[setInterval]与[setTimeout]有一个实质性的训练,学习价值超高,建议教师与学生下载,并用于教学与 ...
全面详细的jQuery常见开发技巧手册
本文为大家整理一篇很详尽的jQuery常见开发技巧文章,供大家参考,具体内容如下 1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者 ...
linux系统日志排故方案,Linux系统故障排查思路与常见案例
Linux系统故障排查思路与常见案例 1.Linux系统日志与分类内核及系统日志这种日志数据由系统服务syslog统一管理,根据其主配置文件"/etc/syslog.conf" ...
jQuery入门案例
jQuery入门案例 html内容如下: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
前端工程师之jquery实战案例大集合-彭亮-专题视频课程
前端工程师之jquery实战案例大集合-17028人已学习课程介绍详细介绍了一个js类库的实战应用,这里主要讲解jquery.是一个可以很容易就做各种网页特效的面相对象的方法函数集 ...
CPU 100%排查及常见案例
CPU 100%排查及常见案例这篇文章主要分享一般线上项目遇到CPU%时排查的方式,并提供了几个典型案例来帮助大家熟悉排查过程,我会先以 "死循环" 为例子来为大家演示一遍整体的 ...

jQuery常见案例

jQuery常见案例

通过jQuery实现全选，反选取消；

通过jQuery实现左侧菜单；

通过jQuery实现商城菜单内容详情页的切换；

通过jQuery实现点赞变大的效果；

通过jQuery实现表单提交验证内容是否为空；

jQuery常见案例相关推荐

最新文章

热门文章