引用

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

  

js_jquery的更多相关文章

  1. Java简单示例-用户登录、单个页面的增删改查及简单分页

    index.html  -登录->stulist.jsp (index.html传递到LoginServlet,进行登录检测及写入session,NO返回index.html界面,OK 跳转到s ...

  2. apache tiles 页面模板的使用

    jar包maven <!-- Tiles 模板--> <dependency> <groupId>org.apache.tiles</groupId> ...

  3. jQuery stop()浅析

    作为前端开发人员,JS和JQuery是我们经常用到的开发语言和工具类库.我们都晓得,在jQuery中有一个很强大的方法——stop(),他是阻止在连续动画或事件中出现重复累积状况的方法.那么,stop ...

随机推荐

  1. Appnium安装-Mac平台

    Appium的安装-MAC平台   其实Appium的安装方式主要有两种: 1)自己安装配置nodejs的环境,然后通过npm进行appium的安装 2)直接下载官网提供的dmg进行安装,dmg里面已 ...

  2. Vue.use原理及源码解读

    vue.use(plugin, arguments) 语法 参数:plugin(Function | Object) 用法: 如果vue安装的组件类型必须为Function或者是Object<b ...

  3. Ubuntu下声卡驱动解决方法alsa

    一.首先介绍一下什么是ALSA : Advanced Linux Sound Architecture 的简称为 ALSA ,译成中文的意思是先进的Linux声音架构(这是google翻译的):一谈到 ...

  4. HashMap vs ConcurrentHashMap — 示例及Iterator探秘

    如果你是一名Java开发人员,我能够确定你肯定知道ConcurrentModificationException,它是在使用迭代器遍历集合对象时修改集合对象造成的(并发修改)异常.实际上,Java的集 ...

  5. Yii的缓存机制之动态缓存

    当整个页面被缓存,但只有小部分区域需要根据不同的条件设置不同的信息.(例如商品的详细页面的缓存中用户名是动态的)这里就需要设置动态缓存. 首先在被缓存的模板中使用renderDynamic进行动态渲染 ...

  6. 第九章-IO编程

    IO是输出输入的意思 在计算机中常用到的数据交换的地方是磁盘, 网络等 输入流是从外面(磁盘, 网络)流进内存 输出流是从内存流到外面(磁盘, 网络) 同步IO是指等待IO完成再继续执行 异步IO是在 ...

  7. OTL之Oracle开发总结《转》

    OTL之Oracle开发总结---转   关 于OTL,网上介绍的也不少,但看来看去也只是官方的那些文档.OTL很好用,结合官方提供的一些例子,多多尝试才能领悟.经过一个月左右的项目开发,对 OTL也 ...

  8. HUD1686(KMP入门题)

    Oulipo Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  9. 1.oracle中decode的一些巧妙用法

    1.符号函数sign在decode中的用法--比较大小 select decode(sign(变量1-变量2),-1,变量1,变量2) from dual; --取较小值sign()函数根据某个值是0 ...

  10. Ubuntu install JDK

    1.#下载JDK,记住保存的目录 2. sudo mkdir /usr/java 3. sudo tar zxvf jdk-7u75-linux-x64.tar.gz -C /usr/java 4. ...