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

技术2022-07-11 135

元素获取的第二种方法：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的时候，必须要加上：【】

如果用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循环执行顺序

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

//加载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;

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

选取多个元素

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

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值的变换：

添加索引值

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>

Processed: 0.010, SQL: 9