不得不注意的符号，json数据类型
在学习JQuery的过程中，我就吃过符号出错的亏，所以在这里整理一下，谈谈一下符号。
在学编程中，我们可能会把中文当英文符号输进去，导致编程不能通过，这是最容易发现的，我要讲的不是这个问题。
大家先看看在CSS中样式的设置吧
<style>
body { /*网页基本属性*/
margin:0px;
padding:0px;
text-align:center;
}
.container{ /*container容器样式*/
width:800px;
margin:0 auto; /*居中*/
}
.header{ /*header样式类*/
width:800px; /*宽度*/
height:200px; /*高度*/
background:url(images/bg.jpg); /*header部分的背景图片*/
}
.menu{
width:100%; /*定义table标签样式*/
font-size:16px;
background-color:#90bcff; /*背景颜色*/
text-align:center; /*居中对齐*/
fond-weight:bold;
}
.leftbar{ /*leftbar样式*/
width:199px; /*宽度*/
height:650px;
background-color:#d4d7c6; /*背景颜色*/
text-align:center; /*水平对齐为居中*/
vertical-align:top; /*垂直对齐为顶端对齐*/
border-right:1px #FFFFFF solid; /*右边框样式*/
float:left; /* 使leftbar块左浮动，居于页面左侧*/
}
.pic1{
border:3px solid #f393a5; /*leftbar中图片样式*/
}
.leftbar p{ /*leftbar中文本样式*/
font-size:20px;
}
h2 { /*leftbar中标题样式*/
font-weight:bold;
color: #c223c8;
font-size:18px;
padding: 0;
width: 199px;
}
.favlinks { /*favlinks样式*/
margin: 0;
padding: 0;
width: 199px;
}
ul.favlinks li { /*favlinks中li列表样式*/
padding-left: 12px;
line-height:25px;
font-size:14px;
list-style-position:inside;
}
.favlinks a:link { /*favlinks中链接样式*/
color: #A5ffffB;
text-decoration: none;
border-bottom: 1px dotted #A5003B; /*底部边框样式*/
}
.content{ /*contenta样式类*/
width:600px; /*宽度*/
height:650px;
background:#e5e5e3 ; /*背景颜色*/
vertical-align:top; /*垂直对齐方式为顶端对齐*/
font-size:12px;
text-align:center;
float:left; /* 左浮动*/
}
h4{ /*正文标题样式*/
text-decoration:underline; /*显示下划线*/
color:#0078aa;
padding-top:15px;
font-size:16px;
}
.content p{ /*正文段落样式*/
line-height:2em;
font-size:13px;
}
</style>
在里面都是一个花括号{}把样式括起来，里面是属性加冒号加属性值，如：line-height:2em;font-size:13px;
现在开始讲我在JQuery里遇到的情况：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
$("tr:first").css({"background":"blue","color":"white"}); //请看这里，圆括号里面有花括号，然后有两组属性，组与组之间是逗号隔开，属性与属性值之间用冒号，这是特别注意的。而多组属性必须有花括号括起来。
$("tr:eq(1)").css("background","#F1F5FB");//看这里，这里只有括号，里面没有花括号，所以属性与属性值之间用逗号，不能用冒号，否则出错，你可以写代码试试
上面这行代码这样使用也可以$("tr:eq(1)").css({"background":"#F1F5FB"});
$("tr:last").css("background","#ff9");
})
</script>
<title>上机练习</title>
</head>
<body>
<div>
<table>
<tr><th>选择器</th><th>说明</th></tr>
<tr><td>:first</td><td>匹配第一个元素，哈哈哈哈哈哈哈火狐 哈哈哈</td></tr>
<tr><td>:last</td><td>匹配最后一个元素</td></tr>
</table>
</body>
</html>
下面看看再多的代码，温习温习：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jQuery/jquery-2.1.4.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
$("p").css({"margin":"0","padding":"0.5em"});
$("div").css({"border":"solid 2px red","margin":"0","padding":"0.5em"});
$("div>div").css("margin","1em") ;
$("div div").css("background","#ff0");
$("div div div").css("background","#f0f");
$("div+p").css("margin","1em");
$("div:eq(1)~p").css({"background":"blue","color":"white"});
})
</script>
<title>层叠选择器</title>
</head>
<body>
<h1>青玉案--元夕</h1>
<h2>辛弃疾</h2>
<div>
<div>东风夜放花千树，
<div>更吹落，星如雨。</div>
<p>宝马雕车香满路。</p>
<p>凤箫声动，玉壶光转，</p>
<p>一夜鱼龙舞。</p>
</div>
<p>娥儿雪柳黄金镂，</p>
<p>笑语盈盈暗香去。</p>
<p>纵里寻她千百度，</p>
</div>
<p>蓦然回首，那人却在，</p>
<p>灯火阑珊处。</p>
</body>
</html>
上面代码显示如下：
如果将代码改为如下（注意红色的地方，留意与上面代码的区别）：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jQuery/jquery-2.1.4.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
$("p").css({"margin":"0","padding":"0.5em"});
$("div").css({"border":"solid 2px red","margin":"0","padding":"0.5em"});
$("div>div").css("margin":"1em") ;
$("div div").css("background":"#ff0");
$("div div div").css("background":"#f0f");
$("div+p").css("margin":"1em");
$("div:eq(1)~p").css({"background":"blue","color":"white"});
})
</script>
<title>层叠选择器</title>
</head>
<body>
<h1>青玉案--元夕</h1>
<h2>辛弃疾</h2>
<div>
<div>东风夜放花千树，
<div>更吹落，星如雨。</div>
<p>宝马雕车香满路。</p>
<p>凤箫声动，玉壶光转，</p>
<p>一夜鱼龙舞。</p>
</div>
<p>娥儿雪柳黄金镂，</p>
<p>笑语盈盈暗香去。</p>
<p>纵里寻她千百度，</p>
</div>
<p>蓦然回首，那人却在，</p>
<p>灯火阑珊处。</p>
</body>
</html>
结果显示如下：
更多代码，结果如何，各位请试试看看：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
img{height: 200px;}
</style>
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
$("div~img").css({"border":"solid 5px red","height":"50px"});
$("div img").css({"border":"solid 5px red"});
$("p").css("color","blue"); //这里可改为$("p").css({"color":"blue"});
})
</script>
<title>上机练习</title>
</head>
<body>
<p>你好，欢迎到来！</p>
<div>
<span><img src="images/bg.jpg"/></span>
<img src="images/bg.jpg">
</div>
<img src="images/bg.jpg">
<img src="images/bg.jpg">
</body>
</html>
示例：
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
$("input[type='button']").click(function(){
var i = 0;
$("input[type='text']").each(function(){
i += parseInt($(this).val());
});
$('label').text(i);
});
$('input:lt(2)')
.add('label')
.css('border','none')
.css('borderBottom','solid 1px navy') //看到这里，大家可能会疑问，这里怎么用单引号呢，这是可以的，亦可以改回双引号，这是不同人的一个小习惯
.css('textAlign','center')
.css('width','3em')
.css({'width':'30px'});
});
</script>
<title>上机练习</title>
</head>
<body>
<input type="text" value="" /> +
<input type="text" value="" />
<input type="button" value="=" />
<label></label>
</body>
</html>
讲了这么多，我更想讲讲json：
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。
中文名：JavaScript 对象表示法 外文名：JavaScript Object Notation
JSON 值
-
数字（整数或浮点数）
-
字符串（在双引号中）
-
逻辑值（true 或 false）
-
数组（在方括号中）
-
对象（在花括号中）
-
null
基础结构
基础示例
名称 / 值对
|
1
|
{"firstName":"Brett"} |
|
1
|
firstName=Brett |
|
1
|
{"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"} |
表示数组
|
1
2
3
4
5
6
7
|
{ "people":[ {"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"}, {"firstName":"Jason","lastName":"Hunter","email":"bbbb"}, {"firstName":"Elliotte","lastName":"Harold","email":"cccc"} ]} |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
{ "programmers": [{ "firstName": "Brett", "lastName": "McLaughlin", "email": "aaaa" }, { "firstName": "Jason", "lastName": "Hunter", "email": "bbbb" }, { "firstName": "Elliotte", "lastName": "Harold", "email": "cccc" }], "authors": [{ "firstName": "Isaac", "lastName": "Asimov", "genre": "sciencefiction" }, { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" }, { "firstName": "Frank", "lastName": "Peretti", "genre": "christianfiction" }], "musicians": [{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" }, { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }]} |
格式应用
赋值给变量
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
var people = { "programmers": [{ "firstName": "Brett", "lastName": "McLaughlin", "email": "aaaa" }, { "firstName": "Jason", "lastName": "Hunter", "email": "bbbb" }, { "firstName": "Elliotte", "lastName": "Harold", "email": "cccc" }], "authors": [{ "firstName": "Isaac", "lastName": "Asimov", "genre": "sciencefiction" }, { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" }, { "firstName": "Frank", "lastName": "Peretti", "genre": "christianfiction" }], "musicians": [{ "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" }, { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }]}; |
访问数据
|
1
|
people.programmers[0].lastName; |
|
1
2
3
|
people.authors[1].genre // Value is "fantasy"people.musicians[3].lastName // Undefined. This refers to the fourth entry, and there isn't onepeople.programmers[2].firstName // Value is "Elliotte" |
修改数据
|
1
|
people.musicians[1].lastName="Rachmaninov"; |
换回字符串
具体形式
|
1
2
3
4
|
{ "姓名":"大憨", "年龄":24} |
|
1
2
3
4
5
6
|
{ "学生": [ {"姓名":"小明","年龄":23}, {"姓名":"大憨","年龄":24} ]} |
概念比较
和XML的比较
实例比较
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<?xml version="1.0" encoding="utf-8"?><country> <name>中国</name> <province> <name>黑龙江</name> <cities> <city>哈尔滨</city> <city>大庆</city> </cities> </province> <province> <name>广东</name> <cities> <city>广州</city> <city>深圳</city> <city>珠海</city> </cities> </province> <province> <name>台湾</name> <cities> <city>台北</city> <city>高雄</city> </cities> </province> <province> <name>新疆</name> <cities> <city>乌鲁木齐</city> </cities> </province></country> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
{ "name": "中国", "province": [{ "name": "黑龙江", "cities": { "city": ["哈尔滨", "大庆"] } }, { "name": "广东", "cities": { "city": ["广州", "深圳", "珠海"] } }, { "name": "台湾", "cities": { "city": ["台北", "高雄"] } }, { "name": "新疆", "cities": { "city": ["乌鲁木齐"] } }]} |
