jQuery 学习笔记

jQuery中的dom追加操作方法(主动/被动、前面/后面、里面/外面):

1. append:主动/后面/里面
2. appendTo:被动/后面/里面
3. prepend:主动/前面/里面
4. prependTo:被动/前面/里面
5. before:主动/前面/外面
6. after:主动/后面/外面
7. insertBefore:被动/前面/外面
8. insertAfter:被动/后面/外面

在jQuery中的循环操作:

$.each(obj, function(index, el) {
    // 循环体
});
obj:需要的循环对象
index:表示当前循环到元素的索引
el:元素，表示当前循环到的元素

异步文件上传流程说明:

1. 产生异步的请求
2. 请求得有一个相应的方法（需要返回值，返回内容：图片的路径；在此不需要进行数据表的交互）
3. 当异步请求获取到相应之后需要存储图片的地址（但是又没必要给用户看地址，可以使用隐藏域的方式进行存储）
4. 当用户提交表单的时候，顺带提交隐藏域的地址

laravel实现上传处理方法

在laravel项目中除了在上传的时候可以使用move和store方法【都是request实例封装的】之外，还可以使用高级的上传文件保存方法(由storage门面提供的)

Storage门面在使用的时候需要的注意事项：

• 在storage门面中，有一个“磁盘”的概念，“磁盘”一共有三种：本地磁盘，公共磁盘，第三方磁盘；“磁盘”实质上就是一个目录
• 本地磁盘(local磁盘)，这些文件存放在local磁盘中的文件是不能被浏览器访问到的，存储在其中的文件一般都是项目的php代码自身使用！（磁盘位置位于/Storage/app）
• 公共磁盘(public磁盘)，存储在该磁盘的文件一般是允许浏览器进行访问的。【磁盘位置位于：/Storage/app/public】
• 第三方磁盘：驱动形式的一种，允许开发者将文件上传到第三方的服务器上。
• 磁盘存在一个配置文件，位置/config/filesystems.php

默认情况下，浏览器是无法访问到public磁盘目录的，但是其又想让浏览器访问，所以需要做一个“软链接的“的操作”

php artisan storage:link

相当于快捷方式

当软链接创建好之后，Public磁盘中的内容会被同步到/public/storage/下

Storage门面的通用文件保存方法：

Storage::disk(磁盘名)->put(文件名，文件内容);

异步请求回调处理

在html代码中添加隐藏域

<input type="hidden" name="avatar" value="">

通过回调将返回的path写入隐藏域

使用七牛云存储存储文件

七牛：一家提供各种网络服务的运营商，其性质类似于阿里云

做到代码与资源分离

原因：

1. 在后期维护网站的也比较方便；
2. 资源分离之后可以减轻代码服务器的压力；
3. 如何将资源分离和CDN(content delivery network 内容分发网络)配合起来用，对于bat之类的大公司来说1年能够生下来的成本至少7位数以上；

注册七牛账号后创建后期需要的对象存储实例(不用充钱，每月免费10G空间， 20G的流量)

• 选择对象存储

• 新建空间：自己在哪个区域选择哪个存储区域

• 下载七牛的代码依赖库

  • composer require zgldh/qiniu-laravel-storage

  • 配置filesystems.php：

  • 'qiiniu' => [
              'driver' => 'qiniu',
              'domains'=> [
                  'default'   => 'xxxx.com1.z0.glb.clouddn.com',  // 你的七牛域名
                  'https'     => '',
                  'custom'    => ''
              ],
              'access_key'    => '',  // AK
              'secret_key'    => '',  // SK
              'bucket'        => '',  // 磁盘名字
              'notify_url'    => '',  // 持久化处理
              'access'        => 'public',    // 空间访问控制
          ],

  • 添加providers数组：

  • zgldh\QiniuStorage\QiniuFilesystemServiceProvider::class,

播放视频可以选用H5的播放器

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>

new : HTML5 中的新属性。

原生JS给select添加option选项

var cateList = eval(ajaxResult);  
cateField.innerHTML = '';  
for(var idx in cateList) {  
    var option = document.createElement("option");  
    option.value = cateList[idx].id;  
    option.innerHTML = cateList[idx].name;  
    cateField.appendChild(option);  
}  

给table的tr加上点击事件

$('#content tbody').on('click','tr', function () {
    // 这是获取第一个td文本
    var firstTd = $(this).find("td:first").text();
    // 这是获取第二个td的文本
    var in_ku_id = $(this).find("td:nth-child(2)").text();
});

ajax渲染table

$('#content tbody').on('click','tr', function () {
            // 入库编号
            var in_ku_id = $(this).find("td:nth-child(2)").text();
            // 将入库编号传给表单
            $('#ku_list_id').val(in_ku_id);
            $('#count tbody').html("");
            $.ajax({
                url: "{:url('/admin/stock/stock/kulist')}",
                data: {ku_id:in_ku_id},
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        tr = '<td>' + data[i].id + '</td>' + '<td>' + data[i].barcode +
                            '</td>' + '<td>' + data[i].goods_id + '</td>' + '<td>' + data[i]
                                .supply_name + '</td>' + '<td>' + data[i].standard + '</td>' + '<td>' +
                            data[i].unit + '</td>' + '<td>' + data[i].num + '</td>' + '<td>' + data[i].price + '</td>' +
                        '<td>' + data[i].sell_price + '</td>' + '<td>' + data[i].created_at + '</td>';
                        $("#count").append('<tr class="link">' + tr + '</tr>')
                    }
                }
            });
            return false;
        });

本作品采用《CC 协议》，转载必须注明作者和本文链接