前端--javascript(js)_前端j玫瑰花-CSDN博客

本文链接：https://blog.csdn.net/nmb_jiang/article/details/108525193

在 HTML中引入JS

<script src='js文件路径'></script>
<script>
	alert('hello world！'); //js代码
</script>

变量

var anglababy = '山旮旯卑比';

数据类型

number类型

var a = 1;
var a = 1.11;
var a = 1e10;
查看类型：
typeof a;

string字符串类型

var a = 'hello world!';
字符串常用 方法：

var a = 'hello xxx';
var b = 'hello ooo';

字符串拼接：

var c = a + b;
a.length; //字符串长度
a.tirm(); //去除空格
a.split('分隔符',1)
a.concat(b)  //字符串拼接
a.indexOf(元素)  //查看元素的索引位置
a.charAt(n) //通过索引找元素
a.slice(n,m) //切片

字符串转换为数值：

parseInt('1') -- 1
parseFloat('1.11') -- 1.11

布尔值

var a = true;
var b = false;
数据类型都有布尔值: '',0,null,undefined,NaN(not a number)...都是false

null和undefined：
null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
var a; – undefined
null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。

object类型

var a = 'xx';
var b = new String('oo');

数组

var a = [11,22,33];
typeof a; -- "object"

var b = new Array([11,22,33,44]);
typeof b; -- "object"

数组常用方法：

索引取值：a[0];
数组长度：a.length;
尾部追加 ：a.push(44);
尾部删除：a.pop()
示例:

var a = [11, 22, 33, 44];
		var b = a.pop();
		结果:
            a -- [11, 22, 33]
            b -- 44

头部删除： shift()
示例:

var a = ["aa", 11, 22, 33];
		a.shift() -- 'aa'
		a -- [11, 22, 33];

切片： slice()

var b = a.slice(0,3);
	b -- [11, 22]

反转： reverse()

var a = [11,22,33];
a.reverse() 
a -- [33,22,11]

数组元素拼接： join()

var a = ['aa','bb','cc'];
var b = a.join('_');
b -- "aa_bb_cc";

数组合并： concat()

var a = ["aa", "bb", "cc"];
var b = [11,22];
var c = a.concat(b);
c -- ["aa", "bb", "cc", 11, 22];

排序：sort()

var a = [12,3,25,43];
a.sort();
-- [123, 23, 3, 32, 4, 4] //按照ASCII码的排序打印
//对a数组进行升序排序:
1. 定义函数
function sortNumber(a,b){
    return a - b
};
2. var b = a.sort(sortNumber)
b -- [3, 12, 25, 43]

sort 规则:

如果想按照其他标准进行排序，就需要提供比较函数，也就是自己提供一个函数提供排序规则，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

删除： .splice()

var a = ['aa','bb',33,44];
//单纯删除:a.splice(1,1)
a -- ["aa", 33, 44]
		
//删除在替换新元素:
var a = ["aa", 33, 44];
a.splice(0,2,'hello','world');
a --  ["hello", "world", 44];

三个参数介绍:
参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素)

自定义对象

索引取值
var a = {'name':'alex','age':48};
键可以不加引号:var a = {name:'alex',age:48};
a['age']; -- 48
a.age; -- 48

类型查询

在这里插入图片描述

运算符

算数运算符

+ - * / % ++ -- i++,是i自加1，i--是i自减1 i++的这个加1操作优先级低，先执行逻辑，然后再自加1，而++i，这个加1操作优先级高，先自加1，然后再执行代码后面的逻辑。

var a = 100;
a++;或者++a; -- 101 a自增1
a++和++a的区别,示例:
var a = 102;
a++ == 102; -- true
a -- 103;
++a == 103; -- false
a -- 104;

比较运算符

> >= < <= != == === !==
==(弱等于)和===(强等于)两者的区别:

var a = 11;
var b = '11';
a == b -- true
a === b; -- false

逻辑运算符

&& || ! !null返回true

var a = true;
var b = true;
var c = false;
a && b; -- true
a && c; -- false
a || c; -- true
!c; -- true

赋值运算符

= += -= *= /=

n += 1其实就是n = n + 1

流程控制

if判断

简单if-else判断：

	var a = 4;
	if (a > 5){
        console.log('a大于5');

    }
    else{
        console.log('小于5');
    };

多条件判断：

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if(a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

switch 切换

var a = 1;
	switch (a++){ //这里day这个参数必须是一个值或者是一个能够得到一个值的算式才行，这个值和后面写的case后面的值逐个比较，满足其中一个就执行case对应的下面的语句，然后break，如果没有加break，还会继续往下判断
        case 1:
            console.log('等于1');
            break;
        case 3:
            console.log('等于3');
            break;
        default:  //case都不成立,执行default
            console.log('啥也不是!')	

    }

for循环

for (var i=0;i<10;i++) {  //就这么个写法，声明一个变量，变量小于10，变量每次循环自增1，for(;;){console.log(i)}；这种写法就是个死循环，会一直循环，直到你的浏览器崩了
  console.log(i);
}
循环数组：
var l2 = ['aa','bb','dd','cc']
方式1
for (var i in l2){
   console.log(i,l2[i]); //i打印的是索引，l2[i]打印数组里面的值
}
方式2
for (var i=0;i<l2.length;i++){
　　console.log(i,l2[i])
}

循环自定义对象：
var d = {aa:'xxx',bb:'ss',name:'小明'};
for (var i in d){
    console.log(i,d[i],d.i)  //注意循环自定义对象的时候，打印键对应的值，只能是对象[键]来取值，不能使用对象.键来取值。
}

while循环

var i = 0;
var a = 10;
while (i < a){
	console.log(i);
	if (i>5){
		continue;
		break;
	}
	i++;
};

三元运算

var c = a>b ? a:b;  //条件成立打印a，否则打印b

函数

定义函数

普通函数：

function f1(){
	console.log('111');
}
f1();  执行函数

带参数的函数：

function f1(a,b){
	console.log('111');
}
f1(1,2);

带返回值的函数：

function f1(a,b){
	return a+b;
}
f1(1,2); -- 3

注意：多个返回值不能这样写：

function f1(a,b){
	return a,b;
}
f1(1,2); -- 2
/
function f1(a,b){
	return [a,b];  想要多个返回值,需要换一种数据类型
}
f1(1,2); -- [1, 2]

匿名函数

var f1 = function(){
        console.log('111');
    }
    f1();

自执行函数

 (function(a,b){
        console.log(a+b);
    })(1,2);//加括号执行

全局变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。当页面被关闭之后被删除。

局部变量

在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

作用域

首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。

var city = "BeiJing";
function f() {
  var city = "ShangHai";
  function inner(){
    var city = "ShenZhen";
    console.log(city);
  }
  inner();
}
f();  //ShenZhen

闭包：

	var city = "BeiJing";
    function f(){
        var city = "ShangHai";
        function inner(){
            console.log(city);
        }
        return inner;
    }
    var ret = f();
    ret();

面向对象

function Person(name){
	this.name = name;
};

var p = new Person('taibai');  

console.log(p.name);

Person.prototype.sum = function(a,b){  //封装方法
	return a+b;
};

p.sum(1,2);
3

date对象

//方法1：不指定参数
var d1 = new Date(); //获取当前时间
console.log(d1.toLocaleString());  //当前2时间日期的字符串表示
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString())

常用方法：
var d = new Date();
使用 d.getDate()
getDate() 获取日
getDay () 获取星期，数字表示（0-6），周日数字是0
getMonth () 获取月（0-11,0表示1月,依次类推）
getFullYear () 获取完整年份
getHours () 获取小时
getMinutes () 获取分钟
getSeconds () 获取秒
getMilliseconds () 获取毫秒
getTime () 返回累计毫秒数(从1970/1/1午夜),时间戳

JSON对象

var a = {'name':'太白','age':89};
序列化:
var b = JSON.stringify(a);
反序列化:
var c = JSON.parse(b);

RegExp对象

正则表达式字符	描述
^	匹配行首
$	匹配行尾
^$	空行
&	引用模式匹配到的整个串
？	匹配之前的字符0次或1次
+	匹配之前的字符1次或多次
*	匹配之前的字符0次或多次
.	匹配任意单个字符，除空行外
()	创建一个用于匹配的整体
{n}	匹配之前的项n次
{n,m}	至少连续n次最多m次
{n，}	至少n次
l	交替匹配；ab(cld):abc或abd

var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$"); 
简写方式：
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;

注意：

reg2.test(); 什么也不填写,会默认成reg2.test(‘undefined’);如果undefined满足你的正则要求,就返回true

字符串使用正则是的一些方法：

var s2 = “hello world”;
s2.match(/o/); 匹配元素
s2.match(/o/g); 加上g是全局匹配
s2.search(/o/); 找符合正则规则的字符串的索引位置
s2.split(/o/); 用符合正则的字符串进行分割

var s3 = ‘what is the point?’;
s3.replace(/point/gi,‘f**k’); 替换,g全局替换,i不区分大小写

正则加g之后,进行test测试需要注意的问题：

如果regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找；regExpObject.lastIndex属性值默认为0，所以第一次仍然是从字符串的开头查找；当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置；当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0；如果test()函数再也找不到可以匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0。

var reg = /what is your name?/g;
//执行结果:
reg.test('xxxxxxxxxwhat is your name?');
false
reg.test('xxxxxxxxxwhat is your name?');
true
reg.test('xxxxxxxxxwhat is your name?');
false
reg.test('xxxxxxxxxwhat is your name?');
true
//手动把regExpObject.lastIndex属性重置为0:
reg.lastIndex = 0

Math对象

Math.abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x) 小数部分进行直接舍去。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。

BOM对象

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

location对象:

location.href 获取URL
location.href="URL"跳转到指定页面
location.reload() 重新加载页面,就是刷新一下页面

定时器:

setTimeOut() 一段时间之后执行某个内容,只执行一次

var a = setTimeout(function f1(){
confirm("are you ok?");
},3000);
//还可以这样写：
var a = setTimeout("confirm('xxxx')",3000);//单位毫秒

clearTimeout(a); 清除计时器
setInterval() 每隔一段时间执行一次,重复执行

var b = setInterval('confirm("xxxx")',3000);

clearInterval(b); 清除计时器

常用的3中弹出框：

alert('NM炸了！') 警告框
confirm("你确定？") 确认框
prompt("请在下方输入") 提示框

DOM对象

DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。

查找标签

直接查找：

//根据ID获取一个标签
var divEle = document.getElementById('d1'); 
//根据class属性获取（可以获取多个元素，所以返回的是一个数组）
var divEle = document.getElementsByClassName('c1'); 
//根据标签名获取标签合集
var divEle = document.getElementsByTagName('div');

间接查找：

var divEle = document.getElementById('d1');
找父级:
divEle.parentElement;
找儿子们:
divEle.children;
找第一个儿子:
divEle.firstElementChild;
找最后一个儿子:
divEle.lastElementChild;
找下一个兄弟:
divEle.nextElementSibling;

标签操作

创建标签:

var aEle = document.createElement('a');
//在标签中添加文本内容
a.innerText = 'baidu';

添加标签:

//追加一个子节点（作为最后的子节点）
var divEle = document.getElementById('d1')
divEle.appendChild(aEle)
//把增加的节点放到某个节点的前边。
somenode.insertBefore(newnode,某个节点); //somenode指父级节点

删除节点:

获得要删除的元素，通过父元素调用该方法删除。
var divEle = document.getElementById('d1');//获取父级标签
var span2 = document.getElementById('s2'); //获取子级标签
divEle.removeChild(span2);//获得要删除的元素，通过父元素调用该方法删除。

替换节点：

somenode.replaceChild(newnode, oldnode); //somenode是父级标签，然后找到这个父标签里面的要被替换的子标签，然后用新的标签将该子标签替换掉

文本节点操作

var divEle = document.getElementById("d1")
divEle.innerText  //获取该标签和内部所有标签的文本内容,只获取内容，不显示内容是在哪个标签里面
divEle.innerHTML  //获取的是该标签内的所有内容，包括文本和标签，显示内容是在哪个标签里面
//设置值
var div1 = document.getElementById('d1');
div1.innerText = 'xxx';
div1.innerText = '<a href="">百度</a>';
div1.innerHTML = '<a href="">百度</a>';

属性操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")  //比较规范的写法,自定义属性和值
divEle.getAttribute("age")
divEle.removeAttribute("age")
// 自带的属性还可以直接.属性名来获取和设置，如果是自定义的属性，是不能通过.来获取属性值的
imgEle.src
imgEle.src="somecontent"

获取值操作

输入框： input

//获取值
var inpEle = document.getElementById('username');
inpEle.value;  
//设置值
inpEle.value = 'hell world';

选择框： select

//获取值
var selEle = document.getElementById('select1');
selEle.value;
//设置值
selEle.value = '1';

类操作

className 获取所有样式类名(字符串)
首先获取标签对象
标签对象.classList;标签对象所有的class类值
标签对象.classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加，toggle的意思是切换，有了就给你删除，如果没有就给你加一个

示例：

var divEle = document.getElementById('d1');
divEle.classList.toggle('cc2');  
var a = setInterval("divEle.classList.toggle('cc2');",30);
判断有没有这个类值的方法
var divEle = document.getElementById('d1');	
divEle.classList.contains('cc1');

CSS设置

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可

设置值:
divEle.style.backgroundColor = 'yellow';
获取值
divEle.style.backgroundColor;

事件

作用：根据用户的行为动态设置效果

<script>
        var divEle = document.getElementById('d1');
        divEle.onclick = function () {
        divEle.style.backgroundColor = 'purple'; //当点击id值为d1这个标签时设置背景颜色为紫色
        }
</script>

绑定事件的方式

方式1：

<script>
        var divEle = document.getElementById('d1');  1.找到标签
        divEle.onclick = function () {       2.给标签绑定事件
            divEle(或者用this，表示当前被点击的标签).style.backgroundColor = 'purple';
        }
</script>

方式2：

标签属性写事件名称=某个函数();
	<div class="cc1 xx xx2" id="d1" onclick="f1();"></div> //可以把this当参数传进去
    <script>
    	js里面定义这个函数
        function f1() {
            var divEle = document.getElementById('d1');
            divEle.style.backgroundColor = 'purple';
        }
    </script>