今天最大的收获:学习方法需要改进,使用正确的编辑器,快速按照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://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>
<script tyoe=”text/javascript” src=”jquery.js”></script>
</head>
注意路径以及<script>所在位置。
基础例子:
<html>
<head>
<scripttype="text/javascript"src="jquery-1.6.js"></script>
<script type="text/javascript">
$(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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript"src="js/jquery-1.6.js"></script>
<script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script>
//注意顺序,因为flot是基于jquery的所以jquery.flot.js要在jquery-1.6.js之后加载
<title>try a query</title>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<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>
<div id="placeholder"style="width:600px;height:300px;"></div>
<script type="text/javascript">
$(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 的图表类型:
<script type="text/javascript">
$(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
通过定义轴的长度、轴的刻度为了让图表能很好的显示曲线为而不必人为去定义一些好的曲线数据来显示图表。
<script type="text/javascript">
$(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>
感谢这次机会。