JavaScript初识(二)
程序员文章站
2023-04-03 10:55:21
接上一篇: 九丶伪数组 arguments arguments代表的是实参.有个讲究的地方是:arguments只在函数中使用 (1)返回函数实参的个数:arguments.length (2)之所以说arguments是伪数组,是因为:arguments可以修改元素,但不能改变数组的长短, 清空数 ......
接上一篇:
九丶伪数组 arguments
arguments代表的是实参.有个讲究的地方是:arguments只在函数中使用
(1)返回函数实参的个数:arguments.length
fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b,c) {
console.log(arguments);
console.log(fn.length); //获取形参的个数
console.log(arguments.length); //获取实参的个数
console.log("----------------");
}
(2)之所以说arguments是伪数组,是因为:arguments可以修改元素,但不能改变数组的长短,
fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b) {
arguments[0] = 99; //将实参的第一个数改为99
arguments.push(8); //此方法不通过，因为无法增加元素
}
清空数组的几种方式:
var array = [1,2,3,4,5,6];
array.splice(0); //方式1：删除数组中所有项目
array.length = 0; //方式1：length属性可以赋值，在其它语言中length是只读
array = []; //方式3：推荐
十丶关于dom的事件操作
1.javascript的组成
javascript基础分为三个部分:
ecmascript：javascript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
dom:文档对象模型,操作网页上的元素的api.比如让盒子移动,变色,轮播等.
bom:浏览器对象模型,操作浏览器部分功能的api.比如让浏览器自动滚动.
2.事件
js是以事件驱动为核心的一门语言
事件的三要素:
事件源:引发后续事件的html标签.
事件:js已经定义好了
事件驱动程序:对样式和html的操作,也就是dom
代码书写步骤:(重要)
(1)获取事件源: document.getelementbyid("box"); 类似与ios语言的 uibutton*adbtn = [uibutton buttonwithtype:uibuttontypecustom];
(2)绑定事件:事件源box,事件onclick = function(){事件驱动程序}
(3)书写事件驱动程序:关于dom的操作
<body>
<div id="box1"></div>
<script type="text/javascript">
// 1、获取事件源
var div = document.getelementbyid("box1");
// 2、绑定事件
div.onclick = function () {
// 3、书写事件驱动程序
alert("我是弹出的内容");
}
</script>
</body>
1.获取事件源的方式(dom节点的获取)
var div1 = document.getelementbyid("box1"); //方式一：通过id获取单个标签
var arr1 = document.getelementsbytagname("div1"); //方式二：通过 标签名 获得 标签数组，所以有s
var arr2 = document.getelementsbyclassname("hehe"); //方式三：通过 类名 获得 标签数组，所以有s
2.绑定事件的方式
(1)直接绑定匿名函数
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getelementbyid("box1");
//绑定事件的第一种方式
div1.onclick = function () {
alert("我是弹出的内容");
}
</script>
(2)先单独定义函数,再绑定
<div id="box1" ></div>
<script type="text/javascript">
var div1 = document.getelementbyid("box1");
//绑定事件的第二种方式
div1.onclick = fn; //注意，这里是fn，不是fn()。fn()指的是返回值。
//单独定义函数
function fn() {
alert("我是弹出的内容");
}
</script>
注意上方代码的注释.绑定的时候,是写fn而不是fn(),fn代表的是整个函数,而fn()代表的是返回值
(3)行内绑定
<!--行内绑定-->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">
function fn() {
alert("我是弹出的内容");
}
</script>
注意第一行代码,绑定时写fn(),而不是fn,因为绑定的这段代码不是写在js代码里的,而是被识别成了字符串
3丶事件驱动程序
我们在上面是拿alert举例，不仅如此，我们还可以操作标签的属性和样式。
<style>
#box {
width: 100px;
height: 100px;
background-color: pink;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box" ></div>
<script type="text/javascript">
var odiv = document.getelementbyid("box");
//点击鼠标时，原本粉色的div变大了，背景变红了
odiv.onclick = function () {
odiv.style.width = "200px"; //属性值要写引号
odiv.style.height = "200px";
odiv.style.backgroundcolor = "red"; //属性名是backgroundcolor，不是background-color
}
</script>
上方代码的注意事项:
在js里写属性值时,要用引导
在js里写属性名时,是backgroundcolor,不是css里面的background-color,记得所有的像css 属性的text-丶background- 等在js中都写成驼峰体
onload事件
当页面加载(文本和图片)完毕的时候,触发onload事件.
<script type="text/javascript">
window.onload = function () {
console.log("小马哥"); //等页面加载完毕时，打印字符串
}
</script>
有一点我们要知道：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。
建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。
事件案例:
1.京东顶部广告栏关闭
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.top-banner{
/*position: relative;*/
background-color: rgb(230, 15, 82);
}
.top-banner .w{
width: 1190px;
position: relative;
margin: 0 auto;
}
.top-banner .banner{
display: block;
width: 100%;
height: 80px;
background: url('./close.jpg') no-repeat center 0;
}
.top-banner .close{
position: absolute;
right: 0;
top:0;
text-decoration: none;
color: white;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="top-banner" id="topbanner">
<div class="w">
<a href="#" class="banner"></a>
<a href="#" class="close" id="closebanner">x</a>
</div>
</div>
<script type="text/javascript">
// /需求：点击案例，隐藏盒子。
//思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。
window.onload = function(){
// /1.获取事件源和相关元素
var closebanner = document.getelementbyid('closebanner');
var topbanner = document.getelementbyid('topbanner');
//2.绑定事件
closebanner.onclick = function(){
//3.书写事件驱动程序
//类控制
//topbanner.classname += ' hide';//保留原类名，添加新类名
//topbanner.classname = 'hide';
//替换旧类名
topbanner.style.display = 'none';
}
}
</script>
</body>
</html>
2.当鼠标悬停在img上时,更换为另外一张图片;鼠标离开时,还原为本来的图片
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<script>
//window.onload页面加载完毕以后再执行此代码
window.onload = function () {
//需求：鼠标放到img上，更换为另一张图片，也就是修改路径（src的值）。
//步骤：
//1.获取事件源
//2.绑定事件
//3.书写事件驱动程序
//1.获取事件源
var img = document.getelementbyid("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
img.onmouseover = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd2.png";
// this.src = "image/jd2.png";
}
//1.获取事件源
var img = document.getelementbyid("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
img.onmouseout = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd1.png";
}
}
</script>
</head>
<body>
<img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
</body>
</html>
十一丶dom介绍
1.什么是dom
dom：文档对象模型。dom 为文档提供了结构化表示，并定义了如何通过脚本来访问文
档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
dom就是由节点组成的。
2.解析过程
html加载完毕，渲染引擎会在内存中把html文档，生成一个dom树，getelementbyid是获取内中dom上的元素节点。然后操作的时候修改的是该元素的属性。
3.dom树(一切都是节点)
元素节点:html标签
文本节点:标签中的文字(比如标签之间的空格丶换行)
属性节点:标签的属性
整个html文档就是一个文档节点。所有的节点都是object。
4.dom节点的获取
dom节点的获取方式其实就是获取事件源的方式
var div1 = document.getelementbyid("box1"); //方式一：通过id获取单个标签
var arr1 = document.getelementsbytagname("div1"); //方式二：通过 标签名 获得 标签数组，所以有s
var arr2 = document.getelementsbyclassname("hehe"); //方式三：通过 类名 获得 标签数组，所以有s
特殊情况：数组中的值只有1个。即便如此，这一个值也是包在数组里的。这个值的获取方式如下：
document.getelementsbytagname("div1")[0]; //取数组中的第一个元素
document.getelementsbyclassname("hehe")[0]; //取数组中的第一个元素
5.dom访问关系的获取
dom的节点并不是孤立的,因此可以通过dom节点之间的相对关系对它们进行访问.
节点的访问关系是以属性的方式存在的
js中的父子兄访问关系:
parentnode和children是重点
获取父节点
调用者就是节点。一个节点只有一个父节点，调用方式就是 节点.parentnode
（1）nextsibling：
指的是下一个节点（包括标签、空文档和换行节点）
-
-
-
火狐、谷歌、ie9+版本：都指的是下一个节点（包括标签、空文档和换行节点）。
-
ie678版本：指下一个元素节点（标签）。
-
-
（2）nextelementsibling：
-
-
-
火狐、谷歌、ie9+版本：都指的是下一个元素节点（标签）。
-
-
总结：为了获取下一个元素节点，我们可以这样做：在ie678中用nextsibling，在火狐谷歌ie9+以后用nextelementsibling，于是，综合这两个属性，可以这样写：
下一个兄弟节点 = 节点.nextelementsibling || 节点.nextsibling
previous的中文是: 前一个
（1）previoussibling：
火狐、谷歌、ie9+版本：都指的是前一个节点（包括标签、空文档和换行节点）。
ie678版本：指前一个元素节点（标签）。
（2）previouselementsibling：
火狐、谷歌、ie9+版本：都指的是前一个元素节点（标签）。
总结：为了获取前一个元素节点，我们可以这样做：在ie678中用previoussibling，在火狐谷歌ie9+以后用previouselementsibling，于是，综合这两个属性，可以这样写：
前一个兄弟节点 = 节点.previouselementsibling || 节点.previoussibling
补充：获得任意一个兄弟节点：
节点自己.parentnode.children[index]; //随意得到兄弟节点
获取单个的子节点
(1).firstchild：
火狐、谷歌、ie9+版本：都指的是第一个子节点（包括标签、空文档和换行节点）。
ie678版本：指第一个子元素节点（标签）。
(2).firstelementchild：
火狐、谷歌、ie9+版本：都指的是第一个子元素节点（标签）
总结：为了获取第一个子元素节点，我们可以这样做：在ie678中用firstchild，在火狐谷歌ie9+以后用firstelementchild，于是，综合这两个属性，可以这样写：
第一个子元素节点 = 节点.firstelementchild || 节点.firstchild
最后一个子节点|最后一个子元素节点
为了获取最后一个子元素节点，我们可以这样做：在ie678中用lastchild，在火狐谷歌ie9+以后用lastelementchild，于是，综合这两个属性，可以这样写：
最后一个子元素节点 = 节点.lastelementchild || 节点.lastchild
获取所有的子节点
子节点数组 = 父节点.children; //获取所有节点。用的最多。
node type
nodetype == 1 表示的是元素节点（标签） 。记住：元素就是标签。
nodetype == 2 表示是属性节点 了解
nodetype == 3 是文本节点 了解
6.dom节点操作(重要)
创建节点:
新的标签(元素节点) = document.createelement("标签名");
<script type="text/javascript">
var a1 = document.createelement("li"); //创建一个li标签
var a2 = document.createelement("adbc"); //创建一个不存在的标签
console.log(a1);
console.log(a2);
console.log(typeof a1);
console.log(typeof a2);
</script>
插入节点
父节点.appendchild(新的子节点); //父节点的最后插入一个新的子节点。 父节点.insertbefore(新的子节点,作为参考的子节点); //在参考节点前插入一个新的节点。如果参考节点为null，那么他将在父节点最后插入一个子节点。
删除节点
父节点.removechild(子节点); //用父节点删除子节点。必须要指定是删除哪个子节点。 //如果想自己删除则 node1.parentnode.removechild(node1);
复制节点
要复制的节点.clonenode(); //括号里不带参数和带参数false，效果是一样的。 要复制的节点.clonenode(true);
括号里带不带参数，效果是不同的。解释如下：
-
不带参数/带参数false：只复制节点本身，不复制子节点。
-
带参数true：既复制节点本身，也复制其所有的子节点。
7.设置节点的属性
我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
(1)获取节点的属性值
方式一:
元素节点.属性;
元素节点[属性];
<body>
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
<script type="text/javascript">
var mynode = document.getelementsbytagname("img")[0];
console.log(mynode.src);
console.log(mynode.classname); //注意，是classname，不是class
console.log(mynode.title);
console.log("------------");
console.log(mynode["src"]);
console.log(mynode["classname"]); //注意，是classname，不是class
console.log(mynode["title"]);
</script>
</body>
方式二:
素节点.getattribute("属性名称");
console.log(mynode.getattribute("src"));
console.log(mynode.getattribute("class")); //注意是class，不是classname
console.log(mynode.getattribute("title"));
方式1和方式2的区别在于：前者是直接操作标签，后者是把标签作为dom节点。推荐方式2。
(2)设置节点的属性值
方式一
mynode.src = "images/2.jpg" //修改src的属性值
mynode.classname = "image2-box"; //修改class的name
方式二
元素节点.setattribute(属性名, 新的属性值);
mynode.setattribute("src","images/3.jpg");
mynode.setattribute("class","image3-box");
mynode.setattribute("id","你好");
(3)删除节点的属性
格式
元素节点.removeattribute(属性名);
mynode.removeattribute("class");
mynode.removeattribute("id");
上一篇： ps怎么给手绘图形上色?