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{ 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> <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{ 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> <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{ 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"> <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': cmdbmigrations 001_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/