jQuery 案例&综合提升

已于 2022-08-06 15:04:47 修改
阅读量809 收藏 12
点赞数 1
分类专栏： jQuery 文章标签： jquery javascript 前端
于 2022-03-16 22:38:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60786924/article/details/123537946
版权

目录

一、全选案例

二、轮播图的实现

三、选项卡实现

                1.通过css();设置

                2.通过hide();和show();方法实现

                3.通过toggle();方法实现

二、个人总结 

一、全选案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选案例</title>
	</head>
	<!-- 导入jQuery插件 -->
	<script src="js/jquery-3.3.1.min.js" type="text/javascript">
	</script>
	<!-- 编写jQuery代码 -->
	<script type="text/javascript">
		$(function(){
		//全选	
			$("#all").click(function(){
				//全选选中，其它复选框全部选中
				$("input:checkbox:gt(0)").each(function(){
					$(this).prop("checked",$("#all").prop("checked"));
				});
			});
		//优化全选(为所有的复选框设置点击事件除了全选)
			$("input:checkbox:gt(0)").click(function(){
				//flag:控制全选的checked属性
				var flag =true;
				$(this).each(function(){
					//但凡有一个复选框没有选中，全选就取消
					if($("input:checkbox:gt(0)").prop("checked") === false){
						flag = false;
					}
				});
				$("#all").prop("checked",flag);
			});
		});
	</script>
	<body>
		<h1>英雄联盟角色表</h1>
		<table border="1px" cellspacing="" cellpadding="">
			<tr>
				<td><input type="checkbox" name="" id="all" value="" />全选</td>
				<td>英雄名称</td>
				<td>英雄类型</td>
				<td>英雄价格</td>
				<td>英雄语录</td>
			</tr>
			<tr>
				<td><input name="" type="checkbox"></td>
				<td>剑圣</td>
				<td>刺客</td>
				<td>5738</td>
				<td>我的剑就是你的剑</td>
			</tr>
			<tr>
				<td><input name="" type="checkbox"></td>
				<td>疾风剑豪</td>
				<td>刺客</td>
				<td>2349</td>
				<td>后咋给</td>
			</tr>
			<tr>
				<td><input name="" type="checkbox"></td>
				<td>蛮族之王</td>
				<td>战士</td>
				<td>7090</td>
				<td>哈哈</td>
			</tr>
			<tr>
				<td><input name="" type="checkbox"></td>
				<td>狗头</td>
				<td>战士</td>
				<td>999</td>
				<td>我来了</td>
			</tr>
			<tr>
				<td><input name="" type="checkbox"></td>
				<td>武器大师</td>
				<td>战士</td>
				<td>2000</td>
				<td>开打开打</td>
			</tr>
			<tr>
				<td><input name="" type="checkbox"></td>
				<td>酒桶</td>
				<td>战士</td>
				<td>1999</td>
				<td>你买单我就来</td>
			</tr>
		</table>
	</body>
</html>

二、轮播图的实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图案例</title>
		<!-- 设置css样式 -->
		<style type="text/css">
			img {
				width: 200px;
				height: 200px;
			}
		</style>
		<!-- 编写JavaScript代码 -->
		<script type="text/javascript">
			//封装id
			function $(id) {
				return document.getElementById(id);
			}
			//图片切换方法
			//设置下标
			var index = 0;
			function changeImg() {
				//将图片放进数组里
				var imgs = ["img/dd_culture_1.jpg", "img/dd_culture_2.jpg", "img/dd_culture_3.jpg", "img/dd_culture_4.jpg", "img/dd_culture_5.jpg"];
				//下标变化
				index++;
				//如果下标超出范围,重新将下标赋值为零
				if (index > imgs.length - 1) {
					index = 0;
				}
				//将新的下标赋值给图片路径
				$("oImg").src = imgs[index];
			}
			//自动切换
			//设置时间
			var timer = null;

			function autoImg() {
				//减少cpu运行内存
				// 每次运行重新赋值
				if (timer != null) {
					stopImg();
				}
				timer = window.setInterval(function() {
					changeImg()
				}, 2000);
			}

			//清除定时器
			function stopImg() {
				window.clearInterval(timer);
			}
			window.onload = function() {
				autoImg();
			}
		</script>
	</head>
	<body>
		<img id="oImg" src="img/dd_culture_1.jpg" alt="">

	</body>
</html>

三、选项卡实现

                1.通过css();设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 设置css样式 -->
		<style type="text/css">
			ul{
				/* 居中 */
				text-align:center;
				/* 设置无序列表圆点隐藏 */
				list-style:none;
			}
			#a>li,#b>li,#c>li,#d>li,#e>li{
				//设置边框
				border: 1px solid blue;
				width: 100px;
			}
			#e>li{
			background-color: #008000;	
			//设置左外边距
			margin-left: -40px;
			}
			
			#b>li{
			background-color: #F0F8FF;	
			margin-left: -40px;
			}
			#c>li{
			background-color: aliceblue;	
			margin-left: -40px;
			}
			#d>li{
			background-color: aqua;	
			margin-left: -40px;
			}
		</style>
		<!-- 导入插件 -->
		<script src="js/jquery-3.3.1.min.js" type="text/javascript">
		</script>
		<!-- 编写jQuery代码 -->
		<script type="text/javascript">
		//加载函数：
		$(function(){
//假设法(由于点击后展开，再次点击后需要隐藏)
				var flag=true;
			$("#aa").click(function(){
						// alert(123);
						// alert(flag);
						if(flag === true){
						// alert(123);
						$("#e").css("display","block");
							flag=false;
						}else if(flag === false){
						$("#e").css("display","none");
						flag=true;
						}
			});
		});
		var flag = true;
		function asb(){
					// alert(123);
					// alert(flag);
					if(flag === true){
					// alert(123);
					$("#b").css("display","block");
						flag=false;
					}else if(flag === false){
					$("#b").css("display","none");
					flag=true;
					}
		}
		var flag1 = true;
		function asc(){
					// alert(123);
					// alert(flag);
					if(flag1 === true){
					// alert(123);
					$("#c").css("display","block");
						flag1=false;
					}else if(flag1 === false){
					$("#c").css("display","none");
					flag1=true;
					}
		}
		var flag2 = true;
		function asd(){
					// alert(123);
					// alert(flag);
					if(flag2 === true){
					// alert(123);
					$("#d").css("display","block");
						flag2=false;
					}else if(flag2 === false){
					$("#d").css("display","none");
					flag2=true;
					}
		}
		</script>
	</head>
	
	<body>
			<ul id="a">
				<li id="aa">我的好友</li>
//对于display必须设置在该处，不能设置在style样式中，否则，以上编写的方法无效
					<ul id ="e" style="display: none;">
						<li>小名</li>
						<li>小青</li>
						<li>小红</li>
						<li>小蓝</li>
						<li>小刚</li>
					</ul>
				<li onclick="asb();";>
					我的小学同学
					</li>
					<ul id="b" style="display: none;">
						<li>朱元璋</li>
						<li>李世民</li>
						<li>嬴政</li>
						<li>刘伯温</li>
						<li>刘邦</li>
					</ul>
				
				<li onclick="asc();";>
					我的初中同学
					</li>
					<ul id="c" style="display: none;">
						<li>康熙</li>
						<li>乾隆</li>
						<li>雍正</li>
						<li>赵匡胤</li>
					</ul>
				
				<li onclick="asd();";>
					我的老师
					</li>
					<ul id="d" style="display: none;">
						<li>鬼谷子</li>
						<li>孔子</li>
						<li>孟子</li>
						<li>老子</li>
						<li>墨子</li>
					</ul>
			</ul>
	</body>
</html>

                2.通过hide();和show();方法实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery实现表单选项卡</title>
		<!-- css代码 -->
		<style type="text/css">
			*{
				list-style:none;
				width: 100px;
				text-align: center;
			}
			#a>li,#b>li,#c>li,#d>li{
			border:1px solid blue;
			}
			#a>li{
				background-color:#00FFFF;
				margin-left: 40px;
			}
			#b>li{
				background-color:#F0F8FF
			}
			#c>li{
				background-color:antiquewhite
			}
			#d>li{
				background-color:mediumaquamarine
			}
		</style>
		<!-- 导入jQuery插件 -->
		<script src="js/jquery-3.3.1.min.js" type="text/javascript">
		</script>
		<!-- 编写jQuery的方法 -->
		<script type="text/javascript">
			var flag =true;
//有参数方法（更加灵活）
//一个方法多次使用，根据不同的参数，进行不同的设置
			function aa(obj){
				if(!flag){
					$(obj).hide();
					flag = true;
				}else{
					$(obj).show();
					flag = false;
				}
			}
		</script>
	</head>
	<body>
		<ul id="a">
			<li></li>
			<li onclick="aa('#b');">我的电脑</li>
			<ul id="b" style="display:none">
				<li>苹果</li>
				<li>戴尔</li>
				<li>惠普</li>
			</ul>
			<li>不行</li>
			<li onclick="aa('#c');">我的同学</li>
			<ul id="c" style="display:none">
				<li>你好</li>
				<li>苦苦</li>
				<li>哈哈</li>
				<li>动过</li>
				<li>西红柿</li>
			</ul>
			<li onclick="aa('#d');">are you ok?</li>
			<ul id="d" style="display:none">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</ul>
	</body>
</html>

                3.通过toggle();方法实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery实现表单选项卡最终实现</title>
		<!-- css代码 -->
		<style type="text/css">
			*{
				list-style:none;
				width: 100px;
				text-align: center;
			}
			#a>li,#b>li,#c>li,#d>li{
			border:1px solid blue;
			}
			#a>li{
				background-color:#00FFFF;
				margin-left: 40px;
			}
			#b>li{
				background-color:#F0F8FF
			}
			#c>li{
				background-color:antiquewhite
			}
			#d>li{
				background-color:mediumaquamarine
			}
		</style>
		<!-- 导入jQuery插件 -->
		<script src="js/jquery-3.3.1.min.js" type="text/javascript">
		</script>
		<!-- 编写jQuery的方法 -->
		<script type="text/javascript">
//对，你没有看错，这个方法，解决了上面需要几十行需要实现的功能
		// toggle方法
		function aa(obj){
			$(obj).toggle();
		}
		</script>
	</head>
	<body>
		<ul id="a">
			<li></li>
			<li onclick="aa('#b');">我的电脑</li>
			<ul id="b" style="display:none">
				<li>苹果</li>
				<li>戴尔</li>
				<li>惠普</li>
			</ul>
			<li>不行</li>
			<li onclick="aa('#c');">我的同学</li>
			<ul id="c" style="display:none">
				<li>你好</li>
				<li>苦苦</li>
				<li>哈哈</li>
				<li>动过</li>
				<li>西红柿</li>
			</ul>
			<li onclick="aa('#d');">are you ok?</li>
			<ul id="d" style="display:none">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</ul>
	</body>
</html>

二、个人总结 

        我们在学习编程的时候，不仅仅需要学习方法，更多的是需要掌握如何应用到实际生活中，多方位的思考问题，是否还有其他的解决方案，是否能用其他技术代替解决，去掌握一个一个的技术，多去做综合的项目（目的是为了加强巩固，项目是综合的体现），当然我们在编程中可能会遇到很多的问题，遇到很多的bug，但是当你愿意一遍又一遍的去进行测试，思考去分析问题发现问题，你就能解决大部分问题，而当我们遇到不会的问题的时候，可以通过网络资源去剖析解决，尽量依靠自己能力解决，慢慢的你就会形成自己的一套解决方案与思路流程（因此获得很大的成就感），提高解决问题的效率，学习新技术，加强自己的竞争力，当然最主要的还是要坚持下来，大胆去尝试，才能有大的收获。

£轻描～淡写°
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery项目案例
05-12
Jquery案例，里面有图片的自动切换，留言板，编辑框，都是用Jquery技术开发的，代码清晰，
JQuery总结，元素综合操作外加案例
Q53100的博客
10-19 170
jquery选取指定div中的img 并修改其属性。当前点击的删除按钮的父辈元素且名字是tr的进行移除。jquery判断checkbox是否被选中。筛选被勾选的复选框，删除他们父元素的tr行。jquery对button进行绑定和解绑。jquery获取选中的radio。当点击新的时候，首先清空元素。案例：物品的刷新，删除，全选。jquery选中radio。获取当前复选框变成的状态。
jQuery案例
Su3253067688的博客
10-24 1092
3.页面元素的综合操作。2.图书分类下拉列表。
JavaWeb_21_JQuery高级
weixin_45640009的博客
09-21 235
今日内容： 1. JQuery 高级 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插件 JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数： 1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000) 2. easing：用来指定切换效果，默认是"swing"
jquery小案例
藜笙的博客
05-12 264
1. 点击方块改变body背景颜色 例 ： <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ margin: 0; padding: 0; } body{ width:100%; height:100%; background-color: #0181cc;
JQuery入门&选择器
03-10
JQuery入门&选择器
jQuery案例练习.rar
07-09
jQuery案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图，也含有原生js轮播图案例，每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点
jQuery&&ASP.zip
07-01
这份压缩文件里面包含ASP.NET和JQuery的全部实验报告，整理后发到这里，希望可以帮到大家，需要实验报告的同学可以下载
jquery版本&api.zip
06-06
jquery版本&api.zip
JavaScript&jQuery应用&ajax
04-16
教程ppt+配套源码，简单易学，内容详细
经典jquery案例 经典jquery
08-29
经典jquery例子，这里包含可编辑表格、div制作弹出窗口、模拟动态股票、动态菜单例子、自动补全还有div实现jquery动态滑动效果。
JQuery实例总结一
卓尔游侠
03-22 816
现在对于web页面的开发基本上分工明确，HTML负责页面内容，CSS负责页面的样式，Javascript负责页面行为。   对JQ的学习首先是通过几个例子来进行的jq 学习，现在对前2个例子中的内容下总结从局部来看待整体。关于对html的css设计这里就不写了。 Jq要进行操作要 1.得到元素的节点，参数为某种css选择器。 $("#id")  //通过id得到 $(".class
50个实用的jquery案例
二手农民的学习博客
02-25 4528
1. 如何创建嵌套的过滤器： //允许你减少集合中的匹配元素的过滤器，   //只剩下那些与给定的选择器匹配的部分。在这种情况下，   //查询删除了任何没（:not）有（:has）   //包含class为“selected”（.selected）的子节点。   .filter(":not(:has(.selected))")  2. 如何重用元素搜索 var a
【jQuery简单的综合案例】
weixin_45753617的博客
08-25 531
【jQuery简单的综合案例】
jQuery实例大全[经典收集]
路虽远，行则将至；事虽难，做则必成！
03-11 8708
blueTable 基于jQuery的表格排序插件 v0.1<br /><br />用jquery写的表格排序的插件代码，做了一些细化，内部功能也做了一些扩展，增加了扩展名（后缀名）排序的双相选择，可以对后缀名和文件名排序分别制定排序方式；还增加了对表格被选中行排序的功能。<br />演示地址     下载地址<br /><br />jQuery carousel 可控制的左右图片滚动，每点击一下“向左”或“向右”按钮，图片会滚动一下，carousel 插件专一用来定制各式各样的滚动，不但是图片滚动，也可以
jQuery-页面元素综合案例
weixin_69036336的博客
10-24 1325
jQuery-页面元素综合案例
jQuery05——综合案例
小白的学习路
12-21 240
跟着学习视频做了个小demo 这里记录一下具体的jquery代码和具体注意点： $(function() { load(); //1.按下回车 把完整数据 存储到本地存储里面 $("#title").on("keydown", function(event) { if (event.keyCode === 13) { if ($(this).val() == "") { alert(
jQuery UI 实例(三十九)
shi199434的博客
01-16 484
jQuery UI 实例 - 菜单（Menu） 带有鼠标和键盘交互的用于导航的可主题化菜单。 如需了解更多有关 menu 部件的细节，请查看 API 文档 菜单部件（Menu Widget）。 默认功能 一个带有默认配置、禁用条目和嵌套菜单的菜单。由一个列表转化成的，添加了主题，并支持鼠标和键盘交互。尝试使用光标键导航菜单。 lang="en"> ch
jquery&css&css+div案例
最新发布
09-02
jQuery是一个快速、简洁的JavaScript库。它是为了简化JavaScript在不同浏览器上编写代码的复杂性而创建的。...无论是个人开发者还是企业开发团队，都可以借助jQuery提升开发效率，实现更好的用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值