jQuery简明教程

偶尔才用用jQuery,但是老是不记得怎么用,所以总结一下做个笔记

都9102年了,还在用jQuery?是的,有时候还是会用到jQuery:

  • 不想做单页应用(例如不方便SEO,除非预渲染)
  • 只需要一些简单的操作,并不需要MVVM
  • 已经有jQuery依赖了,不想再引入新的依赖
  • 。。。其他

jQuery是一个JS库,大约在2014年左右风靡一时,现在的风头已经全都转向了React,Angular,Vue等等MVVM的库。

首先jQuery里非常多的 $$ 代表的就是jQuery。我们一般会把代码放在这样一个函数里,也就是等到页面加载完成之后,才执行代码,可以这样写:

首先我们要在页面里引入JS库:

<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>

然后,就可以开始执行jQuery代码:

$(document).ready(function() {
    // blablabla
})

也可以这样:

$(function() {
    // blablabla
})

选择器

jQuery的操作理念是,HTML在浏览器端会解析成一颗DOM树。我们通过使用选择器来选中其中一些节点,然后执行操作,也可以通过节点的一些函数例如 parent, children, siblings 来访问父节点,子节点和兄弟节点等等。

以下是常见的用法:

  • $("p") 选中所有 <p> 元素
  • $("#id") 选中id为 id 的元素
  • $(".class") 选中所有class为 class 的元素
  • $("*") 选中所有元素
  • $("[href]") 选取带有 href 的元素

还可以组合起来用,例如:

  • $("p.name") 选中所有class为 name<p> 元素
  • $("a[href='https://jiajunhuang.com']") 选取所有href属性是 https://jiajunhuang.com<a> 元素

事件

事件就是一些例如 点击,键盘等等的事件。常见的有:

  • click 鼠标点击
  • dbclick 鼠标双击
  • submit 表单提交
  • resize 窗口大小发生变化

等等。一般是这样使用的:

$(function() {
    $("button.btn").click(function() {
        alert("clicked");
    });
})

AJAX

如果要是用jQuery来发送请求,就需要接触 AJAX)

注意,jQuery的slim版本不支持ajax。

主要使用三个方法:

  • $.get(URL, callback) 是发送GET请求
  • $.post(URL, callback) 是发送POST请求
  • $.ajax(URL, [settings]) 这个就比较复杂,具体需要查文档:http://api.jquery.com/jquery.ajax/

举个例子,如果需要点击某个按钮,然后就聚焦到回复框,那么就需要这样写:

<script>
    $(function() {
        $(".reply_img").click(function() {
            var nickname = $(this).siblings("a.nickname").html();
            $("#reply_box").append("@" + nickname + " ");
            $("#reply_box").focus();
        })
    })
</script>

demo见:https://qipa.jiajunhuang.com/web/v1/issue/detail/5


  • https://en.wikipedia.org/wiki/Ajax_(programming)
  • https://api.jquery.com/

更多文章
  • 避免全局变量
  • Go的unsafe包
  • Golang中实现禁止拷贝
  • 人生如戏,全靠演技 -- 《日常生活中的自我呈现》读后感
  • Golang的反射
  • 数据库事务
  • 把网站去掉CSS之后
  • 处理并发的方式
  • 常见的索引方式
  • Golang 实践经验
  • 高性能MySQL笔记第一章
  • 面试的一些技巧
  • HTTP/2 简介
  • 独立运营博客一年的一些数据分享
  • To B(usiness) 和 To C(ustomer)