JQuery之正則表達式
1.定義正則表達式
- /.../ 用于定義正則表達式
- /.../g 表示全局匹配
- /.../i 表示不區分大小寫(xiě)
- /.../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è)字符串，返回匹配成功的第一個(gè)位置(g模式無(wú)效)
obj.match(regexp) 獲取匹配內容，搜索整個(gè)字符串，獲取找到第一個(gè)匹配內容，如果正則是g模式找到全部
obj.replace(regexp, replacement) 替換匹配替換，正則中有g(shù)則替換所有，否則只替換第一個(gè)匹配項，
$數字：匹配的第n個(gè)組內容；
$&：當前匹配的內容；
$`：位于匹配子串左側的文本；
$'：位于匹配子串右側的文本
$$：直接量$符號
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實(shí)現滾動(dòng)菜單
<!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>標簽的下劃線(xiàn)*/
/*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="#">首頁(yè)</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();
// 如果，滾輪到達底部，則顯示最后一個(gè)菜單
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>