jQuery基础

一 jQuery的简单介绍

　　jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

　　jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

二 jQuery对象与DOM对象关系

　　jQuery封装了DOM的一些复杂方法，两者可以互相转化，但是两者的方法不能互相混用。

$ele  jQuery对象
ele    DOM对象

$(ele)-->jQuery对象
$ele[0]--->DOM对象

三 jQuery的操作

　　http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp 基本选择器层级选择器属性选择器表单选择器表单属性

　　http://www.w3school.com.cn/jquery/jquery_selectors.asp

　　http://www.w3school.com.cn/jquery/jquery_ref_css.asp CSS操作，设置或返回元素的CSS属性

　　http://www.w3school.com.cn/jquery/jquery_dimensions.asp 尺寸操作

　　http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp 文档操作

　　http://www.w3school.com.cn/jquery/jquery_ref_events.asp 事件参考手册

　　http://www.w3school.com.cn/jquery/jquery_dom_get.asp 获得内容和属性

　　http://www.w3school.com.cn/jquery/jquery_dom_set.asp 设置内容和属性

　　http://www.w3school.com.cn/jquery/jquery_ref_attributes.asp 属性操作

　　https://www.w3cschool.cn/jquery/html-prop.html prop（）方法

　　http://www.w3school.com.cn/jquery/jquery_ref_effects.asp 效果函数

　　http://www.w3school.com.cn/jquery/jquery_ref_events.asp 事件

　　https://www.w3cschool.cn/jquery/event-on.html 事件绑定 on（）方法

　　http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp 遍历函数

　　http://www.w3school.com.cn/jquery/jquery_ref_data.asp 数据操作——指定的对象与任意数据相关联

　　http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp jQuery参考手册——Ajax

四实现快速返回顶部并且实现离顶部一定距离不显示返回按钮，超出一定距离显示返回按钮。

　　PS：

　　Window 对象表示浏览器中打开的窗口。如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;

        }
        .s1{
            position: fixed;
            right: 10px;
            bottom:10px;
            color: lightcoral;
        }
    </style>
</head>
<body>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
<div class="c">112</div>
    <span class="s1">返回</span>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $('span').click(function () {
            $(window).scrollTop(0)
        });
        $(window).scroll(function () {
            if($(window).scrollTop()>200){
                $('span').show()
            }
            else{
                $('span').hide()
            }
        })
    </script>
</body>
</html>

五利用jQuery实现左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .title{
            background-color: lightblue;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="title item" onclick="foo(this)">菜单一</div>
<div class="con">
    <p>111</p>
    <p>111</p>
    <p>111</p>
</div>
<div class="title item" onclick="foo(this)">菜单二</div>
<div class="con hide">
    <p>222</p>
    <p>222</p>
    <p>222</p>
</div>
<div class="title item" onclick="foo(this)">菜单三</div>
<div class="con hide">
    <p>333</p>
    <p>333</p>
    <p>333</p>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
    function foo(self) {
        $(self).next().removeClass('hide').siblings('.con').addClass('hide')     //自己写还是会出错的。$(self)变为jQuery对象。在调用next（）方法
    }
</script>
</body>
</html>

　　　　拿到对象后，javascript的方法是.classList.add('')和.classList.remove('')

　　　　jQuery方法是$(self),在这里self是形参，代指对象。$(self).next().addClass('') $(self).next().removeClass()。next（），addClass（），removeClass（）都是jQuery方法。

　　升级版

　　两行代码搞定，一行代码也行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .title{
            background-color: lightblue;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="title item" >菜单一</div>
<div class="con">
    <p>111</p>
    <p>111</p>
    <p>111</p>
</div>
<div class="title item" >菜单二</div>
<div class="con hide">
    <p>222</p>
    <p>222</p>
    <p>222</p>
</div>
<div class="title item" >菜单三</div>
<div class="con hide">
    <p>333</p>
    <p>333</p>
    <p>333</p>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
    $('.item').click(function () {
        $(this).next().removeClass('hide').siblings('.con').addClass('hide')
    }
    )
</script>
</body>
</html>

八方法

　　1 toggle()

　　示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $('li').click(function () {
            $(this).toggle(100);
            console.log(this);
        })
    </script>
</body>
</html>

六简单模拟注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    <label for="i1">姓名</label><input type="text" id="i1"><span></span>
</p>
<p>
    <label for="i2">密码</label><input type="text" id="i2"><span></span>
</p>
<input type="button" class="reg_btn" value="注册">
<script src="jquery-3.2.1.min.js"></script>
<script>

    $('.reg_btn').on('click', function () {
        $('span').text(''); //每次判断之前清空span标签。
        var flag = true;   //设置标志位
        $('input').each(function () {
            if ($(this).val().length === 0) {
                $(this).next().text($(this).prev().text() + '不能为空')
                flag = false;
                return false             //终止each循环
            }
        });
        return flag;                      //return false。阻止button默认事件。原本是button绑定的事件执行完后，会自动执行原本的事件功能
    })

</script>
</body>
</html>

七表格的增删改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>周末作业大礼包</title>
    <style>
        .hide {
            display: none;
        }

        .shade {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.5;
        }

        .modal {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 400px;
            height: 200px;
            background-color: white;
            margin-top: -100px;
            margin-left: -200px;

        }
    </style>
</head>
<body>
<button class="add">添加</button>

<table border="1">
    <thead>
    <tr>
        <td>#</td>
        <td>姓名</td>
        <td>爱好</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Egon</td>
        <td>杠娘</td>
        <td>
            <button class="edit">编辑</button>
            <button class="delete">删除</button>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>Alex</td>
        <td>吹牛逼</td>
        <td>
            <button class="edit">编辑</button>
            <button class="delete">删除</button>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>小轩轩</td>
        <td>抽烟喝酒烫头</td>
        <td>
            <button class="edit">编辑</button>
            <button class="delete">删除</button>
        </td>
    </tr>
    </tbody>
</table>

<!--模态框开始-->
<!--背景 遮罩层开始-->
<div class="shade hide"></div>
<!--背景 遮罩层结束-->
<!--modal开始-->
<div class="modal hide">
    <label for="">姓名<input id="modal-name" type="text"></label>


    <label for="">爱好<input id="modal-habit" type="text"></label>

    <input type="button" value="提交" class="submit">
    <input type="button" value="取消" class="cancel">
</div>
<!--modal结束-->
<!--模态框结束-->

<script src="../day61/jquery-3.2.1.min.js"></script>
<script>
    // 新增按钮
    $(".add").on("click", function () {
        // 显示模态框
        // 去掉.hide (遮罩层和modal)
        showModal();
    });

    // 模态框上的提交按钮绑定事件
    // 1. 取值  --> 取的modal里面input的值  --> 保存到变量
    // 2. 添加一行新记录 --> 新的tr标签 --> 自己拼接（这段代码在事件委托示例里面）
    // 3. 清空modal里面input的值  --> .val("")  --> 把清空单独写一个函数
    // 4. 关闭模态框
    $(".submit").on("click", function () {
        // 1. 取值  --> 取的modal里面input的值  --> 保存到变量
        var name = $("#modal-name").val();
        var habit = $("#modal-habit").val();
        var num = $("tbody tr").length + 1;
        // 因为我们的编辑和新添加都用的一个模态框
        // 需要做判断，我到底是添加呢还是编辑呢？
        if ($(".modal").data("currentTr") === undefined) {
            // 不是编辑操作
            // 是新添加操作
            // 生成完整的tr
            var trEle = document.createElement("tr");
            var $trEle = $(trEle);
            $trEle.append("<td>" + num + "</td>");
            $trEle.append("<td>" + name + "</td>");
            $trEle.append("<td>" + habit + "</td>");
            $trEle.append("<td>\n" +
                "            <button class=\"edit\">编辑</button>\n" +
                "            <button class=\"delete\">删除</button>\n" +
                "        </td>");

            // 把tr加到table里面
            $trEle.appendTo("tbody");
        }else {
            // 是一个编辑操作
            var $data = $(".modal").data("currentTr");
            // 这里可以删除掉.data("currentTr")
            $(".modal").removeData("currentTr");
            $data.eq(1).text(name);
            $data.eq(2).text(habit);
        }
        // 清空模态框里面的数据
        cleanModal();
        // 关闭模态框
        closeModal();


    });

    // 编辑按钮
//    $(".edit").on("click", function () {
    $("table").on("click", ".edit", function () {
        // 1. 弹出模态框
        showModal();
        // 2. 取值 --> 当前行的姓名和爱好  --> 赋值给变量
        var $siblings = $(this).parent().siblings();
        var name = $siblings.eq(1).text();
        var habit = $siblings.eq(2).text();
        // 3. 给modal框里的input赋值
        $("#modal-name").val(name);
        $("#modal-habit").val(habit);

        // 把当前的tr这个jquery对象保存起来。保存起来，在后面拿出来可以直接用，就像直接取一样，这都可以！！！
        $(".modal").data("currentTr", $siblings);

    });


    // 点击模态框里面的提交按钮要做的事儿
    // 1. 取值  --> 取的modal里面input的值  --> 保存到变量
    // 做判断
    // 1. 如果能从$(".modal").data("tr")能取到值（undefined）表示这是一个编辑操作
    // 去替换当前tr的对应值
    // 否则就是一个新添加的操作


    // 删除按钮的事件
    // 1. 删除当前行
    // 2. 更新序号

    $("table").on("click", ".delete", function () {
        // 更新序号
        $(this).parent().parent().nextAll();  // 找到它后面所有的tr
        // 每一行的序号都减1
        $(this).parent().parent().nextAll().each(function () {
            var $currTd = $(this).children().first();
            var num = $currTd.text() - 1;  // 令人窒息的操作
            $currTd.text(num);
        });

       $(this).parent().parent().remove();

    });

    // 给取消按钮绑定事件
    $(".cancel").on("click", function () {
        closeModal();
    });

    function showModal() {
        // 显示模态框
        // 去掉.hide (遮罩层和modal)
        $(".shade").removeClass("hide");
        $(".modal").removeClass("hide");
    }

    function closeModal() {
        // 关闭模态框
        $(".shade").addClass("hide");
        $(".modal").addClass("hide");
    }

    function cleanModal() {
        // 清空模态框里面input的值
        $(".modal input:text").val("");
    }


</script>

</body>
</html>

24 使用 Python 的 Web 框架，做一个 Web 版本 TodoList 应用。

　　简单实现了下，发现都忘的差不多了。

　　todo.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Title</title>
    <style>
        .hide {
            display: none;
        }

    </style>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="pull-right">
            <form class="form-inline">
                <div class="form-group">
                    <label for="id_input1">名称</label>
                    <input type="text" class="form-control" id="id_input1" placeholder="筛选的字段">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
        </div>
    </div>
    <div class="row">
        <div>
            <table class="table-bordered table-hover ">
                <thead>
                <tr>
                    <th class="col-md-8">任务</th>
                    <th class="col-md-4">管理</th>
                </tr>
                </thead>
                <tbody>
                {% for info in infos %}
                    <tr>
                        <td>{{ info.name }}</td>
                        <td><a href="">删除</a></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <button type="button" class="btn btn-primary " data-toggle="modal" data-target="#myModal">
            创建任务
        </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">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">任务名称</h4>
                    </div>
                    <div class="modal-body">
                        <form action="" method="post"><textarea class="form-control" id="mission-text"></textarea>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" id="id_save" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Button trigger modal -->


<script src="/static/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
    $('#id_save').on('click',function () {
        $.ajax({
            url:'/todo/',
            type:'post',
            data:{'mission':$('#mission-text').val()},
            success:function (data) {
                if (data == '1'){
                    location.href='/todo/';
                }
                else
                    {
                    location.href='https://www.baidu.com';
                }

            }
        })
    })

</script>
</body>

　　views.py

def todo(request):
    if request.method == 'POST':
        mission = request.POST.get('mission')
        if mission:
            Mission.objects.create(name=mission)
            return HttpResponse('1')
        else:
            return HttpResponse('数据不能为空！')
    infos = Mission.objects.all()
    return render(request,'todo.html',{'infos':infos})

　　总结：

　　　　1 模态框与jquery是基友。使用ajax 实现页面局部刷新的功能。

　　　　2 使用模态框，提交的button 并不在 form 标签内，所以用，jquery 操作。

　　　　3 jquery的基本操作

　　　　　　$('#id') $('.class')

　　　　　 $.ajax({

　　　　　　　　url:'xx',

　　　　　　　　type:'post',

　　　　　　　　data:{'':"},

　　　　　　　　success:fuction(data){

　　　　　　　　　　if () {

　　　　　　　　　　　　location.href='/xx/' #根据后端返回的数据，由前面来实现页面跳转的功能。

　　　　　　　　　　　　}

　　　　　　　　　　else{}

　　　　　　　　　　}

　　　　　　　　})　

posted @ 2017-11-15 13:35 骑者赶路阅读(220) 评论(0) 收藏举报

刷新页面返回顶部

jQuery基础

公告