前端开发网页设计(六)：JQuery学习

最新推荐文章于 2023-03-21 14:49:03 发布
最新推荐文章于 2023-03-21 14:49:03 发布
阅读量274 收藏 5
点赞数 2
分类专栏： 个人QQ1126140903 文章标签： JQuery JavaScript JQuery动态菜单 JQuery操作 网页设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43070331/article/details/97615311
版权
源码下载 链接：https://pan.baidu.com/s/1nFa9iW4XZGFx8b6R65XAYg 提取码：7xa1
JQuery学习
1.JQuery的封装原理
2.JQuery的选择器
3.JQuery操作元素属性
4.JQuery操作元素内容JQuery
5.JQuery操作元素样式
6.JQuery
7.JQuery


3.JQuery操作元素属性


1.JQuery的封装原理

<html>
	<head>
		<title>jquery的封装原理</title>
		<meta charset="UTF-8"/>
		<!--引入外部声明的js文件-->
		<script src="js/my.js" type="text/javascript" charset="utf-8"></script>
		<!--声明js代码域-->
		<script type="text/javascript">		
			function test(){
				alert("我是test");
			}
			var bjsxt=123;
			
			//闭包原理:在全局区中不能够获取函数体内的数据。使用更大作用域的变量来记录小作用域变量的值。
			function testA(){
				
				function test2(){
					test2.name="张三";
					
					var n=999;
					alert(bjsxt);
					return n;
				}
				return test2;
			}
		</script>
	</head>
	<body>
		<h3>jquery的封装原理</h3>
		<hr />
		<input type="button" name="" id="" value="测试test"  onclick="bjsxt.test()"/>
		<ul>
			<li>1、js的全局代码区只有一个，这样就会造成同名变量的值会被覆盖。</li>
			<li>2、使用对象封装，将代码封装到对象中.但是对象如果被覆盖，则全部失效，风险极高。</li>
			<li>3、使用工厂模式,将代码进行封装，但是并没有解决问题</li>
			<li>4、将封装的函数名字去除，避免覆盖。但是函数没有办法调用了。</li>
			<li>5、匿名自调用，可以在页面加载的时候调用一次。但是不能重复调用，并且数据没有办法获取</li>
			<li>6、使用闭包,将数据一次性挂载到window对象下</li>
		</ul>
	</body>
</html>


2.JQuery的选择器

<html>
	<head>
		<title>jquery的选择器</title>
		<meta charset="UTF-8"/>
		<!--
			jquery的选择器学习：
				基本选择器
					id选择器
					标签选择器
					类选择器
					组合选择器
				层级选择器	
				简单选择器
				内容选择器
				可见性选择器
				属性选择器
				子元素选择器
				表单选择器
				
				注意：
					jQuery中选择器获取的是存储了HTML元素对象的数组。
					jquery获取的元素对象不能够直接使用js的内容，按照数组的取出方式将对象取出后可以使用js的内容。
				jquery对我们提供了多种多样的选择器来选择需要操作的HTML元素对象。
		-->
		<!--引入jQuery文件-->
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<!--声明js代码域-->
		<script type="text/javascript">
			//id选择器
			function testId(){
				//jquery--id
				var inp=$("#uname");
				alert(inp.val());
			}
			//标签选择器
			function testEle(){
				var inps=$("input");
				alert(inps[1].value);	
			}
			//类选择器
			function testClass(){
				var inps=$(".common");
				alert(inps.length);
			}
			//组合选择器：
			function testAll(){
				var eles=$("h3,input");
				alert(eles.length);
			}
			//测试子选择器
			function testChild(){
				var inps=$("#showdiv>input");
				alert(inps.length);
			}
			//测试层级选择器
			function testCj(){
				var inp=$("input:first");
				alert(inp.val());
				
			}
			function testCj2(){
				var tds=$("td:not(td[width])");
				alert(tds.html());
			}
		</script>
		<style type="text/css">
			.common{}
			div{
				width: 300px;
				height: 100px;
				border: solid 2px orange;
			}
			
		</style>
	</head>
	<body>
		<h3>jquery的选择器</h3>
		<input type="button" name="" id="" value="测试id"  onclick="testId()" class="common"/>
		<input type="button" name="" id="" value="测试标签选择器"  onclick="testEle()"/>
		<input type="button" name="" id="" value="测试类选择器"  onclick="testClass()"/>
		<input type="button" name="" id="" value="测试组合选择器"  onclick="testAll()"/>
		<hr />
		用户名: <input type="text" name="uname" id="uname" value="张三" class="common"/>
		<hr />
		<input type="button" name="" id="" value="测试子选择器" onclick="testChild()" />
		<input type="button" name="" id="" value="测试层级选择器--first" onclick="testCj()" />
		<input type="button" name="" id="" value="测试层级选择器--not" onclick="testCj2()" />
		<hr />
		<div id="showdiv">
			<input type="text" name="" id="" value="" />
			<input type="text" name="" id="" value="" />
			<input type="text" name="" id="" value="" />
			<input type="text" name="" id="" value="" />
		</div>
		<div id="">
			<input type="text" name="" id="" value="" />
			<input type="text" name="" id="" value="" />
			<input type="text" name="" id="" value="" />
			<input type="text" name="" id="" value="" />
		</div>
		<table border="1px" height="200px">
			<tr>
				<td width="100px"></td>
				<td width="100px"></td>
				<td width="100px"></td>
			</tr>
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
		</table>
	</body>
</html>


3.JQuery操作元素属性

<html>
	<head>
		<title>jQuery操作元素的属性</title>
		<meta charset="UTF-8"/>
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<!--
			jQuery操作元素属性：
				获取:
					对象名.attr("属性名") //返回当前属性值
					注意此种方式不能获取value属性的实时数据，使用对象名.val()进行获取。	
				修改
					对象名.attr("属性名","属性值");
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			function testField(){
				//获取元素对象
				var uname=$("#uname");
				//获取
				alert(uname.attr("type")+":"+uname.attr("value")+":"+uname.val());
			}
			
			function testField2(){
				//获取元素对象
				var uname=$("#uname");
				uname.attr("type","button");
			}	
		</script>
	</head>
	<body>
		<h3>jquery操作元素属性</h3>
		<input type="button" name="" id="" value="测试获取元素属性" onclick="testField()" />
		<input type="button" name="" id="" value="测试修改元素属性" onclick="testField2()" />
		<hr />
		用户名:<input type="text" name="uname" id="uname" value="哈哈" />
	</body>
</html>


4.JQuery操作元素内容

<html>
	<head>
		<title>操作元素HTML</title>
		<meta charset="UTF-8"/>
		<!--引入jQuery文件-->
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<!--
			jquery 操作元素内容学习：
				获取元素对象
					1、获取
						对象名.html()//返回当前对象的所有内容，包括HTML标签。
						对象名.text()//返回当前对象的文本内容，不包括HTML标签
					2、修改
						对象名.html("新的内容")//新的内容会将原有内容覆盖，HTML标签会被解析执行
						对象名.text("新的内容")//新的内容会将原有内容覆盖，HTML标签不会被解析
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			//声明函数
			function testHtml(){
				//获取元素对象
					var showdiv=$("#showdiv");
				<!-- //获取元素的内容 -->
					alert(showdiv.html());
			}
			
			function testHtml2(){
				//获取元素对象
				var showdiv=$("#showdiv");
				//修改元素内容
				showdiv.html(showdiv.html()+"<i>今天天气真好，适合学习</i>");
			}
			
			function testText(){
				//获取元素对象
				var showdiv=$("#showdiv");
				//获取元素内容
				alert(showdiv.text());
			}
			
			function testText2(){
				//获取元素对象
				var showdiv=$("#showdiv");
				//修改元素内容
				showdiv.text("<i>今天天气真好，适合学习</i>");
			}
			
			
		</script>
	</head>
	<body>
		<h3>操作元素HTML</h3>
		<input type="button" name="" id="" value="测试获取元素内容--html()" onclick="testHtml()" />
		<input type="button" name="" id="" value="测试修改元素内容--html()" onclick="testHtml2()" />
		<input type="button" name="" id="" value="测试获取元素内容--text()" onclick="testText()" />
		<input type="button" name="" id="" value="测试修改元素内容--text()" onclick="testText2()" />
		<div id="showdiv">
			<b>昨天天气好，学习了一天</b>
		</div>
	</body>
</html>


5.JQuery操作元素样式

<html>
	<head>
		<title>操作元素样式</title>
		<meta charset="UTF-8"/>
		<!--声明css-->
		<style type="text/css">
			#showdiv{
				width: 300px;
				height: 300px;
				border: solid 1px;	
			}
			.common{
				width: 300px;
				height: 300px;
				border: solid 1px;	
				background-color: blueviolet;
			}
			.dd{
				font-size: 30px;
				font-weight: bold;
			}
		</style>
		<!--引入jQuery文件-->
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<!--
			jquery操作元素的样式
				1、使用css()
						对象名.css("属性名")//返回当前属性的样式值
						对象名.css("属性名","属性值")//增加、修改元素的样式
						对象名.css({"样式名":"样式值","样式名":"样式值"……})//使用json传参，提升代码书写效率。
				2、使用addClass()
						对象名.addClass("类选则器名")//追加一个类样式
						对象名.removeClass("类选择器 名")//删除一个指定的类样式
				
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			//jQuery操作样式---css()
				function testCss(){
					//获取元素对象
						var showdiv=$("#showdiv");
					//操作样式--增加
						showdiv.css("background-color","orange");
					//操作样式--获取
						alert(showdiv.css("width"));		
				}
			
				function testCss2(){
					//获取元素对象
						var div=$("#div01");
					//操作样式
						div.css({"border":"solid 1px","width":"300px","height":"300px"});	
				}
			
			//jquery操作样式--addClass()
				function testAddClass(){
					//获取元素对象
						var div=$("#div01");
					//操作元素样式
						div.addClass("common");	
				}
				
				function testAddClass2(){
					//获取元素对象
						var div=$("#div01");
					//操作元素样式
						div.addClass("dd");	
				}
			
				function testRemoveClass(){
					//获取元素对象
						var div=$("#div01");
					//删除元素样式
						div.removeClass("dd");	
				}	
		</script>
	</head>
	<body>
		<h3>操作元素样式</h3>
		<input type="button" name="" id="" value="操作样式---css()" onclick="testCss()" />
		<input type="button" name="" id="" value="操作样式---css()--json" onclick="testCss2()" />
		<input type="button" name="" id="" value="操作样式---addClass()" onclick="testAddClass()" />
		<input type="button" name="" id="" value="操作样式---addClass()--2" onclick="testAddClass2()" />
		<input type="button" name="" id="" value="操作样式---removeClass" onclick="testRemoveClass()" />
		<hr />
		<div id="showdiv">
	
		</div>
		<div id="div01" class="common dd">
			我是div01
		</div>
	</body>
</html>


6.JQuery操作文档结构

<html>
	<head>
		<title>操作文档结构</title>
		<meta charset="UTF-8"/>
		<!--引入jQuery文件-->
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<!--
			操作文档结构学习：
				获取元素对象
					1、内部插入
						append("内容")				将指定的内容追加到对象的内部
						appendTo(元素对象或者选择器)		将制定的元素对象追加到指定的对象内容
						prepend()					将指定的内容追加到对象的内部的前面
						prependTo()					将制定的元素对象追加到指定的对象内容前面
			
					2、外部插入
						after					将指定的内容追加到指定的元素后面
						before					将指定的内容追加到指定的元素前面
						insertAfter				把所有匹配的元素插入到另一个、指定的元素元素集合的后面
						insertBefore  			把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
					3、包裹
					4、替换
					5、删除
						empty()
					
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			//内部插入
				function testAppend(){
					//获取元素对象
						var div=$("#showdiv");
					//使用内部插入
						div.append("<i>，饭</i>");
				}
				
				function testAppendTo(){
					//获取元素对象
						var div=$("#showdiv");
					//使用appendTo()
						$("#u1").appendTo(div);	
				}
				
				function testPrepend(){
					//获取元素对象
					var div=$("#showdiv");
					//使用prepend()
					div.prepend("<i>你好，</i>");
				}
			//外部插入
				function testAfter(){
					//获取元素对象
						var div=$("#showdiv");
					//使用after外部插入
						div.after("<b>今天天气不错，适合学习</b>");
					
				}
				function testBefore(){
					//获取元素对象
						var div=$("#showdiv");
					//使用before外部插入
						div.before("<b>今天天气不错，适合学习</b>")
					
				}
				function testEmpty(){
					$("#showdiv").empty()
				}
		</script>
		<style type="text/css">
			#showdiv{
				width: 300px;
				height: 300px;
				border: solid 3px orange;
			}
		</style>
	</head>
	<body>
		<h3>操作文档结构</h3>
		<input type="button" name="" id="" value="测试append" onclick="testAppend()" />
		<input type="button" name="" id="" value="测试appenTo" onclick="testAppendTo()" />
		<input type="button" name="" id="" value="测试prepend" onclick="testPrepend()" />
		<hr />
		<input type="button" name="" id="" value="测试after" onclick="testAfter()" />
		<input type="button" name="" id="" value="测试before" onclick="testBefore()" />
		<input type="button" name="" id="" value="测试删除--empty()" onclick="testEmpty()" />
		<hr />
		<u id="u1">每天下午都是充斥着面包浓浓的香味</u>
		<div id="showdiv">
			<b>今天中午吃什么</b>
		</div>
	</body>
</html>


7.JQuery的事件机制

<html>
	<head>
		<title>操作事件</title>
		<meta charset="UTF-8"/>
		<!--引入jQuery文件-->
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<!--
			jQuery动态操作事件 
				元素对象.bind("事件名",fn)//动态的给指定的元素对象追加指定的事件及其监听的函数。
				注意：
					js中的是一次添加，多次添加时覆盖的效果
					jQuery是追加的效果，可以实现给一个事件添加不同的监听函数。
				元素对象.unBind("事件名")//移除指定的元素对象的指定事件
					注意：js方式添加的事件不能移除。
				元素对象.one("事件名",fn)//给指定的元素对象添加一次性事件，事件被触发执行一次即失效。
					注意：可以给事件添加多个一次函数，unBind可以用来解绑
				页面载入事件
					$(document).ready(fn);
					页面载入成功后会调用传入的函数对象
					注意：
						此方式可以给页面载入动态的增加多个函数对象，不会被覆盖。
		-->
		<!--声明js代码域-->
		<script type="text/javascript">
			//js动态添加事件
				function testThing(){
					//获取元素对象
					var btn=document.getElementById("btn2");
					//添加事件
					btn.onclick=function(){
						alert("我是js方式");
					}
				}
			//jquery
				//测试bind绑定
				function testBind(){
					$("#btn2").bind("click",function(){alert("我是bind绑定单击事件")});
					$("#btn2").bind("click",function(){alert("我是bind绑定单击事件2w2222")});
				}
				//测试unBind解绑
				function testUnfBind(){
					$("#btn3").unbind("click");
					
				}
				//测试one
				function testOne(){
					$("#btn3").one("click",function(){alert("我是one")});
				}
			//页面载入事件
				//js方式
					window.onload=function(){
						alert("我是js方式页面加载");
					}
					window.onload=function(){
						alert("我是js方式页面加载2222");
					}
				//jquery方式
					$(document).ready(function(){
						alert("我是jQuery");
					})
					$(document).ready(function(){
						alert("我是jQuery22222");
					})
					
		</script>
	</head>
	<body>
		<h3>操作事件</h3>
		<input type="button" name="" id="" value="测试js动态添加事件" onclick="testThing()"/>
		<input type="button" name="" id="" value="测试jquery动态添加事件--bind" onclick="testBind()"/>
		<input type="button" name="" id="" value="测试jquery动态解绑事件--unbind" onclick="testUnfBind()"/>
		<input type="button" name="" id="" value="测试jquery动态解绑事件--one" onclick="testOne()"/>
		<hr />
		<input type="button" name="" id="btn" value="测试js" />
		<input type="button" name="btn2" id="btn2" value="测试jQuery-bind" />
		<input type="button" name="btn2" id="btn3" value="测试jQuery-one" />
		
	</body>
</html>


8.JQuery的动画效果

<html>
	<head>
		<title>动画效果</title>
		<meta charset="UTF-8"/>
		<!--引入jQuery文件-->
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<!--声明css代码域-->
		<style type="text/css">
			#showdiv{
				height: 300px;
				background-color: orange;
				display: none;
			}
			#div01{
				height: 300px;
				background-color:#8A2BE2;
			}	
		</style>
		<!--声明js代码域-->
		<script type="text/javascript">
			function test(){
				$("#showdiv").show(3000);
				$("#div01").hide(3000);
				/*$("#showdiv").hide(3000);
				$("#div01").show(3000);*/
				$("div").toggle(3000);
				$("#showdiv").slideDown(3000);
				$("#div01").slideUp(2000);
				$("#showdiv").fadeOut(3000);
			}
		</script>
	</head>
	<body onload="test()">
		<div id="showdiv">
			
		</div>
		<div id="div01">
			
		</div>
	</body>
</html>

在这里插入图片描述


9.JQuery实战 一个动态菜单

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<style type="text/css">
body {
	font-size: 16px;
	background-color: #FFF;
}

ul li {
	list-style: inside;
	margin-left: 20px;
	list-style: none;
}

#content {
	position: absolute;
	left: 400px;
	top: 20px;
	width: 500px;
	height: 400px;
	border: 1px solid #cccccc;
}

#tips {
	position: absolute;
	z-index: 1;
	border: 1px solid #cccccc;
	background-color: #FFC;
	display: none;
	font-size: 14px;
}

.lightlabel {
	color: red;
	text-decoration: underline;
	cursor: pointer;
}
</style>
<title>JQUERY树状菜单</title>
<script type="text/javascript" src="script/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
  //实现每颗树的显示或者隐藏
  $(function(){
	  //ID选择器
	  //组合选择器
	  $("#lblNews,#lblProducts").click(function(){
		 //var obj=$("#lblNews").siblings();//siblings():获取到同辈元素的元素集合  div    img
		  //var containerDiv=$("#lblNews").siblings("div");//div
		  //var img=$("#lblNews").siblings("#imgOnOff");//img
		  var containerDiv=$(this).siblings("div");// div this:是当前事件触发的元素对象  $(this)--->jq对象
		  var img=$(this).siblings("#imgOnOff");//img this:是当前事件触发的元素对象  $(this)--->jq对象
		 // console.info(containerDiv);
		 //console.info(img);
		 
		 //进行效果显示控制
		  //alert(containerDiv.css("display"));//获取CSS样式属性
		 
		 if(containerDiv.css("display")=="block"){//显示----》隐藏
			 //containerDiv.hide(1000);//隐藏动画
			 containerDiv.slideUp(1000);//滑上
			 img.attr("src","img/close.gif");
		 }else{//隐藏----》显示
			 //containerDiv.show(1000);//显示动画
			 containerDiv.slideDown(1000);//滑下
			 img.attr("src","img/open.gif");
		 }
	  });
  });
  
  //实现所有树的显示或者隐藏
  $(function(){
	  $("#openclose").click(function(){
		  //获取元素对象    4个   2个div   2个img
		  //属性选择器    全匹配   首匹配   尾匹配   模糊匹配
		  //$("div[name^=div]");// 首匹配 
		  //$("div[name$=Container]");//尾匹配
		 var div= $("div[name*=Contain]");// 模糊匹配 2个div 
		 
		 var img=$("img[name='imgOnOff']");//全匹配  
		// console.info(img);
		 //console.info(div);
		 
		 //进行显示控制
		 //注意：div中有两个以上的元素对象时，获取样式属性的时候，会以第一个div元素为基准点进行判断
		 if(div.css("display")=="block"){//显示----》隐藏  
			 div.fadeOut(1000);//滑上
			 img.attr("src","img/close.gif");
		 }else{//隐藏----》显示
			 div.fadeIn(1000);//滑下
			 img.attr("src","img/open.gif");
		 }
	  });
  });
  
  //实现横向排列  和纵向排列
  $(function(){
	  //实现横向排列   
	  $("#horder").click(function(){
		  //子对象选择器    层级选择器
		 var li= $("ul>div>li");//8个
		 
		 
		 //进行效果显示控制
		 //实现横向排列实际就是操作li标签的css样式属性中的浮动属性,值为左浮动
		 li.css("float","left");//设置
	  });
	  
	  //实现纵向排列
	  $("#vorder").click(function(){
		  //层级选择器
		  var li=$("ul li");//8个
		  
		//进行效果显示控制
	    //实现纵向排列实际就是操作li标签的css样式属性中的浮动属性,清除左浮动
	   li.css("float","none");
	  });
  });
  
  //提示信息的实现     鼠标移上去mouseover():给出提示信息   鼠标离开mouseout():的时候清空提示信息      event对象：事件触发过程中由浏览器产生，我们直接使用即可
  $(function(){
	  //鼠标移上去mouseover():给出提示信息
	  $("ul div li label").mouseover(function(event){
		  //获取label标签的文本值
		  var txt=$(this).text();
		  //获取用于信息的提示的元素对象，设置提示信息
		  $("#tips").html("<b>点击查看【"+txt+"】信息</b>");
		  
		  //控制提示信息显示的位置  left  top
		  $("#tips").css("left",event.pageX+10);
		  $("#tips").css("top",event.pageY+5);
		  
		  //显示
		  $("#tips").show();
		  
		  //为当前的label标签增加一个class样式
		  $(this).addClass("lightlabel");
	  });
	  
	  //鼠标离开mouseout():的时候清空提示信息 
	  $("ul div li label").mouseout(function(){
		  //获取用于信息的提示的元素对象，清空提示信息
		  $("#tips").html("");
		  
		  //设置提示信息的位置   归于原点   0  0
		   $("#tips").css({left:"0","top":"0"});
		  
		  //将提示的元素对象div隐藏
		  $("#tips").hide();
		  //为当前的label标签移除一个class样式  lightlabel
		  $(this).removeClass("lightlabel");
	  });
  });
  
  //获取新闻
  $(function(){
	  $("div[name='divNewsContainer'] label").click(function(){
		   var ntype=$(this).attr("ntype");
		  //发送ajax请求
		  $.ajax({
			  url:"news.action",
			  type:"get",
			  data:{"ntype":ntype},
			  dataType:"json",
			  success:function(result){
				  //进行页面显示控制
				  
				  var content=$("#content");
				  content.empty();
				  //遍历进行新闻追加
				  for(var i=0;i<result.length;i++){
					  var news=result[i];
					  content.append("<a href='#'>"+news.title+"("+news.time+")"+"</a><br/>"); 
				  }
			  },
			  error:function(xhr,text,message){
				  console.info(xhr);
				  //console.info(text);
				  //console.info(message);
				  if(xhr.status==500){
					  alert("服务器异常，请联系管理员");
				  }
			  }
		  });
	  });
  });
  
  
  //获取产品log
  $(function(){
	  $("div[name='divProductsContainer'] label").click(function(){
		  //获取产品 牌名称
		  var p=$(this).attr("product");
		  var url="product.action";
		  var data={"p":p};
		  //进行显示控制
		  $("#content").load(url,data);
	  });
  });
</script>
<body>
	<p>
		<input type="button" name="openclose" id="openclose" value="展开/折叠" />
		<input type="button" name="horder" id="horder" value="横向排列" /> 
		<input type="button" name="vorder" id="vorder" value="纵向排列" />
	</p>
	<ul>
		<img id="imgOnOff" name="imgOnOff" src="img/open.gif" />
		<label id="lblNews">&nbsp;国际动态</label>
		<div name="divNewsContainer">
			<li><img src="img/item.gif" /><label id="lblLocal" ntype="local">国内新闻</label></li>
			<li><img src="img/item.gif" /><label id="lblInternational" ntype="international">国际新闻</label></li>
		</div>
	</ul>
	<br />
	<ul>
		<img id="imgOnOff" name="imgOnOff" src="img/open.gif" />
		<label id="lblProducts">&nbsp;产品展示</label>
		<div name="divProductsContainer">
			<li><img src="img/item.gif" /><label id="lblAdidas" product="adidas">阿迪达斯</label></li>
			<li><img src="img/item.gif" /><label id="lblNike" product="nike">NIKE</label></li>
			<li><img src="img/item.gif" /><label id="lblKuangWei" product="converse">匡威</label></li>
			<li><img src="img/item.gif" /><label id="lblAddNice" product="addnice">AddNice</label></li>
			<li><img src="img/item.gif" /><label id="lblLiNing" product="lining">李宁</label></li>
			<li><img src="img/item.gif" /><label id="lblLee" product="lee">Lee</label></li>
		</div>
	</ul>
	<div id="tips"></div>
	<div id="content"></div>
</body>
</html>

在这里插入图片描述

Code-Ben
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
75款常用的jquery特效前端网页代码
04-24
在IT行业中，前端开发是构建网站用户界面的关键部分，而jQuery作为一款强大的JavaScript库，极大地简化了DOM操作、事件处理和动画...总之，掌握并灵活运用jQuery特效，能够极大地提升前端开发效率和网页的用户体验。
疯狂前端开发讲义：jQuery+AngularJS+Bootstrap前端开发实战
02-15
《疯狂前端开发讲义：jQuery+AngularJS+Bootstrap前端开发实战》是一本专注于前端开发的实践教程，由知名IT作者李刚编著。本书旨在帮助读者深入理解和掌握前端三大热门框架——jQuery、AngularJS和Bootstrap的使用...
web前端-jQuery
jinchenpeng的博客
07-02 251
1.jQuery概述 1.1 前端工程师的工作 一个前端开发工程师的成长之路，一定要制作页面特效。而jQuery就是制作页面特效的时候大家都比较青睐的一种解决方案。 1.2 jQuery简介 jQuery是一个快速、简洁的JavaScript框架 写更少的代码，做更多的事情。 1.3 整体感知 首先我们使用jQuery的时候，必须要先引包（和我们之前自己封装的xxx.js一样）： <script type="text/javascript" src="jqu...
html+js 简单静态网页设计
Gamedev
04-18 2万+
一、 实验目的： 1. 复习使用记事本编辑网页的方法。 2. 熟悉不同表单控件类型的应用。 3. 练习使用记事本在网页中添加表单与表单元素。 二、 实验内容： 根据提供的素材设计在线调查问卷。 三、 实验要求： 1. 熟练掌握使用记事本进行简单网页编辑的方法。 2. 能够区分不同表单元素的应用场景。 3. 掌握表单与表单元素的元素名和属性对。 四、 实验学时：
前端之JQuery：JQuery文档操作
weixin_30357231的博客
08-03 60
jquery之文档操作 一、相关知识点总结1、CSS .css() - .css("color") -> 获取color css值 - .css("color", "#ff0000") -> 设置值 - .css({"color": "#cccccc", "border": "1px solid #ff0000"}) -&...
响应式网页设计之jQuery基础
GSCY
06-10 903
jQuery基础 补充：文章中所有的代码都是写在html文件中，JS代码需要用< script >< /script >标签包起来。 文章目录jQuery基础一、jQuery简介1. 引入jQuery2. jQuery版本二、jQuery对象三、入口函数四、jQuery基本使用五、jQuery选择器 一、jQuery简介 jQuery是一个快速、简洁的JavaScript框架，它封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档
jQuery网页开发案例:jQuery 概述及jQuery 的基本使用
薛定谔的猫
10-25 611
库仓库： 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。JavaScript库即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。简单理解： 就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。比如。
Web前端学习笔记15：Web前端开发：jQuery总结
JasonYangQ的博客
08-17 7047
文章目录day01 - jQuery1.1. jQuery 介绍1.1.1 JavaScript 库1.1.2 jQuery的概念1.1.3 jQuery的优点1.2. jQuery 的基本使用1.2.1 jQuery 的下载1.2.2. 体验jQuery1.2.3. jQuery的入口函数1.2.4. jQuery中的顶级对象$1.2.5. jQuery 对象和 DOM 对象1.2.6. jQuery 对象和 DOM 对象转换1.3. jQuery 选择器1.3.1. 基础选择器1.3.2. 层级选择
前端网页开发实例入门
qq_54525448的博客
08-05 1798
前端网页开发实例入门
【前端开发】快速掌握jQuery开发
lsj960922的博客
07-05 530
简介： jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交...
web前端html期末大作业实例 (1500套)
热门推荐
HTML网页设计
10-03 9万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
web前端-微信小程序开发学习
最新发布
yong_19930826的博客
03-21 6607
微信小程序和普通网页开发的区别：关于微信公众号平台如何注册小程序的账号， 如何获取小程序的appid， 如何下载小程序的开发工具， 这里我不做过多叙述。大家自行百度安装开发环境。创建组件：在项目的根目录中，鼠标右键创建components->test文件夹在新建的components -> test文件夹上，鼠标右键，点击新建components输入组件的名称之后回车，会自动生成组件对应的4个文件，后缀名分别为为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中。
程序员前端网页设计作业
03-01
在程序员的前端网页设计作业中，我们探讨的主题涵盖了前端开发的核心技术、设计原则以及实际项目实施的各个环节。前端开发是构建互联网应用的重要组成部分，它主要关注用户与网站或应用程序的交互部分。以下是一些...
前端开发总结精髓：75种jquery特效源码
10-12
8. **响应式设计**：在现代前端开发中，响应式设计是必须考虑的，jQuery可以配合CSS3 Media Queries实现不同屏幕尺寸下的适配。 9. **表单处理**：jQuery可以方便地验证用户输入，如`$.trim()`去除空白，`$....
前端开发Jquery
03-24
通过这个“前端开发jQuery”视频教程，你将能够熟练地利用jQuery进行前端开发，提高工作效率，创建交互性强、用户体验良好的网页应用。无论你是初学者还是有经验的开发者，都可以从中受益匪浅。记得实践是检验真理的...
前端开发网页设计(五)：JavaScript(JS)学习(3):实战一些小JS项目
weixin_43070331的博客
07-28 1564
源码下载链接：https://pan.baidu.com/s/1Gtmh5LESCFyAjVNSuEb9BQ 提取码：q5zz JavaScript学习 16.实战:JS的form表单校验(网页注册校验) 17.实战:JS实现模拟淘宝 18.实战:JS动态操作表格实现增删改、全选checkbox 19.实战:JS实现双搜项目 16.实战:JS的form表单校验(网页注册校验) &l...
前端开发网页设计(一) ：HTML学习
weixin_43070331的博客
07-25 1494
HTML学习： 超文本标记语言        安利前端开发工具：Hbuilder ！ 下载资源： HTML学习： head标签 body标签 图片标签 超链接标签 表格标签 内嵌和框架标签 表单 1.HTML的head标签 <html> <head> <!--head标签中主要配...
前端开发网页设计(三)：JavaScript(JS)学习
weixin_43070331的博客
07-27 831
源码下载 JavaScript学习 1.JS的声明和引入 2.JS的变量学习 2.JS的变量学习 1.JS的声明和引入 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js的声明呵和引入</title> <!--声明js代码域...
抽象类(Abstract)与接口(Interface)的基本使用以及区别!
weixin_43070331的博客
07-14 639
Abstract与Interface的基本使用以及区别! 1.抽象类(Abstract): 1.1 抽象类的基本特性： 含有抽象方法的类必须是被定义为抽象类。 抽象类中的方法可以是抽象方法也可以是具体实现方法。 子类继承抽象类必须重写其中的所有抽象方法。 抽象类不能被实例化；即不能new 对象。 抽象类可以包含属性方法、构造方法，但是不饿能用构造方法来new 实例；如果想要使用，必须先写子类继...
精通jQuery：交互设计与网页开发进阶指南
"Learning jQuery PDF 是一本关于使用jQuery进行网页交互设计和开发的书籍...本书适用于想要学习或提高jQuery技能的前端开发者，通过实例和详细的解释，帮助读者掌握如何利用jQuery实现更好的网页交互设计和动态效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值