js_jquery
2024-09-07 13:45:56
引用
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
最新文章
- Java反射机制
- elastalert SpikeRule异常告警问题
- SQL语句优化实践
- word2vec使用说明(google工具包)
- Android地图开发之地图的选择
- Java 使用正则表达式
- [HIHO1174]拓扑排序&#183;一(拓扑排序)
- c++内存分配
- AJAX与servlet的信息交互
- java开发的web下载大数据时的异常处理
- MVC中AuthorizeAttribute用法并实现权限控制
- UVA 1358 - Generator(dp+高斯消元+KMP)
- (转)流量加速插件 FinalSpeed介绍及一键安装教程
- 云服务器搭建在线ssh终端GateOne
- mySQL配置文件、备份与恢复
- Linux学习笔记(二):实战-根据微服务端口号关闭进程
- 关于Java Logger类的使用问题 - 内存不释放
- Hamburgers
- 【WPF/C#】使用BackgroundWorker实现多线程/异步操作
- beifencode