wencaistorm/blog

Today I learned...

blog's Issues

Git 基本概念 | 前端码农的自留地 | 一起学习弯道超车的技术！

http://wencaizhang.com/2017/12/21/git/git-basic-usege/

数组之深浅拷贝

// jQuery 之深拷贝
var temp = $.extend(true, [], resData); 

// underscore 之深拷贝
_.extend(newArrr, oldArr);

// underscore 之浅拷贝，待验证 。。。
_.clone();

undersocre（一）

• _.find(list, param) _.findWhere(list, param) 返回第一个符合条件的
• _.filter(list, param) _.where(list, param) 返回所有符合条件的

那么问题来了，这四个函数，区别在哪？？？（黑人问号.jpg）
先挖个坑

正则初体验

正则验证工具： https://regexper.com/

正则表达式 | 前端码农的自留地 | 一起学习弯道超车的技术！

http://wencaizhang.com/2018/01/02/regexp/

比较两个数组的内容是否相同

jQuery 小结

一、选择器部分

1. $("input[type='radio']") 选择不同 type 的 input

2. $("input[type='radio']:checked") 选择被选中的 radio

3. 选择父类元素

   • $selector.parent('td') 仅限于直接父类元素 parent
   • $(this).parents('.content') 只要是父类元素即可，能向父级多级查找 parents

4. 选择子类元素

   • $ele.children('p.tip');
   • $this.siblings('.content').find('textarea')

5. 选择兄弟元素 $selector.parent('td').siblings('.title')

二、插入和删除元素

1. 插入

1. 在被选元素的结尾插入内容

   $ele.append("<p class='tip red'> &nbsp;&nbsp;请选择</p>");

2. 在被选元素的开头插入内容

   $(".must").prepend("<span class='red star'>*&nbsp;</span>");

3. 在被选元素之前插入内容

   $('.item:eq(2)').before($('.milestone'));

4. 在被选元素之后插入内容

   $('.item:eq(2)').after($('.milestone'));

2. 删除

1. remove() 删除被选元素（及其子元素），可传入参数（选择器）作为过滤条件

   $tip.remove() 或 $("p").remove(".italic");

2. empty() 删除被选元素的子元素

   $tip.empty()

三、设置元素样式

四、动画

1. animate 动画使用固定值

$dialog.animate({
    top: "60px"
})

2. animate 动画使用相对值

$dialog.animate({
    top: "-=60px"
})

3. 判断当前是否有动画尚未执行完毕

• 如果正在执行动画返回 true

  $(".box").is(":animated")

五、获取和设置元素的值

1. 获取文本域的输入的内容

   var $val = $this.siblings('.content').find('textarea').val();

2. 获取属性值

   var id = $(this).parents('.item').attr('id');

六、其他的一些方法

1. 清空被选中的 radio

   $("input[type='radio']").removeAttr('checked');

2. 判断 radio 是否被选中

   $(this).is(":checked")

3. 判断元素是否具有指定的类名

   $(this).hasClass("bad")

4. jQuery 对象有 length 属性，该属性表示选中的 DOM 元素的个数

   if($radiosChecked.length != 2) {}

5. 判断选中元素是否为 display:none 状态

   if(!$(this).is(":hidden")) {}

6. 序列化表单数据，用于 ajax 提交表单数据

   $('form').serialize()

7. 输入框失去焦点

   $('input').blur(function () {});

命令行工具 Cmder

1. 环境：windows 系统
2. 关键词：命令行工具

windows 系统的 cmd 是出了名的难用，这里不再吐槽，此处的重点是 cmder 的安装和使用

1. 解压即用，无需安装，并且所有的配置调整都在Cmder目录下进行。

右键菜单打开 cmder

在实际的使用中，我们更多的需求是：在某个文件夹下打开终端。通过简单的设置，cmder 就能如你所愿

1. 把 cmder 存放的目录添加到系统环境变量。添加成功后，Win + r 后输入 cmder 回车即可打开 cmder。
2. 在有管理员权限的终端中输入以下命令即可： Cmder.exe /REGISTER ALL

代替 git bash

1. Cmder 有 mini 版和 full 版，区别在于 full 版有內建 msysgit 工具，即 Git for Windows
2. 如果使用 mini 版，单独安装 Git，将 Git 添加到环境变量后，cmder中同样可以使用 git

所以，cmder 完全可以替代 git bash 做 git 相关的操作

代替 cmd

1. Windows 自带 cmd 的能做的，cmder 都能做到。
2. cmder 颜值更高，字体更好看，功能更强大，并且自带多套主题，随意替换。

既然这样，还有什么理由不去使用呢？

连接服务器

可以使用下面命令连接 Linux 服务器

ssh -p 端口号 root@服务器IP

自定义 aliases

打开 Cmder 目录下的 config 文件夹，里面的 aliases 文件就是配置别名的文件

下面是一些实例：

gow=cd /d D:/www
gs=git status
sshdev=ssh -p 22 [email protected]

如果你同时还使用 AutoHotKey，那真是再好不过了，为 cmder 配置快捷键（如：Alt + r）：

!r::run, D:\**\Cmder\Cmder.exe

配合 aliases 使用，简直有种天下任我行的快感!

其他

1. 简单的复制粘贴操作，鼠标选中的内容会自动复制到剪切板，点击右键或者 Ctrl + v 直接粘贴
2. Ctrl + 鼠标滑轮 轻易实现文字放大缩小
3. 修改命令提示符 λ为熟悉的 $
   • full 版： 替换 cmdervendorclink.lua 中的 44 行和46 行的λ 为 $
4. 忽略更新：Win+Alt+p 或者鼠标点击 cmder 左上角的图标选择 settings，在 Settings -> Main -> Update 中，找到 Do automatic check on 后面的 startup 选项，取消勾选即可。

正则实例 - 提取 url 中的参数

// 取得查询字符串并去掉开头的问号
var qs = (location.search.length > 0 ? location.search.substring(1) : "");
var json = {};
qs.replace(/([^=&]+)=([^=&]*)/ig, function (a, b, c, d) {
json[b] = c;
});

参考： http://www.w3school.com.cn/jsref/jsref_replace.asp