python_day16 Jquery、Bootstrap、Django
Jquery、
Bootstrap、
Django
上周Jquery
选择器
基本选择器： id $("#id") class $(".class") 标签选择器 $("标签名称")
组合选择器： 后代选择器 $(".outer p") 子代选择器 $(".outer>p") 多元素选择器：$(".outer,#d1")
属性选择器： $("[属性名='值'][.....]")
表单选择器： 针对表单元素 $("[type='text']") ============= $(":text")
筛选器：$("ul li").eq() $("ul li").first() $("ul li").last() $("").hasclass("c1")
导航查找方法 ：
向下查找兄弟标签：
$().next()
$().nextAll()
$().nextUntil(".c1")
向上查找兄弟标签：
$().prev()
$().prevAll()
$().prevUntil(".c1")
可以查找所有兄弟标签： $().siblings()
查找子标签： 子代查找：$().children("") 后代查找： $().find("")
查找父级标签：$().parent() $().parentUntil("")
属性操作
文本操作： 取值：$().html() $().text() 赋值：$().html(“”) $().text(“”)
$().val()
属性操作： DOM: ele.属性名=值 ele.setAttribute("属性名","值")
juqery：取值： $().attr("属性名") 赋值：$().attr("属性名"，"值")
$().prop("checxked") $().prop("selected")
class属性操作： $().addClass("c1") $().removeClass("c1")
左侧菜单： jquery支持链式操作 $(this).html("hello").next().css("color","red")
节点操作：
创建节点 ： $("<标签名>")
添加节点：
父节点.append(子节点)
子节点.appendto(父节点)
css操作：
属性操作-attr方法.html
<!--引入jquery文件-->
<script src="jquery-3.2.1.js"></script>
<p>PPP</p>
<script>
$("p").attr("class","c1"); //赋值
$("p").attr("id","d1");
// F12 检查 控制台
console.log($("p").attr("class")); //取值
console.log($("p").attr("id"));
</script>
事件绑定.html
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<button>add</button>
<script>
//新添加内容没有点击显示内容功能
// $("ul li").click(function () {
// alert($(this).html())
// });
//jquery事件绑定方式1：jquery对象.事件（function () {}）
//$(this) jquery对象 代指当前点击的标签
$("button").click(function () {
var $li = $("<li>"); //新建标签
$li.html("444"); //标签赋值
$("ul").append($li); //添加标签append
});
//事件绑定on方法
// 下面两种写法一致
// $("botton").on("click","li",function () {
// alert(123);
// });
// $("botton").click(function () {
// alert(123);
// });
//事件委派
$("ul").on("click","li",function () {
alert(123)
})
</script>
<script>
//文档加载完成后才会执行上面的代码
$(document).ready(function () {
$("ul li").click(function () {
alert($(this).html())
})
})
</script>
$(function () {
$("botton").on("click","li",function () {
alert(123);
});
$("botton").click(function () {
alert(123);
});
$("ul").on("click","li",function () {
alert(123)
})
//each循环
<p>111</p>
<p>222</p>
<p>333</p>
<script>
$("p").css("color","red");
</script>
// $,each的遍历循环方式1： $.each(obj,function)====================================
var arr=[11,2,34];
$.each(arr,function (i) {
console.log(i);
})
$.each(arr,function (i,v) {
console.log(i,v);
})
var obj={"name":"yuan","age":"18"}
$.each(obj,function (i,v) {
console.log(i,v)
})
// $,each的遍历循环方式2：$("").each(function)
$("p").each(function (i,v) {
// console.log($(this).html())
// console.log(i,v);
if(i == 1){
$(this).css("color","red");
}
})
表格操作.html----全选、反选、取消
<button class="selectAll">全选</button>
<button class="cancel">取消</button>
<button class="reverse">反选</button>
<hr>
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>张三</td>
<td>12</td>
<td>s6</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>张三</td>
<td>12</td>
<td>s6</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>张三</td>
<td>12</td>
<td>s6</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>张三</td>
<td>12</td>
<td>s6</td>
</tr>
</table>
<script>
$(".selectAll").click(function () {
$(":checkbox").attr("checked","checked");
})
$(".cancel").click(function () {
$(":checkbox").removeAttr("checked");
})
$(".reverse").click(function () {
$(":checkbox").each(function () {
//用此方法可能反选有问题
if ($(this).attr("checked") == "checked") {
$(this).removeAttr("checked")
}
else {
$(this).attr("checked","checked")
}
});
})
</script>
//方法2：prop更适合于checked/selected等勾选 prop与attr用法一样
<script>
$(".selectAll").click(function () {
$(":checkbox").prop("checked",true);
})
$(".cancel").click(function () {
$(":checkbox").prop("checked",false);
})
$(".reverse").click(function () {
$(":checkbox").each(function () {
$(this).prop("checked",!$(this).prop("checked"));
// if ($(this).prop("checked")) {
// $(this).prop("checked",false)
// }
// else {
// $(this).prop("checked",true)
// }
})
})
</script>
属性操作.html ----- val方法
<input type="text" class="c1" value="123">
<textarea name="" id="" cols="30" rows="10" class="c2" value="124"></textarea>
<button>show</button>
<select id="d1">
<option value="hebei">河北</option>
<option value="henan">河南</option>
<option value="hubei">胡北</option>
</select>
<div class="c3" value="div">DIV</div>
<script>
console.log($(".c1").val()) //取值
$(".c1").val("hello") //赋值
console.log($(".c2").val()) //取值
$(".c2").val("hello world") //赋值
$("button").click(function () {
console.log($(".c2").val())
console.log($("#d1").val())
})
console.log($(".c3").val()) //取不到自定义的value值
</script>
文档节点操作.html ---
<div class="c1">
<h3>hello world</h3>
</div>
<hr>
<button>add</button>
<script>
$("button").click(function () {
//添加节点
var $h4=$("<h4>"); //创建标签
$h4.html("hello")
// var $img=$("<img>")
// $img.attr({"src":"egon.jpg","width":100,"height":100}) //可以设置多个属性
// $(".c1").append($h4) //父节点添加子节点，追加
// $($h4).appendTo($(".c1")) //子节点添加到父节点
// $(".c1").prepend($h4) //父节点添加子节点最前面
// $h4.prependTo(".c1")
//替换
// $(".c1 h3").replaceWith($h4);
// 删除 remove,empty
// $("h3").remove()
// $(".c1").remove()
// $(".c1").empty() //只是清除内容，外面框架会留着
//复制
var c=$(".c1").clone()
// var c=$("h3").clone()
$(".c1").after(c)
})
</script>
<style>
.c1{width: 100px;height: 100px;}
</style>
克隆实例.html
<div class="outer">
<div class="item">
<button class="add">+</button>
<input type="text">
</div>
</div>
<script>
$(".add").click(function () {
// var $item=$(".item").clone(); //克隆方式为1变2，变4，变8.。。
// $(".outer").append($item)
var $item=$(this).parent().clone()
$item.children().first().html("-").attr("class","del_ele")
$(".outer").append($item)
})
// $(".del_ele").click(function () { //后添加上的标签不能识别到
// })
$(".outer").on("click",function () {
$(".del_ele").click(function () {
$(this).parent().remove()
})
})
</script>
动画效果.html ------显示、隐藏、切换
<p>yuan</p>
<button class="show">show</button>
<button class="hide">hide</button>
<button class="qiehuan">qiehuan</button>
<script>
$(".show").click(function () {
$("p").show(1000) //1000指的是显示隐藏的时间
})
$(".hide").click(function () {
$("p").hide(1000)
})
$(".qiehuan").click(function () {
$("p").toggle(1000)
})
</script>
动画效果.html -----淡入淡出
淡入淡出是透明度的变化，由深变浅
<p>yuan</p>
<button class="ru">淡入</button>
<button class="chu">淡出</button>
<button class="qiehuan">qiehuan</button>
<script>
$(".ru").click(function () {
$("p").fadeIn(1000) //1000指的是显示隐藏的时间
})
$(".chu").click(function () {
$("p").fadeOut(1000)
})
$(".qiehuan").click(function () {
$("p").fadeToggle(1000)
})
</script>
css操作 $().offset $().positon
偏移量.html
<!--引入jquery文件-->
<script src="jquery-3.2.1.js"></script>
<style>
.c1{width: 200px;height: 200px;background-color: red;}
body{margin: 0;}
</style>
</head>
<body>
<div class="c1"></div>
<button class="change">change</button>
<script>
//offset方法的参照物对象是可视窗口
//检查 console可以帮助我们做测试用
console.log($(".c1").offset()) // 获取偏移量对象 {top:0,left:0}
console.log($(".c1").offset().top) //取值
console.log($(".c1").offset().left)
$(".change").click(function () {
$(".c1").offset({top:200,left:200}) //赋值
})
</script>
position.html
<style>
.c2{width: 100px;height: 100px;background-color: blue;}
.father{position: relative}
</style>
</head>
<body>
<div class="father">
<div class="c2"></div>
</div>
<button class="change">change</button>
<script>
//父元素必须是已定位的
console.log($(".c2").position()) // 获取偏移量对象 {top:0,left:0}
console.log($(".c2").position().top) //取值
console.log($(".c2").position().left)
console.log($(".c2").offset()) // 获取偏移量对象 {top:0,left:0}
console.log($(".c2").offset().top) //取值
console.log($(".c2").offset().left)
$(".change").click(function () {
$(".c2").position({top:200,left:200}) //赋值
})
</script>
tab.html 显示菜单，对象显示内容
<!--引入jquery文件-->
<script src="jquery-3.2.1.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.tab_outer{
margin: 20px auto;
width: 60%;
}
.menu{
background-color: #cccccc;
/*border: 1px solid red;*/
line-height: 40px;
text-align: center;
}
.menu li{
display: inline-block;
margin-left: 14px;
padding:5px 20px;
}
.menu a{
border-right: 1px solid red;
padding: 11px;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px;
}
.hide{
display: none;
}
.current{
background-color: #2868c8;
color: white;
border-top: solid 2px rebeccapurple;
}
</style>
</head>
<body>
<div class="tab_outer">
<ul class="menu">
<li egon="c1" class="current">菜单一</li>
<li egon="c2" >菜单二</li>
<li egon="c3">菜单三</li>
</ul>
<div class="content">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
<script>
$(".menu li").click(function () {
$(this).attr("class","current").siblings().attr("class","hide")
$("#"+$(this).attr("egon")).removeAttr("class").siblings().attr("class","hide")
})
</script>
前端：看谁的页面好看就拿谁的
Bootstrap、
"put|67612|a.png"
关于http协议：
基于TCP协议
请求协议：（浏览器发送给服务器）
请求首行 GET url http 1.1
请求头 Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Content-Length:17
空行
请求体 a=1
b=2
注意：GET请求不会把请求数据放在请求体中，会放在url后面，比如http://www.cnblogs.com/wupeiqi/articles/5237672.html?a=1&b=2
响应协议：（服务器发送给浏览器的）
响应首行 HTTP协议版本号， 状态码， 状态消息
响应头
空行
响应正文 html页面
url： http://www.baidu.com
http://www.cnblogs.com/wupeiqi/articles/5237672.html?a=1&b=2
协议：http
域名：www.cnblog.com
路径：/wupeiqi/articles/5237672.html
get请求数据：?a=1&b=2
get请求：
（1）地址栏输入url
（2）<a href="请求url">点击</a>
（3） <form action="请求url" method="get"></form>
post请求：
<form action="请求url" method="post"></form>
bootstrap中文网
Bootstrap前端框架
v3.bootcss.com 下载源码 解压.dist CDN引入方式
socketserver 1-7步
Django web应用框架
bs文件夹 dist文件夹 css bootstrap.css
js bootstrap.js
fonts
bsDemo.html
<link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-5 col-lg-offset-3">
<table class="table table-bordered table-striped table-hover">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>班级</th>
</tr>
<tr>
<td>zhang san</td>
<td>18</td>
<td>py18</td>
</tr>
<tr>
<td>zhang si</td>
<td>19</td>
<td>py19</td>
</tr>
</table>
</div>
</div>
</div>
v3.bootcss.com/components/ 图标下文字直接用
v3.bootcss.com/getting-strated
v3.bootcss.com/css
栅格系统.html
<!--引入jquery文件-->
<script src="jquery-3.2.1.js"></script>
<link rel="stylesheet" href="bootstrap.css">
<style>
.item div{border:solid 1px red}
</style>
</head>
<body>
<!--标题菜单栏-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--栅格系统-->
<div class="container">
<div class="row">
<div class="col-md-3">yuan</div>
<div class="col-md-1">alex</div>
<div class="col-md-8">egon</div>
</div>
<div class="row item">
<div class="col-md-5">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row item">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row item">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row item">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row item">
<div class="col-lg-4 col-md-offset-3">yuan</div>
</div>
<div class="row item">
<div class="col-md-8">
<div class="row">
<div class="col-lg-4">111</div>
<div class="col-lg-4">222</div>
<div class="col-lg-4">222</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-3">
</div>
</div>
<button class="btn btn-primary btn-lg">添加</button>
<button class="btn btn-danger">添加</button>
<button class="btn btn-info btn-sm">添加</button>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
Django
MTV：
URL： url的路径与视图函数的映射关系
http://jd.com/caidian/ caidian-----foo()
http://jd.com/car/ car---------bar()
http://jd.com/login/ login---------login()
views:
逻辑处理
models：与数据库相关的操作
template(模板): 与html文件相关的操作
创建项目命令：django-admin startprject 项目名
创建应用命令：python manage.py startapp appname
启动项目： python manage.py runserver IP PROT
mysite
manage.py 操作Django项目
mysite：
settings：配置
urls： 路径与视图的映射关系
wsgi： 创建socket（解析，封装数据的过程）
app01:
views: 存放视图函数
models：处理数据库
浏览器 urls：ajsdhsalkda ashdksa asjdfa
urls.py:
Django web框架 769056.html
Django-MTV 7629939.html 2节课内容来讲
demo2.html
<form action="" method="post">
<p><input type="text" name="user"></p>
<p><input type="password" name="pwd"></p>
<input type="submit">
</form>
pip3 install Django 安装Django 源的问题，豆掰源或阿里源
文件夹下scripts中有Django-admin.exe/js 加入环境变量
cmd:django-admin startproject myusite 生成项目 生成mysite文件夹
项目与应用的关系：1、一个项目中有多个应用。 2、一个应用可以有多个项目用
项目包含应用
mysite文件夹 manage.py:是控制项目的 操作Django项目
mysite: settings:配置
urls: 路由控制器 路径与视图函数的映射关系
wsgi.py: 创建socket对象（封装、解析数据的过程）
创建应用命令cmd:python manage.py startapp app名/app01 增加app01文件夹
app01： models:处理数据库
views:存放视图函数
pycharm 新建Django项目：more settings 创建app01\
启动项目：python manage.py runserver IP PORT 本机8000默认
pycharm Terminal python manage.py runserver
127.0.0.1/8000/timer 实现由时间显示的需求
