分类目录归档：JavaScript

npm 学习笔记

npm^[1]是 JavaScript 包管理工具，它类似 Java 中的 Maven , Gradle ， Python 中的 pip 。

npm 随着 Node.js 一起发布，在安装 Node.js 的时候，npm 也会随着 Node.js 的安装一起安装到电脑上。 npm 作为一个包管理工具，其自身更新比较频繁，它的最新版本也可以独立进行更新。

# 在终端执行下面的命令即可更新到 npm 的最新版本
npm install npm@latest -g

用 npm 安装一个包都命令是 npm install package_name , 执行此命令后，会在当前目录安装 package_name 包，并创建一个 node_modules 的目录，下载要安装的包到这个目录中。

npm 是通过 package.json 这个文件管理包到，通过这个文件对包的信息进行定义，以便在团队协作的时候对包的使用上统一一致。使用 npm install 命令安装的是包的最新版本，我们日常在进行的项目实际上不一定总是使用最新的版本，这时候同样可以通过对 package.json 文件进行配置获取指定版本的包。

一个 package.json 至少要包括包名和版本信息。

{
    "name" : "package_name",
    "version" : "1.0.0"
}

如何创建一个 package.json 文件呢？答案是使用 npm init 命令，然后逐一回答问题即可完成创建。如果不想回答问题，可以使用 npm init –yes 命令创建默认的 package.json ，然后再修改之。

{
    "name" : "npm",
    "version" : "1.0.0",
    "description" : "",
    "main" : "index.js",
    "scripts" : {
        "test" : "echo \\"Error: no test specified\\" && exit 1"
    },
    "keywords" : [],
    "author" : "",
    "license" : "ISC"
}

以上就是默认创建的文件。要安装包，就要有下载的地址，同样也可以在 package.json 中用字段 repository 指定。

{
    "type" : "git",
    "url" : "https://github.com/example/package_name.git"
}

还有一些其他的字段可供设置，比如主页地址，作者邮件等等。一个包的 name 命名有一定的规范，包名需要使用小写字母，不允许有空格，可以使用下划线和横线。对于常用不太变化的字段值，可进行初始化设置，这样就不用每次都输入这些信息了。

# 初始化设定作者 email
npm set init.author.email "author@example.com"
# 初始化设定作者姓名
npm set init.author.name "Eric"
# 初始化设定许可协议
npm set init.license "MIT"

在使用 npm install 命令安装包的时候，会读取 package.json 文件来安装模块。模块在有时候有两种类型，一种是面向生产环境的，另一种是面向开发环境的，这时候可通过在命令后面添加 --save 或 --save-dev 参数指定安装。

如果要更新包，使用 npm update 命令，卸载包用 npm uninstall package_name ，如果卸载的同时想要一并删除 package.json 文件，添加参数 --save 。

# 卸载 package_name 包，并删除 package.json 文件
npm uninstall --save package_name

上面说了，在默认情况下，包安装命令会将包安装在当前目录下，这只能在当前目录下使用。如果要使用一些全局的包，在安装的时候可以添加 -g 参数来安装，同理更新也是如此，卸载一个全局包也是如此。

# 安装 package_name 包为全局包
npm install -g package_name
# 更新全局包
npm update -g
# 卸载全局包
npm uninstall -g package_name

如果想知道当前都有哪些包需要更新，可以使用下面的命令查看。

# 查看哪些全局包需要更新
npm outdated -g --depth=0

包（package）是一个被 package.json 文件描述的文件或目录。模块（modules）是可以被 Node.js 引用的文件或目录。一个 Node.js 模块就是一个可以发布到 npm ，供其他开发者使用的模块。

如何创建一个 Node.js 模块呢？

创建一个 package.json 文件，将模块信息添加到文件中；
创建一个模块被引入就加载的文件，即 main 字段中指定的文件，默认为 index.js ，在此文件中将一个函数值赋给 exports 模块。

exports.printMsg = function() {
    console.log("This is a message from the first package.")
}

npm 的配置文件是 npmrc，项目级别的在项目所在目录下 .npmrc ，用户级别的在 ~/.npmrc ，全局的在 /etc/npmrc ，内置的配置文件在 npm 安装目录下。配置信息的优先级别为命令行参数级别最高，其次是环境变量 PATH ，再次是这些配置文件，要查看 npm 的配置信息，执行如下命令即可。

npm config list -l

默认下载包的源来自 npm 官网，如果感觉下载速度不理想，我们可以配置一些国内的镜像站点来加快下载速度。

我们可以在安装包的时候指定镜像源，也可以写到配置文件中。

# 在安装的时候指定「淘宝镜像」
npm install express --registr=https://registry.npmmirror.com
# 写到配置文件中
npm config set registry <https://registry.npmmirror.com>

# 查看配置是否成功
npm config get registry # npm info express 也可以

对于 npm 的学习暂时先告一段落，可能很长一段时间只是处于使用 npm 的阶段，了解以上的内容基本上应该可以开始使用了，使用中遇到问题随时查阅帮助解决即可。我看还涉及到发布自己的包等内容，这就是 long long after 以后的事情了。

本文中引用的资源：
1：npm 的官方网站是：https://www.npmjs.com/

jQuery事件处理

发表评论

在浏览器交互过程中特定事件发生时脚本会进行相应的处理， jQuery 会针对不同的事件进行特定的处理。

浏览器检测到自身发生变化或遇到错误时，抛出的事件称为浏览器事件。比如浏览器页面内容发生滚动时会触发 scroll 事件，浏览器出错会触发 error 事件。可分别对应事件绑定相应的事件处理函数，这样当事件发生时就会调用此函数。

//当一个image标签指定要加载的图片不存在时，产生错误
$("<img>", {
  "src" : "not/an/bb.png",
  "alt" : "no image"
})
.error(function() {
  console.log("图片无法加载");
})
.appendTo("body");

//当滚动浏览页面内容时，触发 scroll 事件
$(window)
  .scroll(function() {
    console.log("窗口滚动");
  });

通常在页面中的 javascript 会在页面加载完成后才能开始执行，为了防止脚本过早执行，而页面中的元素还未加载而导致异常，通常会使用 ready 函数来保证等 DOM 准备好可以接受处理时才触发进行处理，通常会把整个脚本做成一个回调函数传递给 ready 函数。

$(document).ready(function() {
  //脚本
});

在浏览器中可以触发很多事件，jQuery 提供很多快捷方法对应相应的事件，常见的事件有 click 、 blur 、 focus 、 mousedown 、 mouseup 、submit 等，给对应的元素绑定事件及其处理函数可在事件发生时进行相应的响应。

bind()

可以给元素绑定事件处理函数，可最多接受三个参数，第一个参数为事件名，第二个参数为事件处理函数，可以一次为多个事件绑定同一个事件处理函数，也可以为不同的事件绑定不同的事件处理函数。如果为多个事件绑定同一个事件处理函数，在第一个参数中用空格分隔不同的事件。如果要为不同的事件绑定不同的事件处理函数，需要给bind方法传递一个 JSON 对象。另外可接受的第三个参数用于向事件处理函数传递数据，这个参数是一个 JSON 对象，该参数的数据会绑定到事件处理函数的 event 对象，从而完成数据的传递。

//给段落绑定 click 事件，点击段落输出段落被点击信息
$("p").bind("click", function() {
  console.log("段落被点击");
});

//给段落绑定 click, mouseover 事件，并输出事件发生信息
$("p").bind("click mouseover", function() {
  console.log("事件发生");
});

//给段落绑定 click, mouseover 事件，并输出不同的信息
$("p")
  .bind({
    "click" : function() {
      console.log("Click Event");
    },
    "mouseover" : function() {
      console.log("MouseOver Event");
    }
  });

//给事件处理函数传递数据
var Msg = "message 1";
$("#bar").bind("click", {m:Msg}, function(event) {
  console.log(event.data.m);
});

var Msg = "message 2";
$("p.foo").bind("click", {m:Msg}, function(event) {
  console.log(event.data.m);
});

unbind()

可以使用 unbind 方法移除元素的事件，如果不带参数调用该方法，则会移除当前元素的所有绑定事件，如果需要指定移除那个事件，就把该事件名作为第一个参数传递给 unbind 方法，如果要移除指定的事件处理函数，就把准备移除的事件处理函数作为第二个参数传递给 unbind 方法。

//删除绑定在段落中的所有事件
$("p").unbind();

//仅删除绑定在段落中的click事件
$("p").unbind("click");

//删除指定事件处理函数
var fun1 = function() {
  console.log("event one triggered!");
},
    fun2 = function() {
  console.log("another one event!");
};
$("#bar").bind("click",fun1)
         .bind("click",fun2)
         .trigger("click")
         .unbind("click", fun1);

live() 和 die()

live 和 die 跟 bind 和 unbind 类似，也是负责为元素绑定事件和事件处理函数，所不同的是能为动态添加到 DOM 中的匹配元素绑定事件和事件处理函数，用 live 绑定的事件处理和事件处理函数必须使用 die 来解除绑定，在 jQuery 1.7 以后 live 以过时，应该使用on方法。

one()

跟bind功能唯一的区别就是使用one绑定的事件及事件处理函数是一次性的，事件触发后自动解除绑定，其他功能跟bind相同。

trigger()

触发事件使用trigger，接受两个参数，第一个参数是被触发的事件名，第二个参数可选，为数组类型，用于给事件处理函数传递数据。

//给 id = bar 的元素绑定 click 事件，然后触发
$("#bar").bind("click", function() {
  console.log("Clicked!");
}).trigger("click");

//给事件处理函数传递数据
var notice = "I was triggered!";
$("#bar").bind("click", function(event, msg) {
  var log = msg || "I was clicked!";
  console.log(log);
}).trigger("click", [notice]);

jQuery数据集处理函数及动画效果函数

发表评论

map / each / show / hide / fadeOut / fadeIn / fadeTo / slideUp
slideDown / slideToggle /animate
本文中代码其测试页面点击此处可以查看

map & each

使用回调函数对结果集内的每个元素进行处理，回调函数接受两个参数，分别是当前元素索引和当前元素。二者的区别在于map返回回调函数返回值的新对象，each返回受回调函数影响的原始对象。
比如给所有的段落和类为foo的元素追加标签名和索引。

$("p,.foo").map(function(index, ele) {
  $(this).append("  " + ele.tagName + "  #" + index);
});

可同样使用each完成同样的功能，但是如果对追加了标签名和索引的元素集合进一步处理，比如给标签为，类为foo的元素设置一个红色的字体，黄色的背景，则应该使用each，如果使用map则无法达到期望的结果。

$("p,.foo")
  .each(function(index,ele) {
    $(this).append("  " + ele.tagName + "  #" + index);
  })
  .find("span.foo").css({"color" : "red", "background" : "yellow"});

show & hide

不带参数调用这两个函数会对元素的样式添加或删除display:none;
如 $(“#bar”).hide(); 或 $(“#bar”).show();
这样调用没有动画效果，直接显示或者直接隐藏，没有过度效果，可以通过增加过度时间参数来增加效果。
如 $(“#bar”).hide(2000); 或 $(“#bar”).show(2000);

fadeOut 、fadeIn、fadeTo

可以实现元素淡入淡出效果，fadeOut淡出，通过将元素透明度从1调整到0，来实现元素的淡出，元素淡出结束后设置元素display:none;样式，可设置持续时间参数，默认持续时间为400ms，也接受回调函数参数，在结束后被调用。fadeIn淡入，通过将元素透明度从0调整到1，来实现元素的淡入，元素淡入结束后如果元素有display:none;样式，则会移除该样式。fadeTo可指定淡入或淡出的透明度，为0至1之间的一个数值。必须提供两个参数，一个是持续时间，另一个是目标透明度，也可以通过回调函数作为第三个参数用于在调用结束后被调用。
淡入淡出函数接受两个文本的快捷持续时间，分别是fast和slow，分别对应200ms和600ms。
如将表单元素淡出，并输出对应淡出信息，再讲表单元素淡入，输出对应淡入信息。

$("form")
  .fadeOut(1000, function() {
    console.log("淡出!");
  })
  .fadeIn(1000, function() {
    console.log("淡入!");
  });

将表单淡出到50%透明度，并输出对应信息。

$("form").fadeTo(1000, 0.5, function() {
  console.log("50%透明度");
});

slideUp、slideDown、slideToggle

可以实现元素的收缩与展开，slideUp向上收缩元素，slideDown向下展开元素，slideToogle是展开和收缩的开关，当前元素处于展开状态，应用slideToggle则会收缩，当处于收缩的时候应用则会展开，收缩与展开结束后通过设置元素display:none;样式或删除该样式给用户视觉展现。都可以接受两个参数，分别是持续时间和回调函数。

$("p.foo")
  .slideUp(1000, function() {
    console.log("收缩！");
  })
  .slideDown(1000, function() {
    console.log("展开！");
  });

同样针对类为foo的段落使用slideToggle。

$("p.foo").slideToggle(1000, function() {
  $bar = $("p.foo").attr("style");
  if ($bar === "display: none;") {
    console.log("slide Up");
  } else {
    console.log("slide Down");
  }
});

animate

能利用元素绝大多数可视CSS属性制作动画，其接受两种格式的多种参数，其中第二种格式的参数有更多的选项，分别是
animate({json target css}, duration, action, succ callback)
animate({json target css}, {json animate options})
我们给id=bar的段落增加背景色和边框，然后5秒内完成段落的长宽缩放，并输出完成信息。

$("#bar")
  .css({
    "background" : "yellow",
    "border" : "1px solid black"
  })
  .animate(
    {
      "width" : "500px",
      "height" : "100px"
    },
    5000,
    "swing",
    function() {
      console.log("animate complete!");
    });

采用第二种格式的参数代码如下，效果与前段一样。

$("#bar")
  .css({
    "background" : "yellow",
    "border" : "1px solid black"
  })
  .animate({
               "width" : "500px",
               "height" : "100px"
           },
           {
             "duration" : 5000,
             "easing" : "swing",
             "complete" : function() {
               console.log("Animate complete!");
             }
          });

jQuery中的内容包装与元素删除函数

发表评论

wrap / unwrap / wrapAll / wrapInner
remove / detach
测试文件见前篇文章中的测试页面代码。点击此处可直接进入

wrap

在元素（标签）外包装一个或多个元素（标签），函数参数接受元素集合，也接受返回标签的回调函数作为参数。如通过在所在标签 标签外包装标签、给所有的段落包装标签，使得文字变粗，或者给所选元素集合包装一个<div> 。

在使用的时候注意标签的嵌套是否合法，如给所有的段落外增加就属于嵌套不合法。

$("span").wrap("");
//$("span").wrap(""); $("span").wrap(""); //像上面这样写也可以 //类为foo的span包装标签，其他span标签包装标签 $("span").wrap(function() { return $(this).is(".foo") ? "" : ""; });

unwrap

删除包住所选元素的元素，不接受参数，如要删除包住元素的元素。

$("span").unwrap();

wrapAll

wrapAll将所选的元素集合都用一个元素包装，如将所有的段落用一个<div>包住，需要注意的是wrapAll是会移动元素的，在元素集合上使用wrapAll，使用包住该元素集合。

var div = $("&lt;div>", { "css" : {"background" : "yellow"} }); $("p").wrapAll(div); //注意元素的移动 $("span").wrapAll("");&lt;/div>

wrapInner

包裹元素内容，可以用标签包住元素内的所有内容，如将所有的段落文字变成粗体。

$("p").wrapInner("");

remove & detach

remove和detach用于删除DOM中的元素，其区别是remove直接删除选中的元素，detach除了删除选中的元素外，还保存了删除元素的数据。

jQuery在DOM中添加元素

2条回复

学习jQuery使用的测试页面代码如下，后续的继续学习中如无变化则以该文档为测试练习文档,练习时jQuery的版本为1.11.1，其所在路径与测试页面相同，该系列文档为《深入PHP与jQuery开发》的阅读笔记及总结。

    
    
    
      Reading Test Page
    
    
      
Hello World!
      
Another paragraph, but this one has a class.
      
This is a span inside a paragraph.
      
Paragraph with an id. 
         And this sentence is in a span.
      

      


          Sign Up Form
          Name
          
          Password
          

          
            
            I'm on my computer
          
          
            
            I'm on a shared computer
          

          
          
            
            Keep me signed in on this computer

append() / appendTo()

作用：在目标元素内之后添加元素
区别：由目标元素调用 / 由新建元素调用
示例：

    //append()
    var para = $("
", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    });
    $("body").append(para);

    //appendTo()
    $("

", {
       "text" : "I'm a new paragraph!",
       "css"  : {"background" : "yellow"}
    }).appendTo("body");

prepend() / prependTo()

作用：在目标元素内之前添加元素
区别：由目标元素调用 / 由新建元素调用
示例：

    //prepend()
    var para = $("
", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    });
    $("body").prepend(para);

    //prependTo()
    $("

", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    }).prependTo("body");

after() / insertAfter()

作用：在目标元素外之后添加元素
区别：由目标元素调用 / 由新建元素调用
示例：

    //after()
    var para = $("
", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    });
    $("p.foo").after(para);

    //insertAfter()
    $("

", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    }).insertAfter("p.foo");

before() / insertBefore()

作用：在目标元素外之前添加元素
区别：有目标元素调用 / 由新建元素调用
示例：

    //before()
    var para = $("
", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    });
    $("p.foo").before(para);

    //insertBefore()
    $("

", {
      "text" : "I'm a new paragraph!",
      "css"  : {"background" : "yellow"}
    }).insertBefore("p.foo");