JavaScript从入门到精通(转)
JavaScript从入门到精通
转自： https://github.com/Eished/JavaScript_notes
视频连接：https://www.bilibili.com/video/BV1LW411Q7qV?p=9
目录：
以下记录了所有笔记：（代码连接：https://pan.baidu.com/s/和谐和谐1NrnnenGpuJ和谐jAiMiRKpHcgA （s51c））
初探 JavaScript 魅力
JavsScript 是什么
- 网页特效原理
- JavaScript 就是修改样式（文档）
- 编写 JS 的流程
- 布局：HTML + CSS
- 属性：确定要修改的属性
- 事件： 确定用户 做哪些操作（产品设计）
- 编写 JS ：在事件中，用 JS 来修改页面元素的样式
第一个 JS 特效：鼠标提示框
分析效果实现原理
- 样式：
div的display / none - 事件：
onmouseover / onmouseout - 动手编写效果
- 样式：
特效基础
- 事件驱动：
onmouseover - 元素属性操作：
obj.style.[...] - 特效实现原理概括：响应式用户操作，对页面元素样式修改
- 事件驱动：
兼容性问题
// div2.style.display='block'; // 部分浏览器不兼容
document.getElementById('div2').style.display='block'; // 所有浏览器兼容函数
- 制作更复杂的效果
- 直接在事件内写代码会很乱
- 引入
function()函数的基本形式 - 把 JS 标签里放入到函数里，类似于 css 里的
class - 变量的使用：别名
- 引入
- 定义和调用
- 函数定义：告诉系统有这个函数，不会执行
- 函数调用：执行函数里面的代码
- 关系和区别
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个JS效果</title> <style>
#div2 {
display: none;
background: red;
width: 100px;
height: 50px;
font-size: 16px;
}
#div1 {
display: block;
background: red;
width: 100px;
height: 100px;
font-size: 16px;
}
</style> <script> // 封装 getElementById 函数
function get(id) {
return document.getElementById(id);
} // 显示 div2
function show() {
// div2.style.display='block'; // 部分浏览器不兼容
get('div2').style.display='block';
} // 隐藏 div2
function hide() {
// div2.style.display='none'; // 部分浏览器不兼容
get('div2').style.display='none';
} // div1 变绿
function toGreen() {
get('div1').style.background='green';
} // div1 变蓝
function toblue() {
get('div1').style.background='blue';
} // div1 变红
function toRed() {
get('div1').style.background='red';
} // 点击循环变色
var i = 0;
function changeColor() {
console.log('i=',i)
if (i == 0) {
toGreen();
i++;
console.log('i=',i)
return;
}
if (i == 1) {
toblue();
i++;
console.log('i=',i)
return;
}
if (i == 2) {
toRed();
i = i - 2;
console.log('i=',i)
return;
}
}
</script>
</head> <body>
<!-- 调用页内函数修改样式 -->
<input type="button" onclick="changeColor()" value="按钮">
<div id="div1">
</div>
<!-- 行内 JS 修改样式 -->
<input type="checkbox" onmouseover="div2.style.display='block';" onmouseout="div2.style.display='none';" value="按钮">
<div id="div2">
<p>文字<br>文字2</p>
</div>
</body>
</html>
网页换肤和 if 判断
网页换肤
- 土豆网 “开灯” “关灯效果”
- 任何标签都可以加 ID ，包括 link
- 任何标签的属性，都可以修改
- HTML 里面怎么写，JS 里面就怎么写
if 判断
- 特效实现原理
- if 基本形式
- JS 里面
= 赋值， == 判断 - 为 a 链接添加 JS
<a href="javascript:;"></a>
- className 的使用
class是关键字，所以用className代替- 其它 HTML 里面怎么写，JS 里面就怎么写
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link id="link1" rel="stylesheet" type="text/css" href="css/grey.css"> <script>
function changeColor() {
if (document.getElementById('b1').value == '关灯') {
document.getElementById('link1').href = 'css/black.css';
document.getElementById('b1').value = '开灯';
console.log('black')
} else {
document.getElementById('link1').href = 'css/grey.css';
document.getElementById('b1').value = '关灯';
console.log('bl2:', document.getElementById('link1').href)
}
} function changeText() {
document.getElementById('text1').value = '456';
document.getElementById('text1').title = '文字1';
} function showHide() {
var div2 = document.getElementById('div2');
if(div2.style.display == 'block') {
div2.style.display ='none';
console.log('1');
} else {
div2.style.display = 'block';
div2.style.background = 'blue';
}
console.log('display:', div2.style.display);
} function class1() {
var div = document.getElementById('div4');
div.className='div5';
div.id='div5';
}
</script>
</head>
<body>
<!-- 换肤 -->
<input id="b1" type="button" onclick="changeColor()" value="关灯">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<input type="button" value="显示隐藏div2" onclick="showHide()">
<br>
<!-- HTMl 里面怎么写，JS 里面就怎么写 -->
<input id="text1" type="text" value="123">
<input type="button" value="改文字" onclick="changeText()">
<br>
<!-- a 链接的使用 -->
<a href="javascript:;">javascript:;</a> <!-- className 的使用 -->
<div id="div4">4</div>
<input type="button" value="className" onclick="class1()">
</body>
</html>
函数传参
改变背景颜色
- 函数传参：参数就是占位符
- 函数里面变量用传参
- 函数传参：参数就是占位符
改变 div 的任意样式
- 操纵属性的第二种方式
- 要修改的属性不确定时：
元素.style[ 变量/字符串 ] = 变量/字符串 - JS 中用
.的地方都可以用[]代替; - 字符串变量区别和关系 ：带引号是字符串，不带是变量
- 要修改的属性不确定时：
- 将属性名作为参数传递
- 操纵属性的第二种方式
style 与 className
元素.style.属性 = 变量/字符串- style 是修改行内样式
- 行内样式优先级最高，之后再修改 className 不会有效果
- 建议：只操作一种样式，要么只操作 style ，要么只操作 className
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数传参</title> <style>
div {
display: block;
background: red;
width: 100px;
height: 100px;
font-size: 16px;
} .div2 {
display: block;
background: grey;
width: 100px;
height: 100px;
}
</style> <script> // 封装 getElementById 函数
function get(id) {
return document.getElementById(id);
} // div1 变绿
function toGreen() {
get('div1').style.background='green';
} // div1 变蓝
function toblue() {
get('div1').style.background='blue';
} // div1 变红
function toRed() {
get('div1').style.background='red';
} // 点击循环变色
var i = 0;
function changeColor() {
console.log('i=',i)
if (i == 0) {
toGreen();
i++;
console.log('i=',i)
return;
}
if (i == 1) {
toblue();
i++;
console.log('i=',i)
return;
}
if (i == 2) {
toRed();
i = i - 2;
console.log('i=',i)
return;
}
} // 函数传参
function toColor(color, width) {
get('div1').style.background = color;
get('div1').style.width = width;
}
// 将属性名作为参数传递
function chgName(name, width) {
// get('div1').style.name = width; // name 会被当作属性赋值
get('div1')['style'][name] = width; // 数组 可以加字符串或者变量
}
// 样式优先级
function chgClass(className) {
get('div1').className = className;
}
</script>
</head> <body>
<!-- 调用页内函数修改样式 -->
<input type="button" onclick="changeColor()" value="循环">
<!-- 函数传参 -->
<input type="button" onclick="toColor('green', '200px')" value="变绿">
<input type="button" onclick="toColor('blue', '300px')" value="变蓝">
<input type="button" onclick="toColor('red', '400px')" value="变红">
<input type="button" onclick="chgName('height', '200px')" value="变高">
<input type="button" onclick="chgClass('div2')" value="class变灰">
<div id="div1"></div> </body>
</html>
提取行间事件
- 提取事件
- 为元素添加事件
- 事件和其它属性一样，可以用 JS 添加：
元素.事件 = 函数名/函数;- 不能加括号，加括号直接执行函数
window.onload的意义：等待页面加载完成再执行 JS- 行为( js )、样式( css )、结构( html ) 三者分离
- 事件和其它属性一样，可以用 JS 添加：
- 为元素添加事件
- 获取一组元素
元素.getElementsByTagName('标签名')- 数组的使用
- 数组的属性
- 全选的实现
- 代码: 同下
循环 while 和 for
用 while 引入 循环的概念
- while 循环语法
- 自增的意义
- 循环的构成：初始化、条件、语句、自增
- while 循环语法
for 循环
- 用 for 代替 while 循环
- 用 for 循环为一组元素甜腻骄傲事件
- 什么时候用循环----一组元素
- 例子
- 全选---- checked 属性
- 反选---- for 循环配合 if 判断
- 用 for 代替 while 循环
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>提取行间事件和循环</title> <style>
div {
display: block;
border: 1px solid black;
width: 100px;
height: 100px;
margin: 10px;
float: left;
}
</style> <script>
window.onload = function () {
// 封装 getElementById 函数
function get(id) {
return document.getElementById(id);
} // 封装 getElementsByTagName
function gets(tagName) {
return document.getElementsByTagName(tagName)
} // 提取行间样式
get('btn1').onclick = function () {
get('btn1').value = '提取成功';
} // 修改一组元素中的某一个元素
get('btn2').onclick = function () {
gets('div')[2].style.background = 'blue';
} // 修改一组元素- while 循环
get('btn3').onclick = function () {
var i = 0;
while ( i < gets('div').length ) {
gets('div')[i].style.background = 'yellow';
i++;
}
}
// for
get('btn4').onclick = function () {
for (var i = 0; i < gets('div').length; i++ ){
gets('div')[i].style.background = 'pink';
}
} // 全选的实现 if 判断 无需div
get('btn5').onclick = function () {
for (var i = 0; i < gets('input').length; i++ ){
if (gets('input')[i].type == 'checkbox'){
if (gets('input')[i].checked == false) {
gets('input')[i].checked = true;
} else {
gets('input')[i].checked = false;
}
}
}
}
// 元素.getElementsByTagName 方法 单个div
get('btn6').onclick = function () {
var div2 = get('div2');
var inp = div2.getElementsByTagName('input');
for (var i = 0; i < inp.length; i++ ){
// console.log(inp);
if (inp[i].checked == false) {
inp[i].checked = true;
} else {
inp[i].checked = false;
}
}
}
// 元素.getElementsByTagName 方法 多个div
get('btn7').onclick = function () {
var div2 = gets('div');
for (var i = 0; i < div2.length; i++ ){
var div = gets('div')[i];
var inps = div.getElementsByTagName('input');
for (var a = 0; a < inps.length; a++){
if (inps[a].checked == false) {
inps[a].checked = true;
} else {
inps[a].checked = false;
}
}
}
}
};
</script>
</head> <body>
<!-- 提取行间样式 -->
<input id="btn1" type="button" value="按钮">
<!-- 修改一组元素中的某一个元素 -->
<input type="button" id="btn2" value="改第三个元素">
<!-- 修改一组元素-循环 -->
<input type="button" id="btn3" value="while循环改一组元素">
<input type="button" id="btn4" value="for循环改一组元素">
<input type="button" id="btn5" value="全选">
<input type="button" id="btn6" value="全选2">
<input type="button" id="btn7" value="全选3">
<div><input type="checkbox" name="1" id="c1"></div>
<div><input type="checkbox" name="1" id="c2"></div>
<div><input type="checkbox" name="1" id="c3"></div>
<div><input type="checkbox" name="1" id="c4"></div>
<div><input type="checkbox" name="1" id="c5"></div> <div id="div2">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
<input type="checkbox" name="" id="">
</div> </body>
</html>
导航栏选项卡
按钮的实现
- 添加事件
- this 的使用: 指当前发生事件的元素
- 先清空所有按钮，再选中当前按钮
- 添加事件
内容的实现（ul）
- 先隐藏所有 ul，再显示当前 ul
- 索引值的使用：什么时候用索引值
- HTML 添加 index 会被 FireFox 过滤
- JS 添加 index
- 先隐藏所有 ul，再显示当前 ul
代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>导航选项卡</title>
<style>
body {
margin: 0;
padding: 0;
}
#div2 {
width: 200px;
height: 200px;
margin-top: 20px;
position: relative;
}
#div1 {
width: 200px;
height: 20px;
position: absolute;
top: 0px;
}
ul {
margin: 0;
padding: 0;
display: block;
background: rgb(157, 234, 253);
float: left;
position: absolute;
display: none;
width: 200px;
height: 200px;
}
.ul {
display: block;
}
a {
display: block;
float: left;
width: 49px;
height: 20px;
background: rgb(7, 184, 253);
border-left: 1px solid rgb(255, 0, 234);
text-decoration: none;
}
.a {
background: rgb(32, 108, 221);
}
</style>
<script>
window.onload = function (){
// 封装 getElementById 函数
function get(id) {
return document.getElementById(id);
}
// 封装 getElementsByTagName
function gets(tagName) {
return document.getElementsByTagName(tagName)
}
// 显示第一个元素
gets('ul')[0].className = 'ul';
// 当鼠标覆盖某个标签时 显示对应元素
for (var i = 0; i < 4; i++) {
gets('a')[i].index = i;
gets('a')[i].onmouseover = function () {
for (var a = 0; a < 4; a++) {
gets('ul')[a].className = '';
gets('a')[a].className = '';
}
// console.log(this);
gets('ul')[this.index].className = 'ul';
this.className = 'a';
}
}
}
</script>
</head>
<body>
<div id="div1">
<a href="javascript:;" id="a0">1</a>
<a href="javascript:;" id="a1">2</a>
<a href="javascript:;" id="a2">3</a>
<a href="javascript:;" id="a3">4</a>
</div>
<div id="div2">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<ul>
<li>2</li>
<li>2</li>
<li>2</li>
</ul>
<ul>
<li>3</li>
<li>3</li>
<li>3</li>
</ul>
<ul>
<li>4</li>
<li>4</li>
<li>4</li>
</ul>
</div>
</body>
</html>
JS 简易日历
程序实现思路
- 类似于选项卡，只是下面只有一个div
- innerHTML 的使用
数组的使用
- 定义：
arr = [1, 2, 3] - 使用：
arr[0]
- 定义：
字符串拼接
- 作用：拼接两个字符串
- 问题：拼接中的优先级
- 就近相加, 字符串后面数字相加要加括号
代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>简易日历</title>
<style>
body {
margin: 0;
padding: 0;
}
td {
border: 5px solid rgb(218, 218, 218);
width: 59px;
height: 59px;
text-align: center;
background: rgb(83, 83, 83);
color: white;
}
.td {
background: rgb(255, 255, 255);
color: rgb(0, 0, 0);
} /* 日历数字区 */
#t1 {
border: 10px solid rgb(218, 218, 218);
margin:0 auto;
position: relative;
width: 240px;
height: 320px;
background: rgb(218, 218, 218);
} /* 下方文字 */
#d2 {
margin:0 auto;
width: 240px;
height: 100px;
background: rgb(218, 218, 218);
}
#p1 {
position: relative;
margin: auto;
width: 205px;
height: 80px;
background: rgb(255, 255, 255);
}
</style>
<script>
window.onload = function () {
// 封装 getElementById 函数
function get(id) {
return document.getElementById(id);
}
// 封装 getElementsByTagName
function gets(tagName) {
return document.getElementsByTagName(tagName)
}
// 获取所有 td，注册 onmouseover 事件，添加索引
// console.log(gets('td'))
var tds = gets('td');
var i = 0;
for (i = 0; i < tds.length; i++) {
tds[i].index = i;
tds[i].onmouseover = function () {
// 先清空 td className
for (a = 0; a < tds.length; a++) {
tds[a].className = '';
}
// 修改td className 并插入文字
tds[this.index].className = 'td';
// console.log(i);
get('p1').innerHTML = (this.index + 1) + arr[this.index];
}
} arr = [
'月活动：学编程、英语', '月活动：学编程、英语', '月活动：学编程、日语',
'月活动：学编程、画画', '月活动：学编程、旅游', '月活动：学编程',
'月活动：学编程', '月活动：学编程', '月活动：学编程',
'月活动：学编程', '月活动：学编程', '月活动：学编程'
]
}
</script>
</head>
<body>
<div id="d1">
<table id="t1">
<tr>
<td>1 <br>JAN</td>
<td>2 <br>FER</td>
<td>3 <br>MAR</td>
</tr>
<tr>
<td>4 <br>APR</td>
<td>5 <br>MAY</td>
<td>6 <br>JUN</td>
</tr>
<tr>
<td>7 <br>JUL</td>
<td>8 <br>AUG</td>
<td>9 <br>SEP</td>
</tr>
<tr>
<td>10 <br>OCT</td>
<td>11 <br>NOV</td>
<td>12 <br>DEC</td>
</tr>
</table>
<div id="d2">
<p id="p1"> </p>
</div>
</div>
</body>
</html>
JavaScript 基础
JavaScript 组成
- ECMAScript：解释器、编译器（几乎所有兼容）
- DOM：Document Object Model，HTML，
document（大部分兼容） - BOM：Browser Object Model，浏览器，
window（完全不兼容）- 各组成部分的兼容性、兼容性问题的由来
变量类型
- 类型：
typeof运算符- 用法：
typeof 元素返回变量的类型 - 常见类型：
number、string、boolean、undefined（未定义或定义未使用）、object、function
- 用法：
- 一个变量应该只放一种类型的数据
变量类型转换
数据类型转换
例子：计算两个文本框的和
显式类型转换（强制类型转换）
parseInt()去除小数、parseFloat()保留小数：从左至右提取数字，遇到不是数字跳出NaN的意义和检测：Not a NumberNaN： NaN 和任何值都不相等，包括它自己
- 使用
isNaN()检测是否是全是数字
- 使用
Number() 转换数值，String() 转换字符串，Boolean() 转换布尔值
隐式类型的转换
==：先转换类型 再比较对比
===：全等于，不转换类型直接比较-：数字相减对比
+：字符串连接、数字相加5 + null // 返回 5 因为 null 被转换为 0
"5" + null // 返回 "5null" 因为 null 被转换为 "null"
"5" + 2 // 返回 52 因为 2 被转换为 "2"
"5" - 2 // 返回 3 因为 "5" 被转换为 5
"5" * "2" // 返回 10 因为 "5" 和 "2" 被转换为 5 和 2
更多可用于将数值转换为字符串的方法：
方法 描述 toExponential() 返回字符串，对数字进行舍入，并使用指数计数法来写。 toFixed() 返回字符串，对数字进行舍入，并使用指定位数的小数来写。 toPrecision() 返回字符串，把数字写为指定的长度。 代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>变量类型转换</title>
<style></style>
<script>
window.onload = function () {
// 封装 getElementById 函数
function get(id) {
return document.getElementById(id);
} let t1 = get('t1');
let t2 = get('t2');
let b1 = get('b1');
let s1 = get('s1');
let s2 = get('s2');
b1.onclick = function (){
if (isNaN(t1.value)) {
s1.innerHTML = '<br>' + t1.value + '不是数字';
} else if (isNaN(t2.value)) {
s1.innerHTML = '<br>' + t2.value + '不是数字';
} else {
console.log('t1:',typeof t1.value, 't2',typeof t2.value);
let val = parseInt(t1.value) + parseInt(t2.value);
let val2 = parseFloat(t1.value) + parseFloat(t2.value);
s1.innerHTML = '<br>int结果：' + val+ '<br>float结果：' + val2;
console.log(typeof val); // == 和 - 隐式转换
let a = t1.value ;
let b = t2.value;
if (a == b) {
s2.innerHTML = 'a == b' + '<br>a - b = ' + (a - b) + '<br>a + b = ' + (a + b);
} else if (a === b) {
s2.innerHTML = 'a === b！';
} else {
s2.innerHTML = 'a不等于b！' + '<br>a - b = ' + (a - b) + '<br>a + b = ' + (a + b);
}
}
}
}
</script>
</head>
<body>
<input type="text" name="" id="t1">
<input type="text" name="" id="t2">
<input type="button" name="" id="b1" value="计算">
<div>
<span id="s1"></span>
</div>
<div>
<span id="s2"></span>
</div>
</body>
</html>
变量的作用域和闭包
- 变量作用域（作用范围）
- 局部变量、全局变量
- 什么是闭包？
- 子函数可以使用父函数中的局部变量
- 之前一直在使用闭包
- 网上对于闭包的定义
命名规范
- 命名规范及必要性
- 可读性--能看懂
- 规范性--符合规则
- 匈牙利命名法
- 类型前缀 + 首字母大写：
getElementByTagName
- 类型前缀 + 首字母大写：
| 类型 | 前缀 | 类型（英文） | 实例 |
|---|---|---|---|
| 数组 | a | Array | aItems |
| 布尔值 | b | Boolean | bIsComplete |
| 浮点数 | f | Float | fPrice |
| 函数 | fn | Function | fnHandler |
| 整数 | i | Integer | iItemCount |
| 对象 | o | Object | oDiv1 |
| 正则表达式 | re | RegExp | reEmailCheck |
| 字符串 | s | String | sUserName |
| 变体变量 | v | Variant | vAnything |
运算符
算数：
+加、-减、*乘、/ 除、%取模- 实例：隔行变色、秒转时间
赋值：
=、+=、-=、*=、/=、%=+=：i += 1 等于 i++
关系：
<、>、<=、>=、== 、===、!=、!==!==：不同类型不比较，且无结果，同类型才比较，对应===!=：若类型不同，会偿试转换类型，对应==
逻辑：&&与、||或、!否
- 实例：全选与反选
运算符优先级：括号
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>运算符</title>
<style>
.blue {
width: auto;
height: 20px;
background: blue;
}
.yellow {
width: auto;
height: 20px;
background: yellow;
}
</style>
<script>
window.onload = function () {
// 封装 getElementById 函数
function get(id) {
return document.getElementById(id);
}
// 封装 getElementsByTagName
function gets(tagName) {
return document.getElementsByTagName(tagName)
}
// 隔行变色
function liCol() {
let i = 0;
let oLi = gets('li') ;
for (i = 0; i < oLi.length; i++) {
if (i % 2 === 0) {
oLi[i].className = 'blue';
} else {
oLi[i].className = 'yellow';
}
}
}
liCol(); // 毫秒转日期
const date = Date.now();
// 60000ms / 1000ms /60s /60m /24h /365d
const millisecond = date % 1000 + '毫秒';
const second = parseInt(date/1000) % 60 + '秒';
const minute = parseInt(date/1000/60) % 60 + '分';
const hour = parseInt(date/1000/60/60) % 24 + 8 + '小时';
const day = parseInt(date/1000/60/60/24/365) % 30 - 9 + '号';
const month = parseInt(date/1000/60/60/24/30) % 12 + 4 + '月';
const year = parseInt(date/1000/60/60/24/265) + 1951 +'年';
const d1 = get('d1');
d1.innerHTML = millisecond+ second+ minute+ hour+ day+ month+ year;
} // 赋值 ` =、+=、-=、*=、/=、%= `
let i = 11;
i += 2;
console.log(i);
i -= 3;
console.log(i);
i *= 2;
console.log(i);
i /= 2;
console.log(i);
i %= 3;
console.log(i); // 判断 <、>、<=、>=、== 、===、!=、!==
if (i > 0) {
console.log('i > 0');
}
if (i <= i) {
console.log('i <= i');
}
if (i == '1') {
console.log('i == "1"')
}
if (i === 1) {
console.log('i === 1')
}
if (i != '1') {
console.log('i != 2')
}
if (i !== 1) {
console.log('i !== 1')
} // 逻辑 &&与、||或、!否
if (i<2 && i>0) {
console.log('i<2 && i>0')
}
if (i<2 || i<0) {
console.log('i<2 || i<0')
}
</script>
</head>
<body>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="d1"></div>
</body>
</html>
程序流程控制
- 判断：
if、switch、?: - 循环：
while、for - 跳出：
break、continue - 什么是真、什么是假
- 真：true、非零数字、非空字符串、非空对象
- 假：false、数字0、空字符串、空对象、undefiend
- 代码：同下
JSON
什么是 JSON
JSON 和数组
JSON和for in代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>程序流程控制</title>
<script>
window.onload = function () {
// switch
var i = 0;
switch (i){
case i*++i:
console.log('i');
break;
case 1:
console.log('1')
break;
default:
console.log('default');
break;
} // ?: 条件?语句一:语句二
var a = 1;
a % 2 == 0 ? console.log('双数'):console.log('单数'); // break continue
for (i = 0; i < 5; i++){
if (i === 2){
// break; // 中断所有循环
continue; // 中断本次循环
}
console.log(i);
} // json 和 数组
const json = {a: 2, b: 5, c:9};
const arr = [23, 45, 5467];
console.log('b:', json.b, 'c:', json['c'], '没有length', json.length);
console.log(arr[2], arr.length); // JSON 和 for in
for (var i in arr) {
console.log('第' + i + '个：' + arr[i]);
}
for (var i in json) {
console.log('第' + i + '个：' + json[i]);
}
}
</script>
</head>
<body>
</body>
</html>
深入 JavaScript
函数返回值
- 什么是函数返回值
- 函数的执行结果
- 可以没有 return
- 一个函数应该只有一种返回值类型
函数传参与行间样式
可变函数（不定参数）：
arguments- 参数数组
例子：求和
- 求所有参数的和
例子2：CSS 函数
- 判断
arguments.length - 给参数取名，增强可读性
- 判断
取非行间样式（不能用来设置）：
obj.currentStyle[attr]只兼容 IE ，返回小数getComputedStyle(obj, false)[attr]，返回小数// 解决兼容问题
// 封装获取计算后元素样式函数
function getStyle(obj, name) {
if (obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, '') [name];
}
}复合样式：
background/border要用具体样式名backgroundColor等单一样式：
width/height/position
数组基础操作
数组的使用
- 定义
var arr = [23, 234, 23, 45];var arr = new Array(12, 5, 7, 34);- 没有任何差别，
[]的性能略高，因为代码短
- 定义
数组的属性
length- 既可以获取，又可以设置
- 例子：快速清空数组
length = 0
数组的使用原则：数组中应该只存一种类型的变量
数组的方法
- 添加
push(元素)，从尾部添加unshift(元素)，从头部添加
- 删除
pop()，从尾部删除shift()，从头部删除
- 添加
排序
数组.sort([比较函数])，排序一个数组，只有数组能使用排序一个字符串数组，不加比较函数，默认按照 ASCII 码排序
排序一个数字数组，加数字比较大小函数
// 正序比较函数 数字比大小 字符比ASCII值大小
function positiveSort(n1, n2) {
if (isNaN) {
if (n1 > n2) {
return 1;
}
if (n1 < n2) {
return -1;
}
if (n1 === n2) {
return 0;
}
} else {
return n1 - n2;
}
}
转换类
数组.concat(数组2)- 连接两个数组，可用于深度复制
数组.join(分隔符)- 用分隔符，组合数组元素，生成字符串
- 字符串
split
数组.reverse()- 颠倒数组中元素的顺序
数组.slice(start,end)- 从已有数组中返回选定元素，可用于深度复制
- start 为负数时，和数组长度相加再查找
splice：先删除，后插入数组.splice(起点,长度,元素)删除
数组.splice(起点,长度)
插入
数组.splice(起点,0,元素...)
替换
数组.splice(起点,长度,元素)
ECMAScript 两个关于位置的方法
arrayObject.indexOf(searchvalue,startIndex)- 从startIndex 开始向后查找，默认值为 0
- 返回 number 查找项在数组中的位置，没找到返回-1
- ``arrayObject.lastIndexOf(searchvalue,startIndex)`
- 从startIndex 开始向前查找，默认值为 0
- 返回 number 查找项在数组中的位置，没找到返回-1
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>数组操作</title>
<style>
div {
margin-top: 10px;
}
</style>
<script>
var arr = [23, 435, 567, 321, 9, 4];
var arr2 = new Array('m', 'r', 'a', 'z', 'c', 'p', 'e', '破就', '不发'); // 封装getById
function get(id) {
return document.getElementById(id);
} window.onload = function () {
// 显示数组
function showArr() {
get('d1').innerHTML = arr + ' + ' + arr2;
}
showArr(); // 添加元素 从尾部添加
get('btn2').onclick = function () {
arr.push(222);
showArr();
} // 添加元素 从头部添加
get('btn22').onclick = function () {
arr.unshift(234);
showArr();
} // 删除元素 从尾部删除
get('btn3').onclick = function () {
arr.pop();
showArr();
} // 删除元素 从头部删除
get('btn33').onclick = function () {
arr.shift();
showArr();
} // 排序元素
get('btn4').onclick = function () {
arr.sort(positiveSort);
arr2.sort(positiveSort);
showArr();
}
// 比较函数 数字比大小 字符比ASCII值大小
function positiveSort(n1, n2) {
if (isNaN) {
if (n1 > n2) {
return 1;
}
if (n1 < n2) {
return -1;
}
if (n1 === n2) {
return 0;
}
} else {
return n1 - n2;
}
} // 拼接数组
get('btn5').onclick = function () {
arr = arr.concat(arr2);
showArr();
} // 分隔符
get('btn6').onclick = function () {
arr = arr.join('_');
showArr();
} // splice 插入 splice(起点,长度,元素)
get('btn7').onclick = function () {
arr.splice(2, 0, 5, 1);
showArr();
}
// splice 删除
get('btn8').onclick = function () {
arr.splice(0, arr.length);
showArr();
}
// splice 替换 = 删除 + 插入
get('btn9').onclick = function () {
arr.splice(2, 1, 999, 888);
showArr();
} }
</script>
</head>
<body>
<div>
<input type="button" name="" id="btn2" value="尾部添加元素">
<input type="button" name="" id="btn22" value="头部添加元素">
<input type="button" name="" id="btn3" value="尾部删除元素">
<input type="button" name="" id="btn33" value="头部删除元素">
<input type="button" name="" id="btn4" value="正序排序元素">
</div>
<div>
<input type="button" name="" id="btn5" value="拼接数组">
<input type="button" name="" id="btn6" value="分割数组">
</div>
<div>
<input type="button" name="" id="btn7" value="插入元素">
<input type="button" name="" id="btn8" value="删除元素">
<input type="button" name="" id="btn9" value="替换元素">
</div>
<div id="d1"></div>
</body>
</html>数组名作为变量（遍历数组中的数组）：
var arr1=new Array();
var arr2=new Array();
var arrlist= new Array(); //存放以上数组
arrlist.push(arr1);
arrlist.push(arr2);
//循环遍历arrlist，就可以达到你要的效果
定时器的使用
定时器的作用
开启定时器
setInterval(函数, 间隔时间)间隔型，函数后面不能带括号和传参setTimeout(函数, 延时时间)延时型- 两种定时器的区别，定时器要
window.onload完一秒后才执行
停止定时器
clearInterval(定时器名字)clearTimeout(定时器名字)
代码：
window.onload = function () {
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var timer = null; oBtn1.onclick = function () {
timer = setInterval(function () {
alert('a');
}, 2000);
}; oBtn2.onclick = function () {
clearInterval(timer);
};
};
数码时钟
效果思路
获取系统时间
new Date对象getHours / getMinutes / getSeconds
显示系统时间
- 字符串连接
- 空位补零
设置图片路径
str[i]：取出字符串中的第 i 个值，不兼容 ie7
charAt(i)方法 ：取出字符串中的第 i 个值，兼容各种浏览器设置路径：
"url('img/0.png')"JavaScript 中的 String 方法
obj.charAt(index)- 返回index位置的字符
obj.charCodeAt()- 返回index位置的字符编码
obj.indexOf("str")- 顺序搜索str，返回其位置，未找到返回-1
obj.lastIndexOf("str")- 倒序搜索str，返回其位置，未找到返回-1
slice(start,end)：同数组substring(start,end)：同上，区别在于参数为负数时自动转换为0，并且较小的数为起始位substr(start,len)：同上，len 表示截取的长度
代码：
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>数码时钟</title>
<style>
body{
margin: 0;
padding: 0;
background-color: rgb(49, 49, 49);
}
li {
list-style: none;
float: left;
width: 100px;
height: 149px;
}
span {
float: left;
font-size: 100px;
color: rgb(255, 255, 255);
}
</style>
<script>
window.onload = function () {
// 封装 getElementsByTagName
function gets(tagName) {
return document.getElementsByTagName(tagName)
} // 数码时钟
// 数字时钟图片设置函数
const oLi = gets('li');
function clock() {
const date = new Date();
const str = addZero(date.getHours()) + addZero(date.getMinutes()) + addZero(date.getSeconds()); let i = 0;
for (i = 0; i < oLi.length; i++) {
oLi[i].style.backgroundImage = "url('img/"+ str.charAt(i) +".png')";
}
}
// 补零
function addZero(num) {
if (num < 10) {
num = '0' + num;
} else {
num = '' + num;
}
return num;
}
// 先执行一遍，就不会出现一秒的空白，定时器要 window.onload 完一秒后才执行
clock();
// 定时器 每秒刷新一次
setInterval(clock, 1000);
}
</script>
<body>
<ul>
<li></li>
<li></li>
<span>:</span>
<li></li>
<li></li>
<span>:</span>
<li></li>
<li></li>
</ul>
</body>
</html>
Date 对象其它方法
| 方法 | 描述 |
|---|---|
| getDate() | 获得以数值计（1-31）的日 |
| getDay() | 或者以数值计（0-6）的周 |
| getFullYear() | 获得四位的年（yyyy） |
| getHours() | 获得时（0-23） |
| getMilliseconds() | 获得毫秒（0-999） |
| getMinutes() | 获得分钟（0-59） |
| getMonth() | 获得月（0-11） |
| getSeconds() | 获得秒（0-59） |
| getTime() | 获得时间（1970 年 1 月 1 日以来的毫秒） |
延时提示框
效果演示
原来的方法
- 移入显示，移出隐藏
移出延时隐藏
- 移入下面
div后，还是隐藏
- 移入下面
简化代码
- 合并两个相同的
mouseover和mouseout - 连续
a=b=c=function()两个事件共使用一个函数
- 合并两个相同的
代码：同下
无缝滚动
效果演示
物体运动基础
- 让
div移动起来 offsetLeft/offsetTop的作用：获取当前对象的左边距/上边距offsetWidth/offsetHeight- 用定时器让物体连续移动：
innerHTML拼接两节图片, 宽度后面加px才会生效overflow:hidden;隐藏元素外的内容
- 让
改变滚动的方向
- 修改
speed - 修改判定条件
- 多次点击越来越快：
if (!timer)或clearInterval(timer);避免重复调用
- 修改
鼠标移入暂停
- 移入关闭定时器
- 移出重新开启定时器
代码：
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="../reset.css">
<title>移出延时隐藏</title>
<style>
body {
width: 560px;
margin: 0 auto;
}
#d2 {
margin: 10px;
width: 200px;
height: 200px;
background-color: rgb(0, 204, 255);
display: none;
float: left;
}
#d1 {
margin: 10px;
width: 100px;
height: 100px;
background-color: rgb(0, 255, 149);
float: left;
}
#d3 {
margin: 220px auto;
width: 560px;
height: 140px;
position: absolute;
background-color: rgb(135, 182, 182);
overflow: hidden;
}
#u1 {
position: relative;
}
#u1 li {
float: left;
}
</style>
<script>
window.onload = function () {
// 封装 getElementById 函数
function get(id) {
return document.getElementById(id);
}
// 封装 getElementsByTagName
function gets(tagName) {
return document.getElementsByTagName(tagName)
} // 鼠标移动到 d1 上，d2 显示，移出隐藏；
// 鼠标移到 d2 上，清除定时器，移出 d2 开启定时器
let timer = '';
get('d1').onmouseover= get('d2').onmouseover = function () {
clearTimeout(timer);
get('d2').style.display = 'block';
}
get('d1').onmouseout= get('d2').onmouseout = function () {
timer = setTimeout(hide,1000);
}
function hide() {
get('d2').style.display = 'none';
} // 无缝滚动
get('u1').innerHTML += get('u1').innerHTML;
get('u1').style.width = gets('li').length * gets('li')[0].offsetWidth + 'px';
let timer2 = '';
let speed = 2;
// 左移
get('btn1').onclick = function () {
speed = -2;
if (!timer2) {
timer2 = setInterval(move, 30);
}
}
// 右移
get('btn2').onclick = function () {
speed = 2;
if (!timer2) {
timer2 = setInterval(move, 30);
}
}
// 移动
function move() {
get('u1').style.left = get('u1').offsetLeft + speed + 'px';
if (get('u1').offsetLeft < -get('u1').offsetWidth/2) {
get('u1').style.left = 0;
} else if (get('u1').offsetLeft > 0){
get('u1').style.left = -get('u1').offsetWidth/2 + 'px';
}
console.log(get('u1').offsetLeft);
}
// 鼠标悬停
get('d3').onmouseover = function () {
clearInterval(timer2);
}
get('d3').onmouseout = function () {
timer2 = setInterval(move, 30);
}
}
</script>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3">
<ul id="u1">
<li><img src="data:images/1.png" alt=""></li>
<li><img src="data:images/2.png" alt=""></li>
<li><img src="data:images/3.png" alt=""></li>
<li><img src="data:images/4.png" alt=""></li>
</ul>
</div>
<input type="button" name="" id="btn1" value="左移">
<input type="button" name="" id="btn2" value="右移">
</body>
</html>
DOM 基础
DOM 基础
- 什么是 DOM
- 浏览器支持情况
DOM 节点
- DOM 节点
- 获取子节点
childNodes：不兼容高版本，用nodeType兼容- 获取文本节点
( nodeType == 3)和元素节点( nodeType == 1)
- 获取文本节点
children：只获取元素节点，兼容
parentNode：查找父节点- 例子：点击链接，隐藏整个
li
- 例子：点击链接，隐藏整个
offsetParent：查找定位父级- 例子：获取元素在页面上的实际位置
- 首尾子节点
firstChild有兼容性问题，IE6-8用firstElementChild高版本使用lastChild/lastElementChild
- 兄弟节点
- 有兼容性问题，IE6-8用前面的
nextSbling/nextElementSiblingpreviousSibling/previousElementSibling
- 获取子节点
操作元素属性
- 操作元素属性
- 元素属性操作
- 第一种：
oDiv.style.display = 'block'; - 第二种：
oDiv.style['display'] = 'block'; - 第三种：Dom 方式
- 第一种：
- Dom 方式操作元素属性
- 获取：
getAttribute(名称) - 设置：
setAttribute(名称, 值) - 删除：
removeAttribute(名称)
- 获取：
- 元素属性操作
DOM 元素灵活查找
用 className 选择元素
如何用 className 选择元素
- 选出所有元素
- 通过 className 条件筛选
封装成函数：
// 通过 className 查找元素
function getByClass(oParent, sClass) {
var aResult = [];
var aEle = oParent.getElementsByTagName('*'); for(var i = 0; i < aEle.length; i++) {
if (aEle[i].className == sClass) {
aResult.push(aEle[i]);
}
}
return aResult;
}
## DOM 操作应用
### 创建、插入和删除元素
- 创建 DOM 元素
- `document.createElement(标签名)` 创建一个节点，不渲染
- `父级.appendChild(节点)` **删除原有子节点**，再添加子节点，并渲染
- 例子：为 `ul` 插入 `li`
- 插入元素
- `父级.insertBefore(节点, 原有节点)` 在已有元素前插入
- 例子：倒叙插入 `li`
- 删除 DOM 元素
- `父级.removeChild(节点)` 删除一个节点
- 例子：删除 `li`
- 代码：
```HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>DOM创建插入删除元素</title>
<script>
window.onload = function () {
// 封装getElementById
function get(id) {
return document.getElementById(id);
};
// 在 ul 下增加 li
let oUl = get('u1');
get('btn1').onclick = function () {
let oLi = document.createElement('li');
let sL = get('txt1').value + "<a href='javascript:;'>删除</a>";
oLi.innerHTML = sL;
oUl.appendChild(oLi);
aRemove();
};
// 从 ul 下插入 li
get('btn2').onclick = function () {
let oLi = document.createElement('li');
let aLi = document.getElementsByTagName('li');
let sL = get('txt1').value + "<a href='javascript:;'>删除</a>";
let i = get('txt2').value - 1;
oLi.innerHTML = sL;
if (aLi.length > i && aLi.length > 0) {
oUl.insertBefore(oLi, aLi[i]);
} else {
oUl.appendChild(oLi);
}
aRemove();
};
// 从 ul 下删除 li
get('btn3').onclick = function () {
let aLi = document.getElementsByTagName('li');
let i = get('txt2').value - 1;
if (i < aLi.length && i >= 0) {
oUl.removeChild(aLi[i]);
} else {
alert('找不到第'+ (parseInt(i) + 1) +'个li');
}
};
// this 从 ul 删除 li
function aRemove() {
let aA = document.getElementsByTagName('a');
let i =0
for (i = 0; i < aA.length; i++) {
aA[i].onclick = function () {
oUl.removeChild(this.parentNode);
}
}
}
}
</script>
</head>
<body>
<input type="text" name="" id="txt1" value="123">
<input type="button" name="" id="btn1" value="增加">
<input type="text" name="" id="txt2" value="1">
<input type="button" name="" id="btn2" value="插入">
<input type="button" name="" id="btn3" value="删除">
<div is="d1">
<ul id="u1">
</ul>
</div>
</body>
</html>
文档碎片
文档碎片理论上可以提高 DOM 操作性能
文档碎片原理
document.createDocumentFragment()：Vue 、MVVM 还有用到代码：
var element = document.getElementById('ul'); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera',
'Safari', 'Internet Explorer']; browsers.forEach(function(browser) {
var li = document.createElement('li');
li.textContent = browser;
fragment.appendChild(li);
}); element.appendChild(fragment);
DOM操作应用高级
表格标签
| 表格 | 描述 | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
表格应用
表单应用
JS 运动基础运动基础
运动框架及应用
缓冲运动
运动的停止条件
JS 运动应用多物体运动框架
任意值运动框架
仿 Flash 图片展示
JS 运动中级链式运动框架
完美运动框架
运动框架总结
运动框架应用
JS事件基础Event 对象和事件冒泡
鼠标事件
键盘事件
JS 事件中级默认事件
拖拽
JS 事件高级应用事件绑定
高级拖拽
自定义滚动条
Ajax 基础Ajax 是什么
使用 Ajax
Ajax 原理
Ajax 中级编写 Ajax
Ajax 数据
JS 面对对象基础面对对象是什么
JS 中的面对对象
第一个面对对象的程序
工厂方式
原型：Prototype
面对对象编程方式
JS 面对对象实例面对对象的选项卡
JS 面对对象高级Json 方式的面向对象
拖拽和继承
使用继承
系统对象
BOM 应用BOM 基础
尺寸及坐标
常用方法和事件
COOKIE 基础与应用什么是 cookie
使用 cookie
JS 中的正则表达式正则表达式基础
字符串与正则配合
字符串
量词
常用正则例子
JS Template 模板引擎1、特性（1）、性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍（性能测试） （2）、支持运行时调试，可精确定位异常模板所在语句（演示） （3）、对 NodeJS Express 友好支持 （4）、安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板） （5）、支持include语句 （6）、可在浏览器端实现按路径加载模板（详情） （7）、支持预编译，可将模板转换成为非常精简的 js 文件 （8）、模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选 （9）、支持所有流行的浏览器 2、语法（1）、使用 引用简洁语法的引擎版本，例如： （2）、表达式 {{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。
（3）、输出表达式 对内容编码(转义)输出： （4）、条件表达式 {{if admin}}
（5）、遍历表达式 无论数组或者对象都可以用 each 进行遍历。 {{each list as value index}}
（6）、模板包含表达式 用于嵌入子模板。
子模板默认共享当前数据，亦可以指定数据： （7）、辅助方法 使用 template.defaults.imports.dateFormat = function(arg1,arg2) {
模板中使用的方式： 3、实例<!DOCTYPE html>
<!DOCTYPE HTML>
<!DOCTYPE HTML>
表达式和运算符分类左侧工具栏是按字母表排序的列表。 主要表达式JavaScript中基本关键字和常用表达式。
左表达式左边的值是赋值的目标。
自增和自减前置/后置自增运算符和前置/后置自减运算符. 一元运算符一元运算符只有一个操作数.
算术运算符算术运算符以二个数值（字面量或变量）作为操作数，并返回单个数值。 关系运算符比较运算符比较二个操作数并返回基于比较结果的
注意： => 不是运算符，而是 相等运算符如果相等，操作符返回的是Boolean(布尔)类型的true，否则是false。 位移运算符在二进制的基础上对数字进行移动操作 二进制位运算符二进制运算符将它们的操作数作为32个二进制位（0或1）的集合，并返回标准的JavaScript数值。 二元逻辑运算符逻辑运算符典型的用法是用于boolean(逻辑)值运算, 它们返回boolean值。 条件(三元)运算符
赋值运算符赋值元素符会将右边的操作数的值分配给左边的操作数，并将其值修改为右边操作数相等的值。 |
JavaScript从入门到精通(转)的更多相关文章
- Javascript从入门到精通（一）
第一篇 基础知识 一.JavaScript的主要特点:1.解释性:不同于一些编译性的程序语言(如C.C++等),它是一种解释性的程序语言,它的源代码不需要经过编译,而是直接在浏览器中运行时被解释. ...
- javascript从入门到精通（二）
第二章.数据结构 JavaScript脚本语言的数据结构包括:标识符.关键字.常量.变量等. 标识符:就是一个名称.在JavaScript用来命名变量和函数或者用作JavaScript代码中某些循环的 ...
- JavaScript从入门到精通（附光盘1张）:作者:明日科技出版社:清华大学出版社出版时间:2012年09月
本书介绍 一:本书 pdf 获取信息 本书下载:请申请加入本群 (QQ群:668345923), 并联系群主. 本群主有:本书pdf 全文教材 及附带的 光盘内容 二:本书目录介绍 第1篇 基 ...
- 【JavaScript从入门到精通】第四课初探JavaScript魅力-04
第四课初探JavaScript魅力-04 style与className 之前我们已经讲过,style用于在JS里控制元素的样式,通过style可以选中元素的各种css属性.此外,我们也提到过,JS用 ...
- 【JavaScript从入门到精通】第三课 初探JavaScript魅力-03
第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...
- 【JavaScript从入门到精通】第二课 初探JavaScript魅力-02
第二课 初探JavaScript魅力-02 变量 说起变量,我们不得不提起我们有一部比较古老的电视剧叫<包青天>.包青天有一把非常厉害的宝剑叫“尚方宝剑”,见到尚方宝剑有如见到皇帝.某种程 ...
- 【JavaScript从入门到精通】第一课 初探JavaScript魅力-01
第一课 初探JavaScript魅力-01 JavaScript是什么 如今我们打开一个大型的网站,都会有很多JS效果的功能和应用.对于学过CSS+HTML的同学,即使是像淘宝那样的网站,用一两天时间 ...
- JavaScript从入门到精通
第一(基本语法) if(condition1){ expression1; }else if(condition2){ expression2; }else{ expression3; } switc ...
- 【JavaScript从入门到精通】第三课
第三课 初探JavaScript魅力-03 函数传参 上节课的时候我们已经讲了什么是函数,实际上,函数在功能上就类似于css的class一样,将一段代码包裹起来使用.为了让函数的功能更加的丰富和实用, ...
随机推荐
- Nuxt内导航栏的两种实现方式
方式一 | 通过嵌套路由实现 在pages页面根据nuxt的路由规则,建立页面 1. 创建文件目录及文件 根据规则,如果要创建子路由,子路由的文件夹名字,必须和父路由名字相同 所以,我们的文件夹也为i ...
- MySQL学习之路6-数据表连接方式
内连接 关键字: inner join on 语句:select * from <a_table> inner join <b_table> on a.id = b.id ; ...
- jvm入门及理解（二）——类加载器子系统
一.类加载子系统的作用 类加载子系统负责从文件系统或者网络中加载Class文件,class文件在文件开头有特定的文件标识: ClassLoader只负责class文件的加载,至于它是否可以运行,则由E ...
- GO中的逃逸分析
1.什么是逃逸分析 以前写c/c++代码时,为了提高效率,常常将pass-by-value(传值)“升级”成pass-by-reference,企图避免构造函数的运行,并且直接返回一个指针. 那么这里 ...
- 刨根问底系列（3）——关于socket api的原子操作性和线程安全性的探究和实验测试（多线程同时send，write）
多个线程对同一socket同时进行send操作的结果 1. 概览 1.1 起因 自己写的项目里,为了保证连接不中断,我起一个线程专门发送心跳包保持连接,那这个线程在send发送数据时,可能会与主线程中 ...
- Java课程设计之——爬虫篇
主要使用的技术 Httplcient Jsoup 多线程 dao模式 网络爬虫简介 网络爬虫(又称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取 ...
- JSON Extractor(JSON提取器)
JSON提取器 Variable names(名称):提取器的名称Apply to(应用范围):Main sample and sub-samples:应用于主sample及子sampleMain s ...
- stand up meeting 12-11
今天因组员时间问题,并没有集中在一起开会,但士杰当面和天赋同学进行了沟通,在lync与国庆进行了沟通. 天赋与重阳再次进行了了沟通,确定了“单词挑战”与“背单词”这两个模块集成的难度,决定先不进行集成 ...
- C - Roads in the North DFS+树的直径
Building and maintaining roads among communities in the far North is an expensive business. With thi ...
- 5. git 过滤，让某文件夹里无法提交新添加的文件
. gitignore 向此文件里添加文件路径就行了.如( web/core/ ) 此时git status将看不到添加的文件或文件夹了