JQuery之正则表达式
1.定义正则表达式
- /.../ 用于定义正则表达式
- /.../g 表示全局匹配
- /.../i 表示不区分大小写
- /.../m 表示多行匹配
2.匹配正则表达式
非全局模式，不分组
var pattern = /^Java\w*/m; var text = "JavaScript is more fun than JavaEE or JavaBeans!"; pattern.exec(text) pattern.exec(text) pattern.exec(text)
执行结果：
["JavaScript"] ["JavaScript"] ["JavaScript"]
非全局模式，分组
var pattern = /^Java(\w*)/m; var text = "JavaScript is more fun than \nJavaEE or JavaBeans!"; pattern.exec(text) pattern.exec(text) pattern.exec(text)
执行结果：
["JavaScript", "Script"] ["JavaScript", "Script"] ["JavaScript", "Script"]
全局模式，不分组
var pattern = /^Java\w*/gm var text = "JavaScript is more fun than JavaEE or JavaBeans!"; pattern.exec(text) pattern.exec(text) pattern.exec(text) pattern.exec(text)
执行结果：
["JavaScript"] null ["JavaScript"] null
全局模式，分组
var pattern = /^Java(\w*)/gm; var text = "JavaScript is more fun than JavaEE or JavaBeans!"; pattern.exec(text) pattern.exec(text) pattern.exec(text) pattern.exec(text) 执行结果：
["JavaScript", "Script"] null ["JavaScript", "Script"] null
3.
obj.search(regexp) 获取索引位置，搜索整个字符串，返回匹配成功的第一个位置(g模式无效)
obj.match(regexp) 获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部
obj.replace(regexp, replacement) 替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号
var text = "JavaScript is more fun than \nJavaEE or JavaBeans!"; text.match(/Java\w+/mg);
["JavaScript", "JavaEE", "JavaBeans"]
var text = "JavaScript is more fun than \nJavaEE or JavaBeans!"; text.replace(/Java\w+/mg,'Python');
"Python is more fun than Python or Python!"
var text = "JavaScript is 8 more fun than 7 JavaEE or 6 JavaBeans!"; text.replace(/\d+/gm,'Python');
"JavaScript is Python more fun than Python JavaEE or Python JavaBeans!"
var text = "JavaScript is 8 more fun than 7 JavaEE or 6 JavaBeans!"; text.replace(/\d+/gm,'Python$&');
"JavaScript is Python8 more fun than Python7 JavaEE or Python6 JavaBeans!"
var text = "JavaScript is more fun than JavaEE or JavaBeans!"; text.replace(/Java/,'==Python==$\''); "==Python==Script is more fun than JavaEE or JavaBeans!Script is more fun than JavaEE or JavaBeans!" text.replace(/Java/,'==Python==$`'); "==Python==Script is more fun than JavaEE or JavaBeans!"
JQuery实现滚动菜单
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title></title>
<style>
.body{
margin: 0 auto;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
.pg-header{
height: 50px;
width: 100%;
background-color: blue;
}
.pg-header .nav{
line-height: 50px;
padding: 0 400px;
}
.pg-header .nav ul li{
float: left;
}
.pg-header .nav ul li a{
display: block;
color: white;
text-decoration: none; /*去掉<a>标签的下划线*/
/*width: 60px;*/
padding:0 20px 0 20px;
}
.pg-header .nav ul li a:hover{
color: #fff;
background-color: #425a66;
}
.pg-body{
}
.pg-body .catalog{
position: absolute;
top:60px;
width: 200px;
background-color: #fafafa;
bottom: 0px;
}
.pg-body .catalog.fixed{
position: fixed;
top: 10px;
}
.pg-body .catalog .catalog-item{
/*color: #fff;*/
height: 10px;
padding: 20px;
/**/
}
.pg-body .catalog .catalog-item.active{
color: #fff;
background-color:orangered ;
}
.pg-body .content{
position: absolute;
top:60px;
width: 700px;
margin-left: 210px;
background-color: #fafafa;
overflow: auto;
}
.pg-body .content .section{
top: 60px;
height: 500px;
}
</style>
</head>
<body class="body">
<div class="pg-header">
<div class="nav">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">功能一</a>
</li>
<li>
<a href="#">功能二</a>
</li>
</ul>
</div>
</div>
<div class="pg-body">
<div class="wrap">
<div class="catalog">
<div class="catalog-item" auto-to="function1"><a>第一章</a></div>
<div class="catalog-item" auto-to="function2"><a>第二章</a></div>
<div class="catalog-item" auto-to="function3"><a>第三章</a></div>
</div>
<div class="content">
<div menu="function1" class="section" ;><h1>内容一</h1></div>
<div menu="function2" class="section" ;><h1>内容二</h1></div>
<div menu="function3" class="section" ;><h1>内容三</h1></div>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
Init();
});
function Init(){
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > 50) {
$('.catalog').addClass('fixed');
} else {
$('.catalog').removeClass('fixed');
}
$('.content').children().each(function () {
var offSet = $(this).offset();
var height = $(this).height();
if (scrollTop > offSet.top && scrollTop < offSet.top + height) {
var target = $(this).attr('menu');
// console.log(target);
// console.log('aaaaa');
$('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
// return false;
var docHeight = $(document).height();
var winHeight = $(window).height();
// 如果，滚轮到达底部，则显示最后一个菜单
if(docHeight == winHeight+scrollTop)
{
$('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active');
}else{
var target = $(this).attr('menu');
$('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
}
return false;
}
});
});
}
</script>
</body>
</html>