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:元素，表示当前循环到的元素Copy

异步文件上传流程说明:#

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:linkCopy

相当于快捷方式

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

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

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

异步请求回调处理#

在 html 代码中添加隐藏域

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

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

使用七牛云存储存储文件#

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

做到代码与资源分离

原因：

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

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

• 选择对象存储

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

• 下载七牛的代码依赖库

  • composer require zgldh/qiniu-laravel-storageCopy

  • 配置 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',    // 空间访问控制
          ],Copy

  • 添加 providers 数组：

  • zgldh\QiniuStorage\QiniuFilesystemServiceProvider::class,Copy

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

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

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);  
}  Copy

给 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();
});Copy

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;
        });Copy

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