jquery

2022-10-11 11:21:16

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, width: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