jQuery扩展
1、什么是jQuery的扩展
首先要了解下，python中给咱们提供和很多现成的模块，但是他的模块够用吗？不够用那怎么办？导入第三方的模块，使用现成的模块操作快捷 方便！
http://www.php100.com/manual/jquery/，中有一个叫做“插件机制”：
jQuery.fn.extend(object)
jQuery.extend(object)
2、jQuery.extend(object)
html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shuaige</title>
</head>
<body>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<!--这里必须优先导入jQuery原生的js，在导入扩展的jQuery-->
<script type="text/javascript" src="extends.js"></script>
<script>
console.log($.luotianshuai())
</script>
</body>
</html>
jQuery代码如下：
/**
* Created by luotim on 16/2/28.
*/
//扩展使用自执行函数来写,逼格比较高点
(function (arg) {
arg.extend({
'luotianshuai':function (){
return 123;
},
'login':function(){} //他的代码是以字典形式存储的扩展jQuery
})
})(jQuery);//jQuery为传进去的函数他的方程式:(function (arg) {})();第一个括号为函数,第二个括号内存储参数
3、jQuery.fn.extend(object)
jQuery.fn.extend(object) 这个方法和jQuery.extend(object)的区别就是，jQuery.fn.extend(object)可以传入搜索参数
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
结果：
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
表单验证
代码如下：
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.item{
250px;
height: 60px;
position: relative;
}
.item input{
200px;
}
.item span{
position: absolute;
top: 20px;
left: 0px;
font-size: 8px;
background-color: indianred;
color: white;
display: inline-block;
200px;
}
</style>
</head>
<body>
<div>
<form id="form1">
<div class="item">
<!--min-len 代表你输入的长度不能小于6-->
<!--require=true 代表只有require=true才进行判断，否则可以为空-->
<a>用户<input class="c1" type="text" name="username" label="用户名" require="true" min-len="6"/></a>
</div>
<div class="item">
<a>密码<input class="c1" type="password" name="pwd" label="密码"/></a>
</div>
<div class="item">
<a>手机</a>
<input class="c1" type="text" name="phone" label="手机" require="true" phone="true"/>
</div>
<input type="submit" value="提交" />
</form>
</div>
<script src="jquery-1.12.4.js"></script>
<script src="guize.js"></script> <script> $(function(){ $.valid('#form1'); }); </script></body></html>
extend.js
/**
* Created by alex on 2016/8/28.
*/
(function(jq){
function ErrorMessage(inp,message){
var tag = document.createElement('span');
tag.innerText = message;
inp.after(tag);
}
jq.extend({
valid:function(form){
// #form1 $('#form1')
jq(form).find(':submit').click(function(){
jq(form).find('.item span').remove();
var flag = true;
jq(form).find(':text,:password').each(function(){
var require = $(this).attr('require');
if(require){
var val = $(this).val();
if(val.length<=0){
var label = $(this).attr('label');
ErrorMessage($(this),label + "不能为空");
flag = false;
return false;
}
var minLen = $(this).attr('min-len');
if(minLen){
var minLenInt = parseInt(minLen);
if(val.length<minLenInt){
var label = $(this).attr('label');
ErrorMessage($(this),label + "长度最小为"+ minLen);
flag = false;
return false;
}
//json.stringify()
//JSON.parse()
}
var phone = $(this).attr('phone');
if(phone){
// 用户输入内容是否是手机格式
var phoneReg = /^1[3|5|8]d{9}$/;
if(!phoneReg.test(val)){
var label = $(this).attr('label');
ErrorMessage($(this),label + "格式错误");
flag = false;
return false;
}
}
// 1、html自定义标签属性
// 增加验证规则+错误提示
}
// 每一个元素执行次匿名函数
// this
//console.log(this,$(this));
/*
var val = $(this).val();
if(val.length<=0){
var label = $(this).attr('label');
var tag = document.createElement('span');
tag.innerText = label + "不能为空";
$(this).after(tag);
flag = false;
return false;
}
*/
});
return flag;
});
}
});
})(jQuery);
效果图：
正则表达式
1、定义正则表达式
- /.../ 用于定义正则表达式
- /.../g 表示全局匹配
- /.../i 表示不区分大小写
- /.../m 表示多行匹配
JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容)
12345varpattern = /^Javaw*/gm;vartext ="JavaScript is more fun than JavaEE or JavaBeans!";result = pattern.exec(text)result = pattern.exec(text)result = pattern.exec(text)
注：定义正则表达式也可以 reg= new RegExp()
2、匹配
JavaScript中支持正则表达式，其主要提供了两个功能：
- test(string) 检查字符串中是否和正则匹配
12345n ='uui99sdf'reg = /d+/reg.test(n) --->true# 只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加 ^和$ - exec(string) 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。
123456789101112131415161718192021获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。非全局模式获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配）varpattern = /Javaw*/;vartext ="JavaScript is more fun than Java or JavaBeans!";result = pattern.exec(text)varpattern = /(Java)w*/;vartext ="JavaScript is more fun than Java or JavaBeans!";result = pattern.exec(text)全局模式需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕varpattern = /Javaw*/g;vartext ="JavaScript is more fun than Java or JavaBeans!";result = pattern.exec(text)varpattern = /(Java)w*/g;vartext ="JavaScript is more fun than Java or JavaBeans!";result = pattern.exec(text)
3、字符串中相关方法
|
1
2
3
4
5
6
7
8
|
obj.search(regexp) 获取索引位置，搜索整个字符串，返回匹配成功的第一个位置(g模式无效)obj.match(regexp) 获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部obj.replace(regexp, replacement) 替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项， $数字：匹配的第n个组内容； $&：当前匹配的内容； $`：位于匹配子串左侧的文本； $'：位于匹配子串右侧的文本 $$：直接量$符号 |
示例二：滚动菜单
代码：
home.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px;
}
img {
border: 0;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.wrap{
980px;
margin: 0 auto;
}
.pg-header{
background-color: #303a40;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.pg-header .logo{
float: left;
padding:5px 10px 5px 0px;
}
.pg-header .logo img{
vertical-align: middle;
110px;
height: 40px;
}
.pg-header .nav{
line-height: 50px;
}
.pg-header .nav ul li{
float: left;
}
.pg-header .nav ul li a{
display: block;
color: #ccc;
padding: 0 20px;
text-decoration: none;
font-size: 14px;
}
.pg-header .nav ul li a:hover{
color: #fff;
background-color: #425a66;
}
.pg-body{
}
.pg-body .catalog{
position: absolute;
top:60px;
200px;
background-color: #fafafa;
bottom: 0px;
}
.pg-body .catalog.fixed{
position: fixed;
top:10px;
}
.pg-body .catalog .catalog-item.active{
color: #fff;
background-color: #425a66;
}
.pg-body .content{
position: absolute;
top:60px;
700px;
margin-left: 210px;
background-color: #fafafa;
overflow: auto;
}
.pg-body .content .section{
height: 500px;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="wrap clearfix">
<div class="logo">
<a href="#">
<img src="">
</a>
</div>
<div class="nav">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">功能一</a>
</li>
<li>
<a href="#">功能二</a>
</li>
</ul>
</div>
</div>
</div>
<div class="pg-body">
<div class="wrap">
<div class="catalog">
<div class="catalog-item" auto-to="function1"><a>第1张</a></div>
<div class="catalog-item" auto-to="function2"><a>第2张</a></div>
<div class="catalog-item" auto-to="function3"><a>第3张</a></div>
</div>
<div class="content">
<div menu="function1" class="section" style='background-color:green;'>
<h1>第一章</h1>
</div>
<div menu="function2" class="section" style='background-color:yellow;'>
<h1>第二章</h1>
</div>
<div menu="function3" class="section" style='background-color:red;'>
<h1>第三章</h1>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
// 自动执行
Init();
});
function Init(){
$(window).scroll(function() {
// 监听窗口滚动事件
// 获取滚动条高度
var scrollTop = $(window).scrollTop();
// 当滚动到50像素时，左侧带菜单固定
if(scrollTop > 50){
$('.catalog').addClass('fixed');
}else{
$('.catalog').children().removeClass('active');
$('.catalog').removeClass('fixed');
}
// 循环所有的内容
$('.content').children().each(function(){
// 当前标签距离顶部高度
var offSet = $(this).offset(); // 高度，左边有多远
// offSet.top
// offSet.left
// 自身高度
var height = $(this).height();
//offSet<滚动高度<offSet+height
// 当前内容位于用户阅览区
if(scrollTop>offSet.top && scrollTop< offSet.top + height){
// $(this) 当前内容标签
/*
var target = $(this).attr('menu');
$('.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>
效果图：
前端插件：
fontawsome
easyui
jqueryui
bootstrap
-- 引入css
-- 引入jQuery（2.x，1.12）
-- 引入js
-- bootstrap模版
bxslider
jquery.lazyload
==> 以后可以用模版