前端学习记录 JS

说在前面：为什么没有 HTML 的学习记录？HTML 的标签看这个就好的啦

HTML 定义网页内容

CSS 规定网页的布局

JS 对网页行为进行编程

getElementById() 根据元素的 id 对它进行操作

　　.innerHTML 元素内容

　　.src 元素属性

　　.style 元素样式

　　.style.display 可显示或隐藏元素

<!DOCTYPE html>
<html>
<body>

<h3>改变 HTML 内容</h3>
<p id = "demo1">DEMO</p>
<button type = "button" onclick = 'document.getElementById("demo1").innerHTML = 
"DEMOOO"'>CLICK</button>

<hr />

<h3>改变 HTML 元素样式</h3>
<p id = "demo2">DEMO</p>
<button type = "button" onclick = "document.getElementById('demo2').style.color = 
'#A2DA65' "> CLICK </button>

<hr />

<h3>隐藏/显示 HTML 元素</h3>
<p id = "demo3">DEMO</p>
<button type = "button" onclick = "document.getElementById('demo3').style.display = 
'none' ">隐藏</button>
<button type = "button" onclick = "document.getElementById('demo3').style.display = 
'block' ">显示</button>

</body>
</html>

View Code

JS 可以不同的方式显示数据

　　window.alert() 警告框

　　document.write() 写入 HTML 输出

　　innerHTML 写入 HTML 元素

　　console.log() 打印在浏览器控制台

JS 关键词

　　break 跳出 switch 或循环

　　continue 跳出循环从顶部开始

　　debugger 停止 JS 并调用调试语句

　　do...while 执行语句块在条件为 true 时重复代码块

　　for 标记被执行的语句块

　　function 声明函数

　　if...else 条件判断

　　return 返回

　　switch 标记被执行的语句块

　　try...catch 捕捉异常

　　var 声明变量（声明变量的时候不可以用连字符） var demo; 这个时候 demo 的值是 undefined

JS 数据类型

　　数字 var num = 1;

　　字符串 var s = "string";

　　数组 var a = ["zlr", "zufe"];

　　对象 var animal = {name : "cat", sound : "miaomiaomiao"};

var person = {
  firstName : Tom,
  lastName : Green,
  age : 23,
  fullName : function () {
    return this.firstName  + " " + this.lastName;
  }
};

View Code

JS 事件

　 onchange HTML 元素已经改变

　　onclick 点击 HTML 元素

　　onmouseover 鼠标移动到 HTML 元素上

　　onmouseout 鼠标移出 HTML 元素

　　onkeydown 按下键盘按键

　　onload 页面完成加载

JS 字符串方法

　　length 字符串长度

　　indexOf() 字符串中指定文本首次出现的位置如果没有返回 -1

　　lastIndexOf() 字符串中指定文本首次出现的位置如果没有返回 -1

　　search() 方法搜索特定值的字符串，并返回匹配的位置

　　提取字符串（如果 st en 是负数的话代表从结尾开始计算）

　　　　slice(st, en)

　　　　substring(st, en)

　　　　substr(st, len)

　　replace(a, b) b 替换 a 只能替换首个匹配

　　toUpperCase() 字符串转大写

　　toLowerCase() 字符串转小写

　　concat() 连接两个字符串 s1.concat(s, s2); s1 和 s2 用 s 连起来

　　trim() 删除两端空格

　　split("c") 字符串转数组中间用 c 分割

JS 数值方法

　　toString() 以字符串返回数值

　　toExponential() 返回字符串值它包含已被四舍五入并使用指数计数法的数字

　　toFixed() 返回字符串值它包含了指定位数小数的数字

　　toPrecision() 返回字符串值它包含了指定长度的数字

　　valueOf() 返回数值

　　变量转化为数字

　　　　Number() 返回数字由其参数转换而来

　　　　parseInt() 解析其参数并返回浮点数

　　　　parseFloat() 解析其参数并返回整数

　　MAX_VALUE

　　MIN_VALUE

　　NEGATIVE_INFINITY 负的无穷大（溢出返回）

　　NaN 表示非数字的值 "Not-a-Number"

　　POSITIVE_INFINITY 无穷大（溢出返回）

JS 数组方法

　　toString() 把数组转化成数组值的字符串逗号分隔

　　join(c) 数组元素结合成一个字符串用 c 连接

　　pop() 从数组后面删除最后一个元素

　　push() 在数组结尾添加一个元素

　　shift() 删除第一个元素然后其他元素左移返回被移出的字符串

　　unshift() 在头添加新元素返回新数组长度

　　splice(pos, num, s1, s2,...,snum) 在数组里添加新的项（num 代表要被删除的项）

　　sort() 排序

　　reverse() 反转

　　foreach() 遍历

<!DOCTYPE html>
<html>
<body>

<p>为每个元素调用一次函数。</p>

<p id="demo"></p>

<script>
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById("demo").innerHTML = txt;

function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}
</script>

</body>
</html>

View Code

　　map() 映射

　　　　map() 不会改变原数组的值

　　　　map() 不会对没有值的数组元素执行

　　　　map() 通过对每个数组元素执行函数来创建新数组

<!DOCTYPE html>
<html>
<body>

<p>通过对每个数组元素执行函数来创建新数组。</p>

<p id="demo"></p>

<script>
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

document.getElementById("demo").innerHTML = numbers2;

function myFunction(value, index, array) {
  return value * 2;
}
</script>

</body>
</html>

View Code

　　filter() 过滤器

　　reduce()

　　reduceRight()

　　every() 检查所有数组值是否通过测试

　　some() 检查某些值是否通过测试

　　indexOf() 从头搜索元素值并返回位置

　　lastIndexOf() 从尾搜索元素值并返回位置

　　find() 返回通过测试函数第一个数组元素的值

　　find() 返回通过测试函数第一个数组元素的值的位置

JS == 和 === 的区别

== 只判断值不判断类型

=== 必须值和类型都相等

console.log(123 == "123") --->true

console.log(123 === "123") ---> false

JS 函数 emmmm 单独写一篇博客记吧