您正在查看: yhbin 发布的文章

base64转图片

$base64 = 'data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD';
$url = explode(',', $base64);
$a = file_put_contents('test.png', base64_decode($url[1]));//返回的是字节数
print_r($a);die;
function save_img_by_base($base64_image_content){
    header('Content-type:text/html;charset=utf-8');
    //保存base64字符串为图片
    if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
        $type = $result[2];//匹配出图片的格式
        $root_path= dirname(ROOT_PATH)."/images/cardarticleimg/"; //图片保存的路径
        $path=date('Y-m-d').'/';
        $mulu=$root_path.$path;
        if(!file_exists($mulu)){
            mkdir($mulu,0777,true);
            chmod($mulu,0777);
        }
        $file_name = mt_rand().".$type";
        $new_file=$mulu.$file_name;
        /*$new_file = "./test.{$type}";*/
        if (file_put_contents("$new_file", base64_decode(str_replace($result[1], '', $base64_image_content)))){
            return $path.$file_name;
        }
    }
}

回调函数callback

<html> 
 
<head> 
 
<title>回调函数(callback)</title> 
<script language="javascript" type="text/javascript"> 
function a(callback) 
{    
   alert("我是parent函数a!"); 
    alert("调用回调函数"); 
   callback('1234','http://yhbin.cn'); 
} 
function b(id,url){ 
alert("我是回调函数b"); 
alert( id );
alert( url );

} 
function c(){ 
alert("我是回调函数c"); 

} 

function test() 
{ 
    a(b); 
} 

</script> 
</head> 
 
<body> 
<h1>学习js回调函数</h1> 
<button onClick=test()>click me</button> 
<p>应该能看到调用了两个回调函数</p> 
</body> 
 
</html>

注意:
1.执行顺序 test()->a()->b()
2.b函数作为回调函数可以有参数,但是a(b)这里面不能带参数,可以在a()里面回调

jquery模拟点击触发a标签href

h5页打电话location.href='tel:123456', 很简单就可以实现,我是用的安卓,没有问题,以为就万事大吉,没想到苹果qq浏览器不认识,于是就查资料。

<a href="javascript:;" id="ios_href"><span>阅读 </span></a>

$('#ios_href').attr( 'href', href );
$("#ios_href")[0].click();

网上资料

jquery对象转化成DOM对象即可,否则不能触发url跳转,只能执行函数
$("#managementid")[0].trigger()
$("#managementid")[0].click()

注意事项:
1、a标签里面必须有内容
2、好像这个a标签还不能隐藏
3.内容是特殊字符好像还不行

im标签正则表达式

preg_match_all( '/<img.*?src="(.*?)".*?>/i', $article_info['content'], $matchs );
        $lazySrcs = array();
        if( !empty($matchs[1]) ) {
            foreach( $matchs[1] as $k=>$v ) {
                $lazySrcs[] = '<img class="lazy" width="100%" data-src="'.$v.'" >';
            }
        }
        $newsrcs                 = str_replace( $matchs[0], $lazySrcs, $article_info['content'] );
        $article_info['content'] = $newsrcs;

lnmp环境下发布网站

安装lnmp步骤
1.下载lnmp并安装
https://lnmp.org/install.html
2.远程navicat(Ip/phpmyadmin)  https://bbs.vpser.net/thread-13563-1-1.html
    开启的话可以按如下步骤:
    1、首先需要自己在phpmyadmin里添加一个用户 主机为 % 的任意主机(也可以编辑已有的用户)
    2、并且iptables 里删除DROP 3306端口的规则,iptables教程:https://www.vpser.net/security/linux-iptables.html
3.远程FTP
    172.247.**.**  1234
    SFTP
    root   **************
4.  
    1.lnmp vhost add
    2.删除 .user.ini 文件 先修改权限 (ls -a)
      如要修或删除需要先执行:chattr -i .user.ini
      修改完成后再执行:rm .user.ini
    3. chmod -R 755 文件夹
5.修改php.ini后需要service php-fpm reload
6.修改nginx里的conf需要nginx -s reload

注意

redis学习笔记

客户端是否启动  netstat -tunpl | grep 6379
启动客户端  redis-server redis.conf
进入客户端  redis-cli.exe -h 127.0.0.1 -p 6379
关闭客户端  pkill redis-server
设置auth的cookie值  setcookie( 'auth', $auth, time()+86400 )
删除auth的cookie值  setcookie( 'auth', '', time()-1 )
前台跳转  header('location:list.php')

redis数据类型
1.string  key=>value

    set  set name lijie
    get  get name 
    setnx(如果key存在,返回0,不设置不更新)
    setex   设置值和有限期  setex haircolor 10 red
    setrange  setrange name 6 gmail.com  (lijie@126.com--->lijie@gmail.com)
    mset  设置多个key的值,1所有都成功,0都不成功
    msetnx 设置多个key的值,1所有都成功,0都不成功,不会覆盖之前的key值
    
    get  get name
    getset      获取旧值,设置新值  getset key6 30
    getrange   获取子集的部分     getrange name 0 5
    mget   获取多个value值  mget key1 key2 key3 key4
    
    incr  对某个值递增 incr key6
    incrby 加指定值 key不存在时候,设置并认为是0  incrby key6 5    incrby key6 -5
    decr 
    decrby 
    append 指定字符串追加 append name .net
    strlen 获取字符串长度 strlen name

2.hash string类型的field和value的映射表
    
    hset    user:001 name lijie (user:001是一张表,对里面的name赋值,不能覆盖,即使里面有一个字段)
    hget    hget user:001 name  (获取user:001的name值)      
    hsetnx  hset user:001 name lijie(设置不成功)
    hmset   hmset user:001 name lijie age 20
    hmget   hmget user:001 name age
    hincrby  
    hexists
    hlen    hlen user:001  字段数量
    hdel    hdel user:001 age
    hkeys   hkeys user:001 
    hvals  
    hgetall  

3.list 链表架构,push、pop、一个key的范围(栈和队列同时具备)

    lpush  从头部压入一个元素 
    lrange  lrange mylist 0 -1 取出全部元素
    rpush  从尾部压入元素
    linsert   linsert list3 before one three
    lset    lset list5 1 four 指定下标的值替换掉
    lrem    lrem list5 n one (n > 0 从头删除,n = 0,全部删除,n < 0,从尾删除) 
    ltrim   保留key的值的范围内的数据   ltrim list8 1 -1 (保留下表1到最后) 
                                        ltrim list8 1 2(保留下表1和2的)
    lpop 从头部删除,并返回删除元素
    rpop 从尾部删除,并返回删除元素
    rpoplpush 尾弹出头压入
    lindex 返回下标为key的index的元素  lindex mylist 1(返回下标为1的元素)
    llen 
    
4.set  string类型的无序集合(不允许有重复的值) 并集、交集、差集

    sadd   集合中添加元素
    smembers   查询集合中元素
    srem   删除名称为key的set中的元素
    spop   随机删除名称为key的set中的元素,返回删除的数据
    sdiff  两个集合的差集 返回第一个可以的交集
           myset1  one,two  myset2 two,three
           sdiff myset1 myset2   ->  one
           sdiff myset2 myset1   ->  three
    sdiffstore  sdiffstore myset3 myset1 myset2 (1与2的差集存在3中)
    sinter 返回key的交集
    sinterstore 交集存到一个地方
    sunion 并集
    sunionstore 交集存在一个地方
    smove  将第一个集合的元素移动到第二个集合
           smove myset1 myset2 three   1的three元素移动到2中
    scard  获取几个个数
    sismember 某个值是否是集合中的元素
    srandmember 随机取出集合中的元素

5.zset 有序排列
    
    zadd 添加元素并指定顺序,如果存在则更新排序 zadd myset 1 one
    zrange zrange myset 0 -1 withscores
    zrem 删除元素
    zincrby 存在元素则顺序变化为顺序号,不存在则插入 zincrby sset1 3 one
    zrank  返回元素的下标(从小到大排列)
    zrevrank 返回元素的下标(从大到小排列
    zrangebyscore     zrangebyscore myset 2 3 withscores
    zcount    zcount myset 2 3
    zcard   返回所有元素个数
    zremrangbyrank  删除索引(下标)元素  zremrangbyrank myset 1 1(删除下标为1的元素)
    zremrangbyscore 删除排序元素  zremrangbyscore myset 1 2(删除排序1,2的元素)

redis常用命令
    
1、键值相关命令

    keys 返回所有键  keys *   keys my*
    exists 确认key是否存在    exists age
    del 删除一个键   del age 
    expire 对key设置过期时间   expire addl 10 (addr 10秒过期)
    ttl  addl 获取key的有效时长(-1代表已过期)
    select 连接数据库    select 0  
    persist 移除给定key的过期时间(此key不受过期时间限制)
    randomkey 随机返回key空间的一个key
    remane 重命名key    rename age age1
    type  返回键的类型

2、服务器相关命令
    
    ping   出现 PONG 则显示正常
    echo   
    select 选择数据库
    quit exit 断开客户端
    dbsize 返回数据库中key的数目
    info 获取服务器信息
    config get 实时转储收到的请求 congif get timeout
    flushdb 删除当前选择数据库的所有key
    flushall 删除所有数据库中的所有键

redis高级应用

1、安全性
    redis.conf里修改requirepass beijing,重启一下redis.conf
    
    方法1: *******/redis-cli
            auth beijing
    方法2: *******/redis-cli -a beijing
    
2、主从复制

    1.master可拥有多个slave
    2.多个slave都可连接master,也可以连接别的slave
    3.同步数据不影响客户端写入
    4.伸缩性

    配置从服务器
        加入配置 
        slaveof 192.168.1.1 6379
        masterauth beijing

3、事务处理

    age 10
    multi  
    set age 20
    set age 30
    exec
    get age  ->30

    age 10
    multi
    set age 20
    set age 30
    discard
    get age  ->10
    
    队列中有错误,事务不会回滚
    

4、持久化机制
5、发布订阅信息
6、虚拟内存使用

    

jQuery遍历

1、children()
<div class="div">
    <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
    </ul>
</div>
$('.div >ul:last').css('border', '3px solid red')     class为div的最后一个子级ul加红色
$('.div ul').children(':last').css('border', '3px solid blue')    class为div下的ul下的最后一个子级li
$('.div ul li:last').css('border', '3px solid red')    class为div下的ul下的最后一个子级li
$('.div >ul:last').children(':last').css('border', '3px solid red')    class为div下的最后一个ul下的最后一个子级li

2、find()
    1.children只查找第一级的子节点
    2.find查找范围包括子节点的所有后代节点
    3.find()相当于空格
    4.children相当于>

3、parent()
    $('.item-a:last').parent().css('border', '1px solid blue')
    $('.item-a').parent(':last').css('border', '1px solid blue')

4、next()
    $('.item-2:first').next().css('border', '1px solid blue')   找到第一个class为item-2的节点的下一个
    $('.item-2').next(':first').css('border', '1px solid blue')  找到所有的class为item-2节点的下一个,然后找出其中的第一个

5、prev()
    $('.item-3:last').prev().css('border', '1px solid red')
    $('.item-3').prev(':last').css('border', '1px solid blue')

6、siblings() 所选节点的所有同级节点
    $('.item-2').siblings(':last').css('border', '2px solid blue')

7、each()
    //遍历所有的li
    //修改偶数li内的字体颜色
    $("li").each(function(index, element) {
        if (index % 2) {
            $(this).css('color','blue')
        }
    })
    $("li").each(function(index, element) {
         index 索引 0,1
         element是对应的li节点 li,li
         this 指向的是li
    })

php 插件

1、validate  $(form).validate({options})
其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置。
<script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.js"></script>
<script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.messages_cn.js"></script>
<script type="text/javascript">
    $(function () {
        $("#frmV").validate(
            {
              /*自定义验证规则*/
              rules: {
                    email:{
                        required:true,
                        email:true
                    }
            },
            /*错误提示位置*/
            errorPlacement: function (error, element) {
                error.appendTo(".tip");
            }
        });
    });
</script>

2、ajaxForm  $(form). ajaxForm ({options})
其中form参数表示表单元素名称;options是一个配置对象,用于在发送ajax请求过程,设置发送时的数据和参数
<script type="text/javascript" src="http://www.imooc.com/data/jquery.form.js"></script>
<script type="text/javascript">
    $(function () {
        var options = {
            url: "http://www.imooc.com/data/form_f.php", 
            target: ".tip"
        }
        $("#frmV").ajaxForm(options);
    });
</script>

3、lightBox  $(linkimage).lightBox({options})
<script type="text/javascript" src="http://www.imooc.com/data/jquery.notesforlightbox.js"></script>
<div id="divtest">
<div class="title">
    <span class="fl">我的相册</span>
</div>
<div class="content">
    <div class="divPics">
        <ul>
            <li><a href="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" title="第1篇风景图片">
                <img src="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" alt="" />
            </a></li>
            <li><a href="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" title="第2篇风景图片">
                <img src="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" alt="" />
            </a></li>
            <li><a href="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" title="第3篇风景图片">
                <img src="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" alt="" />
            </a></li>
        </ul>
    </div>
</div>
</div>

<script type="text/javascript">
$(function () {
    $('ul a').lightBox({
        overlayBgColor: "#666", //图片浏览时的背景色
        overlayOpacity: 0.5, //背景色的透明度
        containerResizeSpeed: 600 //图片切换时的速度
    })
});
</script>

4、jqzoom  $(linkimage).jqzoom({options})
其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。
 <script type="text/javascript" src="http://www.imooc.com/data/jquery.jqzoom.js"></script>
 <div id="divtest">
<div class="title">
    <span class="fl">图片放大镜</span> 
</div>
<div class="content">
    <a href="http://img.mukewang.com/52e4aec90001924d06800599.jpg" id="jqzoom" title="小兔子乖乖">
         <img src="http://img.mukewang.com/52e4aee700012df702130212.jpg" alt=""/>
    </a>
</div>
</div>

<script type="text/javascript">
$(function () {
    $('.content a').jqzoom({ //绑定图片放大插件jqzoom
        zoomWidth: 200, //小图片所选区域的宽
        zoomHeight: 200, //小图片所选区域的高
        zoomType: 'reverse' //设置放大镜的类型
    });
});
</script>

juqery之选择器

1、 层级选择器
1. $('div>p') 选择所有div元素里面的子元素p   $("div").chindren("p")
    >  直接子元素,隔层不成立
2.  $('div  p')选择所有div元素里面的p元素    $("div").find("p")
3.  $(".prev+div").prev后的第一个节点    $('.prev').next('div')
4.  $(".prev~div").prev后面的所有div兄弟(兄弟!)节点,隔层不算   $('.prev').nextAll('div')

2、基本筛选选择器
$(".div:first")    class属性为div的第一个元素
$(".div:last")     class属性为div的最后一个元素
$(".div:even")    class属性为div的下标为偶数元素
$(".div:odd")    class属性为div的下标为奇数元素
$(".aaron:eq(2)")    class属性为aaron的下标为2的元素
$(".aaron:gt(3)")    class属性为aaron的下标大于3的元素
$(".aaron:lt(2)")   class属性为aaron的下标小于2的元素

3、可见性筛选选择器
<p id="div1" style="display:none;">display</p> 隐藏
<p id="div2" style="width:0;height:0">width/height</p> 隐藏
<p id="div3" style="visibility:hidden;opacity:0">visibility</p> 显示
$('#div1:visible')
$('#div1:hidden')

4、属性筛选选择器
//查找所有div中,属性name=p1的div元素
$('div[name=p1]')
//查找所有div中,有属性p2的div元素
$('div[p2]')
//查找所有div中,有属性name中的值只包含一个连字符“-”的div元素
$('div[name|="-"]')
//查找所有div中,有属性name中的值包含一个连字符“空”和“a”的div元素
$('div[name~="a"]')
//查找所有div中,属性name的值是用imooc开头的
$('div[name^=imooc]')
//查找所有div中,属性name的值是用imooc结尾的
$('div[name$=imooc]')
//查找所有div中,有属性name中的值包含一个test字符串的div元素
$('div[name*="test"]')
//查找所有div中,有属性testattr中的值没有包含"true"的div
$('div[testattr!="true"]')

5、表单元素选择器
$(':password') == $('[type=password]')
$('input:text') == $('input[type="text"]') == $('input[type=text]')

6、表单对象属性筛选选择器
//查找所有input所有可用的(未被禁用的元素)input元素。
$('input:enabled')
//查找所有input所有不可用的(被禁用的元素)input元素。
$('input:disabled')
//查找所有input所有勾选的元素(单选框,复选框)
//移除input的checked属性
$('input:checked').removeAttr('checked')
//查找所有option元素中,有selected属性被选中的选项
//移除option的selected属性
$('option:selected').removeAttr('selected')

7、特殊选择器this
this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值。

p.addEventListener('click',function(){
    //this === p
    //以下两者的修改都是等价的
    this.style.color = "red";
    p.style.color = "red";
},false);

$('p').click(function(){
    //把p元素转化成jQuery的对象
    var $this= $(this) 
    $this.css('color','red')
})

jquery AJAX学习

1. getJSON
var $this = $(this);
$.getJSON("http://www.imooc.com/data/sport.json",function(data){
    $this.attr("disabled", "true");
    $.each(data, function (index, sport) {
        if(index==3)
        $("ul").append("<li>" + sport["name"] + "</li>");
    });
});
2.get  $.get(url,[callback]) 
参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。
$.get('http://www.imooc.com/data/info_f.php', function(data) {
    $this.attr("disabled", "true");
    $("ul").append("<li>我的名字叫:" + data.name + "</li>");
    $("ul").append("<li>男朋友对我说:" + data.say + "</li>");
}, "json");
3.post  $.post(url,[data],[callback])
参数url为服务器请求地址,可选项data为向服务器请求时发送的数据,可选项callback参数为请求成功后执行的回调函数。
$.post("http://www.imooc.com/data/check_f.php",
    {num:$('#txtNumber').val()},
    function (data) {
        $("ul").append("<li>你输入的<b>  "
        + $("#txtNumber").val() + " </b>是<b> "
        + data + " </b></li>");
    });
4.serialize  $(selector).serialize()
其中selector参数是一个或多个表单中的元素或表单元素本身。
$('#litest').html( $('form').serialize() );
5.ajax  $.ajax([settings])
其中参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的方式,默认为get。
 $.ajax({
    url: 'http://www.imooc.com/data/check.php',
    method:'get',
    dataType:'json',
    data: { num: $("#txtNumber").val() },
    success: function (data) {
        $("ul").append("<li>你输入的<b>  "
        + $("#txtNumber").val() + " </b>是<b> "
        + data + " </b></li>");
    }
});
6.ajaxSetup  $.ajaxSetup([options])
先调用ajaxSetup()方法设置全局的Ajax选项值,再点击两个按钮,分别使用ajax()方法请求不同的服务器数据,并将数据内容显示在页面
<script type="text/javascript">
$(function () {
    $.ajaxSetup({
        type: 'POST',
        success:function(data){
            $("ul").append("<li>你输入的<b>  "
                + $("#txtNumber").val() + " </b>是<b> "
                + data + " </b></li>");
        }
    });
    $("#btnShow_1").bind("click", function () {
        $.ajax({
            data: { num: $("#txtNumber").val() },
            url: "http://www.imooc.com/data/check.php"
        });
    })
    $("#btnShow_2").bind("click", function () {
        $.ajax({
            data: { num: $("#txtNumber").val() },
            url: "http://www.imooc.com/data/check_f.php"
        });
    })
});
</script>