JQ第一天

作者: knot98 | 来源:发表于2018-10-22 14:49 被阅读0次

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

官网下载

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

CDN

<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: '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("<b>Hello</b>");

五、JQ对象与JS对象

js对象转换为jq对象： $ele =$ (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

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    $.ajax({
        url: "http://127.0.0.1:5000/testAction",
        data: {
            usr: "zero",
            ps: "123456"
        },
        success: function (data) {
            console.log(data);
        }
    });
</script>

七、轮播图

简易jQuery版

<style type="text/css">
    .wrap {
        width: 300px;
        height: 200px;
        border: 1px solid black;
        overflow: hidden;
        position: relative;
    }
        
    ul {
        width: 1200px;
        height: 200px;
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        left: 0;
    }
        
    li {
        width: 300px;
        height: 200px;
        float: left;
        font: bold 100px/200px arial;
        text-align: center;
        color: white;
    }
</style>

<div class="wrap">
    <ul>
        <li style="background:red;">1</li>
        <li style="background:orange;">2</li>
        <li style="background:pink;">3</li>
        <li style="background:cyan;">4</li>
    </ul>
</div>
<div>
    <input type="button" value="图1" />
    <input type="button" value="图2" />
    <input type="button" value="图3" />
    <input type="button" value="图4" />
</div>

<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $('input').click(function() {
        $('ul').animate({
            'left': -$(this).index() * $('li').width()
        }, 500);
    })
</script>

swiper的使用

上课代码：

页面加载：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>页面加载</title>

    <!-- 导入jq -->
    <script src="js/jquery-3.3.1.js"></script>

    <script type="text/javascript">
        // js页面加载完毕后,触发的事件回调方法
        window.onload = function () {
            console.log("window load 1");
        }
        window.onload = function () {
            console.log("window load 2");  // 5
            var div = document.querySelector('.div');
            console.log(div);
        }
        // 只能绑定一个(逻辑下方的)回调函数
        // 页面加载完毕后回调

        // jq文档加载完毕
        $(document).ready(function () {
            console.log('document load 1');  // 2
        })
        $(document).ready(function () {
            console.log('document load 2');  // 3
        })
        // 简写
        $(function () {
            console.log('document load 3');  // 4
        })

        console.log('normal load');  // 1

    </script>

</head>
<body>
    <div class="div"></div>
    <img src="http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg"/>
</body>
</html>

jq功能汇总：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jq功能汇总</title>
    <style type="text/css">
        .active {
            border: 5px solid black;
        }
        p {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button class="b1">d1</button><button class="b2">d2</button>
    <div id="d1" class="div1"></div>
    <div id="d2" class="div2"></div>
</body>
<!-- 导入jq -->
<script src="js/jquery-3.3.1.js"></script>
<!-- jq -->
<script type="text/javascript">
    // 变量的命名规范:
    // jq变量一般由$开头

    // 1.jq的选择器: 满足css选择器语法
    // var $div = $('.div1');
    var $div = $('body #d1');
    console.log($div);

    // 2.文本操作
    $div.text("d1 d1 d1");
    $div.html("<b>d1 d1 d1</b>");

    // 3.样式操作
    $div.css({
        width: "200px",
        "border-radius": "50%"
    });

    // jq的方法基本都具有返回值,所以支持(建议)链式操作
    /*
    $div = $div.css("height", function () {
        console.log("js>>>", this);  // js的this本身
        console.log("jq>>>", $(this));  // jq的this本身
        console.log(">>>", $(this).width());  // jq对象指向的盒子宽度
        return $(this).width() * 2;  // jq会默认添加单位
    });
    $div.css("background-color", "red");
    */

    $div.css("height", function () {
        console.log("js>>>", this);  // js的this本身
        console.log("jq>>>", $(this));  // jq的this本身
        console.log(">>>", $(this).width());  // jq对象指向的盒子宽度
        return $(this).width() * 2;  // jq会默认添加单位
    }).css("background-color", "red");

    // 4.类名操作
    $('.b1').click(function () {
        $div.toggleClass("active");
    })

    // 5.事件操作
    $div.on('click', function () {
        console.log("$div 被点击了");
    })

    // 6.动画操作
    $('.b1').on('click', function () {
        $div.slideToggle();
    })

    // 7.文档操作
    // 创建标签
    var $p = $("<p></p>");
    // 样式操作
    $p.addClass("p");
    // 添加到页面
    $div.append($p);


</script>
<!-- js -->
<script type="text/javascript">
    // 1.选择器
    var div = document.querySelector('.div2');
    console.log(div);
    // 2.文本操作
    div.innerText = "d2 d2 d2";
    div.innerHTML = "<b>d2 d2 d2</b>";
    // 3.样式操作
    div.style.width = "200px";
    div.style.height = "200px";
    div.style.background = "orange";
    div.style.borderRadius = "50%";

    // 4.类名操作
    var b2 = document.querySelector('.b2');
    b2.onclick = function () {
        var c_name = div.className;
        if (c_name.match("active")) {
            div.className = c_name.replace(" active", "")
        } else {
            div.className += " active";
        }
    }
</script>
</html>

js与jq对象相互转化：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>对象转化</title>
    <style type="text/css">
        .div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    var $div = $('div');
    // jq => js
    // innerText
    var div = $div[0];
    div.innerText = "呵呵";

    // js => jq
    // addClass
    var $n_div = $(div);
    $n_div.addClass("div");
</script>
</html>

AJAX

client_ajax.html 代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
    <h1>登录</h1>
    <hr>
    <form action="">
        <label>账号:</label><input class="txt" type="text" name='usr'>
        <hr>
        <label>密码:</label><input class="ps" type="password" name="ps">
        <hr>
        <button type="submit">登录</button>
    </form>
    
</body>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    // 如果登录成功,h1显示登录成功
    // 如何登录失败,h1显示登录失败

    $("form").on("submit", function () {
        console.log(123);
        var usr = $('.txt').val();
        var ps = $('.ps').val();
        console.log(usr, ps);
        // 将数据提交给后台 => ajax

        $.ajax({
            url: "http://127.0.0.1:5000/loginAction",
            data: {
                usr: usr,
                ps: ps  
            },
            success: function (data) {
                $('h1').text(data);
            }
        })

        return false;
    });

</script>
</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()

JQ第一天

JQ初级

一、认识jQuery

1、什么是jQuery

2、jQuery的优势

二、jQuery的安装

1、版本

2、安装jQuery-3.3.1

三、jQuery基本使用

1、JQuery对象

2、页面加载

3、jQuery变量命名规范

四、功能概括

1、选择器

2、文本操作

3、样式操作

4、类名操作

5、事件操作

6、动画操作

7、文档操作

五、JQ对象与JS对象

六、Ajax

七、轮播图

上课代码：

AJAX

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读