Query示例：
表单验证，jQuery扩展
1、回顾基础内容
2、dom事件绑定
3、jquery事件绑定
4、$.each return false 表示break;
5、jquery扩展方法：
两种方式：
6、自定义jQuery扩展的正确方法：
a. 自执行
b. 闭包
7、jquery扩展实现基本验证
a. 支持是否允许为空
b. 长度
c. 正则表达式
定义正则表达式
reg = /正则表达式/ *****
g
i
m ==> 特殊
利用正则匹配
reg.test(字符串) *****
reg.exec(字符串)
全局
非全局
字符串三个方法：
search
match
replace
-- 特殊符号
滚动菜单
页面布局（absolute）
监听滚动事件：
如果滚动>60,菜单固定
如果滚动<60,菜单固定取消
Ajax(欠)
前端插件：
fontawsome
easyui
jqueryui
bootstrap
-- 引入css
-- 引入jQuery（2.x，1.12）
-- 引入js
-- bootstrap模版
bxslider
jquery.lazyload
==> 以后可以用模版
验证失败报错
relative 和 absolute 合用是内容可以随意调整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
width: 250px;
height: 60px;
position: relative;
}
.item input{
width: 200px;
}
.item span{
position: absolute;
top: 20px;
left: 0px;
font-size: 8px;
background-color: indianred;
color: white;
display: inline-block;
width: 200px;
}
</style>
</head>
<body>
<div>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名"/>
<!--<span>用户名不能为空</span>-->
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码"/>
<!--<span>密码不能为空</span>-->
</div>
<input type="submit" value="提交" onclick="return CheckValid();" />
</form>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
function CheckValid() {
// 找到form标签下的所有需要验证的标签
// $('form .c1')
// $('form input[type="text"],form input[type="password"]')
// 循环所有需要验证的标签，获取内容
// 先清除
$('form .item span').remove();
var flag = true;
// each循环
$('form .c1').each(function () {
var val = $(this).val();
if(val.length<=0){
// attr获取属性
var label = $(this).attr('label');
var tag = document.createElement('span');
tag.innerText = label + "不能为空";
// after在之后加内容
$(this).after(tag);
flag = false;
}
});
return flag;
}
</script>
</body>
</html>
JQUERY验证失败报错
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
width: 250px;
height: 60px;
position: relative;
}
.item input{
width: 200px;
}
.item span{
position: absolute;
top: 20px;
left: 0px;
font-size: 8px;
background-color: indianred;
color: white;
display: inline-block;
width: 200px;
}
</style>
</head>
<body>
<div>
<form>
<div class="item">
<input class="c1" type="text" name="username" label="用户名"/>
<!--<span>用户名不能为空</span>-->
</div>
<div class="item">
<input class="c1" type="password" name="pwd" label="密码"/>
<!--<span>密码不能为空</span>-->
</div>
<!--<input type="submit" value="提交" onclick="return CheckValid();" />-->
<input type="submit" value="提交"/>
</form>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
// 当页面框架加载完成之后，自动执行
BindCheckValid();
});
function BindCheckValid(){
// $(':submit').click(function () {
$('form input[type=submit]').click(function () {
var flag = true;
// 只要一点击submit按钮,执行此处内空，找到form标签下的所有需要验证的标签
$('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扩展
1.自执行函数
2.闭包，防多个扩展文件函数名冲突
extend1.js
/**
* Created by Administrator on 2016/8/28.
*/
// 自执行函数,参数即$，$即jQuery
(function (jq) {
jq.extend({
'dalong1':function (arg) {
console.log(arg);
}
});
function f1() {
}
})(jQuery);
s3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script src="extend1.js"></script>
<script>
// 调用dalong
$.dalong1('123');
</script>
</body>
</html>
FORM验证，单文件定义限制规则
commons.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);
}
// JQUREY扩展
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);
4.html
<!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: 0px;
font-size: 8px;
background-color: indianred;
color: white;
display: inline-block;
width: 200px;
}
</style>
</head>
<body>
<div>
<form id="form1">
<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="密码"/>
</div>
<div class="item">
<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="commons.js"></script>
<script>
$(function(){
// 传form1给commons的function
$.valid('#form1');
});
</script>
</body>
</html>
正则表达式
http://www.cnblogs.com/wupeiqi/articles/5433893.html
Web框架
请求周期
处理用户请求 放置HTML模版 操作数据库
Controllers Views Modals
Views Template Modals
MVC/MTV
Django => MTV
Django
1.安装
pip3 install Django==1.10 或 pip3 install Django
2.创建project
django-admin.py startproject mysite
目录结构
mysite
mysite
- settings.py # 配置文件
- urls.py # 路由系统(调度)
- wsgi.py # WSGI
managel.py # django程序启动文件
3.创建APP
所有APP共享project
cd mysite
python3 manage.py startapp cmdb
cmdb
__init__.py
admin.py # WEB后台管理
apps.py # 当前app配置文件
models.py # 数据库管理，自动创建数据结构
tests.py # 单元测试，测试你的某个功能
views.py # 业务请求处理
4.编写代码
urls.py
views.py
(1) 配置路由关系 urls.py
urls.py
from cmdb import views #导入views模块
urlpatterns = [
# url(r'^admin/', admin.site.urls),
url(r'^index/', views.index), # 配置映射关系,逗号前是url，逗号后为交给某一函数(view模块的index函数)
]
(2) 配置业务请求处理 views.py
views.py 创建对应自己的函数
cmdb 的 views 处理用户请求，必须为函数
from django.shortcuts import HttpResponse # 导入处理模块
# Create your views here.
# 处理用户请求
def index(request): # 处理函数，用户请求放入request中
return HttpResponse('123') # 处理字符串，必须放在HttpResponse才能识别
5.启动Django程序
python3 manage.py runserver 8000
python manage.py runserver #测试 启动web服务器，只允许本地访问
python manage.py runserver 0.0.0.0:8080 #允许所有
6.访问
http://127.0.0.1:8000/index/
7.使用模板
settings配置
指定Template目录，告诉django配置文件在那里
render传递数据给html (request,'路径')
(1) Template # 放置HTML模版，可新建
index.html # 手动创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1 style="color: red">123</h1>
</body>
</html>
(2) views #配置业务请求处理，指定html文件，在cmdb目录下
from django.shortcuts import render
def index(request):
# return HttpResponse('123')
return render(request,'index.html') #使用render方法指定html
(3) 启动并访问
python manage.py runserver 0.0.0.0:8080
http://127.0.0.1:8000/index/
8. 静态文件配置
(1) statics # 手动创建，在mysite主目录创建
jquery-1.8.2.min.js # 存入jquery文件
(2) index.html 指定statics
<script src="/statics/jquery-1.8.2.min.js"></script>
(3) settings 指定statics,在文件最后添加
(1) 指定静态文件目录
STATICFILES_DIRS = (
os.path.join(BASE_DIR,'statics'),
)
(2) 指定HTML引用静态文件的前缀，可选项，非必选
STATIC_URL = '/fff/' #指定前缀为fff
(4) index.html 引用前缀
<script src="/fff/jquery-1.8.2.min.js"></script>
(5) 访问
F12 --- Elements----/fff/jquery-1.1.8.2.min.js----右键---open link in new tab打开成功即可
9.表单操作及页面展示(内存版)
(1)表单页面
<body>
<h1>用户输入：</h1>
{#以POST方式提交#}
<form action="/index/" method="POST">
<input type="text" name="user"/>
<input type="test" name="email"/>
<input type="submit" value="提交"/>
</form>
</body>
(2)views处理
# 判断用户是否是POST请求
from django.shortcuts import render
from django.shortcuts import HttpResponse
# Create your views here.
def index(request):
# return HttpResponse('123')
# 判断
if (request.method == 'POST'):
user = request.POST.get('user', None)
email = request.POST.get('email', None)
print(user, email)
return render(request,'index.html')
直接访问会提交会报错，是DJANGO提供的跨站请求伪造，可以通过settings修改处理
Forbidden (403)
CSRF verification failed. Request aborted.
(3)settings修改
MIDDLEWARE 或 MIDDLEWARE-CLASSES 列表注释掉 django.middleware.csrf.CsrfViewMiddleware 这一行
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
(4)页面提交
提交内容为 123 123
后台接收到数据
123 123
[31/Aug/2016 23:13:28] "POST /index/ HTTP/1.1" 200 339
(5)数据展示
(1)views 处理数据
from django.shortcuts import render
from django.shortcuts import HttpResponse
# 1. 处理用户请求 u1和e1为两列，u1和u2为两行
USER_INPUT = [
{'user':'u1', 'email': 'e1'},
{'user':'u2', 'email': 'e2'},
]
def index(request):
# ...
# 判断用户是否是POST请求
if(request.method == 'POST'):
user = request.POST.get('user',None)
email = request.POST.get('email',None)
temp = {'user': user, 'email': email}
USER_INPUT.append(temp) # 2. 追加到列表
# request.POST.get('pwd',None)
# return HttpResponse('123')
# 模版引擎
# 获取index.html模版 + {'data': USER_INPUT } ==》 渲染
# 字符串
#传递给HTML
return render(request, 'index.html', {'data': USER_INPUT }) # 3. 传递给HTML使用data指定USER_INPUT列表
(2)HTML 编写代码，按django方式对数据进行for循环生成列表(取的是views里的data和USER_INPUT数据)
django的for循环必须有开始有结束{% for item in data %}, {% endfor %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>用户输入：</h1>
{#以POST方式提交#}
<form action="/index/" method="POST">
<input type="text" name="user"/>
<input type="test" name="email"/>
<input type="submit" value="提交"/>
</form>
<h1>数据展示：</h1>
<table border="1">
{% for item in data %}
{# tr为行，td为列#}
<tr>
<td>{{ item.user }}</td>
<td>{{ item.email }}</td>
</tr>
{% endfor %}
</table>
<script src="/fff/jquery-1.8.2.min.js"></script>
</body>
</html>
页面初始列表样式
－－－－
｜u1｜e1｜
｜－－－｜
｜u2｜e2｜
－－－－
(3)提交数据到内存，输入内容后提交后在表格显示
http://127.0.0.1:8000/index/
10.连接数据库
默认使用sqlite数据库
ORM 数据结构管理 models.py
settings
(1)models.py #配置数据库，创建类，生成数据库UserInfo表，指定字符长度
class UserInfo(models.Model):
user = models.CharField(max_length=32)
email = models.CharField(max_length=32)
(2)注册app:
settings.py # 指定APP名字
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'cmdb',
]
(3)执行命令，创建库和表
python3 manage.py makemigrations
python3 manage.py migrate
两条命令完自动创建UserInfo表
返回结果：
makemigrations返回结果
Migrations for 'cmdb':
cmdb\migrations\0001_initial.py:
- Create model UserInfo
migrate返回结果
Applying cmdb.0001_initial... OK
Applying sessions.0001_initial... OK
11.操作数据库
创建：
models.类.objects.create(user=u,email=e)
models.UserInfo.objects.create(user=u,email=e)
models.UserInfo.objects.create(user=u,email=e)
models.UserInfo.objects.create(user=u,email=e)
获取：
models.类.objects.all()
models.UserInfo.objects.all()
(1)views 处理
from django.shortcuts import render
from django.shortcuts import HttpResponse
from django.shortcuts import redirect
from cmdb import models # 1.导入models数据库模块
# 处理用户请求
def index(request):
# ...
# 判断用户是否是POST请求
# return redirect('http://baidu.com')
# return redirect('')
if(request.method == 'POST'):
u = request.POST.get('user',None)
e = request.POST.get('email',None)
models.UserInfo.objects.create(user=u,email=e) # 2. Post提交数据，使数据库出现内容
# request.POST.get('pwd',None)
# return HttpResponse('123')
# 模版引擎
# 获取index.html模版 + {'data': USER_INPUT } ==》 渲染
# 字符串
data_list = models.UserInfo.objects.all() # 3. 取UserInfo表数据,get取数据，对于ORM每一行数据都是它的对像
# [UserInfo对象，UserInfo对象，。。。] 每一行数据里都是一个对像
# for item in data_list:
# print(item.user,item.email)
#传递给HTML
return render(request, 'index.html', {'data': data_list }) # 4. 传递给HTML使用data_list指定USER_INPUT列表
(2)HTML文件
index.html 循环data_list，取每一行对像数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>用户输入：</h1>
<form action="/index/" method="POST">
<input type="text" name="user" />
<input type="text" name="email" />
<input type="submit" value="提交" />
</form>
<h1>数据展示：</h1>
<table border="1">
<tr>
<th>用户名</th>
<th>邮箱</th>
</tr>
{% for line in data %}
<tr>
<td>{{ line.user }}</td>
<td>{{ line.email }}</td>
</tr>
{% endfor %}
</table>
<script src="/fff/jquery-1.8.2.min.js"></script>
</body>
</html>
(3)访问提交数据到库
http://127.0.0.1:8000/index/
