Web前端开发（七）--正则表达式，jQ选择器，操作元素，尺寸_前端正则表达式长宽高取规则字符-程序员宅基地

技术标签： Web前端前端

一、正则表达式

使用单个字符，区间所符合某个规则的字符串。

声明正则对象

1.new RegExp();

使用这个方法时需要注意，如果有转义字符，需要进行两次转义。

2.var reg=/…/;

内置方法

1.text()

返回匹配结果，成功为true，不成功为false。

2.exec()

匹配成功返回时数组，不成功返回null。

转义字符

\w 单个的数字字母下划线

\W 单个的非数字字母下划线

\d 单个数字

\D 单个非数字

\s 单个空白符

\S 单个非空白符

特殊元字符

. 单个的除换行符之外的任意字符

* 匹配0次或多次（贪婪）

+ 匹配1次或多次（贪婪）

？尽可能少的匹配，一般配合*和+使用（禁止贪婪）

{} 限制匹配次数

{n} 只匹配n次

{n,} 至少匹配n次

{n,m} 至少n次，至多m次，n到m之间也可以

[] 限制匹配的类型范围

[]中的特殊符号，代表单纯的字符，无其他意义

[]中的^，取反

() 子组，一般不会影响整个规则，会将子组匹配到的内容，单独作为一个新的元素返回

| 或者，一般配合子组使用

^ 以…开头

$ 以…结尾

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>正则表达式</title>
</head>
<body>
	<script type="text/javascript">
		var str='18693041795&176115aa.93298';

	//制定一个规则对象
		//1.使用系统内置的RegExp()
		//如果有转义字符，需要两次转义才可以
		//2.直接定义（推荐使用）
		var reg=RegExp('8');
		var reg=/a/;

	//------------------------------------------
	//正则表达式，由字符串和转义字符还有特殊字符组成
	//普通字符
	//转义字符
		// \w匹配单个的数字字母下划线
		var reg=/\w/;
		// \W匹配单个非数字字母下划线
		var reg=/\W/;
		// \d匹配单个数字
		var reg=/\d/;
		// \D匹配单个非数字
		var reg=/\D/;
		// \s匹配单个空白符
		var reg=/\s/;    // \t \n 空格皆是
		// \S匹配单个的非空白符
		var reg=/\S/;

	//特殊字符 . * + ? {} [] () | ^ $
		// .除了换行符以外的单个任意字符
		var reg=/./;
		// *限制匹配次数，0次或者多次，如果第一个就不符合直接返回；(贪婪)如果有连续的符合要求，都匹配直到不符合为止
		var reg=/.*/;
		// +至少匹配1次或者多次(贪婪)
		var reg=/.+/;
		// ?禁止贪婪，尽可能少的匹配
		var reg=/.+?/;
		// {}限制匹配的次数
		// {n,}至少匹配n个
		var reg=/a{3,}/;
		// {n,m}最少要有n个，最多m个，n到m间也符合要求
		var reg=/\d{3,8}/;
		// []类型范围，一个中括号只匹配一次
		var reg=/[b-z]/;
		var reg=/[a-zA-Z_]/;
		// 匹配除了字母和下划线的字符
		var reg=/[^a-zA-Z_]/;    //中括号中的^表示取反
		var reg=/[.]/;    //中括号内的.*+就代表它本身的字符，没有其他意义
		//()子组，不会对整个规则产生影响，只是将子组当中匹配到的内容作为新的元素返回
		// |或，一般配合子组使用，多个条件
		var str='[email protected]'
		var reg=/\w+@qq[.](com|cn|org)/;

	//内置方法
		//test()返回布尔值
		//如果匹配成功返回true，没有成功返回false
		//exec()
		//如果匹配成功返回匹配结果组成的数组，没有成功返回null
		var res1=reg.test(str);
		var res2=reg.exec(str);
		console.log(res1);
		console.log(res2);
	</script>
</body>
</html>

练习

用户名格式匹配

6-8位，包含数字字母下换线，以数字开头

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>正则表达式-用户名格式匹配</title>
</head>
<body>
	<form action="">
		用户名：<input type="text" id="uname" name="uname" placeholder="请输入用户名"><span id="title"></span><br>
		<button id="btn">提交</button>
	</form>

	<script type="text/javascript">
		//当用户获取焦点时，给出提示信息
		//当用户输入完内容，失去焦点时，判断用户输入的格式是否正确
		//给出是否正确的提示
		var Inp=document.getElementById('uname');
		var Tit=document.getElementById('title');
		var Btn=document.getElementById('btn');

		Inp.onfocus=function() {
			Tit.innerHTML='请输入6-8位，以数字开头，由数字字母下划线组成的用户名';
			Tit.style.color='#c4c4c4';
		};
		Inp.onblur=function(){
			var val=Inp.value;
			if(val.length==0){
				Tit.innerHTML='您没有输入用户名';
				Tit.style.color='#f00';
				btn.disabled=true;
				return ;
			}
			//限制位数
			var reg1=/^\d\w{5,7}$/;
			//有字母
			var reg2=/[a-zA-Z]/;
			//有下划线
			var reg3=/[_]/;
			if(reg1.test(val)&&reg2.test(val)&&reg3.test(val)){
				btn.disabled=false;
				Tit.innerHTML='成功';
				Tit.style.color='green';
				Tit.style.fontWeight='bold';
			}else{
				btn.disabled=true;
				Tit.innerHTML='格式有误，请检查后重新设置';
				Tit.style.color='red';
			}
		}
	</script>
</body>
</html>

二、jQuery简介

jQuery是原生js的封装库，将原生js方法进行封装，简化了原生js的操作。

版本选择

有1.x 2.x 3.x版本。

2.x和3.x不兼容低版本浏览器。

三、jQuery的使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQ</title>
	<script src="./jquery-1.8.3.min.js"></script>
</head>
<body>
	<script type="text/javascript">
		//判断是否导入成功
		console.log($);
	</script>
</body>
</html>

基础选择器

id选择器

标签选择器

类选择器

并列选择器

后代选择器

属性选择器

过滤选择器

：first 获取第一个元素

：last 获取最后一个元素

eq 获取指定索引的元素

关系选择器

children() 获取所有的子元素

prev() 获取前一个同级元素

next() 获取后一个同级元素

siblings() 获取除自身意外的所有同级元素

parent() 获取父元素

parents() 获取先辈元素

find() 在父元素中查找指定的子元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQ选择器</title>
	<script src="./jquery-1.8.3.min.js"></script>
	<style type="text/css">
		*{margin:0;padding:0;list-style: none}
		.header{
			min-width:960px;
			overflow: hidden;
			border:1px solid #c4c4c4;
		}
		.center{
			
			width:960px;
			height:90px;
			margin:0 auto;
		}
		.header .logo{
			margin-top:10px;
			float:left;
		}
		.nav_top{
			width:685px;
			float:right;
			/*background:red;*/
			margin-top:10px;
			margin-left:10px;
		}
		.nav_top li{
			float:left;
			width:90px;
			border:1px solid green;
			line-height:65px;
			margin-left:-1px;
			text-align: center;

		}
		.content{
			width:960px;
			min-height:500px;
			margin:10px auto;
			overflow: hidden;
			border:#c4c4c4 solid 1px;
		}
		.content ul{
			margin-top:10px;
			margin-bottom:10px;
		}
		.content li{
			width:225px;
			height:300px;
			border:1px solid #c4c4c4;
			float:left;
			margin-left:10px;
			margin-top:10px;
			margin-bottom:10px;
		}
		.footer{
			width:960px;
			min-height:50px;
			margin:0 auto;

			border:#c4c3c4 solid 1px;
			text-align: center;
			line-height: 50px;
		}
	</style>
</head>
<body>
	<div class="header">
		<div class="center">
			<div class="logo">
				<img src="./image/logo.png">
			</div>
			<ul class="nav_top">
				<li id="item1">IT培训班</li>
				<li>在线网课</li>
				<li id="item3">教学服务</li>
				<li>就业服务</li>
				<li>学员信息</li>
				<li>师资团队</li>
				<li>关于我们</li>
			</ul>
		</div>	
	</div>
	<div class="content">
		<ul style="overflow: hidden;">
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li class="item5">
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
			<li>
				<img src="./image/1.jpg" width="100%">
			</li>
		</ul>
	</div>
	<div class="footer">
		 COPYRIGHTU就业
	</div>
	<script type="text/javascript">
		//基础选择器 id class 标签
		$('#item1').css('border','1px solid pink');
		$('.logo').css('border','1px solid red');
		$('li').css('background-color','#c4c4c4');

		//后代选择器
		$('.nav_top li').css('background-color','blue');
		//子选择器
		$('.logo>img').css('border','1px solid red');
		//并列选择器
		$('#item1,#item3').css('color','#fff');
		//属性选择器
		$('ul[class="nav_top"]').css('background-color','red');
		

		//获取第一个元素 :first
		$('li:first').css('background-color','red');
		//获取最后一个元素:last
		$('li:last').css('background-color','yellow');
		//获取指定索引的元素
		//eq通过索引获取元素，从0开始
			$('li:eq(1)').css('background-color','green');
			$('li:eq(7)').css('background-color','pink');
			// 获取第五张图片
			$('.content li').eq(4).css('background-color','red');
		//children()获取所有的子元素
		$('body').children().css('border','1px solid red');
		// prev()获取上一个同级元素
		$('.item5').prev().css('background-color','yellow');
		// next()获取下一个同级元素
		$('.item5').next().css('background-color','yellow');
		//siblings获取除自己以外的所有同级元素
		$('.item5').siblings().css('background-color','yellow');
		// parent()获取父元素
		$('.item5').parent().css('border','1px solid red');
		// parents()获取先辈元素
		// 如果不传参数,获取所有的先辈元素; 也可通过传参获取指定的先辈元素
		$('.item5').parents('.content').css('border','1px solid red');
		// find()在父元素中查找指定的子元素
		// 必须传参数
		$('html').find('li').css('background-color','yellow');
	</script>
</body>
</html>

四、jQuery元素操作

1.css设置

使用css()方法操作样式

$(…).css('样式key值','设置的值');

2.文本操作

innerHTML--->html()

innerText--->test()

3.表单值的操作

value属性--->val()

4.属性操作

attr()

removeAttr()

5.class操作

addClass()

removeClass()

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>元素操作</title>
	<script type="text/javascript" src="./jquery-1.8.3.min.js">
	</script>
	<style type="text/css">
		.item1{
			border:3px solid red;
		}
		.item2{
			font-size:30px;
		}
</style>
</head>
<body>
	<div class="box">div</div>
	<input type="text" value="哈哈哈"><br>
	<img src="image/1.jpg">
	<script type="text/javascript">
	//设置css样式(都是行内样式)
		//一次设置一个样式
		$('.box').css('width','200px');
		$('.box').css('height','200px');
		$('.box').css('background-color','pink');
		// 一次设置多个样式
		$('.box').css({width:'200px',height:'200px',backgroundColor:'yellow'});
	//文本内容的操作
		//html()
		$('.box').html('<p>I love you</p>');
		//text()
		$('.box').text('<p>I love you</p>');
	//表单值的操作
		//获取
		console.log($('input').val());
		//设置
		$('input').val('嘿嘿嘿');
	//属性操作
		//获取属性的值 传一个参数
		console.log($('img').attr('src'));
		//设置属性的值
			//一次设置一个
			$('img').attr('alt','图片');
			//一次设置多个
			$('img').attr({alt:'图片',title:'表情包'});
		//删除属性
		$('img').removeAttr('src');
	//class属性的操作
		//给.box追加类名，不删除原值
		$('.box').addClass('item1 item2');
		//删除类名，不传参数会把所有类名都删掉
		$('.box').removeClass();
	</script>
</body>
</html>

五、相关尺寸

1.获取元素相对文档的偏移位置

offset()

2.获取文档的滚动距离

scrollTop()

scrollLeft()

3.获取元素的宽高

width()

height()

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>相关尺寸</title>
	<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
	<style type="text/css">
		*{margin: 0px;padding: 0px;}
		body{
			width: 2500px;
			height: 2000px;
		}
		.box1{
			width: 200px;
			height:200px;
			background-color: #0f0;

			padding: 20px;
			border:3px solid red;
		}
		.box2{
			background-color: pink;
			width:300px;
		}
	</style>
</head>
<body>
	<div class="box1">1</div>
	<div class="box1 box2">2</div>
	<script type="text/javascript">
	//获取元素相对文档的偏移位置
	//offset(),返回的是一个包含top和left属性的对象
		//获取box1相对于文档的位置
		console.log($('.box1').offset());
		console.log($('.box2').offset());
	//获取文档的滚动距离
		//scrollTop()获取文档的垂直方向的滚动距离，返回的是一个数字
		console.log($(document).scrollTop());
		//scrollLeft()文档水平方向的滚动距离
		console.log($(document).scrollLeft());
	//获取元素的高度和宽度
		//width() height()
		//如果是多个元素对象获取的是第一个元素的
		//只获取元素的内容大小
		console.log($('.box1').width());
		console.log($('.box1').height());
		
		//innerWidth() innerHeight()
		//获取包含内间距，不包含边框的宽高
		console.log($('.box1').innerWidth(),'innerWidth');
		//outerWidth() outerHeight()
		//获取包含内边距，包含边框的宽高
		console.log($('.box1').outerWidth(),'outerWidth');

		//获取浏览器窗口的大小
		console.log($(window).width());
		//获取文档的宽高
		console.log($(document).width());
		console.log($(document).height());
	</script>
</body>
</html>

应用--楼层导航（有移动效果）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>楼层导航</title>
	<script src="./jquery-1.8.3.min.js"></script>
	<style type="text/css">
		*{margin: 0px;padding:0px;list-style: none;}
		.f1{
			height: 800px;
			background-color: pink;
		}
		.f2{
			height: 900px;
			background-color: yellow;
		}
		.f3{
			height: 870px;
			background-color: blue;
		}
		.f4{
			height: 500px;
			background-color: red;
		}
		.f5{
			height: 700px;
			background-color: #c4c4c4;
		}
		.f6{
			height: 850px;
			background-color: green;
		}
		.nav{
			position:fixed;
			right: 20px;
			top: 200px;
			width: 80px;
			background-color: #fff;
		}
		.nav li,.top{
			height: 50px;
			text-align: center;
			border: 1px solid #000;
			line-height: 50px;
		}
		.nav li:hover,.top:hover{
			background-color: azure;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="f1">1</div>
		<div class="f2">2</div>
		<div class="f3">3</div>
		<div class="f4">4</div>
		<div class="f5">5</div>
		<div class="f6">6</div>
	</div>
	<div class="nav">
		<ul>
			<li>一楼</li>
			<li>二楼</li>
			<li>三楼</li>
			<li>四楼</li>
			<li>五楼</li>
			<li>六楼</li>
		</ul>
		<div class="top">返回顶部</div>
	</div>
	
	<script type="text/javascript">
	//返回顶部
		$('.top').click(function(){
			var current=$(document).scrollTop();
			var flag=setInterval(function(){
				current-=50;
				$(document).scrollTop(current);
				if(current<=0){
					clearInterval(flag);
				}
			},10);
		});
	//楼层
		$('.nav li').click(function(){
			var nav_num=$(this).index()+1;
			var fp=$('.f'+nav_num).offset().top;
			var current=$(document).scrollTop();
			var flag=setInterval(function(){
				if(fp>current){
					current+=10;
					$(document).scrollTop(current);
					if(current>=fp){
						clearInterval(flag);
					}
				}else if(current>fp){
					current-=10;
					$(document).scrollTop(current);
					if(current<=fp){
						clearInterval(flag);
					}
				}else{
					clearInterval(flag);
				}
			},0.001);
		});
	</script>
</body>
</html>

本文链接：https://blog.csdn.net/qq_34244910/article/details/99876674

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

分布式光纤传感器的全球与中国市场2022-2028年：技术、参与者、趋势、市场规模及占有率研究报告_预计2026年中国分布式传感器市场规模有多大-程序员宅基地

文章浏览阅读3.2k次。本文研究全球与中国市场分布式光纤传感器的发展现状及未来发展趋势，分别从生产和消费的角度分析分布式光纤传感器的主要生产地区、主要消费地区以及主要的生产商。重点分析全球与中国市场的主要厂商产品特点、产品规格、不同规格产品的价格、产量、产值及全球和中国市场主要生产商的市场份额。主要生产商包括：FISO TechnologiesBrugg KabelSensor HighwayOmnisensAFL GlobalQinetiQ GroupLockheed MartinOSENSA Innovati_预计2026年中国分布式传感器市场规模有多大

07_08 常用组合逻辑电路结构——为IC设计的延时估计铺垫_基4布斯算法代码-程序员宅基地

文章浏览阅读1.1k次，点赞2次，收藏12次。常用组合逻辑电路结构——为IC设计的延时估计铺垫学习目的：估计模块间的delay，确保写的代码的timing 综合能给到多少HZ，以满足需求！_基4布斯算法代码

OpenAI Manager助手（基于SpringBoot和Vue）_chatgpt网页版-程序员宅基地

文章浏览阅读3.3k次，点赞3次，收藏5次。OpenAI Manager助手（基于SpringBoot和Vue）_chatgpt网页版

关于美国计算机奥赛USACO，你想知道的都在这_usaco可以多次提交吗-程序员宅基地

文章浏览阅读2.2k次。USACO自1992年举办，到目前为止已经举办了27届，目的是为了帮助美国信息学国家队选拔IOI的队员，目前逐渐发展为全球热门的线上赛事，成为美国大学申请条件下，含金量相当高的官方竞赛。USACO的比赛成绩可以助力计算机专业留学，越来越多的学生进入了康奈尔，麻省理工，普林斯顿，哈佛和耶鲁等大学，这些同学的共同点是他们都参加了美国计算机科学竞赛（USACO)，并且取得过非常好的成绩。适合参赛人群USACO适合国内在读学生有意向申请美国大学的或者想锻炼自己编程能力的同学，高三学生也可以参加12月的第_usaco可以多次提交吗

MySQL存储过程和自定义函数_mysql自定义函数和存储过程-程序员宅基地

文章浏览阅读394次。1.1 存储程序1.2 创建存储过程1.3 创建自定义函数1.3.1 示例1.4 自定义函数和存储过程的区别1.5 变量的使用1.6 定义条件和处理程序1.6.1 定义条件1.6.1.1 示例1.6.2 定义处理程序1.6.2.1 示例1.7 光标的使用1.7.1 声明光标1.7.2 打开光标1.7.3 使用光标1.7.4 关闭光标1.8 流程控制的使用1.8.1 IF语句1.8.2 CASE语句1.8.3 LOOP语句1.8.4 LEAVE语句1.8.5 ITERATE语句1.8.6 REPEAT语句。_mysql自定义函数和存储过程

半导体基础知识与PN结_本征半导体电流为0-程序员宅基地

文章浏览阅读188次。半导体二极管——集成电路最小组成单元。_本征半导体电流为0

随便推点

【Unity3d Shader】水面和岩浆效果_unity 岩浆shader-程序员宅基地

文章浏览阅读2.8k次，点赞3次，收藏18次。游戏水面特效实现方式太多。咱们这边介绍的是一最简单的UV动画（无顶点位移），整个mesh由4个顶点构成。实现了水面效果（左图），不动代码稍微修改下参数和贴图可以实现岩浆效果（右图）。有要思路是1，uv按时间去做正弦波移动2，在1的基础上加个凹凸图混合uv3，在1、2的基础上加个水流方向4，加上对雾效的支持，如没必要请自行删除雾效代码(把包含fog的几行代码删除)S..._unity 岩浆shader

广义线性模型——Logistic回归模型（1）_广义线性回归模型-程序员宅基地

文章浏览阅读5k次。广义线性模型是线性模型的扩展，它通过连接函数建立响应变量的数学期望值与线性组合的预测变量之间的关系。广义线性模型拟合的形式为：其中g(μY)是条件均值的函数（称为连接函数）。另外，你可放松Y为正态分布的假设，改为Y 服从指数分布族中的一种分布即可。设定好连接函数和概率分布后，便可以通过最大似然估计的多次迭代推导出各参数值。在大部分情况下，线性模型就可以通过一系列连续型或类别型预测变量来预测正态分布的响应变量的工作。但是，有时候我们要进行非正态因变量的分析，例如：（1）类别型.._广义线性回归模型

HTML+CSS大作业环境网页设计与实现(垃圾分类) web前端开发技术 web课程设计网页规划与设计_垃圾分类网页设计目标怎么写-程序员宅基地

文章浏览阅读69次。环境保护、保护地球、校园环保、垃圾分类、绿色家园、等网站的设计与制作。总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞△）一套A+的网_垃圾分类网页设计目标怎么写

C# .Net 发布后,把dll全部放在一个文件夹中,让软件目录更整洁_.net dll 全局目录-程序员宅基地

文章浏览阅读614次，点赞7次，收藏11次。之前找到一个修改 exe 中 DLL地址的方法, 不太好使,虽然能正确启动, 但无法改变 exe 的工作目录,这就影响了.Net 中很多获取 exe 执行目录来拼接的地址 ( 相对路径 ),比如 wwwroot 和代码中相对目录还有一些复制到目录的普通文件等等,它们的地址都会指向原来 exe 的目录, 而不是自定义的 “lib” 目录,根本原因就是没有修改 exe 的工作目录这次来搞一个启动程序,把 .net 的所有东西都放在一个文件夹,在文件夹同级的目录制作一个 exe._.net dll 全局目录

BRIEF特征点描述算法_breif description calculation 特征点-程序员宅基地

文章浏览阅读1.5k次。本文为转载，原博客地址：http://blog.csdn.net/hujingshuang/article/details/46910259简介 BRIEF是2010年的一篇名为《BRIEF:Binary Robust Independent Elementary Features》的文章中提出，BRIEF是对已检测到的特征点进行描述，它是一种二进制编码的描述子，摈弃了利用区域灰度..._breif description calculation 特征点

房屋租赁管理系统的设计和实现，SpringBoot计算机毕业设计论文_基于spring boot的房屋租赁系统论文-程序员宅基地

文章浏览阅读4.1k次，点赞21次，收藏79次。本文是《基于SpringBoot的房屋租赁管理系统》的配套原创说明文档，可以给应届毕业生提供格式撰写参考，也可以给开发类似系统的朋友们提供功能业务设计思路。_基于spring boot的房屋租赁系统论文