web前端Javascript_设置关键属性-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43428547/article/details/98479372

js定义:
是一种运行于js解释器引擎中的解释型语言

运行环境:
1.独立安装的js解释器(nodejs)
2.嵌入在浏览器内核中js解释器

js组成:
1.核心(ECMAScript)
2.文档对象模型(DOM)
3.浏览器对象模型(BOM)

浏览器内核作用:
负责页面内容的渲染
主要由两部分组成:
1.内容排版引擎解析HTML和CSS
2.脚本解释引擎解释js

使用方法:

//1.在元素事件嵌入js代码
<html>
	<body>
		<button onclick="console.log('hello world');>
		</button>
	</body>
</html>

//2.将sj脚本嵌入在html页面中执行
<html>
	<body>
		<hr>
		<script>
			document.write('<b>欢迎</b>')；
			console.log('脚本执行结束了...')；
		</script>
		</hr>
	</body>
</html>



//3.引入外部js文件，script包含内不能有任何js代码，可以另写一个script
<html>
	<head>
		<script src="myscript.js"></script>
	</head>
	<body>
	</body>
</html>

变量:
js在正式执行之前,会将所有var声明的变量和function声明的函数,预读到所在作用域的顶部,但是对变量的赋值,还保留在原来的位置处

声明:var 变量名(当声明变量时少了var,该变量则为全局变量)
赋值:var 变量名 = 25.5
可以使用document.write()或者console.log()输出

一次性声明多个变量:

var num1=1, num2=2, num3=3;

数据类型:
1.原始类型
数字类型:32位整数以及64位浮点数

字符串类型:
内存中占2个字节
\u4e00：汉字的起始字符
\u9fa5:汉字的结束字符

布尔类型:
true：真(1)
false:假(0)

空类型:
null(声明对象未赋值)

未定义:
undefined(1.声明变量未赋值 2.访问对象不存在的属性)
2.引用类型

数据类型转化:
隐士转换:
函数:typeof()获取声明变量的类型

Nan:Not a Number
函数：isNan()判断数据是否未非数字

所有数据类型与string类型相加结果都为string

强制转换:
函数toString:变量.toString()
函数parseInt():parseInt(变量)
注意:
parseInt从左到右依次转换,碰到第一个非整数字符,则停止转换，如果第一个字符就是非整数字符的话,结果未NaN
函数parseFloat():parseFloat(变量)

函数Number():Number(变量)将一个字符串解析未number
注意:
如果包含非法字符,返回NaN

运算符与表达式:

!=
==//判断等于,注意:不比较类型,值比较数值
!==
===//出数值外,连同类型也会一起比较

函数:
函数定义:
function 函数名(){
可执行语句;
}

//定义
function printHello(){
	console.log('hello');
}

//调用
printHello();

分支结构:
if-else:
if(条件表达式){
语句块
}else if(){
}

条件为真的情况:
if(1)
if(“我帅吗”)
条件为假的情况:
if(0\0.0""\numm\undefined\Nan)

switch-case:
switch(表达式)
{
case 值1:break;
}

循环结构:

while(布尔表达式)
{
	循环体语句;
}

do{
	可执行语句;
}while(布尔表达式);

for(表达式1；表达式2； 表达式3)
{
}

数组:
索引数组:
数组长度:length属性
创建:
1.var arr=[];
2.var arr = new Array();

数组缩容:减小arr.length的值

特殊:
1.长度可变
2.不限制下标:
数组越界访问不报错,返回undefined
对越界的数组元素赋值,不报错,会修改length的大小
3.不限制元素的数据类型

var arr  = [1, 2 , 3]
var arr = new Array("dj","ddjj")

关联数组:
length失效
1.创建数组:

var bookInfo=[];
bookInfo['bookName']='西游记';

//遍历
for(var key in hash){
	hash[key];
}

数组API:
数组转字符串:
1.String(arr):将arr中每个元素转成字符串,用逗号分隔
2.arr.join(“连接符”):将arr中每个元素转为字符串

拼接和选取:
var newArr = arr1.concat(值1,值2,值3,…)//拼接多个数组到一个数组中

var subArr = arr.slice(starti, endi+1)//选取从start到endi元素组成新数组刚给subArr

arr.splice(starti, n)//直接修改原数组,从第i个位置开始,删除n个元素

插入:
arr.splice(starti, 0, 值1, 值2,…)//删除的元素和插入元素个数可以不同

颠倒:
arr.reverse()

排序:
arr.sort()//只能排列字符串类型的元素

DOM查找:
按id属性查找:
var elem = document.getElementById(“id”);

按标签名查找:
var elems = parent.getElementsByTagName(“tag”);//查找指定parent节点下的所有标签为tag的子代节点

按name属性查找:
var elems = document.getElementsByName(‘name属性值’)

按class查找:
var elems = parent.getElementsByClassName(“class”);

通过css选择器查找
1.只找一个元素:
var elem = document.querySelector(“selector”);//selector支持一切css中选择器，如果找到多个只返回第一个
2.找多个:
var elems = document.querySelectorAll(“selector”)

DOM修改:
核心DOM：可操作一切结构化文档的API,包括HTML和XMl（万能,繁琐）
读取属性值:
1.先获得属性节点对象,再获得节点对象的值
var arrtNode = elem.attributes[下标/属性名]
var attrNode = elem.getAttributeNode(属性)

var value = attrNode.value;

2.直接获得属性值:
var value = elem.getAttribute(“属性名”);

修改属性:
elem.setAttribute(“属性名”, “value”);

var h1 = document.getElementById("a1");
h1.setAttributeNode("name", zhangji);

判断是否包含指定属性:
var bool = elem.hasAttribute(“属性名”);

document.getElementById("bt1").hasAttribute('onclick');

移除属性:
elem.removeAttribute(“属性名”);
HTML DOM: 专门操作HTML文档的简化版DOM

对于内联样式:
获取:elem.style.属性名
注意:
属性名要去掉横线变成大写字母开头
ep:
background-color => backgroundColor

获取样式：

//1获取行内样式
obj.style.width/height/backgroundColor
//2.获取非行内样式(css)
function(obj, width){
	obj.currentStyle['width']//ie支持
	getComputedStyle[obj, null]['width']//谷歌，火狐支持
}

DOM添加:
1.创建空元素
docuent.createElement(“元素名”)
删除元素
parent.removeChild(child)
2.设置关键属性
添加内容:a.innerHTML = “内容”
设置关键属性:a.href = “http://tmooc/cn”
设置关键样式:a.style.opacity = “1”,
a.style.cssText = “width: 100px; height:100px”;
3.将元素添加到DOM树:
法1:
parentNode.appendChild(childNode)

var div = document.createElement("div");
var txt = document.createTextNode("版权声明");
div.appendChild(txt);
document.body.appendChild(div);

法2:
parentNode.insertBefore(newChild, existingChild)

<ul id="menu">
	<li>首页</li>
	<li>联系我们</li>
</ul>

var ul = docutment.getElementById("menu");
var newLi = document.createElement("li");
ul.insertBefore(newLi, ul.lastChild);

添加元素优化:
法1:
如果同时创建父元素和子元素,建议在内存中先将子元素添加到父元素,在将父元素一次性挂到页面
法2：
如果只添加多个平级子元素时,就要将所有子元素,临时添加到文档片段中,再将文档片段整体添加到页面

//创建文档片段
var frag = document.createDocumentFragment();
frag.appendChild(child);
parent.appendChild(frag);

BOM:
定义:brower object Model,专门操作浏览器的API
window:代表整个窗口

history:封装当前窗口打开后,成功访问过的历史url
navigator:封装浏览器配置信息
document:封装当前正在加载的网页内容
location:封装了当前窗口正在打开的url地址
screen:封装了屏幕信息
event:定义了网页中的时间机制

//获取完整窗口大小:
window.outerWidth.outerHeight
文档显示区大小:
window.innerWidth/innerHeight
//事件
window.onload = function(){};//文档加载完毕触发
window.resize = function(){}//窗口大小改变触发

事件

/*
onmouseover
onmouseout
onmouseup(鼠标松开)
onmousedown
onmousemove
onclick
ondblclick(双击)
onblur(失去焦点)
nofocus(得到焦点)
*/

//3种添加事件方法
<div id="div" style="width:300px; height:300px; background-color:red"></div>

//法1
<script>
	var div = document.getElementById("div");
	div.onclick = change;
	function change(){
		div.style.backgroundColor = "yellow";
	}
</script>

//法二
<div id="div" style="width:300px; height:300px; background-color:red" onclick="change(this)"></div>
<script>
		function change(obj){
		obj.style.backgroundColor = "yellow";
	}
</script>

//法三
<script>
	var div = document.getElementById("div");
	div.onclick = function change(){
		div.style.backgroundColor = "yellow";
	}
</script>

事件绑定(触发两个事件):

//主流浏览器
obj.addEventListener('事件名去掉on', 方法名);
obj.removeEventListener('事件名去点on');
//IE浏览器
obj.attachEvent('事件名',方法名);
obj.removeEvent('事件名');

事件冒泡:

在这里插入图片描述
如下代码：当点击黄色区域时,控制台会有两个输出,也就是两个函数都响应了这就称为事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>mysite</title>
</head>
<body>
	<div id='1' style="width:300px; height: 300px; background-color: red;">
		<div id="2" style="width: 100px;height: 100px; background-color: yellow;"></div>
	</div>
</body>
<script type="text/javascript">
	var div1 = document.getElementById('1');
	div1.onclick = f1;
	var div2 = document.getElementById('2');
	div2.onclick = f2;
	function f1(ev){
		console.log(300);
	}
	function f2(ev){
		var Event= ev || window.event;//获取事件对象,ev为主流浏览器支持,window.event为ie支持
		Event.cancelBubble = true;
		console.log(100);
	}
</script>
</html>

js操纵表单和下拉列表:

//表单
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>my website</title>
</head>
<body>
	<form action="1.php" method="post" id="frm" name="frm">
		<input type="text" name="username" value="dj"><br/>
		<input type="password" name="userpwd" value="123"><br/>
		<input type="submit" value="提交">
		<a href="#" onclick="return f1()">提交2</a>
	</form>
</body>
<script type="text/javascript">
	//获取表单
	//法1,通过id获取
	var frm = document.getElementById('frm');
	//法二,通过name获取
	var frm2 = document.frm;
	//alert(frm2);
	//法三
	var frm3 = document.forms[0];
	//alert(frm3);
	
	//操纵表单
	//获取action和method属性
	alert(frm.action + " " + frm.method);
	//获取表单提交内容
	alert(frm.username.value);
	alert(frm.userpwd.value);

	//表单中的submit方法
	function f1(){
		frm.submit();
		return false;
	}
</script>
</html>

//下拉列表
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>my website</title>
</head>
<body>
	<select id="sel">
		<option value="100">西瓜</option>
		<option value="200">橘子</option>
		<option value="300">橙子</option>
		<option value="400">柠檬</option>
	</select>
</body>
<script type="text/javascript">
	var oSel = document.getElementById("sel");
	oSel.onchange = function(){
		console.log(oSel.selectedIndex);
		console.log(oSel.options[oSel.selectedIndex].value);
	}
	
//jquery代码
var value = $("#select option:selected").val();
</script>
</html>

定时器:
用处:
让程序按指定时间间隔自动执行任务
网页动态效果,计时器功能等

分类:
周期性定时器:
setInterval(exp, time)//exp为执行语句,time为时间间隔,毫秒

setInterval(function(){
	console.log("hello world")；
}，1000)；

//停止定时器:
//1.先给定时器取名
var timer = setInterval(exp, time);
//2.停止计时器
clearInterval(timer);

一次性定时器:
setTimeout(exp, time);

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>my website</title>
</head>
<body>
	<div style="width:100px; height:100px; margin:auto; background-color:yellow; font-size: 50px; color: red;text-align:center; line-height:100px;" onmouseover="f1()"onmouseout="f2()"></div>
</body>	
<script type="text/javascript">
	var div = document.getElementsByTagName('div');
	var timer = null;
	var i = '0';
	
	function f1(){
		div[0].innerHTML = ++i;
		timer = setTimeout(function(){
			f1();
		}, 1000);
	}
	function f2(){
		console.log("有效2");
		clearTimeout(timer);
	}
</script>
</html>