JavaScript,函数的概念,节点的获取,对象的创建

最新推荐文章于 2022-05-01 08:41:43 发布

swop_

最新推荐文章于 2022-05-01 08:41:43 发布

阅读量194

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/swop_/article/details/90705794

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

函数的概念

函数:其实是对一些代码进行封装,之后再需要的地方直接使用函数名称进行调用,

JavaScript中的函数声明方式;

function 函数名(){
    //JavaScript代码
    [return 返回的数据]
}

注意:

1.JavaScript需要使用function进行函数的申明

2.声明方法是不需要定义返回值

3.参数不需要给定类型,直接给出参数名称即可

4.返回值可有可无(具体根据需求)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
            //声明函数addSum1
			function addSum1(a,b){
    			console.log("和为:"+(a+b));
			}
			 //声明函数addSum2
			function addSum2(a,b){
    			return a+b;
			}
			//调用addSum1
			addSum1(30,30);
			//调用addSum2
			var sum = addSum2(10,20);
			//输出addSum2的返回值
			alert(sum);
		</script>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

利用JavaScript的document内置对象获取节点

在前端编程中,可以吧HTML中的每个标签看成是一个节点,那么可以通过JavaScript将这些节点获取出来,并通过内置对象对这些节点进行操作(修改,删除,替换),这个就叫做document.内置对象就是已经创建好了的对象,我们直接使用即可.

在这里插入图片描述

根据id获取元素节点对象

document.getElementById(“div1”):根据元素的id值取得对象,返回的是一个对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
			}
			#div1{
				background-color: red;
				
			}
			#div2{
				background-color: cadetblue;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			
		</div>
		<div id="div2">
			
		</div>
	</body>
</html>

没有用JavaScript获取并改变对象的属性之前

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
			}
			#div1{
				background-color: red;
				
			}
			#div2{
				background-color: cadetblue;
			}
		</style>
		<script type="text/javascript">
			//window.onload  作用:等待页面加载完成之后再执行里面的代码
			window.onload = function(){
				//湖区到id为div1的对象
				var div1 = document.getElementById("div1");
				//设置对象div1的背景颜色为"blue"
				div1.style.backgroundColor = 'blue';
			}
		</script>
	</head>
	<body>
		<div id="div1">
			
		</div>
		<div id="div2">
			
		</div>
	</body>
</html>

注意:之所以用window.onload函数是因为浏览器解析文件时是从上至下的而解析document.getElementById("div1");时还没有div1所以需要用window.onload函数等待页面加载完成之后再执行里面的代码

在这里插入图片描述

其他常用的获取元素及节点的方法

根据节点的name属性获取元素

document.getElementsByName()  //返回带有指定名称的对象的集合。

根据class获取元素

document.getElementsByClassName()//返回文档中所有指定类名的元素集合
//可以用document.getElementsByClassName()[index]的方式取得单个的对象

根据标签获取元素

document.getElementsByTagName()  //返回文档中所有相同标签名的元素集合

对象的创建

在JavaScript中创建对象常见的有三种常用的方式:字面量创建对象、原始的构造函数创建对象、自定义的构造函数创建对象。

字面量创建对象

var person = {
    //为对象定义属性和值
	    name:"张三",
	    age:39,
		sex:"女",
    //为对象定义函数
	eat:function(fruit){
		console.log(this.name+"正在吃"+fruit)
	}
};
//访问对象的属性显示在console里
console.log("名字是:"+person.name);
//访问对象的函数
person.eat("orange")

使用原生函数创建对象

//使用原生函数创建对象
var obj = new Object();
			//为对象的属性赋值
			obj.name = "李四";
			obj.age =19;
			obj.sex="男";
			//为对象定义函数
			obj.eat=function(fruit){
				console.log(this.name+"正在吃"+fruit)
			}
//访问对象的属性显示在console里
console.log("名字是:"+obj.name);
//访问对象的函数
obj.eat("orange")

自定义的构造函数创建对象

function  Person(name,age,sex){
				this.name = name ;
				this.age = age;
				this.sex = sex;
				this.eat=function(fruit){
					console.log(this.name+"正在吃"+fruit)
				}
			}
//创建对象
var a = new Person("李四",19,"男");
//访问对象的属性显示在console里
console.log("名字是:"+a.name);
//访问对象的函数
a.eat("orange")

swop_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript,函数的概念,节点的获取,对象的创建

函数的概念函数:其实是对一些代码进行封装,之后再需要的地方直接使用函数名称进行调用,JavaScript中的函数声明方式;function 函数名(){ //JavaScript代码 [return 返回的数据]}注意:1.JavaScript需要使用function进行函数的申明2.声明方法是不需要定义返回值3.参数不需要给定类型,直接给出参数名称即可4.返...
复制链接

扫一扫

专栏目录