菜单 搜索
首页 前端知识 学习Java的日子 Day67 jQuery，选择器

学习Java的日子 Day67 jQuery，选择器

2024-08-18 22:08:57 前端知识 前端哥 571 566 我要收藏

jQuery

1.了解jQuery

jQuery是由美国人John Resig于2006年创建的一个开源项目，如今已发展成为集JavaScript、CSS、DOM、Ajax于一体的强大框架体系，它的主旨是：以更少的代码，实现更多的功能（Write less，do more）

jQuery是JavaScript外部脚本（库），集JavaScript、CSS、DOM、Ajax于一体的强大框架体系

1.1 jQuery的基本功能

1.访问和操作DOM元素

2.控制页面样式

3.对页面事件的处理

4.与Ajax技术的完美结合

5.大量插件在页面中的运用

1.2 搭建jQuery开发环境

jQuery其实就是一个JavaScript文件，因此，搭建jQuery开发环境十分简单。首先，我们准备了两份jQuery文件

注意：使用jquery，必须建一个js文件夹，导包

在这里插入图片描述

<script type="text/javascript" src="js/jquery-1.8.2.js"></script>

2.初始jQuery

jQuery的页面加载事件：不会覆盖，整个页面的html元素全部加载完毕后触发的事件

$(document).ready(function(){

​ …

})

JS的页面加载事件：会覆盖，整个页面的html元素和资源全部加载完毕后触发的事件

window.onload = function(){

​ …

}

区别：

1.执行时间不同：$(document).ready在页面框架下载完毕后就执行；而window.onload必须在页面全部加载完毕（包含图片下载）后才能执行。

2.执行数量不同：$(document).ready可以重复写多个，并且每次执行结果不同；而window.onload尽管可以执行多个，但仅输出最后一个执行结果，无法完成多个结果的输出

( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) 可以简写成 (document).ready(function(){})可以简写成 (document).ready(function())可以简写成(function(){ … })

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			//jQuery的页面加载事件：不会覆盖，整个页面的html元素全部加载完毕后触发的事件
//			$(document).ready(function(){
//				alert("HelloWorld...1");
//			})

			//JS的页面加载事件：会覆盖，整个页面的html元素和资源全部加载完毕后触发的事件
//			window.onload = function(){
//				alert("HelloWorld...1");
//			}

			//jQuery页面加载事件简化版
			$(function(){
				alert("HelloWorld...1");
			})
			
			
		</script>
	</head>
	<body>
		
		<script type="text/javascript">
			
//			$(document).ready(function(){
//				alert("HelloWorld...2");
//			})

//			window.onload = function(){
//				alert("HelloWorld...2");
//			}
			
            //简写
			$(function(){
				alert("HelloWorld...2");
			})
			
		</script>
		
	</body>
</html>

3.jQuery选择器

3.1 jQuery选择器的分类

基本选择器、层次选择器、过滤选择器（表单选择器）

3.2 基本选择器

基本选择器是jQuery中使用最频繁的选择器，它由id、class、标签、通配符组成，通过基本选择器可以实现大多数页面元素的查找

3.2.1 通配符选择器 *

面试题：jQuery的选择器和CSS的选择器的区别

CSS的选择器：选择对应的标签，设置样式

jQuery的选择器：选择对应的标签，操作内容、属性、样式，设置各种事件等等

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				$("*").css("color","red");
			})
		</script>
	</head>
	<body>
		
		<p>用良心做教育</p>
		<p>做真实的自己</p>
		
		<span>匠心育人</span>
		<span>初心至善</span>
		
	</body>
</html>
3.2.2 id选择器
<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
				
		$("#h1_id").css("color","red");
	})
</script>
</head>
<body>
		
	<h1 id="h1_id">一级标签</h1>
	<h2>二级标签</h2>
	<h3>三级标签</h3>
	<h4>四级标签</h4>
	<h5>五级标签</h5>
	<h6>六级标签</h6>
		
</body>
</html>
3.2.3 class选择器 .
<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
				
		$(".h1_class").css("color","red");
	})
</script>
</head>
<body>
		
	<h1 class="h1_class">一级标签</h1>
	<h2>二级标签</h2>
	<h3 class="h1_class">三级标签</h3>
	<h4>四级标签</h4>
	<h5 class="h1_class">五级标签</h5>
	<h6>六级标签</h6>
</body>
</html>
3.3.4 标签选择器
<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
				
		$("p").css("color","red");
	})
</script>
</head>
<body>
		
	<p>用良心做教育</p>
	<p>做真实的自己</p>
	
</body>

3.3 群组选择器 ,

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
				
		$("h1,h3,h5,p").css("color","red");
	})
</script>
</head>
<body>
		
	<h1>一级标签</h1>
	<h2>二级标签</h2>
	<h3>三级标签</h3>
	<h4>四级标签</h4>
	<h5>五级标签</h5>
	<h6>六级标签</h6>
		
	<p>用良心做教育</p>
	<p>做真实的自己</p>
		
</body>
</html>

3.4 派生/上下文关系选择器

层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素

选择器功能描述
ancestor descendant根据祖先元素匹配所有的后代元素
parent＞child根据父元素匹配所有的子元素
prev+next匹配prev后的相邻元素
prev～siblings匹配prev后面的所有兄弟元素
3.4.1 后代选择器 空格
<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){

		$("ul a").css("color","red");
	})
</script>
</head>
<body>
		
		<ul>
			<li>
				<a href="#">超链接1</a>
			</li>
			<li>
				<a href="#">超链接2</a>
			</li>
			<li>
				<a href="#">超链接3</a>
			</li>
		</ul>
		
		<ul>
			<li>
				<a href="#">超链接4</a>
			</li>
			<li>
				<a href="#">超链接5</a>
			</li>
			<li>
				<a href="#">超链接6</a>
			</li>
		</ul>
		
		<a href="#">超链接7</a>
		<a href="#">超链接8</a>
		<a href="#">超链接9</a>
	</body>
</html>
3.4.2 子代选择器 >
<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){

		$("li>a").css("color","red");
	})
</script>
</head>
<body>
		
		<ul>
			<li>
				<a href="#">超链接1</a>
			</li>
			<li>
				<a href="#">超链接2</a>
			</li>
			<li>
				<a href="#">超链接3</a>
			</li>
		</ul>
		
		<ul>
			<li>
				<a href="#">超链接4</a>
			</li>
			<li>
				<a href="#">超链接5</a>
			</li>
			<li>
				<a href="#">超链接6</a>
			</li>
		</ul>
		
		<a href="#">超链接7</a>
		<a href="#">超链接8</a>
		<a href="#">超链接9</a>
	</body>
</html>
3.4.3 相邻兄弟选择器 +

注意：选择后者

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
        
		$("a+a").css("color","red");
	})
</script>
</head>
<body>
		
		<ul>
			<li>
				<a href="#">超链接1</a>
			</li>
			<li>
				<a href="#">超链接2</a>
			</li>
			<li>
				<a href="#">超链接3</a>
			</li>
		</ul>
		
		<ul>
			<li>
				<a href="#">超链接4</a>
			</li>
			<li>
				<a href="#">超链接5</a>
			</li>
			<li>
				<a href="#">超链接6</a>
			</li>
		</ul>
		
		<a href="#">超链接7</a>
		<a href="#">超链接8</a>
		<a href="#">超链接9</a>
	</body>
</html>
3.4.4 后续选择器 ~
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				/*
				 * 派生/上下文关系选择器 之 后续选择器
				 * 注意：选择后者
				 */
				$("ul~a").css("color","red");
			})
		</script>
	</head>
	<body>
		
		<ul>
			<li>
				<a href="#">超链接1</a>
			</li>
			<li>
				<a href="#">超链接2</a>
			</li>
			<li>
				<a href="#">超链接3</a>
			</li>
		</ul>
		
		<ul>
			<li>
				<a href="#">超链接4</a>
			</li>
			<li>
				<a href="#">超链接5</a>
			</li>
			<li>
				<a href="#">超链接6</a>
			</li>
		</ul>
		
		<a href="#">超链接7</a>
		<a href="#">超链接8</a>
		<a href="#">超链接9</a>
		
		<p>用良心做教育</p>
		
		<a href="#">超链接10</a> //也是有效果的
		<a href="#">超链接11</a> //也是有效果的
		<a href="#">超链接12</a> //也是有效果的
	</body>
</html>

3.5 简单过滤选择器

简单过滤选择器是使用最广泛的一种

注意：过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号（:）开头

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
				
		/**
		 * 选择第一个元素
		 * 		$("li:first").css("color","red");
		* 
		* 选择最后一个元素
		* 		$("li:last").css("color","red");
		* 
		* 选择不是第一个元素
		* 		$("li:not(:first)").css("color","red");
		* 
		* 选择下标是偶数的元素
		* 		$("li:even").css("color","red");
		* 
		* 选择下标是奇数的元素
	    * 		$("li:odd").css("color","red");
		* 
		* 选择指定下标的元素
		* 		$("li:eq(2)").css("color","red");
		* 
		* 选择大于下标的元素
		* 		$("li:gt(2)").css("color","red");
		* 
		* 选择小于下标的元素
		* 		$("li:lt(2)").css("color","red");

		*/
	})
</script>
</head>
<body>
		
	<ul>
		  <li>list item 1</li>
		  <li>list item 2</li>
		  <li>list item 3</li>
		  <li>list item 4</li>
		  <li>list item 5</li>
	</ul>
		
</body>
</html>

3.6 内容过滤选择器

内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		
		/**
		 * 选择包含指定内容的元素
		 * 		$("div:contains('John')").css("color","red");
		 * 
		 * 选择没有内容的元素
		 * 		$("div:empty").text("用良心做教育");
		 * 
		 * 选择包含某个子标签的元素
		 * 		$("div:has(p)").css("color","red");
		 * 
		 * 选择包含子标签或内容的元素
		 * 		$("div:parent").text("用良心做教育");
		 */	
	})
</script>
</head>
<body>
		
	<div>John Resig</div>
	<div><p>George Martin</p></div>
	<div>Malcom John Sinclair</div>
	<div>J. Ohn</div>
	<div></div>
		
</body>
</html>

3.7 可见性过滤选择器

可见性过滤选择器根据元素是否可见的特征获取元素

寻找页面中被隐藏的元素

选择不可见的元素

$(“tr:hidden”).css(“display”,“block”); //显示内容

选择可见的元素

$(“tr:visible”).css(“color”,“red”);

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
				
		/**
		 * 选择不可见的元素
		 * 		$("tr:hidden").css("display","block");
		 * 
		 * 选择可见的元素
		 * 		$("tr:visible").css("color","red");
		 */					
	})
</script>
</head>
<body>
		
	<table>
	<tr style="display:none">
	 	<td>Value 1</td>
	 </tr>
	  <tr>
	  	<td>Value 2</td>
	  </tr>
	</table>
		
</body>
</html>

3.8 属性过滤选择器

属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以“[”号开始、以“]”号结束

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
				
		/**
		 * 选择指定属性的元素
		 * 		$("input[placeholder]").css("color","red");
		 * 
		 * 选择指定属性+值的元素
		 * 		$("input[placeholder='请输入账号...']").css("color","red");
		 * 
		 * 选择指定属性+不等于值的元素
		 * 		$("input[name!='username']").css("color","red");
		 * 
		 * 选择指定属性+以某个值开头的元素
		 * 		$("input[name^='n']").css("color","red");
		 * 
		 * 选择指定属性+以某个值结尾的元素
		 * 		$("input[name$='word']").css("color","red");
		 * 
		 * 选择指定属性+包含某个值的元素
		 * 		$("input[name*='am']").css("color","red");
		 * 
		 * 选择多个属性的元素
		 * 		$("input[name][placeholder]").css("color","red");
		 */
				
			})
		</script>
	</head>
	<body>
		
		<form action="服务器地址" method="post">
			
			账号：<input type="text" name="username" placeholder="请输入账号..."/>
				<br />
			密码：<input type="password" name="password" placeholder="请输入密码..."/>
				<br />
			确认密码：<input type="password" name="repassword"/>
				<br />
			姓名：<input type="text" name="name"/>
				<br />
			昵称：<input type="text" name="nickName" placeholder="请输入昵称..."/>
				<br />
			性别：
				<input type="radio" name="sex" value="man" checked="checked"/>男
				<input type="radio" name="sex" value="woman"/>女
				<br />
			爱好：
				<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球
				<input type="checkbox" name="hobbies" value="basketball" checked="checked"/>篮球
				<input type="checkbox" name="hobbies" value="shop"/>购物
				<br />
			国籍：
				<select name="nationality">
					<option value="001">韩国</option>
					<option value="002">美国</option>
					<option value="003" selected="selected">中国</option>
					<option value="004">日本</option>
				</select>
				<br />
			
			<input type="submit" value="注册" />
		</form>
	</body>
</html>

3.9 子元素过滤选择器 :nth-child

选择指定的子元素(注意：JQuery选择器中只有nth-child的数字才是表示第几个元素，其余的都是下标)

$(“ul li:nth-child(1)”).css(“color”,“red”);

选择第一个子元素

$(“ul li:first-child”).css(“color”,“red”);

选择最后一个子元素

$(“ul li:last-child”).css(“color”,“red”);

选择只有一个子元素的元素

$(“ul li:only-child”).css(“color”,“red”);

注意：:nth-child(n)从1开始
<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
			
	$(function(){
		/**
		 * 选择指定的子元素(注意：JQuery选择器中只有当前选择器的数字才是表示第几个元素，其余的都是下标)
		 * 		$("ul li:nth-child(1)").css("color","red");
		 * 
		 * 选择第一个子元素
		 * 		$("ul li:first-child").css("color","red");
		 * 
		 * 选择最后一个子元素
		 * 		$("ul li:last-child").css("color","red");
		 * 
		 * 选择只有一个子元素的元素
		 * 		$("ul li:only-child").css("color","red");
		 */	
	})
			
</script>
</head>
<body>
		
	<ul>
	  <li>John</li>
	  <li>Karl</li>
	  <li>Brandon</li>
	</ul>
		
	<ul>
	  <li>Glen</li>
	  <li>Tane</li>
	  <li>Ralph</li>
	</ul>
		
	<ul>
	  <li>用良心做教育</li>
	</ul>
		
</body>
</html>

3.10 表单过滤选择器

在jQuery选择器中引入表单选择器，该选择器专为表单量身打造，通过它可以在页面中快速定位某表单对象

input，text，password，radio，checkbox等

:input 表示所有的表单标签

$(“:input”).css(“display”,“none”);

input 表示选择所有的input标签

$(“:input”).css(“display”,“none”);

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
			
	$(function(){
				
		/**
		 * :input 表示所有的表单标签
		 */
		$(":input").css("display","none");				
	})
			
</script>
</head>
<body>
		
	<form>
			
		输入框：<input type="text" /><br />
		密码框：<input type="password" /><br />
		单选框：
		<input type="radio" name="xxx"/>
		<input type="radio" name="xxx"/>
		<input type="radio" name="xxx"/>
		<br />

	</form>
		
</body>
</html>

3.11 表单属性过滤选择器

表单属性过滤选择器通过表单中的某对象属性特征获取该类元素，如enabled、disabled、checked、selected属性

选择可用表单元素

$(“input:enabled”).val(“用良心做教育”);

选择不可用表单元素

$(“input:disabled”).val(“用良心做教育”);

选择选中状态的单选框

alert($(“input[type=‘radio’]:checked”).val());

选择选中状态的下拉列表

alert($(“option:selected”).text());

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		/**
		* 选择可用表单元素
		* 		$("input:enabled").val("用良心做教育");
		* 
		* 选择不可用表单元素
		* 		$("input:disabled").val("用良心做教育");
		*/
				
		})
</script>
</head>
<body>
		
	<form>
		 <input name="email" disabled="disabled" />
		 <input name="id" />
	</form>
		
</body>
</html>


<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
								
		$("#btn").click(function(){
					
			//选择选中状态的单选框
			alert($("input[type='radio']:checked").val());
					
		})
				
	})
</script>
</head>
<body>
		
	<form>
		性别：
			<input type="radio" name="sex" value="man" checked="checked" />男
			<input type="radio" name="sex" value="woman" />女
			<input type="button" id="btn" value="普通按钮" />
	</form>
		
</body>
</html>


<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
								
		$("#btn").click(function(){
					
			//选择选中状态的下拉列表
			alert($("option:selected").text());
					
		})
				
	})
</script>
</head>
<body>
		
	<form>
		省份：
			<select>
				<option>四川</option>
				<option>湖南</option>
				<option>湖北</option>
				<option>广东</option>
				<option>广西</option>
			</select>
			<input type="button" id="btn" value="普通按钮" />
	</form>
</body>
</html>

3.12 使用总结

监听器：$(“#myId”).click(function() { … })

设置CSS样式：$(“#content”).css(“display”, “none”);

获取到CSS 内key 的value: $(“#content”).css(“display”)

设置属性：$(“#head span img”).attr(“src”, “…/img/open.gif”);

获取到属性值：$(“#head span img”).attr(“src”);

设置内容：$(this).html(“更多”); $(this).text(“更多”);

获取内容：$(this).html(); $(this).text();

3.13 选择器综合案例

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择</title>
		<style type="text/css">
			body{font-size:13px}
         	#all{border:solid 1px #666;width:320px;overflow:hidden}
         	#all #head{background-color:#eee;padding:8px;height:18px;cursor:hand}
         	#all #head h3{padding:0px;margin:0px;float:left}
         	#all #head span{float:right;margin-top:3px}
         	#all #content{padding:8px}
         	#all #content ul {list-style-type:none;margin:0px;padding:0px}
         	#all #content ul li{ float:left;width:95px;height:23px;line-height:23px}
         	#all #btn{float:right;padding-top:5px;padding-bottom:5px}
		</style>
		<script type="text/javascript" src="../js/jquery-1.8.2.js">
		</script>
		<script type="text/javascript">
			$(function(){
				
                
				$("img").click(function(){
					if($(this).attr("src") == "../img/up.bmp"){
						
						$(this).attr("src","../img/down.bmp");
						$("#content").css("display","none");
						
					}else if($(this).attr("src") == "../img/down.bmp"){
						
						$(this).attr("src","../img/up.bmp");
						$("#content").css("display","block");
					}
				})
				
                
				$("#btn>a").click(function(){
					if($(this).text() == "简化"){
						
						$(this).text("更多");
						$("ul>li:gt(5):not(:last)").css("display","none");
						
					}else if($(this).text() == "更多"){
						
						$(this).text("简化");
						$("ul>li:gt(5):not(:last)").css("display","block");
						
					}
				})
				
                
			})
		</script>
	</head>
	<body>
		<div id="all">
			<div id="head">
				<h3>学科分类</h3>
				<span><img src="../img/up.bmp"/></span>
			</div>
			<div id="content">
				<ul>
					<li>
						<a href="#">JavaEE</a><i> (1110) </i></li>
					<li>
						<a href="#">PHP</a><i> (230) </i></li>
					<li>
						<a href="#">BIG</a><i> (1430) </i></li>
					<li>
						<a href="#">Android</a><i> (1560) </i></li>
					<li>
						<a href="#">IOS</a><i> (870) </i></li>
					<li>
						<a href="#">H5</a><i> (1460) </i></li>
					<li>
						<a href="#">VR</a><i> (1450) </i></li>
					<li>
						<a href="#">小程序</a><i> (1780) </i></li>
					<li>
						<a href="#">演讲</a><i> (930) </i></li>
					<li>
						<a href="#">PPT</a><i> (3450) </i></li>
					<li>
						<a href="#">Word</a><i> (980) </i></li>
					<li>
						<a href="#">其他</a><i> (3230) </i></li>
				</ul>
				<div id="btn">
					<a href="#">简化</a>
				</div>
			</div>
		</div>
	</body>
</html>

4.jQuery对象和DOM对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象

注意：jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法

dom→jQuery：$(dom)

jquery→dom：jquery[0]

4.1 JS对象转jQuery对象

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
			
	$(function(){
				
		//JS对象
		var btn = document.getElementsByTagName("button")[0];
						
		//转jQuery对象，直接就是这个$(btn)
		$(btn).click(function(){
			alert("用良心做教育");
		})
				
			})
</script>
</head>
<body>
		
	<button>普通按钮</button>
		
</body>
</html>

4.2 jQuery对象转JS对象

<script src="../js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
			
	$(function(){
				
		//注意：jQuery对象只能转成JS数组
		var btnArr = $("button");
				
		btnArr[0].onclick = function(){
			alert("做真实的自己");
		}
	})
</script>
</head>
<body>
		
	<button>普通按钮</button>
		
</body>
</html>
转载请注明出处或者链接地址：https://www.qianduange.cn//article/16056.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

你真的熟练运用 HTML5 了吗，这10 个酷炫的 H5 特性你会几个

2024-06-19 08:06:22

HTML浏览CAD（WEB CAD）二次开发常用的CAD编辑功能的详细教程

2024-08-25 23:08:25

HTML5 解决方案：面向 HTML5 开发者的基本技巧（一）

2024-08-25 23:08:50

无涯教程-HTML5 - MathML

2024-08-25 23:08:46

【博主推荐】HTML5好看的酷酷的个人简历、个人主页、个人网站源码

2024-08-25 23:08:37

HTML5简明教程系列之HTML5基础（一）

2024-08-25 23:08:55

手把手教你用Go开发客户端软件（使用Go HTML）

2024-08-25 23:08:52

第7节课：CSS基础与选择器——打造网页视觉魅力

2024-08-25 23:08:52

基于HTML美食餐饮文化项目的设计与实现 HTML CSS上海美食介绍网页(8页) 大学生美食文化网站制作 简单餐饮文化网页设计成品

2024-05-05 21:05:49

【HTML CSS】在HTML中优雅地展示图片：技巧与实践

2024-08-25 23:08:44

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
3

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
4

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
5

npm的使用

2024-08-18 00:08:131000
6

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
7

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
8

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
9

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
10

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！