jQuery
jquery功能
- HTML元素选取和操作，通过选择器，操作dom树中的各个元素。
- css和各种属性：可以获取或者修改获取到的元素的标签的属性值。
- HTML DOM遍历和修改：
- 事件函数：为标签设置各种事件函数
- 事件对象：当一个事件触发时候，获取一个事件对象，他存在许多的属性值。
- javascript 特效和动画
- 发送Ajax请求：通过调用对应的方法发送ajax请求并处理返回的数据，通过回调函数，改变某些数据或者状态
在html中导入jQuery包
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> # 从官网下载，也可以指定本地导入
flask模板中加载jquery
flask/
app
static/
js/
jquery.min.js
templates
在一个模板中加jquery.min.js文件，可以利用flask中url_for函数加载静态文件
# 一个html模板中指定该语句 <script src="http://localhost/static/js/jquery.js"></script> # 固定路径，推荐使用url_for <script src={{ url_for('static', filename="js/jquery.js") }}></script> # url_for加载静态文件，指定目录为static，filename为具体路径
url_for函数的作用是更具视图函数名字返回url，static可以看作flask加载静态文件的一个视图函数。
Django中加载jquery
django专门提供 django.contrib.staticfiles管理静态文件。
settitngs.py配置参数
STATIC_URL = '/static/' # url中的path/static/路劲将会映射到下面的文件路径 STATICFILES_DIRS = [ # 可以添加多个静态文件目录，将按照次序查找 BASE_DIR+"/static", ]
目录结构
proj/ proj/ setting.py static/ js/ jquery.min.js manage.py
对应上面的文件目录，模板中加载静态文件的路径为
# <html> <script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script> </html>
jQuery对象动态操作dom树
使用script标签执行jquery函数可以执行指定的操作，包括修改dom树中的元素，获取各种事件，可以对页面进行局部修改。jquery提供了一个ready函数，这个函数只有在页面元素全部加载完毕才会执行，保证操作执行时不会出现找不到节点的情况。
定义script标签执行jquery函数
<script> $(document).ready( function(){ } ) </script>
document表示页面全局对象，$(document)将全局对象封装为一个jquery对象，从而可以调用jquery的ready方法，当页面加载完毕后将会触发完成事件，执行ready函数中funcion的内容。上面的内容可以简写为
$(
funcion(){}
);
获取标签
选择器http://jquery.cuishifeng.cn/
元素选择器
- 获取标签：$("p") 获取p标签
- 通过class属性选择器： $("p.intro")class属性为intro的p标签
- 通过id选择器：$(p#login) id=login 的p标签
使用$()得到标签都将啊被封装为一个jquery对象，可调用jquery对象的方法，而原始的标签不能直接调用。
属性选择器
类似与xpath的方式去选择标签元素
|
$("[href]") |
选择带有href属性的元素 |
| $("[href]='#]'") |
选择href属性为‘#’的元素 |
| $("[href]!='#]'") |
选择href属性不为‘#’的元素 |
|
$("[href$='.jpg']") |
href属性值为.jpg结尾的元素 |
示例
$( function(){ var root = $("root"); # 从dom树中获取root标签 var r = $("<root />") # 自定义一个root标签 console.log(root.css("color")) # 读取root元素的color属性 root.css("color", '#fff') # 更改root的color属性 root.css({"color":"#F00", "backgroud-color":"#f2f2f2"}) # 同时更改多个 # 追加节点 var div = $("<div />") root.append(div) # 增加兄弟节点 root.after(div) # 内部增加 $('#root img').attr({ # 过去img标签并操作其属性 height:60px, 120, alt:"图片" }) first_li = $("#root ul li:first") # ul下的第一个li元素， first_li.css("color", "#fff") n_li = $("#root ul li:nth-child(3)") # 第三个li } )
以上只演示了部分方法，jquery提供许多方法对元素节点，属性，文档对象等进行增删改查，可以查看完整api：http://jquery.cuishifeng.cn/
事件函数
我们使用的第一个事件函数就是$(document).ready()函数，当页面完全加载完毕，将会触发这个函数执行。
<div> <button class="testclick">点击</button> </div> <script> $(document).ready( function(){ $('button.testclick').click( # 获取button.testclick指定的节点，定义一个click事件 function(event){ } # 点击事件回调，并注入event事件对象，有多种多种可用属性 ) } ) </script>
上面的代码通过选择器获取一个元素对象，并对其设置一个click事件调用，常用的还包括change，dbclick事件等。
Ajax请求
只需要调用对应方法即可发送一个ajax异步请求，例如下面的形式
<script> $(function(){ $.ajax({ type: "POST", # 使用的方法 url: "api/user/login/", # 后端api data: "name=John&location=Boston", # 数据 success: function(msg){ # 成功回调 alert( "Data Saved: " + msg ); }， dataType: "json" # 指定数据类型 }); }) </script>
这里只显示了部分参数，除了url是必写的，其他均为可选参数，文档介绍即可http://jquery.cuishifeng.cn/jQuery.Ajax.html
为了简便get和post方法，封装了高层的get和post方法，同时ajax请求通常用于点击按钮提交数据使用，经常为以下的形式。
<script> $("button.submit").click(function(event){ # 点击事件触发时，发送请求，数据一般来源于dom元素中 $.post( "api/users/login/", # url {"name":"tom", "pwd":123}, # data数据 function(msg){} # 成功回调函数， msg为后端返回值 "json" ) }) </script>
post方法和get方法详细的文档地址：http://jquery.cuishifeng.cn/jQuery.post.html