JavaScript JSON
JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。
什么是 JSON?
- JSON 英文全称 JavaScript Object Notation
- JSON 是一种轻量级的数据交换格式。
- JSON是独立的语言 *****
- JSON 易于理解。
| * JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。 文本可以被任何编程语言读取及作为数据格式传递。 | |
|---|---|
JSON 实例
以下 JSON 语法定义了 sites 对象: 3 条网站信息（对象）的数组:
{“sites”:[{“name”:“Runoob”, “url”:“www.runoob.com”},{“name”:“Google”, “url”:“www.google.com”},{“name”:“Taobao”, “url”:“www.taobao.com”}]}
JSON 格式化后为 JavaScript 对象
JSON 格式在语法上与创建 JavaScript 对象代码是相同的。
由于它们很相似，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象。
JSON 语法规则
- 数据为 键/值 对。
- 数据由逗号分隔。
- 大括号保存对象
- 方括号保存数组
JSON 数据 - 一个名称对应一个值
JSON 数据格式为 键/值 对，就像 JavaScript 对象属性。
键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：
“name”:“Runoob”
JSON 对象
JSON 对象保存在大括号内。
就像在 JavaScript 中, 对象可以保存多个 键/值 对：
{“name”:“Runoob”, “url”:“www.runoob.com”}
JSON 数组
JSON 数组保存在中括号内。
就像在 JavaScript 中, 数组可以包含对象：
“sites”:[ {“name”:“Runoob”, “url”:“www.runoob.com”}, {“name”:“Google”, “url”:“www.google.com”}, {“name”:“Taobao”, “url”:“www.taobao.com”} ]
在以上实例中，对象 “sites” 是一个数组，包含了三个对象。
每个对象为站点的信息（网站名和网站地址）。
JSON 字符串转换为 JavaScript 对象
通常我们从服务器中读取 JSON 数据，并在网页中显示数据。
简单起见，我们网页中直接设置 JSON 字符串 (你还可以阅读我们的 JSON 教程):
首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据：
var text = ‘{ “sites” : [’ + ‘{ “name”:“Runoob” , “url”:“www.runoob.com” },’ + ‘{ “name”:“Google” , “url”:“www.google.com” },’ + ‘{ “name”:“Taobao” , “url”:“www.taobao.com” } ]}’;
然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
var obj = JSON.parse(text);
最后，在你的页面中使用新的 JavaScript 对象：
实例
var text = ‘{ “sites” : [’ + ‘{ “name”:“Runoob” , “url”:“www.runoob.com” },’ + ‘{ “name”:“Google” , “url”:“www.google.com” },’ + ‘{ “name”:“Taobao” , “url”:“www.taobao.com” } ]}’; obj = JSON.parse(text); document.getElementById(“demo”).innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
相关函数
| 函数 | 描述 |
|---|---|
| JSON.parse() | 用于将一个 JSON 字符串转换为 JSON对象。 |
| JSON.stringify() | 用于将 JSON对象转换为 JSON 字符串。 |
什么是JQuery?
-
jQuery是一个JavaScript库（框架），它通过封装原生的JavaScript函数得到一整套定义
好的方法。它的作者是John Resig，于2006年创建的一个开源项目，随着越来越多开发
者的加入，JQuery已经集成了JavaScript、 CSS、 DOM和Ajax于一体的强大功能。它
可以用最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐。 -
JQuery的学习网站：
1.在线的可以访问：http://t.mb5u.com/jquery/
2. http://www.runoob.com/ 前端知识的学习网站
最新的文档，英文版的：http://api.jquery.com/ -
JQuery库的下载：http://www.jq22.com/jquery-info122
JQuery 的功能和优势
- JQuery 作为 JavaScript 封装的库，他的目的就是为了简化开发者使用 JavaScript。主要功能有以下几点：
- 1.像 CSS 那样访问和操作 DOM
- 2.修改 CSS 控制页面外观
- 3.简化 JavaScript 代码操作
- 4.事件处理更加容易
- 5.各种动画效果使用方便
- 6.让 Ajax 技术更加完美 异步加载
- 7.基于 jQuery 大量插件
- 8.自行扩展功能插件JQuery
- 最大的优势，就是特别的方便。比如模仿 CSS 获取 DOM，比原生的 JavaScript要方便太多。并且在多个 CSS 设置上的集中处理非常舒服，而最常用的 CSS 功能又封装到单独的方法，感觉非常有心。最重要的是 jQuery 的代码兼容性非常好，你不需要总是头疼
代码风格
在jQuery程序中，不管是页面元素的选择、内置的功能函数，都是美元符号“$”来起
始的。而这个“$”就是jQuery当中最重要且独有的对象：jQuery对象，所以我们在页
面元素选择或执行功能函数的时候可以这么写：
$(function () {}); //执行一个匿名函数
$(‘#box’); //进行执行的ID元素选择
$(‘#box’).css(‘color’, ‘red’); //执行功能函数
由于$本身就是jQuery对象的缩写形式，那么也就是说上面的三段代码也可以写成如下形式：
jQuery(function () {});
jQuery(‘#box’);
jQuery(‘#box’).css(‘color’, ‘red’);
值得一提的是，执行了.css()这个功能函数后，最终返回的还是jQuery对象，那么也就
是说，jQuery的代码模式是采用的连缀方式，可以不停的连续调用功能函数。
$('#box').css('color', 'red').css('font-size', '50px'); //连缀
jQuery中代码注释和JavaScript是保持一致的，有两种最常用的注释：单行使用“//...” ，多行使用“/* ... */” 。
加载模式
我们在之前的代码一直在使用$(function () {});这段代码进行首尾包裹，那么为什么必须
要包裹这段代码呢？原因是我们jQuery库文件是在body元素之前加载的，我们必须等待所
有的DOM元素加载后，延迟支持DOM操作，否则就无法获取到。
在延迟等待加载，JavaScript提供了一个事件为load，方法如下：
window.onload = function () {}; //JavaScript等待加载
$(document).ready(function () {}); //jQuery等待加载
案例演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* window.onload=function(){
$('button').css('background','red');
} */
// jQuery 页面加载完再去执行 ready()
/* $(document).ready(function(){
$('button').css('background','red');
}); */
//针对上面的写法,有个简写形式
$(function(){
$('button').css('background','red');
});
</script>
</head>
<body>
<button type="button">一个按钮</button>
</body>
</html>
选择器
JQuery选择器与CSS选择器用法相同，只是格式不同
如：CSS模式：div{} #box{}，JQuery模式：$('div'){} $('#box'){}
$('')里面的东西就是CSS选择器的写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
//Jquery选择一个或 多个标签 采用的是CSS的选择器的写法
$('h1').eq(0).css('color', 'red');
});
</script>
</head>
<body>
<h1>aaaaaa</h1>
<h1>aaaaaa</h1>
<h1>aaaaaa</h1>
<h1>aaaaaa</h1>
<h1>aaaaaa</h1>
<h1>aaaaaa</h1>
<h1>aaaaaa</h1>
</body>
对象互换
jQuery 对象虽然是 jQuery 库独有的对象，但它也是通过 JavaScript 进行封装而来的。 我
们可以直接输出来得到它的信息。
alert($); //jQuery 对象方法内部
alert($()); //jQuery 对象返回的对象，还是 jQuery
alert($('#box')); //包裹 ID 元素返回对象，还是 jQuery
从上面三组代码我们发现：只要使用了包裹后，最终返回的都是 jQuery 对象。这样的
好处显而易见，就是可以连缀处理。但有时，我们也需要返回原生的 DOM 对象，比如：
alert(document.getElementById('box')); //[object HTMLDivElement]
jQuery 想要达到获取原生的 DOM 对象，可以这么处理：
alert($('#box').get(0)); //ID 元素的第一个原生 DOM
从上面 get(0)，这里的索引看出，jQuery 是可以进行批量处理 DOM 的.
节点操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function () {
var mydiv = $("<div>abc</div>");
$('body').append(mydiv);
$('h1').appendTo('#mydiv');
$('ul').after('<h2>bbbbbbb</h2>');
$('span').insertAfter('#mydiv2');
});
</script>
</head>
<body>
<h1>一行标题</h1>
<div id="mydiv">
<h2>2222222</h2>
</div>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<span>bbbbbbbbbbbbbbbbbbbbbbb</span>
<span>bbbbbbbbbbbbbbbbbbbbbbb</span>
<span>bbbbbbbbbbbbbbbbbbbbbbb</span>
<span>bbbbbbbbbbbbbbbbbbbbbbb</span>
<div id="mydiv2">
aaaaaaaaaa
</div>
<b>asdfasdfasdfasdf</b>
<b>asdfasdfasdfasdf</b>
<b>asdfasdfasdfasdf</b>
<b>asdfasdfasdfasdf</b>
<b>asdfasdfasdfasdf</b>
<b>asdfasdfasdfasdf</b>
<b>asdfasdfasdfasdf</b>
</body>
</html>
取代选择器的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//$('div p span').css('color','red');
//使用find()方法可以层层往下找
$('div').find('p').find('span').css('color', 'red');
//$('ul>li').css('color', 'red');
$('ul').children('li').css('color','yellow');
$('h1').eq(0).next('h1').next('h1').next('h1').css('color','red');
});
</script>
</head>
<body>
<div id="">
<p>
<span>abc</span>
</p>
</div>
<ul>
<li>bbbbbbbb</li>
<li>bbbbbbbb</li>
<li>bbbbbbbb</li>
<li>bbbbbbbb</li>
<li>bbbbbbbb</li>
<li>bbbbbbbb</li>
<li>bbbbbbbb</li>
</ul>
<h1>aaaaa</h1>
<h1>aaaaa</h1>
<h1>aaaaa</h1>
<h1>cccc</h1>
</body>
</html>
属性的操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.mycss {
color: red;
font-size: 200px;
}
</style>
<title>Document</title>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function () {
//获取属性的值
var text = $('div').attr('id');
//alert(text);
//设置属性
// $('div').attr('class', 'mycss');
//移除属性
$('div').removeAttr('class');
});
</script>
</head>
<body>
<div id="mydiv" class="mycss">
abc
</div>
</body>
</html>
淡入淡出的动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background: red;
}
</style>
<script src="js/jquery.js">
</script>
<script>
$(document).ready(function () {
$('button').eq(0).click(function () {
$('div').fadeIn(1000); //淡入的方法
});
$('button').eq(1).click(function () {
$('div').fadeOut(1000) //淡出的方法
});
$('button').eq(2).click(function () {
$('div').fadeToggle(500); //淡入淡出的开关
});
});
</script>
</head>
<body>
<div></div>
<button>淡入</button>
<button>淡出</button>
<button>开关</button>
</body>
</html>
事件的绑定及简写
//事件的绑定与解绑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function () {
// $('button').bind('click', function () {
// alert("谈了");
// });
// $('button').bind('mouseover', function () {
// //alert("谈了2");
// $(this).css('background', 'red');
// });
//绑定多个事件
$('button').bind('click', function () {
$(this).css('background', 'red');
}).bind('mouseover', function () {
$(this).css('background', 'yellow');
}).bind('mouseout', function () {
$(this).css('background', 'blue');
});
//解绑事件
$('button').unbind('click');
});
</script>
</head>
<body>
<button>一个按钮</button>
</body>
</html>
//绑定时间的简写方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function () {
// $('button').click(function (e) {
// }).mouseover(function () {
// }).mouseout(function () {
// });
//hover
$('button').hover(function (e) {
$(e.currentTarget).css('background', 'red');
// over
//$(this).css('background', 'red');
}, function (e) {
// out
//this.style.background = "yellow";
$(e.target).css('background', 'yellow');
});
});
</script>
</head>
<body>
<button>一个按钮</button>
</body>
</html>
事件的自动触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function () {
// $('button').click(function () {
// alert('aabc');
// });
// //自动触发我们绑定的事件
// $('button').trigger('click');
//以上两步可以简写
$('button').click(function () {
alert('aabc');
}).triggerHandler('click');
});
</script>
</head>
<body>
<button>一个按钮</button>
</body>
</html>
下拉上卷动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background: red;
}
</style>
<script src="js/jquery.js">
</script>
<script>
$(document).ready(function () {
$('button').eq(0).click(function () {
$('div').slideUp(1000); //上卷方法
});
$('button').eq(1).click(function () {
$('div').slideDown(1000); //下拉方法
});
$('button').eq(2).click(function () {
$('div').slideToggle(200); //下拉上卷开关的方法
});
});
</script>
</head>
<body>
<div></div>
<button>上卷</button>
<button>下来</button>
<button>开关</button>
</body>
</html>
新的绑定事件方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function () {
// $('button').bind('click',function(){});
$('button').eq(0).on('click', function () {
alert("abc");
}).on('mouseover', function () {
$(this).css('background', 'red');
}).on('mouseout', function () {
$(this).css('background', 'yellow');
});
//解绑
$('button').eq(0).off('click');
//事件只执行一次
$('button').eq(1).one('click', function () {
alert("abc");
})
// $('button').mousedown(function(){});
});
</script>
</head>
<body>
<button>一个按钮</button>
<button>一个按钮</button>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
