JSON
什么是JSON
- JSON是一种数据交换格式,并且基于js语法子集的一种开放格式,一般是给程序进行读取的,采用完全独立其他编程语言来存储数据,层次结构使得json成为一种数据交换语言。
对象转化为JSON字符串
JSON.stringify();
JSON字符串转化为对象
JSON.parse();
操作BOM对象
BOM:浏览器对象模型
window 代表浏览器窗口
location 代表当前页面的URL信息
screen 代表屏幕尺寸
document 代表当前页面,HTML 文档树
var id=document.getElementById();
history 代表历史记录
操作DOM对象(重点)
DOM: 文档对象模型
<div id="add">
</div>
<script type="text/javascript">
var id=document.getElementById('add');
</script>
更新DOM节点
<div id="add">
</div>
<script type="text/javascript">
var id=document.getElementById('add');
id.style.color='red';
id.innerText='123';
id.style.padding="10px";
</script>
删除节点
步骤:先获取父节点,在通过父节点删除自己
var self=document.getElementById('p1');
var father = self.parentElement;
father.removeChild(self);
插入节点
注意:使用InnerHTML插入的话,会覆盖之前的节点内容
- 可以使用appendChild()追加
father.appendChild(id);
//通过JS 创建一个新的节点
var newP =document.createElement('p');
newP.id='newpp';
newP.innerText='hello js';
//追加
father.appendChild(newP);
//创建一个script标签,给标签设置type属性并赋值;
var mySrcipt=document.createElement('script');
mySrcipt.setAttribute("type","text/javascript");
jQuery
jQuery库,里面存储着大量的JavaScript函数
//jQuery万能公式
$(select).action(); //action(事件) select(id选择器,class选择器)
jQuery事件
鼠标事件
//获取鼠标移动事件
<script src="lib/jquery-1.5.1.js"></script>
<style>
#divMove{
500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="divMove">
move:<span id="SpanMove"></span>
</div>
<script>
$(function () {
$('#divMove').mousemove(function (e) {
$('#SpanMove').text('x'+e.pageX+'y'+e.pageY)
})
})
</script>
操作DOM元素
节点文本操作
$('#ul li[name=python').text(); //获取ul下的li标签中的值
$('#ul li[name=python').text(‘设置’); //设置ul下的li标签中的值
$('#ul').html(); //获取ul标签中的值
$('#ul').html(‘设置’); //设置ul下的li标签中的值
css操作
$('#id').css({"color","red"});
元素的显示和隐藏 本质:display :none
$('#id').show;
$('#id').hide;