jQury和flot学习

来源：互联网发布：禁止卸载软件编辑：程序博客网时间：2024/05/16 23:38

今天最大的收获：学习方法需要改进，使用正确的编辑器，快速按照demo编程，了解其中的机制。依旧需要勇于提问，注意交流方式。

jQuery

学习教程：

中文版：http://www.w3school.com.cn/jquery/

英文版：http://docs.jquery.com/Tutorials

关于jQuery的经典文章：http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html

Flot（基于jQuery的图表）

学习教程：http://code.google.com/p/flot/

API:英文版，http://flot.googlecode.com/svn/trunk/API.txt

中文版，http://wenku.baidu.com/view/d504613331126edb6f1a1008.html

Firebug：js调试，firefix插件

http://getfirebug.com/

简介：http://baike.baidu.com/view/819414.htm

使用方法：http://blog.csdn.net/tianxiaode/article/details/1769152

现在开始jQuery学习：

jQuery是一个javaScript库

基本上是学习如何选取HTML元素以及对他们执行类似隐藏、移动以及操作其内容等任务。

前驱知识：HTML CSS JavaScript。

jQury 库包含特性：

html元素选取、html元素操作、css操作、html事件函数、javaScript特效和动画，HTMLDOM遍历和修改。AJAXUtilities

向页面添加jQuery库。

jQuery位于javascript文件中

<head>

</head>

注意路径以及<script>所在位置。

基础例子：

<html>

<head>

<scripttype="text/javascript"src="jquery-1.6.js"></script>

$(document).ready(function(){

$("button").click(function(){

$("p").hide();//这两个通过$(“tag_type”)来对tag进行操作。

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>Thisis a paragraph.</p>

<p>Thisis another paragraph.</p>

<button type="button">Clickme</button>

</body>

</html>

Flot的例子：

<%@ Page Language="C#"AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//注意顺序，因为flot是基于jquery的所以jquery.flot.js要在jquery-1.6.js之后加载

<title>try a query</title>

$(document).ready(function() {

$("button").click(function(){

$("p").hide();

});

</script>

</head>

<body>

<div>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button type="button">Clickme</button>

</div>

$(function() {

var d1 = [];

for (var i = 0; i< 14; i += 0.5)

d1.push([i, Math.sin(i)]);

var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

// a null signifies separate line segments

var d3 = [[0, 12], [7, 12], null,[7, 2.5], [12, 2.5]];

var d4 = [[1, 1], [2, 2], [3, 3]];

$.plot($("#placeholder"), [d1, d2, d3,d4]);//这个位置指定了图表显示在什么位置

});

</script>

</form>

</body>

</html>

关于flot 的图表类型：

$(function() {

var d1 =[];

for (var i = 0; i< 14; i += 0.5)

d1.push([i, Math.sin(i)]);

var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

var d3 = [];

for (var i = 0; i< 14; i += 0.5)

d3.push([i, Math.cos(i)]);

var d4 = [];

for (var i = 0; i< 14; i += 0.1)

d4.push([i, Math.sqrt(i * 10)]);

var d5 = [];

for (var i = 0; i< 14; i += 0.5)

d5.push([i, Math.sqrt(i)]);

var d6 = [];

for (var i = 0; i< 14; i += 0.5 + Math.random())

d6.push([i, Math.sqrt(2 * i + Math.sin(i) + 5)]);

//above are definedthe data of chart

//beloware the define of line types

$.plot($("#placeholder"), [

{

data: d1,

lines: {show: true, fill: true }

{

data: d2,

bars: { show: true }

{

data: d3,

points: {show: true }

{

data: d4,

lines: { show: true }

{

data: d5,

lines: {show: true },

/ points: { show: true}

{

data: d6,

lines: {show: true, steps: true}

}

]);

});

</script>

具体信息请见flot API.

给图表添加不同 option

通过定义轴的长度、轴的刻度为了让图表能很好的显示曲线为而不必人为去定义一些好的曲线数据来显示图表。

$(function() {

var d1 = [];

for (var i = 0; i< Math.PI * 2; i += 0.25)

d1.push([i, Math.sin(i)]);

var d2 = [];

for (var i = 0; i< Math.PI * 2; i += 0.25)

d2.push([i, Math.cos(i)]);

var d3 = [];

for (var i = 0; i< Math.PI * 2; i += 0.1)

d3.push([i, Math.tan(i)]);

//above are the data definations

$.plot($("#placeholder"), [

{ label: "sin(x)", data: d1 },

{ label: "cos(x)", data: d2 },

{ label: "tan(x)", data: d3 }

Lable 定义曲线名称 data定义了是哪个曲线。

], {

series: {

lines: {show: true },

points: {show: true }

xaxis: {//define x axis

ticks: [0,[Math.PI / 2, "\u03c0/2"],[Math.PI, "\u03c0"], [Math.PI * 3/ 2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]]

yaxis: {//define y axis

ticks: 10, //mark on axis

min: -2,

max: 2

Ticks：刻度数，可以设置图表产生刻度个数，但是程序尽量会设置最合适的刻度个数，因此，尽管你设置了3个刻度但是却可能得到5个。如果想完全自定义刻度，可已经啊参数ticks的值设置为一个数组。

grid: {

backgroundColor: { colors: ["#fff","#eee"] }//justadd the background

}

});

</script>

感谢这次机会。