1.heighcharts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 图表容器 DOM -->
<div id="container" style="width: 600px;height:400px;"></div>
<!-- 引入 highcharts.js -->
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script>
// 图表配置
var options = {
chart: {
type: 'bar' //指定图表的类型，默认是折线图（line）
},
title: {
text: '我的第一个图表' // 标题
},
xAxis: {
categories: ['苹果', '香蕉', '橙子'] // x 轴分类
},
yAxis: {
title: {
text: '吃水果个数' // y 轴标题
}
},
series: [{ // 数据列
name: '小明', // 数据列名
data: [1, 0, 4] // 数据
}, {
name: '小红',
data: [5, 7, 3]
}]
};
// 图表初始化函数
var chart = Highcharts.chart('container', options);
</script>
</body>
</html>
2.演示heighcharts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 960px;
height: 600px;
margin: 0 auto;
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 图表容器 DOM -->
<div id="container" style="width: 600px;height:400px;"></div>
<!-- 引入 highcharts.js -->
<script src="./js/highcharts.js"></script>
<script>
// 图表初始化函数
var chart = Highcharts.chart('container', {
// 图标配置 改变背景图片
chart: {
backgroundColor: {
linearGradient: [0,0,500,500],
stops: [
[0, 'rgb(255,200,255'],
[1, 'rgb(255,100,255']
]
},
type: 'line'
},
// 配置标题
title: {
// 文字
text: "这是我的第一个图表",
// 调整水平位置
// x: -200,
// align: "left",
// 调整文字样式
style: {
color: "red",
fontSize: "16px"
}
},
// 数据列
series: [
{
name: '北京',
data: [1,4,2,8,6,1,1]
},
{
name: '上海',
data: [5,3,2,7,5,9,12]
}
],
// x轴
xAxis: {
title: {
text: '星期'
},
// 轴分类
categories: ['周一','周二','周三','周四','周五','周六','周日'],
},
// y轴
yAxis: {
title: {
text: '温度'
},
// 轴标签
labels: {
format: '{value} ℃'
}
},
// 图例
legend: {
enabled: false
},
// 去水印
credits: {
enabled: false
}
});
</script>
</body>
</html>
3.代码规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1 使用 4 个空格做为一个缩进层级
// 2 switch 下的 case 和 default 必须增加一个缩进层级。
// switch (xx) {
// case "xxx":
// xxxx
// default:
// xxx
// }
// 3 二元运算符两侧必须有一个空格，一元运算符与操作对象之间不允许有空格。
// a + b
// a++
// b--
// 4 用作代码块起始的左花括号 { 前必须有一个空格。
// function demo() {}
// 5 if / else / for / while / function / switch / do / try / catch / finally 关键字后，必须有一个空格。
// if (xxx) {
// } else {}
// 6 在对象创建时，属性中的 : 之后必须有空格，: 之前不允许有空格。
// var obj = {
// a: 1,
// b: 2
// }
// 7 函数声明、匿名函数表达式、函数调用中，函数名和 ( 之间不允许有空格。
// demo();
// 8 , 和 ; 前不允许有空格。不得省略语句结束的分号。
// var obj = {
// a: 1,
// b: 2
// };
// 9 在函数调用、函数声明、括号表达式、属性访问、if / for / while / switch / catch 等语句中，单行声明的数组与对象，如果包含元素，() 和 [] 内紧贴括号部分不允许有空格。
// function demo(arg, arg2, arg3) {}
// [1, 2, 3, 4]
// 10 每个独立语句结束后必须换行。
// var a = 10;
// var b = 20;
// var c = 30;
// 11 在函数声明、函数表达式、函数调用、对象创建、数组创建、for语句等场景中，不允许在 , 或 ; 前换行。
// var obj = {
// a: 1
// ,b: 2
// ,c: 3
// }
// 12 不同行为或逻辑的语句集，使用空行隔开，更易阅读。
// 13 在 if / else / for / do / while 语句中，即使只有一行，也不得省略块 {...}。
// if (xxx) {
// console.log(123);
// }
// if (xxx) console.log(123);
// 14 函数定义结束不允许添加分号。IIFE 必须在函数表达式外添加()，非 IIFE 不得在函数表达式外添加 ()。
// function demo() {
// }
// var demo = function() {};
// var demo2 = (function() {})();
// 15 页面中script标签与左侧缩进4个空格，script标签内部的代码不缩进，与script在同一列
</script>
</body>
</html>
4.节点类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">hello world<div class="one"></div><!-- 我是一个注释 --></div>
<script>
/***
* 我们需要记住的有
* 1 是元素类型
* 3 是文本类型
* 8 是注释类型
* 9 是文档类型
* */
// 获取元素
var box = document.getElementById('box');
// 通过nodeType属性 查看节点类型
console.log(box.nodeType);
// 查看一个节点的所有子节点的集合
var box_child = box.childNodes;
// console.log(box_child);
// 遍历box_child
for(var i = 0; i < box_child.length; i++) {
console.log(box_child[i].nodeType);
}
// 获取文本节点的内容可以通过节点中的data属性
// console.log(box_child[0].data);
</script>
</body>
</html>
5.封装函数解决childNode兼容性问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">hello world<div class="one"></div><!-- 我是一个注释 --></div>
<script>
// 获取元素
var box = document.getElementById('box');
// 查看一个节点的所有子节点的集合
var box_child = box.childNodes;
// 问题：childNode属性存在兼容性问题 在ie中和在高级浏览器中表现形式不一致 我们希望通过封装一个函数的形式来解决它
/***
* getChildNodes 方法用于获取某个元素的所有子节点（不包含空白符 换行符节点）
* @dom 要获取的父节点
* return 数组 数组中是父节点的所有子节点集合
**/
function getChildNodes(dom) {
// 获取dom的所有子节点
var arrLick = dom.childNodes;
// 创建空数组
var result = [];
// 遍历数组对象
for(var i = 0; i < arrLick.length; i++) {
// 判断是不是文本节点
if(arrLick[i].childNodes === 3) {
// 说明是文本节点
// 然后查看是否是空白符
// 定义正则
var reg = /^\s+$/;
if(!reg.test(arrLick[i].data)) {
// 说明不是空白符 可以存储到新数组中
result.push(arrLick[i]);
}
} else {
// 说明不是文本节点 可以直接存储
result.push(arrLick[i]);
}
}
// 返回结果
return result;
}
console.log(getChildNodes(box));
</script>
</body>
</html>
6.节点属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
hello world
<div class="one"></div>
<!-- 我是一个注释 -->
</div>
<script src="./js/tools.js"></script>
<script>
// 获取元素
var box = document.getElementById('box');
// 获取box中所有的子节点
var arr = getChildNodes(box);
console.log(arr);
// 遍历数组
for(var i = 0; i < arr.length; i++) {
// nodeType 标记的是节点类型
console.log(arr[i].nodeType);
// nodeName 标记的是节点的名称
console.log(arr[i].nodeName);
// nodeValue 标记的是节点的值
console.log(arr[i].nodeValue);
}
// nodeName
// 元素类型 大写的标签字符串
// 文本类型 #text
// 注释类型 #comment
// 文档类型 #document
// nodeValue
// 元素类型 null
// 文本类型 文本内容
// 注释类型 注释内容
// 文档类型 null
</script>
</body>
</html>
7.节点关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="list"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
<script>
// 获取元素
var ul = document.getElementById('list');
// 获取所有子节点
var ul_children = ul.childNodes;
console.log(ul_children);
// 父子
// father.childNodes 获取所有的子节点
// father.firstChild 获取第一个子节点
// father.lastChild 获取最后一个子节点
// 获取第一个子节点
var first = ul.firstChild;
console.log(first);
// 获取最后一个子节点
var last = ul.lastChild;
console.log(last);
// 中间子节点的获取方式 可以通过先获取全部子节点 再用索引值获取 ul_children[1 | 2 | 3]
var li3 = ul_children[2];
console.log(li3);
// 子父
// child.parentNode
// 获取父节点
var father = first.parentNode;
console.log(father);
var father1 = last.parentNode;
console.log(father1);
var father2 = li3.parentNode;
console.log(father2);
console.log(father === father1);
// 兄弟
// node.nextSibling 获取下一个兄弟节点
// node.previousSibling 获取上一个兄弟节点
// 获取下一个兄弟节点
var li4 = li3.nextSibling;
console.log(li4);
// 获取上一个兄弟节点
var li2 = li3.previousSibling;
console.log(li2);
</script>
</body>
</html>
8.节点操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn1">点我上树</button>
<button id="btn2">点我下树</button>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// 当页面中定义id的时候 其实再全局中已经创建了一个变量出来 我们可以直接使用 （仅限于自己写测试的时候）
// 但是在工作中要按照正常的方式获取元素
var ul = document.getElementById('list');
// 创建元素 document.createElement('type')
var li4 = document.createElement('li');
// 设置元素内部文本
li4.innerHTML = 'haha';
// // 孤儿节点
// console.log(li4);
// // 节点上树 （将节点渲染到页面中）father.appendChild(child) 返回child 作为最后一个子节点存在
// list.appendChild(li4);
// console.log(li4);
btn1.onclick = function() {
list.appendChild(li4);
}
// // 创建文本 document.createTextNode(content) content表示文档内容
// var text = document.createTextNode('你是猪吗');
// // 上树
// ul.appendChild(text);
// console.log(text);
// 下树 父元素调用的方法father.removeChild(child)
btn2.onclick = function() {
list.removeChild(li4);
}
</script>
</body>
</html>
9.节点操作2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="container">
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
</div>
<script>
// // 创建元素
// var newLi = document.createElement('li');
// // 设置内部文本
// newLi.innerHTML = 'huahua';
// // 获取所有元素节点 (只获取元素节点)
// var ul_children = list.children;
// // console.log(ul_children);
// // 获取参照节点
// var li2 = ul_children[1];
// var li1 = ul_children[0];
// // 节点的插入
// // 使用方法 father.insertBefore(newChild, oldChild)
// // newChild 要插入的元素 oldChild 参照元素 当参照元素为null的时候等价与appendChild方法
// // 放到li2的前面去 原生js中没有提供将元素插入到某个元素的后面 可以自己封装方法实现
// // list.insertBefore(newLi, li2);
// // 节点的替换
// // 使用方法 father.replaceChild(newChild, oldChild)
// // newChild 要被替换上的元素 oldChild 被替换下的元素
// list.replaceChild(newLi, li1);
// 复制节点（克隆）
// 使用方式 node.cloneNode(bool) bool是一个布尔值 默认是fasle 只复制自身 如果传递的是true 表示连同子节点一起复制
var body = document.getElementsByTagName('body');
var container = document.getElementsByClassName('container')[0];
// 克隆
var newContainer = container.cloneNode(true);
// console.log(newContainer);
// 上树
document.body.appendChild(newContainer);
</script>
</body>
</html>
10.jquery中节点创建操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="list">
<li>1</li>
<li id="second">2</li>
<li>3</li>
</ul>
</body>
<script src="./js/jquery.js"></script>
<script>
// 创建元素
var $li4 = $('<li>hehe</li>');
var $li5 = $('<li>haha</li>');
// 获取父元素
var $list = $('#list');
// 父元素选择子元素
// $(father).append(child) 在father的后面追加child元素 方法
// $list.append($li4);
// $(father).prepend(child) 在father的前面追加child元素
// $list.prepend($li5);
// 子元素选择父元素
// $(child).appendTo(father) 将child追加到father的最后
// $li4.appendTo($list);
// $(child).prependTo(father) 将child追加到father的最前面
// $li5.prependTo($list);
// 参数很灵活 可以是jquery对象
// 可以是原生元素
// $li4.appendTo(document.getElementById('list'));
// 可以是html元素 选择器
// $li4.prependTo('#list');
// 兄弟选择兄弟
// $(dom).after(electment) 在dom的后面追加element元素
// $(dom).before(electment) 在dom的前面追加element元素
// $(dom).insertBefore(electment) 在element的前面追加dom元素(将dom追加到element元素前面)
// $(dom).insertAfter(electment) 在element的后面追加dom元素(将dom追加到element元素后面）
var $newLi = $('<li>hello</li>');
var $newLi2 = $('<li>hello2</li>')
$('#second').after($newLi);
$('#second').before($newLi2);
</script>
</html>
11.实现inserAfter和prependChild方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="list">
<li>1</li>
<li id="second">2</li>
<li>3</li>
</ul>
<script>
// 获取元素
var list = document.getElementById('list');
// 创建元素
var li = document.createElement('li');
// 设置内部文本
li.innerHTML = 'hello';
// 获取参照元素
var li2 = document.getElementById('second');
/***
* inserAfter方法 实现将dom1追加到dom2的后面作为兄弟节点存在
* @dom1 要追加的元素
* @dom2 参照元素
* */
function insertAfter(dom1, dom2) {
// 找出父节点 找到dom2的后面一个节点 把dom1追加到dom2的后面一个节点的前面
dom2.parentNode.insertBefore(dom1, dom2.nextSibling);
}
// 测试 insertAfter(li, li2);
/***
* prependChild方法 实现将father追加到dom的前面作为第一个儿子节点存在
* @father 父节点
* @dom 要追加的子节点
* */
function prependChild(father, dom) {
// 找出父节点 找到dom2的后面一个节点 把dom1追加到dom2的后面一个节点的前面
father.insertBefore(dom,father.firstChild);
}
// 测试 insertAfter(li, li2);
</script>
</body>
</html>
12.jquery中其他的节点操作方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script src="./js/jquery.js"></script>
<script>
// // 清空后代：empty()
// $('#list').empty();
// // 删除元素：remove() 表示自杀连同子元素都没了
// $('#list').remove();
// 绑定事件
$('.list').click(function() {
alert('ni');
})
// 克隆元素：clone(bool)
// bool: 是一个布尔值 默认是false ；连同子节点一起复制 如果传递true 连同子元素及其事件一起复制
var $newUl = $('.list').clone(true);
// 上树
// $('.list').after($newUl);
// 由创建出来的元素调用的方法
$newUl.insertAfter($('.list'))
</script>
</body>
</html>
13.实现animate函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 100px;
height: 100px;
background-color: pink;
left: 10px;
top: 10px;
}
</style>
</head>
<body>
<button id="btn">点我执行</button>
<div id="box"></div>
<script src="./js/jquery.js"></script>
<script>
// 获取元素
var box = document.getElementById('box');
var btn = document.getElementById('btn');
// jquery中animate函数：
// $(dom).animate(json, time, callback)
/**
* animate方法 用于模拟jQuery中的动画函数
* @dom 要运动的元素
* @json 样式对象
* @time 完成动画的时间
* @callback 回调函数
*
**/
function animate(dom, json, time, callback) {
// 思路：
// 元素要运动的话 就要获取每一步移动的距离 也就是步长值
// 步长值 = 总距离 / 总次数
// 总距离 = 目标值 - 初始值
// 总次数 = 总时间 / 间隔时间
// 间隔时间
var interval = 30;
// 总次数
var allCount = parseInt(time / interval);
// 定义计数器
var count = 0;
// 定义对象获取元素的初始值
var nowJson = {};
// 遍历json对象
for (var key in json) {
nowJson[key] = parseInt(getComputedStyle(dom)[key]);
}
// 定义对象 获取元素的步长值
var stepJson = {};
for(var k in json) {
stepJson[k] = (json[k] - nowJson[k]) / allCount;
}
// 开启定时器
var timer = setInterval(function() {
// 改变定时器
count++;
// 让元素运动
for(var key in json) {
// 元素的定位值 = 元素的初始值 + 元素的步长值 * 计数器
dom.style[key] = nowJson[key] + stepJson[key] * count + 'px';
}
// 判断是否到终点
if(count === allCount) {
// 停止定时器
clearInterval(timer);
// 执行回调函数
callback();
}
}, interval)
}
btn.onclick = function() {
animate(box, {left: 500, top: 500}, 2000, function() {
console.log('动画执行完毕');
});
}
</script>
</body>
</html>
1567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
