知识点总结
1、直接量
直接量(Literal)就是具体的值,即能够直接参与运算或显示的值,如字符串、数值、布尔值、正则表达式、对象直接量、数组直接量、函数直接量等
//空字符串直接量
1 //数值直接量
true //布尔值直接量
/a/g //正则表达式直接量
null//特殊值直接量
{}//空对象直接量
[] //空数组直接量
function(){} //空函数直接量,也就是函数表达式
2、转义字符
注:
如果在一个正常字符前添加反斜杠,JavaScript 会忽略该反斜杠
3、关于变量和字符的拼接
1、向网页写内容 “” ‘’ 都表示字符串, 字符串间 使用 + 拼接
var content = 'style="font-size:16px;"'; document.write(content);
2、转义 \
var content = "style=\"font-size:16px;\""; document.write(content)
3、拼接
var fontSize = 16; var content = "style='font-size:" + fontSize + "px;'"; document.write(content);
4、arguments 关键字
代表函数的参数列表
function a(q, w){ ycdl = "云创动力"; console.log(arguments); } // 调用 a(1); a(1,2);
5、 let&const
let:
let
声明的变量只在 let 命令所在的代码块内有效。
const
声明一个只读的常量,一旦声明,常量的值就不能改变。{ var a = 10; }// 可以访问到 a
{ let x = 2; }// 这里不能使用 x 变量
注:
1、在函数体外或代码块外使用 var 和 let 关键字声明的变量,它们的作用域都是 全局的
2、在函数体内使用 var 和 let 关键字声明的变量,它们的作用域都是 局部的
3、使用let声明的变量不能再次被声明
const:
const 用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改
const PI = 3.141592653589793; PI = 3.14; // 报错 PI = PI + 10; // 报错
注:let不能被重复定义
var b = 2; // let b = 1; // Identifier 'b' has already been declared var c = 1; var c = 2; // 代码块 { let a = 1; } // console.log(a); //a is not defined // 常量, 在声明时要赋值 const PI = 3.14; // 常量声明后就不能改变了 // PI ++;
6、关于函数
6.1、函数的定义
function square(number) { return number * number; } var num = 10; var r1 = square(10); // 调用函数 num = 11; console.log(r1)
6.2、函数的声明
function myFunc(theObject){ theObject.make="Toyota"; } var mycar={ make:"Honda", model:"Accord", year:1998 }; var x,y; x=mycar.make; console.log(x);//Honda myFunc(mycar) y=mycar.make; console.log(y);//Toyota
6.3、函数表达式
var sq=function(number){ return number*number; } var s=sq(2); console.log(s)//4
6.4、函数递归
function factorial(n){ if((n==0)||(n==1)) return 1; else return (n*factorial(n-1))//数字的阶层 } console.log(factorial(5))//120
6.5、函数作用域
var num1=20, num2=3, name="Jack"; // 本函数定义在全局作用域 function f1(){ return num1*num2; } console.log(f1());//60 //嵌套函数 function getScore(){ var num1=2, num2=3; function add(){ return name+" scored "+(num1+num2); } return add(); } console.log(getScore());//Jack scored 5
6.6、闭包
闭包是指内部可以访问外部,而外部无法访问内部
换句话说,内部函数包含外部函数的作用域。function addSquares(a,b){ function square(x){ return x*x; } return square(a)*square(b) } a=addSquares(2,3) console.log(a)//36 b = addSquares(3, 4); console.log(b)//144 c = addSquares(4, 5); console.log(c)//400 // 由于内部函数形成了闭包,因此你可以调用外部函数并为外部函数和内部函数指定参数: function outside(x) { function inside(y) { return x + y; } return inside; } fn_inside = outside(3); // 可以这样想:给一个函数,使它的值加3 result = fn_inside(5); console.log(result)//8 result1 = outside(3)(5); console.log(result1)//8
6.7、匿名函数
语法:
var 变量名 = function(参数列表) { 函数体; }
var sayHi = function(name) { alert("Hello, " + name); };//调用 sayHi("Tom");
6.8、箭头函数
// 普通函数 var a = [ "Hydrogen", "Helium", "Lithium", "Beryllium" , ]; var a2 = a.map(function(s){ return s.length }); console.log(a2); // 转化的后的箭头函数 /*总结: 1、去掉function(){return },没有参数见的时候保留括号 2、在function()和 return中间添加=> 好处: 简洁,提高效率 */ var a3 = a.map( s => s.length ); console.log(a3);
7、关于json
7.1、什么是json
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效
7.2、json的语法格式
//json 对象
var json = {
"count": 1,
"person": [{
"name": "张三",
"age": 18
},
{
"name": "李四",
"age": 19
}
]
};
console.log(json.person[0].name);
7.3、json对象和字符串之间的相互转化
注:
JSON.
parse
(jsonStr) 将 json 字符串 ——> json 对象JSON.
stringify
(json) 将 json 对象 ——> json 字符串
//json 字符串
var json1 = '{"count":1,"person":[{"name":"张三","age":18},{"name":"李四","age":19}]}';
// json 对象
console.log(json);
// json 字符串
console.log(json1);
// 将 json 字符串转换成 json 对象
console.log(JSON.parse(json1));
// 将 json 对象转换成 json 字符串
console.log(JSON.stringify(json));
8、关于传值和地址引用
例:关于两者结果值的比较
//1、使用的相同的值 普通的值
function demo(n){
n = 200;
}
var a = 666;
demo(a);
console.log(a); // 666
//2、使用的相同的地址 对象
function demo(o){
o.name = "zhangsan";
}
var p = {
"name": "lisi",
"age" : 18
}
demo(p);
console.log(p.name); // zhangsan
9、关于字符串的操作
let str = "I Like That Girl !!!";
// charAt(n) 寻找字符串中下标为 n 的字符
// 如果n 小于0 或 大于 字符串的长度,返回空串
let c = str.charAt(5);
// indexOf() 寻找字符串第一次出现的位置,对大小写敏感
// 如果没有找到,返回 -1
let pos = str.indexOf("i");
// split() 将字符串分隔成字符串数组
let arr = str.split(" ");
// substr(n) 从 n 开始截取字符串,包含 n
// 如果 n 大于字符串的长度,返回空串
// 如果 n 小于 0,反向截取字符
let sub = str.substr(6);
// substring(s, e) 从字符串下标 s 开始截取到下标 e
// 包含下标为 s 的字符,不包含下标为 e 的字符(包左不包右)
let sub1 = str.substring(0, 6);
// 易错点
// 反斜杠\表示转义, 如 \n 表示换行 \t 制表符
let s = "a\\b\\c\\e\\f";
let warn = s.split("\\");
console.log(warn);
8、关于元素节点的操作
方法 | 作用 |
---|---|
document.createElement() | 创建元素节点 |
document.createTextNode() | 创建文本节点 |
元素对象.appendChild() | 向节点的子节点列表末尾添加新的子节点 |
元素对象.removeChild() | 删除子节点 |
元素对象.hasChildNodes() | 返回元素是否拥有子节点 |
元素对象.fifirstChild | 返回元素的首个子节点 |
9、js中操作css样式
css | js | 说明 |
---|---|---|
color | color | 一个单词的样式写法是相同 |
font-size | fontSize | 驼峰命名法 |
方式一
style.样式名=“样式值”;
方式二
.className=“类名”;
10、全选/反选效果(案例)
<input type="checkbox" name="item" value="10"/>a
<input type="checkbox" name="item" value="20" />b
<input type="checkbox" name="item" value="30" />c
<input type="checkbox" name="item" value="40" />d
<input type="checkbox" name="item" value="50" />e
<hr >
<input type="checkbox" id="qx" onclick="checkAll()"/>全选/全不选
<button type="button" onclick="resverse()">反选</button>
<button type="button" onclick="js()">结算</button>
<p>结算总金额:<span>0</span>元</p>
var item=document.querySelectorAll("[name=item]")
//全选/全不选
function checkAll(){
var qx=document.querySelector("#qx")
for(i=0;i<item.length;i++){
item[i].checked=qx.checked;
}
}
//反选
function resverse(){
for(i=0;i<item.length;i++){
item[i].checked=!item[i].checked;
}
}
//结算
function js(){
var span=document.querySelector("span")
var sum=0;
for(i=0;i<item.length;i++){
if(item[i].checked==true){
sum=sum+parseInt(item[i].value)
}
}
span.innerText=sum
}
11、点击心(案例)
var html=document.querySelector("html");
html.addEventListener("click",heart,false);
function heart(e){
// 2、定义字体大小的变量
var fontSize=16
// 鼠标出现的位置
var left=e.clientX-fontSize/2;
var top=e.clientY-fontSize/2;
//1、创建一个b元素
var b=document.createElement("b")
// console.log(b)
// b元素的内容
b.innerText="❤";
//设置属性
b.style="font-size:"+fontSize+"px;color:"+randomColor()+";position:absolute;left:"+left+"px;top:"+top+"px;opacity:1;";
//3、添加到body中
document.body.appendChild(b);
//4、设置一个定时任务
var timer=setInterval(function(){
// 先消除单位,然后获取数字
var top=b.style.top.replace("px","");
// 改变top值,调整其位置
b.style.top=top-1+"px";
// b.style.top-=1;
// 淡化及其隐藏
b.style.opacity-=0.05;
if(b.style.opacity < 0){
// 移除元素
document.body.removeChild(b);
// 清除定时器
clearInterval(timer);
}
},100);
}
//定义颜色的随机函数
function randomColor(){
//~~的作用是去掉小数部分
return "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")";
}
12、图片切换(案例)
<div class="wrap" onchange="change()">
<img src="img/1.jpg" id="imgs">
</div>
var img=document.querySelector("#imgs")
var cur=1;
var timer;
function change(){
var count=4;
cur++;
img.src="img/"+cur+".jpg"
console.log(img.src)
if(cur==5){
cur=0;
}
}
timer=setInterval(change,1000);
img.onmouseover=function(){
window.clearInterval(timer);
}