jQuery快速入门与实践-优快云博客

引用

jQuery 是一个 JavaScript 库，不需要安装，直接引用就行

    <!-- jQuery -->
    <script src="/static/vendors/jquery/dist/jquery.min.js"></script>

语法

$(selector).action()
#$定义jquery
#selector是html元素选择器
#action()对元素执行操作

文档就绪事件

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

或者

$(function(){
 
   // 开始写 jQuery 代码...
 
});

有多个函数时：
$(function () {
    datatable_func()
    access_key();
    flush_key();
    delete_key();
});
#防止在DOM加载完之前就执行jquery代码
#一般在写jquery时，先上一个$(function (){}把所有函数放进去，然后下面再写函数

点击响应事件

<body>
    <p id="test1">这是一个段落。</p>
    <p id="test2">这是另外一个段落。</p>
    <p>输入框: <input type="text" id="test3" value="this is jQuery"></p>
    <button id="btn1">设置文本</button>
    <button id="btn2">设置 HTML</button>
    <button id="btn3">设置值</button>
    <!-- jQuery -->
    <script src="/static/vendors/jquery/dist/jquery.min.js"></script>

    <script>

        $(function () {
            myFunction()
        });

        function myFunction()
        {
            $("#btn1").click(function () {
                $("#test1").text('<h3>hello jQuery</h3>');
            });
            $("#btn2").click(function () {
                $("#test2").html('<h3>hello jQuery</h3>');
            });
            $("#btn3").click(function () {
                $("#test3").val('hello jQuery');
            });
        }
    </script>

</body>
#text() - 设置或返回所选元素的文本内容
#html() - 设置或返回所选元素的内容（包括 HTML 标记）
#val() - 设置或返回表单字段的值

Ajax

function flush_key()
{
    $("#flush_status").click(function () {
        $.ajax({
            url:"{% url 'salt_key_update' %}",
            success: function (arg) {
                if(arg){
                    window.location.href = "{% url 'salt_key_list' %}";
                }
            }
        });
    });
}
#在salt_key_list页面
#由id=flush_status的button click触发函数
#使用ajax函数，请求salt_key_update
#请求成功时，如果有参数返回，则定向到salt_key_list

function download_log()
{
    $("#log_download").click(function () {
        $.ajax({
            url:"{% url 'log_download' %}",
            type:"POST",
            data:{'server':$("#id_server").val(),'subtype':$("#id_subtype").val(),'logpath':$("#id_logpath").val()},
            success: function (arg) {
                if(arg){
                    window.location.href = arg;
                }
            }
        });
    });
}
#把三个参数发送给log_download，然后返回一个arg，请求这个arg


 #下载url,由js响应
 download_url = 'http://192.168.10.12/%s/files%s'  %(server,zip_name_path)
 return HttpResponse(download_url)
#download_url返回给js

转载于:https://www.cnblogs.com/jabbok/p/10408261.html