day60
jQuery
（1）文本内容操作
（2）属性操作
（3）文档处理
（4）事件流
（5）事件委托
（6）事件
文本内容操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div class="box"></div> <input type="text"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> // $(".box").html("<p>111111</p>") // $(".box").text("<p>111111</p>") $("[type]").val("333333") </script> </body> </html> 属性操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div class="box"></div> <input type="radio" value="男" name="gender">男 <input type="radio" value="女" name="gender">女 <input type="radio" value="保密" name="gender">保密 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> // 获取 // $(".bbb").attr("class") // 设置属性 // $(".bbb").attr("x","111") // 设置多个属性 // $(".box").attr({"x":"11","y":"222"}) // $(":radio:eq(1)").prop("checked") // $(":radio:eq(1)").prop("checked",true) </script> </body> </html> 文档处理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box1 { width: 200px; height: 200px; border: 1px solid red; } .box2 { width: 200px; height: 200px; border: 1px solid green; } </style> </head> <body> <div class="box1"></div> <hr> <div class="box2"> <p>1111</p> <p>1111</p> <p>1111</p> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> // $(".box1").appendTo($(".box2")) // $(".box1").prependTo($(".box2")) // var inp=document.createElement("input") // $(inp).appendTo($(".box1")) // var p=document.createElement("p") // p.innerText="6666" // $(p).insertBefore($(".box1")) // $(p).insertAfter($(".box1")) // $('.box1').remove() // $(".box2").empty() var p=document.createElement("p") p.innerText="6666" // $(".box1").replaceWith($(p)) // 替换者在后，被替换者在前 $("div").replaceAll($(p)) // 不正确 // $(p).replaceAll($('div')) // 替换者在前，被替换者在后 </script> </body> </html> 事件流 <!--<!DOCTYPE html>--> <!--<html lang="en">--> <!--<head>--> <!-- <meta charset="UTF-8">--> <!-- <title>Title</title>--> <!-- <style>--> <!-- .box1 {--> <!-- width: 600px;--> <!-- height: 600px;--> <!-- border: 1px solid black;--> <!-- }--> <!-- .box2 {--> <!-- width: 200px;--> <!-- height: 200px;--> <!-- border: 1px solid red;--> <!-- }--> <!-- </style>--> <!--</head>--> <!--<body>--> <!--<div class="box1">--> <!-- <div class="box2"></div>--> <!--</div>--> <!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>--> <!--<script>--> <!-- $(".box2").click(function () {--> <!-- console.log("我是儿子")--> <!-- })--> <!-- $(".box1").click(function () {--> <!-- console.log("爸爸")--> <!-- })--> <!--</script>--> <!--</body>--> <!--</html>--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件流</title> <script> window.onload = function () { // 1、事件捕获阶段： document.addEventListener('click', function () { // document代表的是整个html页面； console.log('document处于事件捕获阶段'); }, true); document.documentElement.addEventListener('click', function () { // document.documentElement代表的是<html>标签； console.log('html处于事件捕获阶段'); }, true); document.body.addEventListener('click', function () { // document.body代表的是<body>标签； console.log('body处于事件捕获阶段'); }, true); var oBtn = document.getElementById('btn'); oBtn.addEventListener('click', function () { // btn标签 console.log('btn处于事件捕获阶段'); }, true); // 2、处于目标阶段 // 3、事件冒泡阶段 document.addEventListener('click', function () { // document代表的是整个html页面； console.log('document处于事件冒泡阶段'); }, false); document.documentElement.addEventListener('click', function () { // // document.documentElement代表的是<html>标签； console.log('html处于事件冒泡阶段'); }, false); document.body.addEventListener('click', function () { // document.body代表的是<body>标签； console.log('body处于事件冒泡阶段'); }, false); oBtn.addEventListener('click', function () { // btn console.log('btn处于事件冒泡阶段'); }, false); }; </script> </head> <body> <!-- href="javascript:;"代表阻止默认事件 --> <a href="javascript:;" id="btn">按钮</a> </body> </html> 事件委托 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul>li{ list-style: none; width: 600px; height: 50px; border: 1px solid black; } </style> </head> <body> <ul> <li>aaaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> <li>eeee</li> </ul> <button id="btn">点击新增</button> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> /* $("#btn").click(function () { var li=document.createElement("li") li.innerText="666" $(li).appendTo($("ul")) $("li").mouseover(function () { // console.log(this.innerText) $(this).css('background-color',"red").siblings().css('background-color',"white") }) }) $("li").mouseover(function () { // console.log(this.innerText) $(this).css('background-color',"red").siblings().css('background-color',"white") }) */ $("ul").on("mouseover","li",function () { // console.log(this.innerText) $(this).css('background-color',"red").siblings().css('background-color',"white") }) $("#btn").click(function () { var li=document.createElement("li") li.innerText="666" $(li).appendTo($("ul")) }) </script> </body> </html> 事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 200px; height: 200px; background-color: red; } .father { width: 600px; height: 600px; border: 1px solid black; } </style> </head> <body> <div class="father"> <div class="box"></div> </div> <form action="http://www.baidu.com" id="form"> <input type="text" id="inp"> <input type="radio" value="男" name="gender">男 <input type="radio" value="女" name="gender">女 <input type="radio" value="保密" name="gender">保密 <input type="submit" value="提交" id="btn"> </form> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> // $('.box').click(function () { // console.log("单击") // }) // $('.box').dblclick(function () { // console.log("双击") // }) // $('.box').mouseover(function () { // console.log("悬浮") // }) // $('.box').mouseout(function (event) { // console.log("儿子移除") // return false // console.log(event.type) // console.log(event.target) // event.preventDefault() // 阻止默认事件 // event.stopPropagation() // 阻止事件冒泡 // }) // $('.father').mouseout(function () { // console.log("爸爸移除") // }) // mouseenter 与 mouseover效果一样， // mouseleave 与 mouseout效果一样， // 但是前者不支持冒泡行为 // $('.box').mouseleave(function (event) { // console.log("儿子移除") // }) // // $('.father').mouseleave(function () { // console.log("爸爸移除") // }) // $('#inp').focus(function (event) { // console.log('鼠标聚焦'); // }); // $('#inp').blur(function (event) { // console.log('鼠标失去焦点'); // }); // $('#inp').keydown(function () { // $(this).val("123") // }); // $('#inp').keyup(function () { // $(this).val("123") // }); // $('#inp').change(function () { // console.log($(this).val()); // }); // $(":radio").change(function () { // console.log($(this).val()) // }) // $("#inp").select(function () { // console.log($(this).val()) // }) // $("#btn").click(function () { // console.log("123") // return false // }) $("#btn").submit(function () { console.log("123") return false }) </script> </body> </html>
Django
## 1 django目录介绍  ```python -day60 项目名 -app01 app的名字 -migrations 数据库变更相关记录（不要删，也不要改） -admin.py 后台管理（创建项目如果没有选，就没有） -apps.py app的相关配置，不用管 -models.py 数据库相关（重点） -tests.py 测试相关（不用管） -views.py 视图函数（重点） -day60 跟项目名同名目录（项目总体配置相关，配置文件，路由） -settings.py 很重要，整个项目的启动，由配置文件决定 -urls.py 路由（总路由） -wsgi.py wsgi服务器的配置，不需要管（后期上线会改一点点） -templates 模板文件（一个一个的html），pycharm创建出来才有这个文件加 -manage.py 启动项目，创建app，各种命令的操作 # 重点的是 -views.py -models.py -urls.py -templagtes文件夹 ``` ## 2 app介绍 ```python 1 创建 python3 manage.py startapp app名字 2 是什么，有什么用？ -没有app完全可以（一般情况下，一个项目，至少由一个app） -解耦合，把相同类似的功能写到一起组成一个app -多个app的作用是：区分不同的功能 -比如淘宝：用户相关功能，商品相关功能，订单相关功能 可以放在不同的app中 3 创建第二个app，叫app02（项目根路径，pycharm的terminal中敲） python3 manage.py startapp app02 4 创建完以后，一定要注册 ******************** -在配置文件中INSTALLED_APPS列表中写 -两种配置方式只能由一种存在 INSTALLED_APPS = [ ... #'app02.apps.App02Config', # 第一种方式 'app02' # 第二种方式 ] ``` ## 3 django的运行方式 ```python 1 启动django的方式 -pycharm中 详见下图 -通过manage.py 启动,在terminal中敲 python3 manage.py runserver 127.0.0.1:8080 python3 manage.py runserver 8080 python3 manage.py runserver 0.0.0.0:8080 # 项目上线，使用它 ctrl+c 停止 2 django中默认情况下socket用的是wsgiref（自己写的web框架），性能很低，仅仅用于测试，真正后期上线需要使用性能更高的【web服务器】uwsgi ```  ## 4 配置文件讲解 ```python import os # BASE_DIR：项目根路径 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) # SECRET_KEY：密钥，项目中默认的一些加密用它（不需要关注，可以改，但是不能删） SECRET_KEY = 'dk_' # DEBUG：调试模式，开，开发阶段是true，上线阶段把它设成false # 设置成开报错信息更完善 DEBUG = True # ALLOWED_HOSTS：上线阶段使用，允许谁访问 ALLOWED_HOSTS = ['*'] # INSTALLED_APPS 项目所有的app，新建的app要在里面注册 INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', # 'app01.apps.App01Config', 'app01', # 'app02.apps.App02Config', # 'app02' # ] # MIDDLEWARE 中间件 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', ] # ROOT_URLCONF 根路由是哪个文件，根路由的位置可以变 ROOT_URLCONF = 'day60.urls' # TEMPLATES 模板文件存放路径(如果使用django-admin创建的项目，需要手动配，否则找不到) TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, 'templates')] , 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ] # WSGI_APPLICATION wsgi服务器使用的是哪个 WSGI_APPLICATION = 'day60.wsgi.application' # DATABASES 数据库链接配置 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), } } # 不用管（内置app相关） AUTH_PASSWORD_VALIDATORS = [ { 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', }, { 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', }, { 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', }, { 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', }, ] # 国际化相关，语言，时区 LANGUAGE_CODE = 'en-us' TIME_ZONE = 'UTC' USE_I18N = True USE_L10N = True USE_TZ = True # 静态文件配置相关 STATIC_URL = '/static/' ## 重要的： 1 数据库 2 静态文件相关 3 根路由 4 模板文件 5 是否是调试模式 ``` ## 5 路由简单入门 ```python 1 地址和视图函数的映射关系---urls.py 文件 # urlpatterns列表，列表内放了url函数的执行结果 # 使用很简单，复制一行，改一下第一个参数（正则表达式），第二个参数是视图函数内存地址 urlpatterns = [ url(r'^admin/', admin.site.urls), # 在内部，请求来了，路径匹配成功，内部自动调用index(request),把request传入 url(r'^/index', views.index), ] 2 现阶段使用 -复制一行，改一下第一个参数（正则表达式），第二个参数是视图函数内存地址 99 了解： django项目中顶格写的代码，程序一允许就会执行 函数和方法的区别 ``` ## 6 视图简单入门 ```python 1 视图函数 views.py 函数（可以不放在views中，但是通常放在里面） 2 视图函数之请求对象 -# 1 请求方式(GET,POST) 浏览器地址栏中发出的请求都是get请求 print(request.method) -# 2 请求参数 get 请求这种形式：http://127.0.0.1/index?name=lqz&age=18 print(request.GET) # 把它当成字典 # print(request.GET.get('name')) print(request.GET['name']) # 可能会报错，推荐用get取值 # print(request.GET.get('age')) -# 3 pots形式提交的数据（数据放在请求体中，body体） print(request.POST) # 把它当成字典 2 视图函数之响应对象 -三件套 #1 -HttpResponse：返回字符串形式 #2 -返回模板文件：render 本质是函数，函数返回值还是HttpResponse的对象 #3 -重定向： redirect ``` ## 7 静态文件配置 ```python 1 js,css这些静态文件 2 需要在setting中配置 3 使用步骤 -1 在setting.py中 # 静态文件配置相关 STATIC_URL = '/static/' # 再配一个STATICFILES_DIRS=列表（列表内写路径），单词一个字母都不能错 STATICFILES_DIRS=[ os.path.join(BASE_DIR,'static'), ] -2 新建一个static文件加（可以叫别的名字？不要改） -新建img，js，css文件加，以后相应目录放相应代码 -3 在模板中使用 src="/static/js/jquery.min.js" ```
浙公网安备 33010602011771号