js对象 应用

最新推荐文章于 2022-09-19 19:41:17 发布
最新推荐文章于 2022-09-19 19:41:17 发布
阅读量229 收藏
点赞数 1
文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44247157/article/details/124333939
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            height: 100%;
            position: relative;
            margin: 0;
            padding: 0;

        }
        li {
            /* position: relative; */
            list-style: none;
            width: 100px;
            height: 100%;
            font-size: 20px;
            line-height: 100%;

        }
        h4 {
         text-align: center;
        }
        .firstnav {
            position: relative;
            height: 60px;
            border-bottom:1px red solid ;
            padding-left: 20px;
        }
        .firstnav ul {
            padding: 0;
            display: flex;
            justify-content: start;
            padding-top:10px ;

        }
        .firstnav ul span {
        
            height: 60px;
            width: 100px;
            border: 1px red solid;
        }

        .firstnav ul .iconfont {
            position: absolute;
            top: -16;
            left: 46;
            width: 20px;
            height: 20px;
            background-color: black;
            border-radius: 50%;

        }
        .firstnav div {
            position: relative;
            right: -941px;
            top: -45px;
            font-size: 30px;

        }
        .firstnav div span {
            text-align: center;
            line-height: 30px;
            display: block;
            height: 30px;
            width: 30px;
            border: 1px solid red;
        }
        .main {
            width: 1000px;
            height: 500px;
            margin: 0 auto;
            border: 1px red solid;
            padding: 0;
        }
        .tabscon {
            padding:20px ;
        }
        .liactive {
            background-color: #666;
        }
        section {
            display: none;
        }
        .conactive {
            display: block;

        }
        input {
            width: 60px;
        }
    </style>
    
</head>

<body>
    <h4>js 面向对象 动态添加标签页</h4>
    <div class="main"  id="tab">
        <nav class="firstnav">
        <ul>
            <li class="listtive liactive"><span>测试1</span><span class="iconfont"></span></li>
            <li><span>测试2</span><span class="iconfont"></span></li>
            <li><span>测试3</span><span class="iconfont"></span></li>
        </ul>
        <div class="tabdd"><span>+</span></div>
        </nav>
        <div class="tabscon">
            <section class="conactive">测试1</section>
            <section>测试2</section>
            <section>测试3</section>
        </div>
    </div>
    <script>
    var that ;
class Tab {
    constructor(id){
        
        that = this ;
        this.main = document.querySelector(id);
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
        this.add = this.main.querySelector('.tabdd');
        this.ul = this.main.querySelector('.firstnav ul:first-child');
        this.fsection = this.main.querySelector('.tabscon');  
        this.init();
    }
    updateNode(){
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
        this.remove = this.main.querySelectorAll('.iconfont');
        this.spans = this.main.querySelectorAll('.firstnav li span:first-child');    
    }
    init(){
        //初始化操作  让相关元素绑定事件
        this.updateNode();
        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;
        
        }
        this.add.onclick =  this.addTab;
        
    }
    //1.切换功能
    toggleTab(){
        that.clearClass();
        this.className = 'liactive';
        that.sections[this.index].className = 'conactive';       
    }
    clearClass (){
        for(var i = 0 ;i <this.lis.length ; i++){
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }
    //2.添加功能
    addTab(){
        that.clearClass();
        var li =' <li class="listtive liactive"><span>新选项卡</span><span class="iconfont"></span></li>';
        var section = '<section class="conactive">空白页</section>';
        that.ul.insertAdjacentHTML('beforeend',li);
        that.fsection.insertAdjacentHTML('beforeend',section);
        that.init();
    }
    //3.删除功能
    removeTab(e){
        e.stopPropagation();  //阻止冒泡
        var index = this.parentNode.index;
        console.log(index);
        that.lis[index].remove();
        that.sections[index].remove();
        that.init();
        if(document.querySelector('.liactive')) return;
        index--;
        that.lis[index] && that.lis[index].click(); //&&若前面为真，调用后面的函数 若为假，不执行后面的函数
        //当我
    }
    //4.修改功能
    editTab(){
        var str = this.innerHTML;
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();    //双击禁止选定文字
        this.innerHTML = '<input type="text" />';
        var input = this.children[0];  
        input.value = str;
        input.select();//文本处于选定状态
        //当离开
        input.onblur = function(){
           this.parentNode.innerHTML = this.value ;
        }
        //当按下回车
        input.onkeyup = function(e){
            if(e.keyCode === 13){
                this.blur();
            }
        }
    }

}
new Tab('#tab');

    </script>
</body>

</html>

注：

1.&&

 that.lis[index] && that.lis[index].click(); //&&若前面为真，调用后面的函数 若为假，不执行后面的函数

2.禁止选定文字

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

3.insertAdjacentHTML('position',text);

其中position取值如下：
‘beforebegin’：元素自身的前面。
‘afterbegin’：插入元素内部的第一个子节点之前。
‘beforeend’：插入元素内部的最后一个子节点之后。
‘afterend’：元素自身的后面。

vcdd
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js arguments对象应用介绍
12-08
在javascript中，不需要明确指出参数名，就能访问它们。如： 代码如下: function hi(){ if(arguments[0]==”andy”){ return; } alert(arguments[0]); } 用arguments[0]可以访问第一个参数，如此类推。 利用...
JavaScript Date对象应用实例分享
10-19
主要分享了JavaScript Date对象应用实例，获取日期时间，倒计时功能实现，限时抢购活动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS对象的理解和应用
qq_45147812的博客
05-11 151
对象的分类 内建对象 ES标准中定义的对象 ，eg：Math、String… 宿主对象 由运行环境（浏览器决定）eg：BOM、DOM 自定义对象 创建对象以及对象的读取和赋值 //创建 var obj = new Object(); //赋值 obj.name="hahah"; obj.age=18; //obj可以由多个属性，数量不限制 //读取 var name = obj.name; var age=obj.age; var gender=obj.gender;//这里为给obj对象的gender
js对象的应用
m0_73686828的博客
09-19 92
2.使用function创建一个对象。响应用户操作，完成交互，一般可以分为。分为字符串对象，数学对象，日期对象。可以使用索引访问字符串中任何的字符。1.使用Object创建一个对象。数学对象提供基本的数学函数和常数。数学对象不需要使用new运算符。属性是指对象包含的值，使用。3.其他创建对象的方式。使用单引号或双引号包含。可以在字符串中使用引号。
JS对象和对象的应用
weixin_40442639的博客
02-23 287
1. 工场模式和 构造函数模式 工场模式： function students(name,age,grade){ // 1.创建一个对象 var stu ={}; // 2. 给对象里面的属性赋值 stu.name = name; stu.age = age; stu.grade = grade; // 3. 返回创建好的对象 return stu; ...
JS对象学习应用
applesstt
03-31 97
/** * window级别对象 使用para: value 方式定义 * 也可以理解为静态类 * 可以直接访问其内部的方法和属性 * testWindowClass.id testWindowClass.m() */ var testWindowClass = { //属性 id: "WId0", //方法 m : function() { alert("window ob...
JavaScript对象的应用
weixin_44547775的博客
07-17 236
《JavaScript对象的应用》 开发工具与关键技术：Visual Studio /.NET 作者：肖春庆 撰写时间：2019年07月13日 任何事物都有它的对象模组，JavaScript当然也是所有事物都是有对象的每个对象带有属性和方法。例如:字符串、数值、数组、函数等等。对象的方法，能够在对象上执行的动作。 JavaScript 提供多个内建对象，比如 String、Date、Array ...
JavaScript原型对象原理与应用分析
10-17
主要介绍了JavaScript原型对象原理与应用,结合实例形式分析了javascript原型对象的概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下
JavaScript之全面理解面向对象的JS
代码与酒
07-05 4186
今天看到一篇文章写得很好，对于像博主这种js一般级别的菜鸟很有帮助，博主秉着“好文要转”的原则收藏了这篇文章，简单排了下版，分享给大家，本文转自原文：http://www.ibm.com/developerworks/cn/web/1304_zengyz_jsoo/#listing1，版权归原作者所有。 前言         当今 JavaScript 大行其道，各种应用对其依赖日深
javascript对象的应用
Cherie
04-30 1168
JavaScript脚本语言是一门基于面向对象的编程语言，支持一些预定义对象支持的简单对象模型。关于面向对象，在学习C#、C++的时候我们都了解过，所以对于JavaScript对象理解起来也比较容易。由于我们主要用JavaScript来设计网页，接下来就结合浏览器的内部对象来一起学习下 1.浏览器内部对象 浏览器可以与HTML文档实现交互，它将相关元素进行了封装。浏览器提供的内部对象主要有Navigator对象、Window对象、Location对象、History对象、Document对
javascript对象介绍和应用
u012835679的专栏
11-16 326
JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。 JavaScript 对象介绍： JavaScript 提供多个内建对象，比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。 访问对象的属性： 属性是与对象相关的值。 访问对象属性的语法：
Js原型对象的作用及应用
N_Peng的博客
08-13 1675
Js原型对象的作用及应用 原型对象：Prototype 如果在内置对象创建了一个原型对象，那么原型对象中追加的方法会自动追击到内置对象中 作用： 在js的所有内置对象中都存在prototype原型属性 在js的内置对象的原型属性中，追加方法，那么该方法会自动追加到内置对象中 js的原型属性最终的目的是给内置对象追加方法 使用方式： function Array(){ //创建一...
javascript中对象的应用
m0_58278305的博客
08-24 218
ECMA-262对象的定义：无序属性的集合，其属性可以包含基本值，对象，或者函数。可以将对象想象成散列表:键值对，其中值可以是数据或者函数。ECMAScript中的对象其实就是一组数据(属性)和功能(方法)的集合。 1.定义对象 1）使用构造函数创建，new Object() var person = new Object(); person.name = "briup"; person.age = 22; 2）使用对象字面量表示法 ...
JavaWeb笔记-04-js对象案例应用(六种)
一万年行不行的博客
07-24 278
1、案例一 ：在末尾添加节点 描述：在ul列表末尾添加一个 li 节点信息 步骤： 1）创建事件按钮 &amp;lt;input type=&quot; button&quot; value =&quot;add&quot; onclick=&quot;add1()&quot;/&amp;gt; 2）编写事件函数 ---- function add1 {} 1.获取 ul 标签 docome
JS—关于对象的一些浅显理解与应用
weixin_65565362的博客
06-29 158
1、什么是对象 对象是属性和方法的集合，列如：汽车，它的属性有：轮胎，车门等，方法有：能跑，所以说对象是属性与方法的集合 对象是javascript的核心概念，在js任何不是字符串，数值，符号或true、false、null，undefined的值都是对象，即使字符串，数值和布尔值不是对象，他们的行为也类似不可修改的对象 2、什么是面向对象 面向对象简称：oop，是过程式代码的高度封装，目的在于通过把一些通用的方法和属性封装在一起从而提高代码的可复用性，减少代码量； 3、面向对象的特点
Js 对象中使用[] 和 . 的区别
Fiona
09-08 4581
js 对象引用
weixin_43294560的博客
11-26 1372
对象之间赋值,对象属性变化会相互影响,当对象的地址改变时(如赋值新对象等),才会断掉对象之间的联系 代码示例: let obj = { a: 1, b: 2 }; let obj2 = obj; console.log(obj2); obj.a = 3; console.log(obj2); obj.c=4; console.log(obj2); obj2.a = 5; console.log(obj); obj = { d: 5 }; console.log(obj2); ...
JS面向对象的应用场景
tangcc的博客
04-08 2216
reference:http://www.cnblogs.com/chiangchou/p/js-oop3.html
深入理解js对象的引用
lian_bingbing的博客
09-02 1730
深入理解js对象的引用 对于基本类型，赋值（=）是值的拷贝，比较（===）的是实际的值，而对于引用类型（Array也是一种Object），赋值（=）是引用地址的拷贝，比较（===）的是引用地址，以下是对引用对象的举例说明，看代码更直观： 基本数据类型比较和引用数据类型比较的区别 const a = '哈哈' const b = '哈哈' console.log(a === b) // true...
javascript对象和json对象
最新发布
04-11
JavaScript对象和JSON对象都是用来表示数据的对象。不同之处在于，JSON对象是一种数据格式，是一种数据交换格式，它有自己的语法规则；而JavaScript对象是一种编程语言的基本数据类型，是通过键值对来存储数据的，可以进行操作、添加、删除等操作。在实际应用中，JavaScript可以将对象转换为JSON格式，并进行网络传输。JSON也可以被解析成JavaScript对象，以便进行操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值