BBS小项目疑问点及解决办法-B篇（文件阅读器（onload事件及attr方法）、on和click区别、each方法、ajax展示错误信息、static静态文件）

6. 文件阅读器（onload事件以及attr()方法）

'''
应用场景：
    在上传用户头像时，我们希望在选择文件后，把当前的文件换成我选中的文件，用到change方法，然后我们
    需要把选中的文件放到前端页面中展示出来，于是就应用了文件阅读器
'''

#文件阅读器的核心代码
    $('#myfile').change(function () {
        // 文件阅读器
        //1 产生一个文件阅读器对象
        var fileReader = new FileReader(); 
        //2 获取用户上传的文件
        var fileObj = $(this)[0].files[0]; #当前jq对象,[0]取原生js对象，再取文件列表，进而取文件
        //3 让文件阅读器读取该文件
        fileReader.readAsDataURL(fileObj);  // 这一步是异步 提交完之后直接运行下一行
        //4 利用文件阅读器将文件展示出来
        #此处有一个问题，就是上一步因为是异步，所以有可能还没完全读取文件之后，就执行下一步展示文件信息了，这样就可以加onload事件，在页面完全加载完（文件读取完）之后，执行显示文件操作
        fileReader.onload = function () {
            $('#myimg').attr('src', fileReader.result)
        }
        #这里加了一个attr方法，就是说，当页面加载完成之后，会把选择的文件结果（是个相对路径),加到myimg标签的src中,这样就能实现，选中文件的前端显示
    });




##############
##onload方法##
##############

'''
用法：
    onload 事件会在页面或图像加载完成后立即发生。
    onload 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
'''

'''
语法：
    在 HTML 中:<body onload="SomeJavaScriptCode">
    在 JavaScript 中:window.onload=function(){SomeJavaScriptCode};
    
    

参数SomeJavaScriptCode是必需的。规定该事件发生时执行的 JavaScript。
'''

#举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试onload</title>
<script>
function myFunction(){
    alert("页面加载完成");
}
</script>
</head>

<body onload="myFunction()">
<h1>Hello World!</h1>
</body>

</html>

#页面加载完成后，弹窗显示页面加载完成，然后显示hello world!



###########
##attr方法##
###########

'''
用法：
    attr() 方法设置或返回被选元素的属性值，可以加一个参数，多个参数，函数等
'''

'''
实例：
    点击button按钮，图片的宽度变为180
'''
    $("button").click(function(){
      $("img").attr("width","180");
    })
    
详细介绍请见：
    https://www.w3school.com.cn/jquery/attributes_attr.asp

7. on和click事件的区别

element.click()这种写法不支持给动态元素或样式绑定事件。支持给动态元素绑定事件的是.live()和.on()。live在jQquery1.7后就不推荐使用了。使用.on()时注意，on前面的元素必须在页面加载的时候就存在DOM里面。

演示代码见on和click事件的区别

8. jq中的each()方法

小例子：

var arr=[1,2,3,4];
$.each(arr,function(i,n){
    alert("索引"+i+"对应的值"+n);
});

#这个的意思是说，对arr进行循环遍历，然后在提示框中打出索引值i 和对应的值n

项目中的例子：

    $.each($('#myform').serializeArray(),function (index,obj) {
            formDataObj.append(obj.name,obj.value)
        });
    
    
#这句话的意思是，首先自动把input框中的输入数据取到并得到不同的键值对的大字典（serializeArray做的事），再对这个字典进行遍历，遍历一次，就会在formDataObj中加入一个键值对{obj.name:obj.value}

9. ajax中拿到后台钩子函数得到的错误信息并展示的逻辑

##展示错误信息

$.each(data.msg,function (index,obj) {
                       # index就是一个个的报错字段名  obj就是数组 里面是报错信息
                       # 手动拼接对应的input框的id值
                        var targetId = '#id_' + index;
                       # $('#id_username') $('#id_password')
                        $(targetId).next().text(obj[0]).parent().addClass('has-error')
                        ###当前input框的下一个标签（span）,在里面把错误信息（即数组的第一个值）加进去，再在它的父标签加一个已经存在错误信息的类（用于后面，聚焦该输入框后，把该类去除掉）
                    })


##取消错误信息

 $('input').focus(function () {
        $(this).next().text('').parent().removeClass('has-error')
    })
##鼠标聚焦到输入框，取它下面的span标签，然后把内容置空，再把父类的错误信息类去掉

10.前端静态文件的导入 settings中的配置

导入本地新建的static文件夹中的静态文件，需要在settings中进行配置，其实就是加一个路径，注意，虽然这个配置的名字叫STATICFILES_DIRS，但它是一个列表，不是字典！！！

此外，本地前端导入语句也比较固定，先在settings中配置static的url，确保前端导入时，路径可以动态变化，详细导入语句见下:

#settings.py    
    STATIC_URL = '/static/'
    
#html文件
    {% load static %}
    <script src="{% static 'bootstrap/js/jquery.js' %}"></script>
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>

原文地址：https://www.cnblogs.com/michealjy/p/11783952.html