当前位置:首页 > 自学前端 > JavaScript > js教程 数组、函数、面向对象、DOM

js教程 数组、函数、面向对象、DOM

刘广法2022年04月14日 09:44:58JavaScript3850
js教程 数组、函数、面向对象、DOM-第1张图片-刘广法IT博客

js教程 数组、函数、面向对象

一:数组:

在js中数组可以添加任意位置任意类型

js中常用的函数:

.pash();    从尾部压入

.pop();    从尾部取出并移除

.unshift();    从头部压入

.shift();    从头部取出并移除

.indexOf();

.slice(2,4);    裁切,[24),不对数据产生影响,从第几个开始裁,裁到第几个

.splice(2,4);    裁切对原数组产生影响,从第几个开始裁,裁几个

二:函数:

在js中函数的定义:

function name(){

}

在js中的函数可以随时的增添元素,类似于Java 中的key:value 的类型:

三:js的面向对象:

js的面向对象是通过原型机制来实现的,和java完全不同

例如:

                        function Student(name, sex, age) {
				this.name = name;
				this.sex = sex;
				this.age = age;

				this.sayHello = function() {
					console.log(this.name + " says hello");
				};
			}
			
			function MidSchoolStudent(name,sex,age) {
				this.name = name;
				this.sex = sex;
				this.age = age;
			}
			
			//原型
			MidSchoolStudent.prototype = new Student();

			var stu1 = new Student("张三", "男", 20);
			console.log(stu1.name);
			console.log(stu1["sex"]);
			stu1.sayHello();
			
			stu1.birthday = "2000-1-1";
			console.log(stu1);
			
			//移除一个属性
			delete stu1.birthday;
			
			console.log(stu1);
			
			//js的面向对象(封装、继承、多态)是通过原型机制来实现的,和java完全不同
			
			var stu2 = new MidSchoolStudent("李四","女",35);
			stu2.sayHello();

四:DOM:Doucment Object Model

在js 中将每一个元素当成一个元素:

DOM的增删改查:

一、DOM的查询:

  1. 通过 id 进行查询:

  2. 通过指定的元素名称进行查询,如div。返回类数组

  3. 通过指定的类名称进行查询。返回类数组。

    1. 1.document.getElementById("id")
      2.document.getElementsByName("aaa"),返回类数组
      3.document.getElementsByClassName("bbb"); 返回类数
  4. 推荐使用 父dom.querySelector(要查询的元素名称、类型名、id):进行查询

    1. document.querySelector(".header")

二、DOM的增加:

实例:增加一个span元素,span中增加文字:

1、首先通过查询获取html文档中的元素对象

2、通过createElement 创建一个新的元素

3、可以给元素增加一些style 属性,或者通过 innerTest 增加文字

4、通过appendChild(),增加元素:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div class="header"></div>
		<script type="text/javascript">
			//获取一个元素
			var header = document.querySelector(".header");
			//创建一个元素
			var span = document.createElement("span");
			span.innerText = "新增的元素";
			header.appendChild(span);
		</script>
	</body>
</html>

实例:在列表增加元素:

1、创建 tr 在 tr下面增加一列的 td的个数,至于里面的内容暂且用数字代替

2、获取当前文章tr 的父类

3、在父类中appendChild()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#tbl {
				margin: 0 auto;
				border-collapse: collapse;
			}

			#tbl tr>td {
				border: 1px solid #ccc;
				padding: 30px 30px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table id="tbl">
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
			</tr>
		</table>
		<script type="text/javascript">
			//创建一个tr
			var tr = document.createElement("tr")

			for (var i = 0; i < 3; i++) {
				var d = document.createElement("td");
				d.innerText = i + 4;
				tr.appendChild(d);
			}
			//获取父类对象
			var tr1 = document.querySelector("tr");
			var tbl = tr1.parentElement;
			
			tbl.appendChild(tr);
		</script>
	</body>
</html>



三、DOM的修改:

  1. 通过重新赋值


四、DOM的删除:

  1. 移除自身:自身dom.remove();

  2. 通过父类移除自身:父类dom.removeChild(子类dom);


DOM的

1、获取父类:parentElement();

2、获取子类:children;返回类数组,所有的子类

3、获取上一个元素(兄):previousElementSibling:获取兄元素,如果没有,返回null;

4、获取下一个元素(弟):nextElementSibling:获取弟元素,如果没有,返回null;


常用的dom对象的属性和方法:

1、tagName():    获取当前元素的名称

2、innerText():    返回html元素的内容

3、innerHTML:    返回html的的内容

4、style:    获取元素的行内样式。

5、className:    获取class 的名字

6、classList.add():    在class 集合中增加一个

7、父类.insertBefore(插入的元素,在我之前);    插入有个子元素到某个子元素的前面


实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="mydiv" class="outer" style="color: blue;"><span>你好</span></div>


		<script type="text/javascript">
			//获取
			var mydiv = document.getElementById("mydiv");
			console.log(mydiv.tagName.toLowerCase());
			console.log(mydiv.innerText);
			console.log(mydiv.innerHTML);
			console.log(mydiv.id);
			
			//修改
			mydiv.innerText = "我根本已经不好了";
			mydiv.style.color = "red";
			
			//查看style对象
			console.log(mydiv.style);
			
			//修改背景颜色的两种方式
			mydiv.style.backgroundColor = "pink";
			mydiv.style["background-color"] = "green";
			
			//获取class 名称 并重新赋值
			console.log(mydiv.className);
			mydiv.className = "inner";
			
			//在class中增加、删除
			mydiv.classList.add("a");
			mydiv.classList.add("b");
			mydiv.classList.add("c");
			mydiv.classList.remove("b");
		</script>
	</body>
</html>


文章原创,转载请注意出处,来源:刘广法博客,不保留必追究

扫描二维码推送至手机访问。

版权声明:本文由刘广法博客发布,如需转载请注明出处。

本文链接:https://liuguangfa.com/js/173.html

分享给朋友:

“js教程 数组、函数、面向对象、DOM” 的相关文章

js教程 js基础知识(变量常量、运算符、循环结构)

js基础知识:一、变量常量在 js 中的类型分为原始类型,和引用类型原始类型:1、number:数字(包括小数和整数,和 Java 不同)2、string:字符串(js 中不分字符串和字符)3、boolean:布尔类型(和 java 相同)4、null:空5、undefined:不确定类型二、运算符...

js教程 DOM的事件处理

js教程 DOM的事件处理js 和人进行行为交互。一、添加事件有三种方式:1、直接在在标记中,定义onXXXX事件2、给dom元素添加onXXXX 属性,与第一种指定的效果完全相同,第一种、第二种取消事件:dom元素.onXXXX = null。第一种、第二种对一个元素只能添加一个事件。3、推荐使用...

js教程 BOM浏览器对象模型

javascript = EcmaScript + DOM + BOM BOM:broswer object model,浏览器对象模型。1、window:对象。用于指代窗口。 2、history:访问历史记录。back()表示后退一页,forward表示前进一页,go表示前进或...

js教程 jQuery

JQuery:就是一个js库。提供了一些非常易用,常用的功能,方便进行高效的js操作。jquery的操作语法:jq对象.action();一、jQuery对象与dom对象的区别:jQuery对象转化成dom对象?$jq[x] :juqery对象通过下标索引,可以获取对应的dom对象。或者使用 $jq...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。