JavaScript(二)：JSON; jQuery

JavaScript

一、JSON

1、简介

JSON 英文全称 JavaScript Object Notation，是一种轻量级的数据交换格式。
JSON 独立于语言：JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON
库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。

2、JSON语法规则

	数据为 键/值 对;
	数据由逗号分隔;
	大括号保存对象;
	方括号保存数组。
示例：
{
    "name": "JavaScript Object Notation",
    "sites": [
    { "name":"google" , "url":"www.google.com" }, 
    { "name":"百度" , "url":"www.baidu.com" }
    ]
}
注意：JSON字符串大括号外面必须是单引号，里面必须是双引号，必须是紧凑格式，不能美化格式（空格、换行等）！
例：
	'{"name":"JavaScript Object Notation","sites":[{"name":"google","url":"www.google.com"},{"name":"百度" , "url":"www.baidu.com"}]}'

3、JSON对象与JSON字符串的相互转换

JSON.parse();//解析json字符串
JSON.stringify();//将json对象转为json字符串
例：
	var json = {
				"name": "JavaScript Object Notation",
				"sites": [{
						"name": "google",
						"url": "www.google.com"
					},
					{
						"name": "百度",
						"url": "www.baidu.com"
					}
				]
			};
	var jsonStr = JSON.stringify(json);//将json对象转为json字符串
	var json1=JSON.parse(jsonStr);//解析json字符串,转化为json对象
	//注意:json字符串如果不是紧凑格式,会解析失败

二、jQuery

1、引入jQuery库文件

方式一：
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
方式二：
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

2、jQuery入门程序

$(function () {
		$('button').click(function () {
			alert("Hello JQuery");
		});
	});

3、加载模式

JavaScript等待加载：
window.onload=function(){}
jQuery等待加载：
$().ready(function(){});
简写： $(function(){});

4、基础DOM操作

html();	//获取元素中html内容
html(value);	//设置元素中html内容
text();	//获取元素中文本内容
text(value);	//设置元素中文本内容
val();	//获取表单中文本内容
val();	//设置表单中文本内容
注意：当我们使用 html()或 text()设置元素里的内容时，会清空原来的数据。而我们期望能够追加数据的话，需要先获取原本的数据。
例： $('#box').html($('#box').html() + '<em>www.li.cc</em>'); //追加数据
attr(key);  //获取某个元素key属性的值
attr(key, value);	//设置某个元素 key 属性的属性值
attr({key1:value2, key2:value2...});	//设置某个元素多个 key 属性的属性值
attr(key, function (index, value) {});	//设置某个元素 key，通过函数来设置

5、css操作

css(name);	//获取某个元素行内的 CSS 样式
css([name1, name2, name3]);	//获取某个元素行内多个 CSS 样式,返回JSON对象
css(name, value);	//设置某个元素行内的 CSS 样式
css({name1 : value1, name2 : value2});	//设置某个元素行内多个 CSS 样式
addClass(class);	//给某个元素添加一个 CSS 类
addClass(‘class1 class2 class3...’);	//给某个元素添加多个 CSS 类
removeClass(class);	//删除某个元素的一个 CSS 类
removeClass(‘class1 class2 class3...’);	//删除某个元素的多个 CSS 类
toggleClass(class1 class2 class3...);	//切换默认样式和指定样式
toggleClass(function(){});	//通过匿名函数设置切换的规则

width();	//获取某个元素的宽度
width(value);	//设置某个元素的宽度
width(function (index, width) {});	//通过匿名函数设置某个元素的宽度
height();	//获取某个元素的高度
height(value);	//设置某个元素的高度
height(function (index, width) {});	//通过匿名函数设置某个元素的长度

6、插入节点方法

内部插入节点的方法:
append(content);//向指定元素内部后面插入节点 content
append(function (index, html) {});//使用匿名函数向指定元素内部后面插入节点
appendTo(content);//将指定元素移入到指定元素 content 内部后面
prepend(content);//向指定元素 content 内部的前面插入节点
prepend(function (index, html) {});//使用匿名函数向指定元素内部的前面插入节点
prependTo(content);//将指定元素移入到指定元素 content 内部前面

外部插入节点方法:
after(content);//向指定元素的外部后面插入节点 content
after(function (index, html) {});//使用匿名函数向指定元素的外部后面插入节点
before(content);//向指定元素的外部前面插入节点 content
before(function (index, html) {});//使用匿名函数向指定元素的外部前面插入节点
insertAfter(content);//将指定节点移到指定元素 content 外部的后面
insertBefore(content);//将指定节点移到指定元素 content 外部的前面

包裹节点：
wrap(html);//向指定元素包裹一层 html 代码
wrapAll(html);//用 html 将所有元素包裹到一起
wrapInner(html);//向指定元素的子内容包裹一层 html
wrap(element);//向指定元素包裹一层 DOM 对象节点
wrapAll(element);//用 DOM 对象将所有元素包裹在一起
wrapInner(element);//向指定元素的子内容包裹一层 DOM 对象节点
unwrap();//移除一层指定元素包裹的内容

7、事件

bind();	//绑定事件
on();//绑定事件，用法与bind()一样
例：
//方式1：
$('input').bind('click', function () { 
    alert('点击！');
});
//方式2：普通处理函数
$('input').bind('click', fn);
function fn() {
    alert('点击！')；
}
//方式3：通过对象键值对绑定多个参数
$('input').bind({
    'mouseout' : function () { 
        alert('移出');
    },
    'mouseover' : function () {
        alert('移入');
    }
});
//方式4：简写
$('button').click(function (e) {
			alert('点击！');
        }).mouseover(function () {
			alert('移入');
        }).mouseout(function () {
			alert('移出');
	});

unbind();//删除所有当前元素的事件
off();//功能和unbind一样
unbind(type);//删除指定类型事件
one();//事件只执行一次
preventDefault();//取消某个元素的默认行为
stopPropagation();//取消事件冒泡

trigger和triggerHandler	//自动触发事件
区别：triggerHandler()方法并不会触发事件的默认行为，而trigger()会；
	triggerHandler()方法只会影响第一个匹配到的元素，而trigger()会影响所有。

<form action="123.html" method="get">
       <input type="submit" value="提交" />
</form>
$('form').trigger('submit'); //模拟用户执行提交，并跳转到执行页面
$('form').triggerHandler('submit'); //模拟用户执行提交，并阻止的默认行为