JavaScrip基础

最新推荐文章于 2022-11-23 17:32:46 发布

昫灬

最新推荐文章于 2022-11-23 17:32:46 发布

阅读量197

点赞数

分类专栏：前端基础文章标签： JavaScript基础

本文链接：https://blog.csdn.net/qq_42701294/article/details/102505730

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JavaScrip复习

几个比较重要的对象：

Math对象：生成随机数

random()
//:返回 0 ~ 1 之间的随机数。 含0不含1

ceil(x)
//：向上取整

floor(x)
//：向下取整

round(x)
//：四舍五入，就近取整

Regexp对象：表单验证

//new匹配规则
let reg1 = new RegExp("[A-z]{6,12}");
let reg2 = /^\w{6,12}$/;
let reg3 = new RegExp("^\\w{6,12}$");

//注意使用转义字符，即："\w{6,12}:表示的是w出现6,~12次"
//'^':以此开头
//'$':以此结尾
let name = "yanguu";
let info = "what21is";
let info2 = "whatissex";

//使用test(str)检测是否匹配
let isOk = reg2.test(name);
let isOK3 = reg3.test(name);

Date对象：获取时间，验证码刷新
history对象：页面的前进、后退

//页面前进
history.forward()
//页面后退
history.back()

location对象：页面刷新、页面跳转

//页面刷新
location.reload();
//页面跳转
location.href = "https://baidu.com"

window对象：弹窗，输入，警告

//警告窗
alert()
//输入框    显示可提示用户输入的对话框
prompt()
//确认框    显示带有一段消息以及确认按钮和取消按钮的对话框。
confirm()

window对象方法：定时器
setTimeout(function f1,int time)：普通定时器
clearTimeout()
setInterval(function f2,int time)：循环定时器 —>轮播图
clearInterval()

//一次性定时性
var id = setTimeout(fun,2000);
clearTimeout(id);
function fun() {
    alert("boom~")
}

//循环定时,每2秒执行一次fun
var id2 = setInterval(fun,2000);
clearInterval(id2);

//演示：开关灯
<body>
<img id = "light" src="img/off.gif">
<script>
    let light = document.getElementById("light");
    let flag = true;   
    light.onclick = function(){
        if(flag){  //如果灯关，打开
            light.src = "img/on.gif";
            flag = false;
        }else {
            light.src = "img/off.gif";
            flag = true;
        }
    }
</script>
</body>

事件绑定：

//简单演示

function f2() {
    alert("我是第二个电灯泡")
}
//在外面获取light2对象，所以js代码要放在下面
var light2 = document.getElementById("light2");
//绑定事件
light2.onclick = f2;

/常见的事件：
	1. 点击事件：
		1. onclick：单击事件
		2. ondblclick：双击事件
        
	2. 焦点事件
		1. onblur：失去焦点
		2. onfocus:元素获得焦点。

	3. 加载事件：
		1. onload：一张页面或一幅图像完成加载。

	4. 鼠标事件：
		1. onmousedown	鼠标按钮被按下。
		2. onmouseup	鼠标按键被松开。
		3. onmousemove	鼠标被移动。
		4. onmouseover	鼠标移到某元素之上。----------较为常见
		5. onmouseout	鼠标从某元素移开。------------

??????

JS_DOM

Document对象

//1. 获取Element对象：
   1. getElementById()    ： 根据id属性值获取元素对象。id属性值一般唯一
   2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
   3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
   4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
   
//2. 创建其他DOM对象：---不怎么用--后面使用JQuery
   1. createAttribute(name)
   2. createComment()
   3. createElement()
   4. createTextNode()

Element对象

//：删除属性
	1. removeAttribute()

//：设置属性
	2. setAttribute()

控制样式

<head>
    ...
	.d1{
        border:1px solid gray;
        background-color:red;
    }
	...
</head>

<script>
	...
	div2.onclick = function(){
  	  //获取元素对象，绑定事件
   	 //调用已经定义好的css样式
   	 div2.className = "d1";
	}
</script>

HTML DOM

1. 标签体的设置和获取：innerHTML
	2. 使用html元素对象的属性
	3. 控制元素样式------------>动态控制元素样式<--------------
		1. 使用元素的style属性来设置
			如：
				 //修改样式方式1
		        div1.style.border = "1px solid red";
		        div1.style.width = "200px";
		        //font-size--> fontSize
		        div1.style.fontSize = "20px";
		2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
        	-->演示：上面