使用单个字符,区间所符合某个规则的字符串。
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)&®2.test(val)&®3.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是原生js的封装库,将原生js方法进行封装,简化了原生js的操作。
有1.x 2.x 3.x版本。
2.x和3.x不兼容低版本浏览器。
<!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>
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>
文章浏览阅读3.8k次,点赞9次,收藏28次。直接上一个工作中碰到的问题,另外一个系统开启多线程调用我这边的接口,然后我这边会开启多线程批量查询第三方接口并且返回给调用方。使用的是两三年前别人遗留下来的方法,放到线上后发现确实是可以正常取到结果,但是一旦调用,CPU占用就直接100%(部署环境是win server服务器)。因此查看了下相关的老代码并使用JProfiler查看发现是在某个while循环的时候有问题。具体项目代码就不贴了,类似于下面这段代码。while(flag) {//your code;}这里的flag._main函数使用while(1)循环cpu占用99
文章浏览阅读347次。idea shift f6 快捷键无效_idea shift +f6快捷键不生效
文章浏览阅读135次。Ecmacript 中没有DOM 和 BOM核心模块Node为JavaScript提供了很多服务器级别,这些API绝大多数都被包装到了一个具名和核心模块中了,例如文件操作的 fs 核心模块 ,http服务构建的http 模块 path 路径操作模块 os 操作系统信息模块// 用来获取机器信息的var os = require('os')// 用来操作路径的var path = require('path')// 获取当前机器的 CPU 信息console.log(os.cpus._node模块中有很多核心模块,以下不属于核心模块,使用时需下载的是
文章浏览阅读10w+次,点赞435次,收藏3.4k次。SPSS 22 下载安装过程7.6 方差分析与回归分析的SPSS实现7.6.1 SPSS软件概述1 SPSS版本与安装2 SPSS界面3 SPSS特点4 SPSS数据7.6.2 SPSS与方差分析1 单因素方差分析2 双因素方差分析7.6.3 SPSS与回归分析SPSS回归分析过程牙膏价格问题的回归分析_化工数学模型数据回归软件
文章浏览阅读7.5k次。如何利用hutool工具包实现邮件发送功能呢?1、首先引入hutool依赖<dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.7.19</version></dependency>2、编写邮件发送工具类package com.pc.c..._hutool发送邮件
文章浏览阅读867次,点赞2次,收藏2次。docker安装elasticsearch,elasticsearch-head,kibana,ik分词器安装方式基本有两种,一种是pull的方式,一种是Dockerfile的方式,由于pull的方式pull下来后还需配置许多东西且不便于复用,个人比较喜欢使用Dockerfile的方式所有docker支持的镜像基本都在https://hub.docker.com/docker的官网上能找到合..._docker安装kibana连接elasticsearch并且elasticsearch有密码
文章浏览阅读1.3w次,点赞57次,收藏92次。整理 | 郑丽媛出品 | CSDN(ID:CSDNnews)近年来,随着机器学习的兴起,有一门编程语言逐渐变得火热——Python。得益于其针对机器学习提供了大量开源框架和第三方模块,内置..._beeware
文章浏览阅读7.9k次。//// ViewController.swift// Day_10_Timer//// Created by dongqiangfei on 2018/10/15.// Copyright 2018年 飞飞. All rights reserved.//import UIKitclass ViewController: UIViewController { ..._swift timer 暂停
文章浏览阅读986次,点赞2次,收藏2次。1.硬性等待让当前线程暂停执行,应用场景:代码执行速度太快了,但是UI元素没有立马加载出来,造成两者不同步,这时候就可以让代码等待一下,再去执行找元素的动作线程休眠,强制等待 Thread.sleep(long mills)package com.example.demo;import org.junit.jupiter.api.Test;import org.openqa.selenium.By;import org.openqa.selenium.firefox.Firefox.._元素三大等待
文章浏览阅读3k次,点赞4次,收藏14次。Java软件工程师职位分析_java岗位分析
文章浏览阅读2k次。Java:Unreachable code的解决方法_java unreachable code
文章浏览阅读1w次。1、html中设置标签data-*的值 标题 11111 222222、点击获取当前标签的data-url的值$('dd').on('click', function() { var urlVal = $(this).data('ur_如何根据data-*属性获取对应的标签对象