JQ第一天

JQ初级

一、认识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

官网下载

CDN

三、jQuery基本使用

1、JQuery对象

• jQuery
• $
• jQuery.noConflict()

2、页面加载

// window.onload=fn单事件绑定，页面DOM树与资源完全加载完毕
// $(document).ready(fn)多事件绑定，页面DOM树加载完毕，简写$(fn)

3、jQuery变量命名规范

• 通常以$开头

四、功能概括

1、选择器

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

2、文本操作

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

3、样式操作

$ele.css({width: '200px', heigth: '200px'});
$ele.css('background-color', 'red').css('border-radius', '50%');

4、类名操作

$ele.toggleClass('active');

5、事件操作

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

6、动画操作

$ele.slideUp();

7、文档操作

$ele.append("Hello");

五、JQ对象与JS对象

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

六、Ajax

• server.py

from flask import Flask, request
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)

def test_action():
    usr = request.args['usr']
    ps = request.args['ps']
    if usr != 'zero' or ps != '123456':
        return 'login failed'
    return 'login success'

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

• client.html

七、轮播图

• 简易jQuery版

    

        
1
        
2
        
3
        
4
    


    
    
    
    

• swiper的使用

上课代码：

页面加载：

jq功能汇总：

    
    
    


    d1d2
    

    

js与jq对象相互转化：

AJAX

client_ajax.html 代码：

    
    


    
登录
    

    

        账号:
        

        密码:
        

        登录
    
    

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" and ps == "123":
        return "登录成功"
    return "登录失败"

# 启动服务
if __name__ == '__main__':
    app.run()