类别归档：JavaScript

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。

RSS feed of JavaScript

利用echarts实现有向图可视化
作者是 发布于 在 JavaScript.

在下方文本框内输入有向图JSON（[source, target, value]）：

 

上例的源码如下（force-directed-graph.html）：

<!DOCTYPE html>
<html>
<head>
<meta ...

继续阅读

HTML5+JavaScript实现雪花飘落特效
作者是 发布于 在 JavaScript.

下面的JavaScript代码利用HTML5 canvas实现了动态的雪花飘落效果，CPU开销也比较小。

原文链接：http://www.oschina.net/code/snippet_436266_46013

JavaScript代码：

<canvas id="christmasCanvas" style="top: 0px; left: 0px; z-index: 5000; position: fixed; pointer-events: none;" ></canvas>
<script type="text/javascript">
  var snow = function() {
    if(1==1) {
      var b = document.getElementById("christmasCanvas"), 
          a = b.getContext("2d"), 
          d = window.innerWidth, 
          c = window.innerHeight;
      b.width ...

继续阅读

使用amCharts展示实时数据
作者是 发布于 在 JavaScript.

代码参考：http://jsfiddle.net/amcharts/ATQUm/

JavaScript代码：

var chart;
var chartData = [];
var chartCursor;
var day = 0;
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 500);

// generate some random data, quite different range
function generateChartData() {
    for (day = 0; day < 50; ...

继续阅读

高效jQuery选择器的5个技巧
作者是 发布于 在 JavaScript.

顾名思义，jQuery专注于查询（queries）。库的核心允许你使用CSS选择器语法，以及通过在集合上执行函数，来查找DOM元素。

jQuery使用浏览器原生API方法获取DOM集合。现代浏览器支持getElementsByClassName, querySelector以及querySelectorAll（可以解析CSS语法）。然而，老版本的浏览器可能只提供getElementById以及getElementByTagName。在最坏的情况下，jQuery的Sizzle引擎必须解析选择器字符串来匹配元素。

下面是可以帮助你优化jQuery选择器的5点提示：

1. 尽量使用ID

HTML ID属性在每一个页面上都是唯一的，并且即使老版本的浏览器也可以非常迅速地定位一个元素：

$("#myelement");

2. 避免只使用类名称

下面的类选择器在现代浏览器中执行迅速：

$(".myclass");

不幸的是，在老版本的浏览器，比如IE6/7和Firefox 2，jQuery必须检查页面上的每一个元素来确定“myclass”是否被元素所包含。

如果通过标签名加以限定可以让选择器更加的高效，例如：

$("div.myclass");

jQuery现在可以将搜索范围限定在DIV元素。

3. 保持简单!

避免过于复杂的选择器。除非你要查找一个极其复杂的HTML文档，很少有需要使用多于2，3个修饰符的情况。

考虑下面的复杂选择器：

$("body #page:first-child article.main p#intro em");

p#intro 一定是唯一的，因而选择器可以这样简化：

$("p#intro em");

4. 从左往右增加特异性

了解一点jQuery选择器引擎的相关知识是有帮助的。查找首先从最后一个选择器开始，因此，在老版本的浏览器中，一个类似于这样的查询：

$("p#intro em");

将所有的em元素加载进一个数组。然后判断每一个节点的父元素，进而排除那些找不到p#intro父节点标签的元素。如果页面上包含数百个em标签的话，查询会变得十分的低效。

根据你的文档，查询可以通过优先使用最佳限定符来获得优化。其结果可以作为子选择器的出发点，例如：

$("em", $("p#intro")); ...

继续阅读

jQuery与原生JavaScript选择HTML元素集合对比
作者是 发布于 在 JavaScript.

通过调用document.getElementsByTagName, document.getElementsByName以及document.getElementsByClassName（部分浏览器不支持），可以返回HTMLCollection对象。表面上，它们与数组很类似，因为它们都包含length属性并且元素都可以通过[index]方式访问。然而，实际上它们并不是数组；诸如push(), slice()与sort()之类的方法不受支持。

考虑下面的HTML文档：

<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>
</body>

我们使用原生JavaScript的getElementsByTagName方法与jQuery选择器分别获取每一个paragraph节点：

var pCollection = document.getElementsByTagName("p");
var pQuery = $("p");

console.log("pCollection.length: ", pCollection.length);
console.log("pQuery.length: ", pQuery.length);

它们都返回了相同的节点，因此集合长度都是3：

pCollection.length: 3
pQuery.length: 3

我们现在再向文档中添加一个paragraph元素，然后再观察一下集合：

// add new paragraph
var newp = ...

继续阅读