












偶尔才用用jQuery,但是老是不记得怎么用,所以总结一下做个笔记
都9102年了,还在用jQuery?是的,有时候还是会用到jQuery:
jQuery是一个JS库,大约在2014年左右风靡一时,现在的风头已经全都转向了React,Angular,Vue等等MVVM的库。
首先jQuery里非常多的 $,$ 代表的就是jQuery。我们一般会把代码放在这样一个函数里,也就是等到页面加载完成之后,才执行代码,可以这样写:
首先我们要在页面里引入JS库:
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js" type="application/javascript"></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");
});
})
如果要是用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
此内容由惯性聚合(RSS阅读器)自动聚合整理,仅供阅读参考。 原文来自 — 版权归原作者所有。