进阶版JavaScript学习-第三期

简介: 进阶版JavaScript学习

一、排他思想


如果有同一组元素,我们想要某一元素实现某种样式,需要用到循环结构的排他思想算法。


1、所有元素清除样式


2、给当前元素设置样式


3、注意顺序不能颠倒。


改变按钮点击后的颜色。


<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <script>
        var btns=document.getElementsByTagName('button');
        for(var i=0;i<btns.length;i++){
            btns[i].onclick=function(){/*(1)先把所有的按钮背景颜色去掉*/
                for(var i=0;i<btns.length;i++){
                    btns[i].style.backgroundColor='';
                }
                this.style.backgroundColor='blue';//让当前的元素背景为blue
            }
        }
    </script>
</body>

二、自定义属性的操作


1、获取属性值:

element.属性:获取内置属性值(元素本身自带的属性)。


element.getAttribute('属性'):主要获得自定义的属性(标准)。


2、设置属性值

element.属性='值'


element.setArribute('属性','值'):主要针对于自定义属性。


3、移出属性

element.removeAttribute('属性')


<body>
    <div id="demo" index="1" class="nav">okok</div>
    <script>
        console.log(div.id);
        console.log(div.getAttribute("id"));
        div.id='test';
        div.setAttribute('index',2);
        div.setAttribute('class','footer');
        div.removeAttribute('index');
    </script>

三、H5自定义属性


自定义属性的目的:为了保存并使用数据,有些数据可以保存到页面中而不用保存到数据库中。


H5新增自定义属性的规范和要求:


1、自定义属性以data开头作为属性并且赋值。


2、使用JS设置element.setAttribute('data-index',2)


获取H5自定义属性


1、兼容性获取:

element.getAttribute('data-index');

2、H5新增:

element.dataset.属性

只能去data-开头的属性,dataset为集合存放了所有data开头的自定义属性。


如果自定义属性里面有多个-连接的单词,我们采取驼峰命名法。

<body>
    <div getTime='20' data-index='2' data-list-name="luck"></div>
    <script>
        var div=document.querySelector('div');
        console.log(div.getAttribute('getTime'));
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>
</body>


目录
相关文章
|
3月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
3月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
4月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
173 0
|
10月前
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
191 5
|
10月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
86 2
|
10月前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
128 1
|
11月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
111 2
|
11月前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
103 1
|
11月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
165 0