百度360必应搜狗淘宝本站头条
mqtt服务器xftp6vscode使用技巧mybatiscollectionkeyerror
当前位置：网站首页 > 热门文章 > 正文

Javascript对象和选项卡实现 javascript对象操作

bigegpt 2024-10-09 08:08 10 浏览

什么是对象？

JavaScript除了原始值，一切皆对象。

原始值指的是没有属性或方法的值。

原始数据类型指的是拥有原始值的数据。

JavaScript 定义了 5 种原始数据类型：

  • string
  • number
  • boolean
  • null
  • undefined

变量只能包括一个值，而对象可以通过键值对形式包括多个值。

let a = "hello";
console.log(a);
let info = {
	name:"blackcat",
	age:38,
	money:100
};

console.log(info["name"], info.name);
console.log(info["age"], info.age);
console.log(info["money"], info.money);

对象添加函数：

let info = {
	name:"blackcat",
	age:38,
	money:100,
	add_money: function(x){
		this.money += x;
	}
};

info.add_money(20);
console.log(info["money"], info.money);

info["add_money"](30);
console.log(info["money"], info.money);

通过对象构造函数创建对象：

let info = new Object();
info.name = "blackcat";
info.age = 28;
console.log(info);

你选中了哪个区域？

要求：如图所示，有4个区域，鼠标点击其中一个区域，弹出这个区域的序号。

<div id="a">1</div>
<div id="b">2</div>
<div id="c">3</div>
<div id="d">4</div>
<style>
	div {
		display: inline-block;
		width: 200px;
		height: 200px;
		background-color: pink;
		color: white;
		font-size: 20px;
		line-height: 80px;
		text-align: center;
	}
	#a {
		background: lightgreen;
	}
	#b {
		background: skyblue;
	}
	#c {
		background: #ccc;
	}
</style>
let divs = document.getElementsByTagName("div");

for(let i = 0; i < divs.length; i++){
	divs[i].index = i + 1;
	divs[i].onclick = function(){
		console.log(this);
		alert(this.index);
	}
}

this代表当前点击对象，divs[i].index = i + 1给每一个对象绑定对应数字编号。

男孩女孩选项卡

要求：点击boy显示男孩图片，点击girl显示女孩图片。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>boy and girl</title>
		<style>
			.wrap {
				width: 500px;
				height: 480px;
				margin: 100px auto;
				position: relative;
			}
			span {
				display: inline-block;
				width: 220px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				color: rgba(45, 199, 15, 0.466);
				font-size: 20px;
			}
			img {
				position: absolute;
				bottom: 20px;
				left: 25px;
				display: none;
				width: 420px;
				height: 400px;
			}
			span:hover {
				border-bottom: 2px solid rgb(33, 168, 6);
				border-radius: 20px;
			}
			.active {
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<span>boy</span>
			<span>girl</span>
			<img src="images/boy.jpg"/>
			<img src="images/girl.jpg"/>
		</div>
		<script>
			/*完成如图所示效果*/
			let btn = document.getElementsByTagName("span");
			let arr = document.getElementsByTagName("img");
			arr[0].className = "active";

			for(let i = 0; i < btn.length; i++){
				btn[i].index = i;
				btn[i].onclick = function(){
					arr[0].className = arr[1].className = "";
					arr[this.index].className = "active";
				}
			}
		</script>
	</body>
</html>

多个选项卡切换

要求：点击其中一个选项卡，选项卡变为蓝色背景，且下方显示该选项卡上的文字。

<script>
	let liArr = document.getElementsByTagName("li");
	let spanArr = document.getElementsByTagName("span");
	spanArr[0].className = "show";
	liArr[0].className = "current";
	for (let i = 0; i < liArr.length; i++) {
		liArr[i].index = i;
		liArr[i].onclick = function() {
			for (let j = 0; j < liArr.length; j++) {
				liArr[j].className = spanArr[j].className = "";
			}
			liArr[this.index].className = "current";
			spanArr[this.index].className = "show";
		}
	}
</script>

相关推荐

相关推荐

最全的MySQL总结，助你向阿里“开炮”(面试题+笔记+思维图)

前言作为一名编程人员，对MySQL一定不会陌生，尤其是互联网行业，对MySQL的使用是比较多的。对于求职者来说，MySQL又是面试中一定会问到的重点，很多人拥有大厂梦，却因为MySQL败下阵来。实际上...

Redis数据库从入门到精通（redis数据库设计）

目录一、常见的非关系型数据库NOSQL分类二、了解Redis三、Redis的单节点安装教程四、Redis的常用命令1、Help帮助命令2、SET命令3、过期命令4、查找键命令5、操作键命令6、GET命...

netcore 急速接入第三方登录，不看后悔

新年新气象，趁着新年的喜庆，肝了十来天，终于发了第一版，希望大家喜欢。如果有不喜欢看文字的童鞋，可以直接看下面的地址体验一下：https://oauthlogin.net/前言此次带来得这个小项目是...

精选 30 个 C++ 面试题(含解析)（c++面试题和答案汇总）

大家好，我是柠檬哥，专注编程知识分享。欢迎关注@程序员柠檬橙，编程路上不迷路，私信发送以下关键字获取编程资源：发送1024打包下载10个G编程资源学习资料发送001获取阿里大神LeetCode...

Oracle 12c系列(一)|多租户容器数据库

作者杨禹航出品沃趣技术Oracle12.1发布至今已有多年，但国内Oracle12C的用户并不多，随着12.2在去年的发布，选择安装Oracle12c的客户量明显增加，在接下来的几年中，Or...

flutter系列之:UI layout简介（flutter-ui-nice）

简介对于一个前端框架来说，除了各个组件之外，最重要的就是将这些组件进行连接的布局了。布局的英文名叫做layout，就是用来描述如何将组件进行摆放的一个约束。在flutter中，基本上所有的对象都是wi...

Flutter 分页功能表格控件（flutter 列表）

老孟导读：前2天有读者问到是否有带分页功能的表格控件，今天分页功能的表格控件详细解析来来。PaginatedDataTablePaginatedDataTable是一个带分页功能的DataTable，...

Flutter | 使用BottomNavigationBar快速构建底部导航

平时我们在使用app时经常会看到底部导航栏,而在flutter中它的实现也较为简单.需要用到的组件:BottomNavigationBar导航栏的主体BottomNavigationBarI...

Android中的数据库和本地存储在Flutter中是怎样实现的

如何使用SharedPreferences？在Android中，你可以使用SharedPreferencesAPI来存储少量的键值对。在Flutter中，使用Shared_Pref...

Flet，一个Flutter应用的实用Python库!

▼Flet：用Python轻松构建跨平台应用！在纷繁复杂的Python框架中，Flet宛如一缕清风，为开发者带来极致的跨平台应用开发体验。它用最简单的Python代码，帮你实现移动端、桌面端...

flutter系列之:做一个图像滤镜（flutter photo）

简介很多时候，我们需要一些特效功能，比如给图片做个滤镜什么的，如果是h5页面，那么我们可以很容易的通过css滤镜来实现这个功能。那么如果在flutter中，如果要实现这样的滤镜功能应该怎么处理呢？一起...

flutter软件开发笔记20-flutter web开发

flutterweb开发优势比较多，采用统一的语言，就能开发不同类型的软件，在web开发中，特别是后台式软件中，相比传统的html5开发，更高效，有点像c++编程的方式，把web设计出来了。一...

Flutter实战-请求封装(五)之设置抓包Proxy

用了两年的flutter，有了一些心得，不虚头巴脑，只求实战有用，以供学习或使用flutter的小伙伴参考，学习尚浅，如有不正确的地方还望各路大神指正，以免误人子弟，在此拜谢~（原创不易，转发请标注来...

为什么不在 Flutter 中使用全局变量来管理状态

我相信没有人用全局变量来管理Flutter应用程序的状态。毫无疑问，我们的Flutter应用程序需要状态管理包或Flutter的基本小部件（例如InheritedWidget或St...

Flutter 攻略(Dart基本数据类型，变量 整理 2)

代码运行从main方法开始voidmain(){print("hellodart");}变量与常量var声明变量未初始化变量为nullvarc;//未初始化print(c)...

一周热门
最近发表
标签列表