龙空技术网

JavaScript-第四章

星晨128868889 320

前言:

而今我们对“js在指定标签后添加标签”大体比较重视,同学们都需要分析一些“js在指定标签后添加标签”的相关资讯。那么小编在网上收集了一些对于“js在指定标签后添加标签””的相关内容,希望各位老铁们能喜欢,各位老铁们快快来了解一下吧!

一、什么是面向对象?

面向对象仅仅是一个概念或者编程思想

通过一种叫做原型的方式来实现面向对象编程

1、 创建对象(自定义对象,内置对象)

基于Object对象的方式创建对象-自定义对象

示例:

var 对象名称=new Object( );

var flower=new Object();

flower.name="长春花";

flower.genera="夹竹桃科 长春花属";

flower.area="非洲、亚热带、热带以及中国大陆的华东、西南、中南等地";

flower.uses="观赏或用药等";

flower.showName=function(){ alert(this.name); }

flower.showName();

常见的内置对象

String(字符串)对象

Date(日期)对象

Array(数组)对象

Boolean(逻辑)对象

Math(算数)对象

RegExp对象

二、

如何解决使用同一个接口不需要创建很多对象,减少产生大量的重复代码?

1、构造函数:

function Flower(name,genera,area,uses){

this.name=name;

…….

this.showName=function(){

alert(this.name);

}

}

var flower1=new Flower("长春花","夹竹桃科 长春花属","非洲、亚热带、热带以及中国大陆的华东、西南、中南等地","观赏或用药等")

flower1.showName();

2、原型对象:

function Flower(){

}

Flower.prototype.name="曼陀罗花";

Flower.prototype.genera="茄科 曼陀罗属";

Flower.prototype.area="印度、中国北部";

Flower.prototype.uses="观赏或药用";

Flower.prototype.showName=function() {

alert(this.name);

}

var flower1=new Flower();

flower1.showName();

var flower2=new Flower();

flower2.showName();

alert(flower1.showName==flower2.showName);

三、继承

1.原型链:一个原型对象是另一个原型对象的实例

相关的原型对象层层递进,就构成了实例与原型的链条,就是原型链

示例:

function Humans(){

this.foot=2;

}

Humans.prototype.getFoot=function(){

return this.foot;

}

function Man(){

this.head=1;

}

Man.prototype=new Humans(); //继承了Humans

Man.prototype.getHead=function(){

return this.head;

}

var man1=new Man();

alert(man1.getFoot()); //2

alert(man1 instanceof Object); //true

alert(man1 instanceof Humans); //true

alert(man1 instanceof Man); //true

2.对象继承:

function Humans(){

this.clothing=["trousers","dress","jacket"];

}

function Man(){ }

//继承了Humans

Man.prototype=new Humans();

var man1=new Man();

man1.clothing.push("coat");

alert(man1.clothing);

var man2=new Man();

alert(man2.clothing);

3.组合继承:

组合继承:有时也叫做伪经典继承

将原型链和借用构造函数的技术组合到一块,发挥二者之长的一种继承模式

使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承

四、这一章的示例代码:

<html>

<head>

<title>面向对象标题栏替换和修改</title>

</head>

<style>

* {

margin: 0;

padding: 0;

}

ul li {

list-style: none;

}

main {

width: 960px;

height: 500px;

border-radius: 10px;

margin: 50px auto;

}

main h4 {

height: 100px;

line-height: 100px;

text-align: center;

}

.tabsbox {

width: 900px;

margin: 0 auto;

height: 400px;

border: 1px solid lightsalmon;

position: relative;

}

nav ul {

overflow: hidden;

}

nav ul li {

float: left;

width: 100px;

height: 50px;

line-height: 50px;

text-align: center;

border-right: 1px solid #ccc;

position: relative;

}

nav ul li.liactive {

border-bottom: 2px solid #fff;

z-index: 9;

}

#tab input {

width: 80%;

height: 60%;

}

nav ul li span:last-child {

position: absolute;

user-select: none;

font-size: 12px;

top: -18px;

right: 0;

display: inline-block;

height: 20px;

}

.tabadd {

position: absolute;

/* width: 100px; */

top: 0;

right: 0;

}

.tabadd span {

display: block;

width: 20px;

height: 20px;

line-height: 20px;

text-align: center;

border: 1px solid #ccc;

float: right;

margin: 10px;

user-select: none;

}

.tabscon {

width: 100%;

height: 300px;

position: absolute;

padding: 30px;

top: 50px;

left: 0px;

box-sizing: border-box;

border-top: 1px solid #ccc;

}

.tabscon section,

.tabscon section.conactive {

display: none;

width: 100%;

height: 100%;

}

.tabscon section.conactive {

display: block;

}

</style>

<body>

<main>

<h4>

JS面向对象 动态添加标签页

</h4>

<div class="tabsbox" id="tab">

<!-- tab标签 -->

<nav class="fisrstnav">

<ul>

<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span> </li>

<li><span>测试2</span><span class="iconfont icon-guanbi"></span> </li>

<li class="liactive"><span>测试3</span><span class="iconfont icon-guanbi"></span> </li>

</ul>

<div class="tabadd">

<span>+</span>

</div>

</nav>

<!-- tab内容 -->

<div class="tabscon">

<section class="conactive">测试1</section>

<section>测试2</section>

<section>测试3</section>

</div>

</div>

</main>

</body>

<script>

var that;

class Tab {

constructor(id) {

// 获取元素

that = this;

this.main = document.querySelector(id);

this.add = this.main.querySelector('.tabadd');

// li的父元素

this.ul = this.main.querySelector('.fisrstnav ul:first-child');

// section 父元素

this.fsection = this.main.querySelector('.tabscon');

this.init();

}

init() {

this.updateNode();

// init 初始化操作让相关的元素绑定事件

this.add.onclick = this.addTab;

for (var i = 0; i < this.lis.length; i++) {

this.lis[i].index = i;

this.lis[i].onclick = this.toggleTab;

this.remove[i].onclick = this.removeTab;

this.spans[i].ondblclick = this.editTab;

this.sections[i].ondblclick = this.editTab;

}

}

// 因为我们动态添加元素 需要从新获取对应的元素

updateNode() {

this.lis = this.main.querySelectorAll('li');

this.sections = this.main.querySelectorAll('section');

this.remove = this.main.querySelectorAll('.icon-guanbi');

this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child');

}

// 1. 切换功能

toggleTab() {

// console.log(this.index);

that.clearClass();

this.className = 'liactive';

that.sections[this.index].className = 'conactive';

}

// 清除所有li 和section 的类

clearClass() {

for (var i = 0; i < this.lis.length; i++) {

this.lis[i].className = '';

this.sections[i].className = '';

}

}

// 2. 添加功能

addTab() {

that.clearClass();

// (1) 创建li元素和section元素

var random = Math.random();

var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';

var section = '<section class="conactive">测试 ' + random + '</section>';

// (2) 把这两个元素追加到对应的父元素里面

that.ul.insertAdjacentHTML('beforeend', li);

that.fsection.insertAdjacentHTML('beforeend', section);

that.init();

}

// 3. 删除功能

removeTab(e) {

e.stopPropagation(); // 阻止冒泡 防止触发li 的切换点击事件

var index = this.parentNode.index;

console.log(index);

// 根据索引号删除对应的li 和section remove()方法可以直接删除指定的元素

that.lis[index].remove();

that.sections[index].remove();

that.init();

// 当我们删除的不是选中状态的li 的时候,原来的选中状态li保持不变

if (document.querySelector('.liactive')) return;

// 当我们删除了选中状态的这个li 的时候, 让它的前一个li 处于选定状态

index--;

// 手动调用我们的点击事件 不需要鼠标触发

that.lis[index] && that.lis[index].click();

}

// 4. 修改功能

editTab() {

var str = this.innerHTML;

// 双击禁止选定文字

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

// alert(11);

this.innerHTML = '<input type="text" />';

var input = this.children[0];

input.value = str;

input.select(); // 文本框里面的文字处于选定状态

// 当我们离开文本框就把文本框里面的值给span

input.onblur = function () {

this.parentNode.innerHTML = this.value;

};

// 按下回车也可以把文本框里面的值给span

input.onkeyup = function (e) {

if (e.keyCode === 13) {

// 手动调用表单失去焦点事件 不需要鼠标离开操作

this.blur();

}

}

}

}

new Tab('#tab');

</script>

</html>

标签: #js在指定标签后添加标签