jQuery与ajax入门

说明书

jq-Color

CDN: https://www.bootcdn.cn/jquery

一、认识jQuery

1、什么是jQuery

• jQuery是对原生JavaScript二次封装的工具函数集合

• jQuery是一个简洁高效的且功能丰富的JavaScript工具库

2、jQuery的优势

• 完全开源的源代码

• 强大简洁的选择器

• 事件、样式、动画的良好支持

• 链式表达式

• 简化的Ajax操作

• 跨浏览器兼容

• 丰富的插件及对外的扩展接口

二、jQuery的安装

1、版本

• 开发(development)版本：jQuery-x.x.x.js

• 生产(production)版本：jQuery-x.x.x.min.js

2、安装jQuery-3.3.1

官网下载

<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    // user code
</script>

CDN: https://www.bootcdn.cn/jquery

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
   // user code
</script>

三、jQuery基本使用

1、JQuery对象

• jQuery
• $
• jQuery.noConflict()

2、页面加载

<img src="http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg"/>
<script>
    //页面加载完毕执行回调
    window.onload = function() {
        console.log("window load 1");
    };
    window.onload = function() {
        console.log("window load 2");
    };
    //文档加载完毕回调
    $(document).ready(function() {
        console.log("document load 1");
    });
    //简写
    $(function() {
        console.log("document load 3");
    });
</script>
// window.onload=fn单事件绑定，页面DOM树与资源完全加载完毕
// $(document).ready(fn)多数据绑定，页面DOM树加载完毕，简写$(fn)

3、jQuery变量命名规范

• 通常以$开头

四、功能概括

1、选择器

var $ele = $('.ele');

2、文本操作

$ele.text("添加文本");

3、样式操作

$ele.css({'width': 200, height: '200px'});
$ele.css('background-color', 'red').css('border-radius', '50%');
//获取自身宽度
$ele.css("width');

#### 4、类名操作

$ele.toggleClass('active');//开关

5、事件操作

$div.click(function() {})
$ele.on('click', function() {});

6、动画操作

$div.slideToggle()

7、文档操作

$ele.append("<b>Hello</b>");

五、JQ对象与JS对象

• js对象转换为jq对象：(ele);
• jq对象转换为js对象：ele = ele.get(0);

六、Ajax

使用方法

$.ajax({
    url: 接口地址,
    data: {
        发送给后台的数据包,格式:
        key1:value1,
        key2:value2,
    },
    success: function (data) {
        接收到的后台返回数据
        console.log(data)
    }
})

简单的登录认证

• server.py

from flask import Flask,request
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)
@app.route('/loginAction',methods=["GET","POST"])
def login_action():
    print(request.args)
    usr =request.args['usr']
    ps=request.args['ps']
    if usr == 'abc':
        if ps=='123456': return '登陆成功'
        return '密码错误'
    return '用户名不存在'
    return ""

if __name__ == '__main__':
    app.run()
    
//安装Flask及Fllask-Cors包

• client.html

<h1>登录</h1>
<hr>
<form>
    <label>账号: </label><input class="usr" name="usr" type="text">
    <hr>
    <label>密码: </label><input class="ps" name='ps' type="password">
    <hr>
    <button type="submit">登录</button>
</form>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $('form').on('submit', function () {
        var usr = $('.usr').val();
        var ps = $('.ps').val();
        console.log(usr, ps);
        $.ajax({
            url: "http://127.0.0.1:5000/loginAction",
            data: {
                usr: usr,
                ps: ps
            },
            success: function (data) {
                $('h1').text(data);

            }
        });
        return false
    })


</script>