js_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