原生JS快速获取和更改标签里面的属性值

今天看代码的时候遇到一个原生JS的知识点,下图的

code1  code2

this.id.split('-')[1]

/* 
这里的this是点击那个<button></button>整个对象代码
假设点击了第一个default的<button>
this.id = "switcher-default"
this.id.split('-') = [switcher,default]
this.id.split('-')[1] = "default"
*/

原生javascript扩展知识:

getAttribute:取得属性;
setAttribute:设置属性;

a[0].id
//"header"
a[0].className
//"Xman"
a[0].getAttribute('attrName');
//获取attrName的值,例如 title、style、data-XX等
a[0].setAttribute('attrName','value');
/*
设置attrName的值,在value处输入对应的值,这个value是直接覆盖原来的值,如果你设置了style,如果里面已经有一个样式了,你要加个背景就要在原有的值上加上背景的样式。
例:font-size:16px; 增加背景:font-size:16px; background:#ccccccc;
*/

 

console.log

code3

最近做的一些JS代码

一、立即执行匿名函数,详细内容请参考:JavaScript中的立即执行函数表达式

方法一:

(function(){ 
 console.log("test");
})();

方法二:

(function(){ 
 console.log("test");
}());

jQuery和一些流行库的方法:

(function( window, undefined ) {
 // code here
}) ( window );

其他方法:

// 如果本身就是expression,那么根本不需要做任何处理
var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();

// 如果你不在乎返回值,可以这么做
!function(){ /* code */ }();
~function(){ /* code */ }();
-function(){ /* code */ }();
+function(){ /* code */ }();

// 还有更奇葩的方式,但是不知道性能如何,来自
// http://twitter.com/kuvos/status/18209252090847232
new function(){ /* code */ }
new function(){ /* code */ }()

二、根据URL来判断当前页面用的语言,调用预设好的样式;

var pathname = location.pathname;

if (pathname.indexOf("/ru/") === 0) {
 document.getElementsByClassName("navigation")[0].className = "navigation lang_ru";
} else if (pathname.indexOf("/es/") === 0) {
 document.getElementsByClassName("navigation")[0].className = "navigation lang_es";
} else if (pathname.indexOf("/it/") === 0) {
 document.getElementsByClassName("navigation")[0].className = "navigation lang_it";
} else if (pathname.indexOf("/fr/") === 0) {
 document.getElementsByClassName("navigation")[0].className = "navigation lang_fr";
} else if (pathname.indexOf("/pt/") === 0) {
 document.getElementsByClassName("navigation")[0].className = "navigation lang_pt";
} else if (pathname.indexOf("/de/") === 0) {
 document.getElementsByClassName("navigation")[0].className = "navigation lang_de";
}

三、内部函数可以使用外部的$(this)对象,直接在后面加.bind(this)

!function(){
 var hoverTimer, outTimer;
 $(document).on('mouseenter', '.myac', function(){
 clearTimeout(outTimer);
 hoverTimer = setTimeout(function(){
 $(this).addClass('myac_show').find('.myac_list').slideDown(); 
 }.bind(this), 300)
 }
 )
 $(document).on('mouseleave', '.myac', function(){
 clearTimeout(hoverTimer);
 outTimer = setTimeout(function(){
 $(this).removeClass('myac_show').find('.myac_list').slideUp('fast');
 }.bind(this), 150)
 }
 )
}()

四、ajax替换html内容后,原先写的时间无效:

修改前代码:

 $('.myac').hover(
     function(){
     $(this).find('.myac_list').slideDown();
     $(this).addClass('myac_show');
 },
 function(){
     $(this).find('.myac_list').slideUp();
     $(this).removeClass('myac_show');
 });

解决方法一:

ajax替换html内容不能替换改变.myac层的内容,可以替换修改 里面的子元素内容,例如.myac_list的;因为.myac拿来触发事件了;

解决方法二:

把.hover()事件用.on()绑定 document,具体代码如下:

$(document).on('mouseenter', '.myac', function(){
         /*function code*/
     }
 );
 $(document).on('mouseleave', '.myac', function(){
         /*function code*/
     }
 );

Windows下安装sass与compass环境

在window下学习和使用sass与compass,需要先安装 ruby。

如果有条件的话,还是使用mac或者Linux使用ruby吧,至少在ruby社区看到好多大神们都这样建议的,不过本人大部分工作和娱乐都是在win下的,所以就先记录一下win7安装ruby与使用gem安装sass与compass的流程吧:

1. 到ruby官网下载安装包;ruby for windows (安装成功了可以打开CMD输入 ruby -v 看看版本号)

2. 把ruby 原先的gem源替换成淘宝的:


Step1: 移除http://rubygems.org源

   gem sources  --remove  https://rubygems.org/

Step2:  添加taobao源

   gem sources  -a  https://ruby.taobao.org/

Step3:  查看前两步是否操作成功

   gem sources  -l

备注:最近遇到一个安装问题和SSL证书有关的:

关于 Windows 下证书无法验证问题 (certificate verify failed)

ruby没有包含SSL证书,所以Https的链接被服务器拒绝。

解决方法很简单,首先在这里下载证书(http://curl.haxx.se/ca/cacert.pem), 然后再环境变量里设置SSL_CERT_FILE这个环境变量,并把value指向这个文件

//在CMD命令行下面输入:

set SSL_CERT_FILE=C:\证书路径\cacert.pem

方法2:打开https://gems.ruby-china.org/

把里面source带有https的改成http也可以;

3. 安装与使用sass:这里附上常用的一些指令(都是网上搜集整理的)


安装sass

   gem install  sass

   sass -v

gem升级

   gem  update

安装制定版本的sass 

   gem  install  sass  -version=3.3

列出本地安装的所有ruby程序包

   gem  list

删除指定版本的sass

   gem  uninstall  sass --version=3.3.0

cmd下将.scss文件编译成css文件

   sass  main.scss  main.css

 

4. 安装使用compass


安装

   gem  install  compass

   compass -v

用compass 创建一个项目

   compass  create  learn-compass-init

编译当前项目

   compass  compile   [地址]

监听当前项目

   compass  watch      [地址] 

更详细了解:前端利器Sass

Mongodb v3.2 远程访问设置笔记

system info:

centos 7 64-bit

MongoDB v3.2.1

基础知识:

mongo 客户端程序,连接MongoDB
mongod 服务端程序,启动MongoDB
mongodump 备份程序
mongoexport 数据导出程序
mongofiles GridFS工具,内建的分布式文件系统
mongoimport 数据导入程序
mongorestore 数据恢复程序
mongos 数据分片程序,支持数据的横向扩展
mongostat 监视程序

一、启动说明:

mongod 启动服务,运行mongo运行shell窗口;

mongoDB常用指令:

启动并开机启动: systemctl start mongod
重启:           systemctl restart mongod
关闭服务:       systemctl stop mongod
查看服务列表:   systemctl list-units --type=service

二、设置database用户;

1、要先建立一个管理用户的管理员到admin库;

use admin
db.createUser(
  {
    user: "myUserAdmin",
    pwd: "abc123",
    roles: [ { role: "userAdminAnyDatabase", db: "admin" } ]
  }
)

2、再用这个管理用户的管理员添加管理相应数据库的数据库管理员;

use datebase
db.createUser(
  {
    user: "xxxx",
    pwd: "abc123",
    roles:[{ role: "readWrite", db: "datebase" } ]
  }
)

3、在mongod.conf里面bind_ip设置公网IP;

4、修改默认端口:2xxxx;

5、修改防火墙开放端口:

firewall-cmd --add-port=2xxxx/tcp --permanent
firewall-cmd --add-port=2xxxx/udp --permanent

# 重新加载防火墙规则
firewall-cmd --reload

# 查看当前防火墙规则
firewall-cmd --list-all

win7下初探nodejs

 

安装环境:Win7 32/bit

安装包:https://nodejs.org/en/download/

node版本:Windows Installer (.msi) 5.0

 

知识点

1、不要用默认的c:\program Files\ 因为这样在命令行操作要输入的很长中间还有空格,我把安装目录放在 X:\node (x:任意盘符)

2、npm install -g express 最好在cmd 命令行里cd 到相应的 x:\node 目录下执行,命令里面的 -g 是全局global的意思:


npm的包安装分为本地安装(local)、全局安装(global)两种,从敲的命令行来看,差别只是有没有-g而已,比如:
代码如下:复制代码
npm install grunt # 本地安装
npm install -g grunt-cli # 全局安装
下面分别解释。
1. npm install xxx -g 时, 模块将被下载安装到【全局目录】中。
【全局目录】通过 npm config set prefix “目录路径” 来设置。
通过 npm config get prefix 来获取当前设置的目录。
2. npm install xxx ,则是将模块下载到当前命令行所在目录。
例如:
代码如下:复制代码
c:\123>npm install xxx
将会安装到
代码如下:复制代码
c:\123\node_modules\xxx
这种方式显然是不好的,所以一般都会使用全局安装方式统一安装的一个目录中去,这样既方便管理、结构清晰还可以重复利用。


 

3、页面做了修改不用刷新:supervisor app.js 失效,因为node 新版的 npm start 是在 bin/www ,所以直接 supervisor bin/www 就成功了!

QQ图片20151114160328