day04
jQuery示例：
表单验证，jQuery扩展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.item{
width:250px;
height:60px;
position:relative;
}
.item input{
width:200px;
}
.item span{
position:absolute;
top:20px;
left:20px;
font-size:8px;
background-color:indianred;
color:while;
display:inline-block;
width:200px;
}
</style>
</head>
<body>
<div>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名" />
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码">
</div>
<input type="submit"value="提交" onclick="CheckValid();"/>
</form>
</div>
<script>
function CheckValid(){
$("form.item span").remove();
var flag = true;
$("form .c1").each(function(){
var val = $(this).attr("label");
var tag = document.createElement("span");
tag.innerText = label+"不能为空"；
$(this).after(tag);
flag = false;
})
return flag;
}
</script>
</body>
</html>
jquery版本的绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.item{
width:250px;
height:60px;
position:relative;
}
.item input{
width:200px;
}
.item span{
position:absolute;
top:20px;
left:20px;
font-size:8px;
background-color:indianred;
color:while;
display:inline-block;
width:200px;
}
</style>
</head>
<body>
<div>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名" />
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码">
</div>
<input type="submit"value="提交" onclick="CheckValid();"/>
</form>
</div>
<script>
function BindCheckValid(){
$("form :submit").click(function(){
var flag = true;
$("form.item span").remove();
$("form .c1").each(function(){
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 flag;
});
}
</script>
</body>
</html>
jquery的for循环
function f1(){
$.each([11,22,33,44],function(k,v){
if(k==2){ //这里的k是索引的数v是值
return; //这里的return只会返回里面的函数，就和Python中的继续一样，如果你想停止循环可以用“return false”
}
})
}
jquery扩展方法
jquery.fn.extend(object)
$.extend({
"dalong":function(arg){
console.log(arg);
}
});
$("form").dalong("1234") 必须是用标签，这个里面有一个this代指这个标签
jquery.extend(object) 给jquery添加函数永久存在
$.extend({
"dalong":function(arg){
console.log(arg);
}
});
$.dalong("1234")
文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.item{
width:250px;
height:60px;
position:relative;
}
.item input{
width:200px;
}
.item span{
position:absolute;
top:20px;
left:20px;
font-size:8px;
background-color:indianred;
color:while;
display:inline-block;
width:200px;
}
</style>
</head>
<body>
<div>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名" require="true" min-len="6" />
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码" require="true" phone="true">
</div>
<input type="submit"value="提交" onclick="CheckValid();"/>
</form>
</div>
<script src="jquery-xxx.js"</script>
<script>
$(function(){
$.valid("#form1");
})
</script>
</body>
</html>
文件jquery1
(function(iq){
jq.extend({
valid:function(form){
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("tequire");
if (require){
var val = $(this).val();
if (val.length<=0){
var lavel = $(this).attr("label");
ErrorMessage($(this),label + "不能为空");
flag= false;
return false;
}
var minLen = $(this).attr("min-len");\
if (minLen){
var minLenInt = parseInt(minLen);
if(val.lenth<minLenInt){
var label = $(this).attr("label");
ErrorMessage($(this),label + "长度最小为"+minLen);
flag = false;
return false;
}
}
}
}
var phone = $(this).attr("phone");
if(phone){
var phoneReg = /^[3|5|8]\d{9}$/;
if(!phoneReg.test(val)){
var lavel = $(this).attr("label");
ErrorMessage($(this),label + "格式错误");
flag = false;
return false;
}
}
})
return flag;
}
})
}
)}
})(jQuery);
JavaScript的正则表达式
定义正则表达式
/.../ 用于定义正则表达式
/.../g 表示全局匹配
/.../i 表示不区分大小写
/.../m 表示多行匹配
js正则匹配时本身就是支持多行，此处行匹配只是影响正则表达式^$来匹配换行的内容
var pattern = /^Java\w*/gm;
var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";
result = pattern.exec(text)
result = pattern.exec(text)
匹配
JavaScript中支持正则表达式，其主要提供了连个功能：
text(string) 检查字符串中是否和正则匹配
exec(string) 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。
字符串中相关方法
obj.search(regexp) 获取索引位置，搜索整个字符串，返回匹配成功的第一个位置（g模式无效）
obj.match(regexp) 获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部
obj.replace(regexp,replacement) 替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&: 当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号
滚动菜单
前端插件
fontawsome
easyui
jqueryui
bootstrap
easyui
jqueryul
bxslider
jquerylazyload
web框架
请求周期
MVC/MTV
Django
功能齐全
day04
jQuery示例：
表单验证，jQuery扩展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.item{
width:250px;
height:60px;
position:relative;
}
.item input{
width:200px;
}
.item span{
position:absolute;
top:20px;
left:20px;
font-size:8px;
background-color:indianred;
color:while;
display:inline-block;
width:200px;
}
</style>
</head>
<body>
<div>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名" />
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码">
</div>
<input type="submit"value="提交" onclick="CheckValid();"/>
</form>
</div>
<script>
function CheckValid(){
$("form.item span").remove();
var flag = true;
$("form .c1").each(function(){
var val = $(this).attr("label");
var tag = document.createElement("span");
tag.innerText = label+"不能为空"；
$(this).after(tag);
flag = false;
})
return flag;
}
</script>
</body>
</html>
jquery版本的绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.item{
width:250px;
height:60px;
position:relative;
}
.item input{
width:200px;
}
.item span{
position:absolute;
top:20px;
left:20px;
font-size:8px;
background-color:indianred;
color:while;
display:inline-block;
width:200px;
}
</style>
</head>
<body>
<div>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名" />
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码">
</div>
<input type="submit"value="提交" onclick="CheckValid();"/>
</form>
</div>
<script>
function BindCheckValid(){
$("form :submit").click(function(){
var flag = true;
$("form.item span").remove();
$("form .c1").each(function(){
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 flag;
});
}
</script>
</body>
</html>
jquery的for循环
function f1(){
$.each([11,22,33,44],function(k,v){
if(k==2){ //这里的k是索引的数v是值
return; //这里的return只会返回里面的函数，就和Python中的继续一样，如果你想停止循环可以用“return false”
}
})
}
jquery扩展方法
jquery.fn.extend(object)
$.extend({
"dalong":function(arg){
console.log(arg);
}
});
$("form").dalong("1234") 必须是用标签，这个里面有一个this代指这个标签
jquery.extend(object) 给jquery添加函数永久存在
$.extend({
"dalong":function(arg){
console.log(arg);
}
});
$.dalong("1234")
文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.item{
width:250px;
height:60px;
position:relative;
}
.item input{
width:200px;
}
.item span{
position:absolute;
top:20px;
left:20px;
font-size:8px;
background-color:indianred;
color:while;
display:inline-block;
width:200px;
}
</style>
</head>
<body>
<div>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名" require="true" min-len="6" />
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码" require="true" phone="true">
</div>
<input type="submit"value="提交" onclick="CheckValid();"/>
</form>
</div>
<script src="jquery-xxx.js"</script>
<script>
$(function(){
$.valid("#form1");
})
</script>
</body>
</html>
文件jquery1
(function(iq){
jq.extend({
valid:function(form){
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("tequire");
if (require){
var val = $(this).val();
if (val.length<=0){
var lavel = $(this).attr("label");
ErrorMessage($(this),label + "不能为空");
flag= false;
return false;
}
var minLen = $(this).attr("min-len");\
if (minLen){
var minLenInt = parseInt(minLen);
if(val.lenth<minLenInt){
var label = $(this).attr("label");
ErrorMessage($(this),label + "长度最小为"+minLen);
flag = false;
return false;
}
}
}
}
var phone = $(this).attr("phone");
if(phone){
var phoneReg = /^[3|5|8]\d{9}$/;
if(!phoneReg.test(val)){
var lavel = $(this).attr("label");
ErrorMessage($(this),label + "格式错误");
flag = false;
return false;
}
}
})
return flag;
}
})
}
)}
})(jQuery);
JavaScript的正则表达式
定义正则表达式
/.../ 用于定义正则表达式
/.../g 表示全局匹配
/.../i 表示不区分大小写
/.../m 表示多行匹配
js正则匹配时本身就是支持多行，此处行匹配只是影响正则表达式^$来匹配换行的内容
var pattern = /^Java\w*/gm;
var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";
result = pattern.exec(text)
result = pattern.exec(text)
匹配
JavaScript中支持正则表达式，其主要提供了连个功能：
text(string) 检查字符串中是否和正则匹配
exec(string) 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。
字符串中相关方法
obj.search(regexp) 获取索引位置，搜索整个字符串，返回匹配成功的第一个位置（g模式无效）
obj.match(regexp) 获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部
obj.replace(regexp,replacement) 替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&: 当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号
滚动菜单
前端插件
fontawsome
easyui
jqueryui