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 中的新属性。

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

原生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;
        });

Virus

讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!