js学习历程

js学习笔记

const 定义的常量数组和对象可以修改,但是不能重新赋值

// 创建常量对象
const car = {type:"Fiat", model:"500", color:"white"};
 
// 修改属性:
car.color = "red";
 
// 添加属性
car.owner = "Johnson";

// 创建常量数组
const cars = ["Saab", "Volvo", "BMW"];
 
// 修改元素
cars[0] = "Toyota";
 
// 添加元素,使用push方法
cars.push("Audi");

const和let类似,不能再相同的块中与var和let冲突赋值。
let和const不能实现变量提升,必须先声明后使用。

js json

json是用于存储儿和传输数据的格式,仅仅是一个文本,可以被认何编程语言读取及作为数据格式传递。
json格式与创建js对象代码相同,所以js很容易将json数据转化为对象
json语法规则
1.数据为键值对
2.数据由逗号间隔
3.大括号保存对象
4.方括号保存数组

js函数

函数提升

Dom(文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象模型(document object model)
html dom 模型被构造为对象的树:
dom示例
通过可编程的对象模型,js获得足够的能力来创建动态的html
1,js能够改变页面中的所有html元素
2,js能够改变页面中的所有html属性
3,js能够改变页面中的所有CSS样式
4,js能够对页面中的所有事件做出响应
查找HTML元素
1,通过id

<p id="intro">你好世界!</p>
<script>
x=document.getElementById("intro");
document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
</script>
	2,通过标签名
		通过方法getElementsByTagName("p")
	3,通过类名
		通过方法getElementsByClassName("")

# HTML DOM - 改变 HTML

HTML DOM允许js改变HTML元素的内容

## 改变HTML输出流

	在js中,document.write()可用于直接向HTML输出流些内容
	例如:document.write(Date());显示时间
	*不允许在文档(DOM)加载完成之后使用document.write(),这会覆盖文档。

## 改变HTML内容
修改HTML内容最常用和简单的方法是innerHTML属性。
通过document.getElementById(id).innerHTML="new content"

```javascript
<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
```本例中通过DOM获得id = p1的元素,将<p>中的Hello World变成了“新文本”

改变HTML属性

如需改变HTML元素的属性,使用document.getElementsById(id).atrribute = 新属性值

本例中的HTML文档中含有id ="image"的元素,使用DOM来获得id = image的元素,js更改此元素的属性

HTML DOM - 改变CSS

HTML DOM允许js改变HTML元素的样式。

改变HTML的样式

可以使用document.getElementsById(id).style.property = 新样式

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>

使用事件

HTML DOM允许我们通过触发事件来执行代码。
比如:
1,元素被点击
2,页面加载完成
3,输入框被修改

HTML DOM事件

HTML DOM使JS有能力对HTML事件做出反应

对事件做出反应

我们可以在事件发生时执行js,比如用户在HTML元素上点击时。
HTML事件的例子:
1,点击鼠标
2,加载网页
3,加载完图像
4,鼠标移动到元素上去
5,输入字段被改变
6,提交表单
7,触发按键时

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

改变了h1上的元素内容

``

HTML事件属性

向HTML元素分配事件,可以使用事件属性。

<button onclick="displayDate()">点这里</button>

向button元素分配onclick事件

使用HTML DOM来分配事件

HTML DOM允许使用js向HTML元素分配事件:

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

向button元素分配onclick事件,按钮点击时js函数将会被执行。

onload和onunload

onload和onunload 事件会在用户进入或者离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本
onload 和 onunload 事件可用于处理 cookie。

onchange事件

onchange事件常常结合对输入字段的验证使用。

<input type="text" id="fname" onchange="upperCase()">

当用户鼠标离开输入框时会调用upperCase()函数,将输入框里的小写字母转成大写字母

onmouseover和onmouseout事件

onmouseover在鼠标移到HTML上方触发,onmouseout在鼠标移出HTML后触发

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="Thank You"
}
function mOut(obj){
	obj.innerHTML="Mouse over me"
}
</script>

该代码的实现效果在这里插入图片描述在这里插入图片描述

onmousedown、onmouseup和onclick事件

onmoousedown,onmouseup和onclick构成了鼠标点击事件的所有部分。
点击时触发onmousedown,释放时触发onmouseup,完成鼠标点击时触发onclick。

onfocus

当输入字段获得焦点时,改变其背景色

<script>
function myFunction(x){
	x.style.background="yellow";
}
</script>
输入你的名字: <input type="text" onfocus="myFunction(this)">
<p>当输入框获取焦点时,修改背景色(background-color属性) 将被触发。</p>

在这里插入图片描述
在这里插入图片描述

HTML DOM EventListener

addEventListener()

addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
可以向一个元素添加多个事件句柄。
可以向同个元素添加多个同类型的事件句柄,如:两个 “click” 事件。
可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。
addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。
可以使用 removeEventListener() 方法来移除事件的监听
语法:element.addEventListener(event, function, useCapture)
第一个参数是时间的类型
第二个参数是事件触发后调用的函数
第三个参数是个布尔值用于描述时间是冒泡还是捕获。该参数可选。

像原元素添加事件句柄

可以使用函数名引用外部函数。

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

可以向同个元素添加多个同类事件,相互不会覆盖
也可以向同个元素添加多种不同的事件

向 Window 对象添加事件句柄

addEventListener() 方法允许你在 HTML DOM 对象添加事件监听, HTML DOM 对象如: HTML 元素, HTML 文档, window 对象。或者其他支持的事件对象如: xmlHttpRequest 对象。

传递参数

当传递参数值时,使用"匿名函数"调用带参数的函数:
element.addEventListener(“click”, function(){ myFunction(p1, p2); });

事件冒泡或事件捕获?

事件的传递有两种方式:冒泡或者捕获
事件传递定义了元素事件触发的顺序,
冒泡:内部元素先被触发,即由内向外
捕获:外部元素先被触发,即由外向内
addEventListener()方法可以指定,"useCapture"参数来设置传递类型,默认为false,即冒泡传递,当值为true时,事件使用捕获传递。

<div id="myDiv">
	<p id="myP">点击段落,我是冒泡。</p>
</div><br>
<div id="myDiv2">
	<p id="myP2">点击段落,我是捕获。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
    alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
    alert(" 你点击了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
    alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
    alert("你点击了 DIV2 元素 !");
}, true);
</script>

该代码id为myP、myP2和myDiv、myDiv2的弹窗顺序不同,因为前者的参数设置为false而后者的参数设置为ture所以执行顺序不同。前者是冒泡,由内向外,先显示P的弹窗,再显示了DIV的弹窗,后者因为useCapture设置为true,由外向内执行,先显示关于DIV2的弹窗,再显示关于P的弹窗。

removeEventListener() 方法

removeEventListener()方法移除由addEventListener()方法添加的句柄

<div id="myDIV"> div 元素添加了 onmousemove 事件句柄,鼠标在桔红色的框内移动时会显示随机数。
  <p>点击按钮移除 DIV 的事件句柄。</p>
  <button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

removeHandler函数取消了mousemove事件的监听

HTML DOM元素(节点)

创建新的 HTML 元素 (节点) - appendChild()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

以下代码是用于创建

元素:
var para = document.createElement(“p”);

元素创建一个新的文本节点:
var node = document.createTextNode(“这是一个新的段落。”);
将文本节点添加到

元素中:
para.appendChild(node);
最后,在一个已存在的元素中添加 p 元素。
查找已存在的元素:
var element = document.getElementById(“div1”);
添加到已存在的元素中:
element.appendChild(para);

创建新的HTML元素(节点)-insertBefore()

appendChild用于添加元素到尾部,如果需要将新元素添加到开始位置,可以使用insertBefore

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

该代码把这是一个新段落,p元素的内容插入到了p1的前面

移除已存在的元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

使用removeChild()将p1中的元素移走了,DOM中必须清楚子元素的父元素

替换 HTML 元素 - replaceChild()

可以使用 replaceChild() 方法来替换 HTML DOM 中的元素。

实例

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

HTML DOM 集合

HTMLCollection 对象

<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

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

<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = "第二个段落的内容为:<span style='color:red;'> " + myCollection[1].innerHTML + '</span>';
</script>

</body>

getElementsByTagName() 方法返回 HTMLCollection 对象。
HTMLCollection 对象类似包含 HTML 元素的一个数组。HTMLCollection 不是一个数组!
HTMLCollection 看起来可能是一个数组,但其实不是。可以像数组一样,使用索引来获取元素。

var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}

集合 length 属性常用于遍历集合中的元素。
修改所有

元素的背景颜色.

HTML DOM 节点列表

所有浏览器的 childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

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

<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = "第二个段落的内容为:<span style='color:red;'> " + myNodelist[1].innerHTML + '</span>';
</script>

本代码将p中的第二个元素访问并且显示在第三个p元素里,将第二个p元素的字体改成红色显示

<p>Hello World!</p>

<p>Hello Runoob!</p>

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

<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = "文档包含 " + myNodelist.length + " 个段落。";
</script>
修改节点列表中所有 <p> 元素的背景颜色:

var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
}

HTMLCollection 与 NodeList 的区别
HTMLCollection 是 HTML 元素的集合。
NodeList 是一个文档节点的集合。
NodeList 与 HTMLCollection 有很多类似的地方。
NodeList 与 HTMLCollection 都与数组对象有点类似,可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素。
NodeList 与 HTMLCollection 都有 length 属性。
HTMLCollection 元素可以通过 name,id 或索引来获取。
NodeList 只能通过索引来获取。
只有 NodeList 对象有包含属性节点和文本节点。
节点列表不是一个数组!
节点列表看起来可能是一个数组,但其实不是。
你可以像数组一样,使用索引来获取元素。
节点列表无法使用数组的方法: valueOf(), pop(), push(), 或 join() 。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值