前端第十天

$(function(){

　　//标签及标签全局属性值,均加载完毕,但全局属性值对应的网络数据可能还没有加载完毕(二进制流数据)

　　$('img').attr('src');

　　1.选择器:

　　/$('css选择器语法');

　　$('body .dic:nth-child(2n)')

　　//.eq(index);  $('ul li').eq(0) =>第0位的jq对象

　　$('ul li').get(0)   ===>第0位的js对象

　　//js对象转化为jq对象  this ==> $(this)     box===> $box = $('box')

　　2.操作

　　width()  height()  innerWidth()  outerWidth([ture])  offset().left  position()

　　分别是(content)宽度,高度, 加padding宽度  加border宽度  即带True参数时为加 margin宽度  左边定位相对于父级

　　addClass()  removeClass()  toggleClass()  attr('src')  attr('src','value'|function)

　　分别是 添加类名(有就不操作)  移除类名  以及(有就移除(不确定),没有就添加)  获取全局属性  有就修改没有就设置全局属性

　　3.事件

　　on('click',fn)  |  click(fn)

　　$('.box').click({key:12345,function(ev)   {

　　 　　$(this).toggleClass('abc');

　　　　//阻止冒泡 (子父有相同的事件,防止父级重复响应)

　　　　ev.stopPropagation();

　　　　//取消默认动作(鼠标右键,a标签转跳)

　　　　return false;

　　　})

　　　　4.动画

　　　　//动画属性  动画时间   动画效果(曲线)

　　　　动画完成时的回调函数

　　　　//animate({动画的属性们 (key:value)},1000,"swing".fn)

})

</script>

</html>

小米轮播图:设置5个div 通过给一个类名定义属性达到动画效果,有左右点击事件及索引决定将类名添加给谁,且在索引达到极限时,重新将索引赋值,且同时将其他兄弟div移除类名,通过设置z-index达到最上面为显示的div

小米商城:定义创建列表函数(参数为索引确定创建那个数据)

　　根据数据创建列表 , 根据数据个数创建元素,分别循环赋值,每次循环结束时,分别在父级末尾添加元素,使用append方法,或appendTo,

为每个列表添加显示移除事件,控制区域显示的范围,由于使用的是display属性达到显隐,因此需要在每次赋值前清空数据,可以使用empty()方法,或者html("")属性

结构关系:

prev().get(0);方法得到之前的兄弟,通过get方法得到第一个js对象

pervAll()得到所有之前的兄弟

next()之后所有兄弟

parent()得到父级

parents()得到所有父级

children()得到所有子级

siblings()得到所有兄弟

DOM:

sup.append(sub);在sup的最后方添加sub:$('body').append($box);

sub.appendTo(sup);将sub插入到sup的最后方;$box.appendTo($('body'));

sup.prepend(sub);将sup的最前方添加sub;$('body').prepend($box);

在wrapper后添加box;$('.wrapper').after($box);

box插入到wrapper前;$box.insertBefore($('.wrapper'))

所有wrapper被box替换;$('.wrapper').replaceWith($box);

用box把所有的wrapper替换掉;$box.replaceAll($('.wrapper'))

$('.wrapper').empty();清空所有包括事件等同于$('.wrapper').html("");

自删:remove()不保留事件 detach()保留事件

表单:

action:请求的后台链接地址

method:请求方式:get|post(不显示数据)

<form action="" method="post">

可以提交给后台的数据必须具有唯一标识用name属性来标识

表单元素对象input通过设置type来实现不同的功能

<div>

　　<label for="usr">用户名:</label>

　　<input type="text" id="usr" name="usr value="00">

</div>

<div>

　　<label for ="pwd">密码: </label>

　　<input type="password" id="pwd" name="pwd" placeholder="请输入密码">

</div>

文本域

<textarea></textarea>

列表

<select name="sex">

　　<option value="male">男</option>

　　<option value = "female">女</option>

　　<option value="other">unknown</option>

</select>

单选框name来关联,checked为默认选中项

<div>

　　男<input type="radio" name="gender">

　　女<input type="radio" name = "gender" checked>

</div>

复选框 使用name关联

<div>

　　爱好:

　　男<input type="checkbox" name="like" value='male'>

　　女<input typr="checkbox" name="like" value="female" checked>

</div>

<div>

　　<button type="button">普通按钮</button>

　　<button type="reset">重置</button>

　　<button typr="submit">提交</button>

　　<input type="submit" value="我也是提交">

</div>

</form>

var val = $('#usr').val();

val()就是表单元素对象的内容,对应html就是value全局属性

flask实现简易后台

from flask import Flask,request;

from flask_cors import CORS;

创建服务器对象

app = Flask(__name__)

解决跨越,数据在两个服务器之间传输

CORS(app,supports_credentials=True)

将请求路径与逻辑函数形成一一对应关系

@app.route('/')  #http://127.0.0.1:5000/

def home():

　　return "<h1>主页</h1>"

@app.route('/index')  #http://127.0.0.1:5000/index

def index():

　　return "<h1 style='text-align:center;color:red'>index界面</h1>"

@app.route('/test')  #http://127.0.0.1:5000/test

def test():

　　a=request.args['a'] 通过request对象的args拿到前台数据

　　b=request.args['b'']

　　return a+b

为form表单登录请求提供处理逻辑

前端一定会出现页面转跳

@app.route('/login')

def login():

　　usr = request.args['usr']

　　pwd = request.args['pwd']

　　if usr == 'abc' and pwd == "123":

　　　　return "登录成功页面"

　　return "登录失败页面"

@app.route('/loginAjax')

def login_ajax():

　　usr = request.args['usr']

　　pwd = request.args['pwd']

　　if usr == 'abc' and pwd == '123':

　　　　return "登陆成功"

　　return "登录失败"

自启文件,启动flask服务器

if __name__ == "__main__":

　　app.run()  port=6666 可以设置端口号

form请求后台(会在服务器地址上发送页面转跳,不需要处理跨越问题)

<form action="http://127.0.0.1:5000/login" method="get">

　　<div class="row">

　　　　<label for="usr">用户名:</label>

　　　　<input id="usr" name="usr" type="text" placeholder="请输入用户名">

　　</div>

　　<div class="row">

　　　　<label for= "pwd">密码:</label>

　　　　<input id="pwd" name="pwd" type="password" placeholder="请输入密码">

　　</div>

　　<div class="row">

　　　　<button type="submit">登录</button>

　　</div>

</form>

ajax请求后台(数据在两个服务器上传递,需要处理跨越问题)

<h1>登录</h1>

<form action="" method="">

　　<div class="row">

　　　　<label for="usr">用户名:</label>

　　　　<input id="usr" name="usr" type="text" placeholder="请输入用户名>

　　</div>

　　<div class="row">

　　　　<label for = "pwd">密码:</label>

　　　　<input id="pwd" name="pwd" type="password" placeholder="请输入密码">

　　</div>

　　<div class="row">

　　　　<button type="submit">登录</button>

　　</div>

</form>

<script src="js/jquery-33.3.1.js"></script>

<script>

　　取消form表单默认提交数据的事件

　　$('form').submit(function(){return false;});

　　

　　//用button点击发送ajax请求来完成数据交互  ====>局部刷新

　　$('button').click(function(){ 

　　　　console.log("ajax请求...");

　　//获取用户输入的账户密码

　　var usrStr = $('#usr').val();

　　var pwdStr = $('#pwd').val();

　　

　　ajax发送前台请求

　　$.ajax({

　　　　usr:"http://127.0.0.1:5000/loginAjax",

　　　　//请求地址

　　　　data:{

　　　　　　usr:usrStr,//把用户名数据交给后台的key

　　　　　　pwd:pwdStr

　　　　　　},

　　　　success: function(arg){//请求成功的回调函数,arg后台返回的数据结果

　　　　console.log(arg);

　　　　//局部刷新前台页面内容

　　　　$('h1').text(arg);

　　　　}

　　　})

　　})

</script>

bootstrap入门

用bootstrap规定好的html结构来构建html结构,

在给具体的标签特定的类名(特定的全局属性),就能实现特定的页面样式与功能

创建页面元素对象:var  $box = $('<div></div>');

操作页面元素对象:$box.addClass('box');

添加到页面的指定位置:$('.wrapper').append($box);

jqDOM操作  

前提:布局

1.创建 

2.设置

3.添加

form提交数据一定会刷新页面

使用ajax可以完成局部数据刷新