js学习-for循环、this、自定义属性

最新推荐文章于 2022-06-02 11:08:46 发布
最新推荐文章于 2022-06-02 11:08:46 发布
阅读量346 收藏
点赞数
分类专栏： js学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48235555/article/details/107060086
版权

元素获取的第二种方法：getElementsByTagName（）

与getElementsByid方法的区别：

#list{} var oUl = document.getElementById(‘list’); //静态方法,找一个元素
li{} document.getElementsByTagName(‘li’) //动态方法，括号内是标签名
#list li{} var aLi = oUl.getElementsByTagName(‘li’);
//aLi => [li li li]元素的集合
aLi.length = 3
aLi[0] 可以使用数组的性质

//在用TagName的时候，必须要加上：【】

<script>
        window.onload = function () {
            var oUl = document.getElementById('list');  //id值
            var aLi = oUl.getElementsByTagName('li');   //标签值

            alert(aLi.length);
        }
</script>

<body>
<ul id="list">
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>

在这里插入图片描述

<script>
    window.onload = function () {
        var oUl = document.getElementsByTagName('ul')[0];  //标签名
        //只要是getElementsByTagName,就必须加上：【数值】 
        var aLi = oUl.getElementsByTagName('li');          //标签名
    }
</script>

<body>
<ul id="list">
    <li></li>
    <li></li>
    <li></li>
</ul>
<ol>
    <li></li>
    <li></li>
</ol>
</body>

如果用document.getElementById(‘li’); 可能会造成ul标签和ol标签里的li元素一起改变

所以选择getElementsByTagName（）

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            document.title = 123;
            document.body.innerHTML = 'abc';
        }
    </script>
</head>

<body>
</body>

如果body里只有一个元素，可以用document.body来改变其内容

同理，title也可以用document.title来改变

但是title可以直接在等号后面写上要改变的字符

而body要用innerHTML，如document.body.innerHTML = ‘abc’;

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var aBtn = document.getElementsByTagName('input');
            //alert(aBtn.length);  显示0个
            document.body.innerHTML = '<input type="button" value="按钮"/><input type="button" value="按钮"/><input type="button" value="按钮"/>';
            //alert(aBtn.length);    显示3个
            aBtn[0].onclick = function () {
                alert(1);
            }
            aBtn[1].onclick = function () {
                alert(2);
            }
            aBtn[2].onclick = function () {
                alert(3);
            }
        }
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述

for循环：

for循环执行顺序

有一组数字推算出任意递增数字

<script>
        var m = 1;
        for(var i = 0 ; i<3 ; i++){
            alert(m++);
        }
    </script>
</head>

<body>
</body>

<script>
    window.onload = function () {
        var oUl = document.getElementsByTagName('ul')[0];
        var aLi = oUl.getElementsByTagName('li');
        var arr = ['a','b','c'];

        for(var i = 0; i < aLi.length ; i++){
            aLi[i].innerHTML = arr[i];
        }
    }
</script>

<body>
<ul id="list">
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>

在这里插入图片描述

//加载20000个，网页会崩溃
for(var i=0 ; i<20000; i++){
    document.body.innerHTML += '<input type="button" value="按钮">';
}

可以先把20000个放在str里，在显示出来

var str = '';
for(var i=0 ; i<20000; i++){
    str += '<input type="button" value="按钮">';
}
document.body.innerHTML = str;

实例：转化绝对定位坐标值

<script>
    window.onload = function () {
        var aDiv = document.getElementsByTagName('div');

        for(var i=1; i<11;i++){
            document.body.innerHTML +='<div>'+i+'</div>';
        }
        for(var i=1;i<aDiv.length;i++){
                aDiv[i].style.left = i * 55 + 'px';
        }
    }
</script>

在这里插入图片描述

选取多个元素

生成多个元素：先生成、后获取

for套for筛选多组指定元素

关键字：this

this是什么

1、当前方法、函数的调用对象

2、通过事件调用函数的对象

函数套函数中的this指向

​1、嵌套函数的this

​2、this的变量引用

this运用

​1、this选取当前元素

​2、this选取当前元素内的子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        //this:这个
        //this:指的是调用当前  方法(函数)的那个对象

        // alert(this)  -> [object window]
        // window是JS的“老大”
        // window.alert(this);

        function fn1() {
            alert( this );
        }
        // fn1();
        // window.fn1();

        var oBtn = document.getElementById('btn1');
        oBtn.onclick = fn1;
    </script>
</head>
<body>

<input type="button" id="btn1" value="按钮">


</body>
</html>

自定义属性：

什么是自定义属性

​运用for循环为一组元素添加开关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
    window.onload = function () {
        var aBtn = document.getElementsByTagName("input");

        // aBtn[0].abc = 123; //自定义属性
        // //alert(aBtn[0].abc);
        
        //js可以为任何HTML元素添加任意个自定义属性
        for(var i = 0;i < aBtn.length;i++){
            aBtn[i].abc = 123;
            aBtn[i].xyz = true;
        }
    }
    </script>
</head>
<body>
<input type="button" value="按钮1"/>
<input type="button" value="按钮2"/>
<input type="button" value="按钮3"/>
</body>
</html>

​ 实例：点击当前列表，切换各自的class

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
li { list-style:none; width:114px; height:140px;
   background:url(img/1.jpg); float:left;
   margin-right:20px; }
</style>
<script>
window.onload = function (){
   var aLi = document.getElementsByTagName('li');
   // var onOff = true;  // 只能控制一组！
   //但是只能onOff只有一组，而li元素有三组，要设置三次，不方便
   
   for( var i=0; i<aLi.length; i++ ){
      
      aLi[i].onOff = true; //解决方案
      
      aLi[i].onclick = function (){
         
         // alert( this.style.background );
         // 背景不能判断
         // color red #f00 不能作为判断条件
         // 相对路径 不能作为判断条件
         
         if ( this.onOff ) {
            this.style.background = 'url(img/2.jpg)';
            this.onOff = false;
         } else {
            this.style.background = 'url(img/1.jpg)';
            this.onOff = true;
         }
      };
   }
};
</script>
</head>

<body>

<ul>
   <li></li>
   <li></li>
   <li></li>
</ul>

</body>
</html>

实例：实现按钮上value值的变换：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
   var aBtn = document.getElementsByTagName('input'); //先找元素
   var arr = [ 'A', 'B', 'C', 'D' ];
   
   for( var i=0; i<aBtn.length; i++ ){
      
      aBtn[i].num = 0; //自定义属性
      
      aBtn[i].onclick = function (){
         // alert( arr[ this.num ] );
         this.value = arr[ this.num ];
         
         this.num++;
         if( this.num === arr.length ){
            this.num = 0;
         }
      };
   }
};
</script>
</head>

<body>

<input type="button" value="0" />
<input type="button" value="0" />
<input type="button" value="0" />

</body>
</html>

添加索引值

​ index索引值

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
   var aBtn = document.getElementsByTagName('input');
   
   for( var i=0; i<aBtn.length; i++ ){
      
      aBtn[i].index = i;// 也是自定义属性，但是叫做索引值，index也可以换成x,y,z等等
      
      aBtn[i].onclick = function (){
         //alert( i );  => 3 //for循环里包function函数使用i不靠谱
         alert( this.index );
      
      };
   }
};
</script>
</head>

<body>

<input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" />

</body>
</html>

window.onload = function (){
   var aBtn = document.getElementsByTagName('input');
   
   // 想建立“匹配”“对应”关系，就用索引值
   var arr = [ 'aa', 'bb', 'cc' ];
   
   for( var i=0; i<aBtn.length; i++ ){
      
      aBtn[i].index = i; // 自定义属性（索引值）
      
      aBtn[i].onclick = function (){
         alert( arr[ this.index ] );
         this.value = arr[ this.index ];
      };
   }
};

实例：通过按钮改变p元素中的文字

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
   var aBtn = document.getElementsByTagName('input');
   var aP = document.getElementsByTagName('p');
   
   // 想建立“匹配”“对应”关系，就用索引值
   var arr = [ 'aa', 'bb', 'cc' ];
   
   for( var i=0; i<aBtn.length; i++ ){
      
      aBtn[i].index = i;       // 自定义属性（索引值）
      
      aBtn[i].onclick = function (){
         // alert( arr[ this.index ] );
         this.value = arr[ this.index ];
         
         aP[ this.index ].innerHTML = arr[ this.index ];
      };
   }
};
</script>
</head>

<body>

<input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" />
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>

</body>
</html>
kaka_hikun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js学习相关文件-测试代码
06-05
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 Computed VS methods 我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是...
js 操作的属性 for 循环
weixin_34419326的博客
10-27 165
js 操作的属性 1.固有属性 获取 var box = document.getElementById("box"); var id = box.id; 设置 var class1 = box.className="absdiv"; console.log(class1 ); 案...
js中for循环this的使用
weixin_34232617的博客
03-28 667
随着对js的深入学习和使用，你会发现它里面包含了很多令人困惑的机制，比如对象、闭包、原型链继承等等 　　1、this是啥？ 　　简言之，this是JavaScript语言中定义的众多关键字之一，它的特殊在于它自动定义于每一个函数域内，但是this倒地指引啥东西却让很多人张二摸不着头脑。这里我们留个小悬念，希望看完这篇文章了你能回答出来this到底指引个甚。 　　2、this有啥用？ 　　那...
走入javascript（六）for循环自定义属性的应用以及算数运算符
启渊
06-22 1332
1.for循环 (1)for(){} 小括号里有三条语句,第一个是定义变量,第二个是判断语句,第三个是变量的变化语句。 大括号中的是循环语句 (2)for循环的执行顺序 for(  1；2；4  ){ 3; } 1->2->3->4->2->3->4->2->3->4->(到2停止) 当判断语句为真时,会继续执行下去,判断为假循环结束,终至循环到判断位置结束,不会停到其他
#关于js其它循环结构及自定义属性及函数运用
weixin_52028170的博客
12-03 143
一、其它的循环结构 1.for…in 对象没有索引也没有length属性，所以经常使用for…in来遍历对象 //用法： for(var i in 对象){ //i 是要遍历的对象的属性 循环体； } 注意：若对象的属性是一个变量，则不能使用 对象.属性名的形式取值，应该使用 对象[属性名] 2.while和do…while //语法： while(条件){ 循环体; } // do{ 循环体； }while(条件); while循环时先进行条件判断，在执行循环体 do…while是先执行一次
JS的for循环事件，为什么用this
Serendipper_Alex的博客
06-02 349
JS的for循环事件，为什么用this
javascript完全学习手册1 源码
04-12
javascript完全自学手册 目 录 第1篇 JavaScript基础篇 第1章 JavaScript简介 1 1.1 JavaScript概述 1 1.1.1 什么是JavaScript 1 1.1.2 JavaScript的基本特点 2 1.1.3 常用的Web开发语言 3 1.2 JavaScript的应用 4 ...
Lollygag-Looper:用JavaScript编写的音频应用程序，允许用户单击元素并从合成声源创建重叠循环
05-17
Tone.js库用于创建自定义合成器并安排循环。 以画布为目标的Click事件将元素添加到循环中并触发相应的动画。 可通过界面上的滑块和复选框将循环静音并调整速度。 技术领域 该项目使用JavaScript，HTML，CSS和Tone....
javascript完全学习手册2 源码
04-12
10．2．3 使用事件this关键字 10．2．4 使用属性处理事件 10．2．5 使用JavaScript处理事件 10．3 标准事件模型 10．3．1 事件传播 10．3．2 注册事件处理程序 10．3．3 设置对象的事件处理程序 10．3．4 事件的模块...
JS实现淘宝幻灯片效果的实现方法
01-19
3、给每个按钮添加自定义属性index aBtn[i].index=i aBtn[2]=2 第二个按钮和第二张图片想对应，用运动框架把大图的UL每次移动-150px，因为图片高度是150px。如果移动到第n张图片就是-150*n。 4、定义变量now，用来...
js学习-边框相关的样式、变形功能、动画效果
weixin_48235555的博客
06-06 1360
边框相关的样式 border-radius 1、border-radius是边框圆角绘制 border-radius：length（左上角和右下角） length(右上角和左下角)； 无边框设置时，会把背景进行圆角设置 边框无论是实线，还是虚线等等，都会沿着圆角曲线绘制 border - top / bottom - left / right - radius,一共四种 2、border-image图像边框 (-webkit-) / (-moz-) / (-o-) / border-image: ur
数组应用及实例应用
weixin_48235555的博客
06-11 831
数组应用及实例应用 数组 1、数组定义： var arr = [ ‘这是一句话’, ‘这是第二句话’, ‘这是第三句话’ ] ; 2、获取数组长度： arr.length 3、获取数组里某个位置的元素： arr[2] //数组里第三个元素 4、往数组最后位置里添加数据： arr.push ( ’ 我是最后一位 ‘ ) ; 设置不透明度 filter:Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, Fini
js学习-简单的网页留言板
weixin_48235555的博客
05-29 731
js学习-简单的网页留言板 知识点： 简单的留言板.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页留言板</title> <script type="text/javascript" src="留言板.js"></script> </head> <body&gt
js学习-服务器端字体和@font-face属性
weixin_48235555的博客
06-04 548
在页面上显示服务器端的字体 在CSS3中可以使用**@font-face**属性来利用服务端字体 使用方法： @font-face{ font-family: webfont; src: url( ‘xxx.otf’ ); / url( ‘xxx.ttf’ ); / url( ‘xxx.eot’ ); } <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <tit
js学习-42文字阴影与自动换行
weixin_48235555的博客
06-04 510
一、文字阴影text-shadow 使用方法： text-shadow: length length length color 第一个和第二个length分别是阴影离开文字的横、纵方向距离，第三个length是阴影的模糊程度，length越大，模糊越厉害，第四个color是阴影的颜色设置 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>文字阴
索引值应用
weixin_48235555的博客
07-01 412
添加索引值 1、index索引值 2、索引值运用：图片切换实例 思路一：全部清除 思路二：消除上一个 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> ul { padding:0; margin:0; } li { lis
js学习-使用选择器来插入内容
weixin_48235555的博客
06-02 308
一、插入文字 1、使用选择器插入内容 2、排除一些不需要插入内容的元素:nocontent <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>使用选择器插入内容</title> <style> h2:before{ content: "Title";
js学习-多栏布局、盒布局、弹性盒布局
weixin_48235555的博客
06-07 299
多栏布局 1、column-count属性 写法： -webkit-column-count: 栏目数； -moz-column-count: 栏目数； 2、column-width属性：指定栏目的宽度 -webkit-column-width: 值； -moz-column-width: 值； 缩小页面时，不会像column-count属性不变栏目数，会根据页面宽度显示恰当的栏目数 3、column-gap属性：指定栏目与栏目之间的距离 -webkit-column-gap: 值； -moz-column
vue获取自定义属性值
最新发布
08-16
可以使用`this.$refs`来获取具有`ref`属性的元素，然后通过`dataset`来获取自定义属性的值。例如： ```javascript (e) { console.log(this.$refs.dataSelf.dataset.index); // 获取到循环中的下标值 } ``` 方法二：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值