javascript-初级-day02-this关键字

day01-获取元素的第二种方法

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
/*
#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]
                            // 在用 TagNasme 的时候，必须要加上：[]
*/
window.onload = function (){
    //    var oUl = document.getElementById('list');
    var oUl = document.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');
    
    // document.getElementsByTagName('li');
    
    // alert( aLi.length );
};
</script>
</head>

<body>

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

<ol>
    <li></li>
    <li></li>
</ol>

</body>
</html>

View Code

day02-获取元素的第二种方法

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>
window.onload = function (){
    // document.title = 123;
    // document.body.innerHTML = 'abc';
    var aBtn = document.getElementsByTagName('input');
    //getElementByIdq前面只能是document找到一个元素  getElementsByTagName前面可以是document也可以是别的元素，找到一个集合
    // alert(aBtn.length);
    
    document.body.innerHTML = '<input type="button" value="按钮" /><input type="button" value="按钮" /><input type="button" value="按钮" />';
    
    // alert(aBtn.length);
    aBtn[0].onclick = function (){ alert(1); };
    aBtn[1].onclick = function (){ alert(1); };
    aBtn[2].onclick = function (){ alert(1); };
    
    // 重复执行某些代码
    // 每次执行的时候，有个数字在变化
};
</script>

</head>

<body>
</body>
</html>

View Code

day03-初试for循环

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>

// 循环：

/*
var i = 0;
for ( ; i<3; ) {
    alert(1);
    i++;
}

1) var i=0;

2) i<3;            关键！！！！
3) 括号里面的所有代码
4) i++
*/

for(var i=0; i<3; i++){
    // alert(i);
}
// alert(i);            // 3

</script>

</head>

<body>
</body>
</html>

View Code

day04-循环简单应用

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
li { height:30px; border-bottom:1px solid #333; }
</style>
<script>
window.onload = function (){
    var oUl = document.getElementById('list');
    var aLi = oUl.getElementsByTagName('li');
    var arr = [ '今天', '明天', '后天' ];
    var len = arr.length;
    
    /*
    aLi[0].onclick = function (){ alert(1); };
    aLi[1].onclick = function (){ alert(1); };
    aLi[2].onclick = function (){ alert(1); };
    */
    // aLi.onclick = function (){ alert(1); };
    
    for( var i=0; i<len; i++ ){
    
        aLi[i].innerHTML = arr[i];
        
        aLi[i].onclick = function (){
            // alert(i);   i => 3
        };
    }
};
</script>
</head>

<body>

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

</body>
</html>

View Code

[循环包函数得到的是循环最终的值]

[循环中性能的小技巧：先把len保存下来，然后将len常量放入循环内，减少len的重复计算]

[循环中性能小技巧：如果向一个标签插入多个元素，先避免直接插入，将数据填充完整后一次性插入效果更佳]

day05-for循环生成坐标

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<style>
div { width:50px; height:50px; background:red; position:absolute; top:0; left:0; font-size:30px; text-align:center; line-height:50px; color:#fff; }
</style>

<script>
window.onload = function (){
    var aDiv = document.getElementsByTagName('div');
    
    for( var i=0; i<11; i++ ){
        document.body.innerHTML += '<div>' + i + '</div>';
    }
    
    for( var i=0; i<aDiv.length; i++ ){
        aDiv[i].style.left = 10 + i*50 + 'px';
        aDiv[i].style.top = 10 + i*50 + 'px';
    }
    

    
};
</script>
</head>

<body>



</body>
</html>

View Code

day06-for套for

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>

var arr = [
    [ 1,2,3,4,'4+' ],
    [ 4,5,6 ],
    [ 7,8,9 ]
];

// arr[1][2]

for( var i=0; i<arr.length; i++ ){
    // arr[i][0]
    // arr[i][1]
    // arr[i][2]
    for( var j=0; j<arr[i].length; j++ ){
        // alert( arr[i][j] );
    }
}

// for( var i=0; ){}
// for( var i=0; ){}

window.onload = function (){
    var oUl = document.getElementById('list');
    var aUl = oUl.getElementsByTagName('ul');
    var len = aUl.length;
    var aLi = null;        // 空
    
    for( var i=0; i<len; i++ ){
        aLi = aUl[i].getElementsByTagName('li');
        
        for( var j=0; j<aLi.length; j++ ){
            aLi[j].style.border = '1px solid red';
        }
    }
};
</script>

</head>

<body>

<ul id="list">
    <li>
      <h2>我的好友</h2>
    <ul>
        <li>莫涛</li>
        <li>张森</li>
        <li>杜鹏</li>
    </ul>
  </li>
  <li><ol><li>no</li><li>no</li><li>no</li></ol></li>
    <li>
      <h2>我的坏友</h2>
    <ul>
        <li>莫小涛</li>
        <li>张小森</li>
    </ul>
  </li>
  <li><ol><li>no</li><li>no</li><li>no</li></ol></li>
    <li>
      <h2>我的黑名单</h2>
    <ul>
        <li>莫张</li>
    </ul>
  </li>
</ul>

</body>
</html>

View Code

day07-cssText

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<style>
div { width:100px; height:100px; border:1px solid #333; }
</style>

</head>

<body>

<div id="div1">123</div>

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

<script>
var oDiv = document.getElementById('div1');
var oBtn = document.getElementById('btn1');

oDiv.onclick = function (){
    // oDiv.style.width = '200px';
    oDiv.style.cssText = ' width:200px; height:200px; ';
};
oBtn.onclick = function (){
    // oDiv.style.width = '100px';
    oDiv.style.cssText = '';
};
//css样式使用oDiv.style.cssText是全部替换现有元素样式，style原有值不替换
</script>

</body>
</html>

View Code

day08-生成新闻

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>
window.onload = function (){
    var oBtn = document.getElementById('btn1');
    var oUl = document.getElementById('list');
    var arr = [
        '山西省委附近多次爆炸 官方称尚不确定是恐怖袭击',
        '甘肃张掖明令禁止转基因 书记:无力辨别只能禁止',
        '多地制定雾霾预案限行限排被批治标不治本',
        '韩媒抱怨中国雾霾侵袭韩国 称其为"黑色灾难" ',
        '伊朗革命卫队高官在叙利亚当"志愿者"被杀(图)'
    ];
    
    /*
        思路：
        1、按钮找麻烦 （用户体验不太好）
        2、先清空，再生成
        3、判断
    */
    
    var onOff = true;
    
    oBtn.onclick = function (){
        
        // oBtn.disabled = true;
        // oBtn.style.display = 'none';
        
        // oUl.innerHTML = '';
        
        // onOff = false;                no!!!!
        
        if( onOff ) {
            
            // onOff = false;                ok
            
            for( var i=0; i<arr.length; i++ ){
                oUl.innerHTML += '<li>' + arr[i] + '</li>';
            }
            // onOff = false;                ok
        }
        onOff = false;
    };
};
</script>

</head>

<body>

<input id="btn1" type="button" value="自动生成5条新闻" />
<ul id="list" style="border:1px solid red;"></ul>

<script>
alert( document.getElementById('list').style.border );
</script>

</body>
</html>

View Code

day09-this

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>

// this    : 这个
// this： 指的是调用 当前 方法（函数）的那个对象

function fn1(){
    // this
}
// fn1();            this => window
// oDiv.onclick = fn1;            this => oDiv
/*
oDiv.onclick = function (){
    fn1();                    fn1() 里的this => window
};

<div onclick="    this     fn1();      "></div>     fn1(); 里的 this 指的是 window
*/


// alert( this );        // object window

// window 是 JS “老大”
// window.alert( this );

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

</head>

<body>

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

<input id="btn2" type="button" onclick=" fn1(); " value="按钮2" />

<script>
var oBtn = document.getElementById('btn1');
// oBtn.onclick = fn1;
oBtn.onclick = function (){
    // this
    fn1();
};
</script>

</body>
</html>

View Code

day10-this的应用1

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<script>

/*
alert(this);            window

fn1(this);
function fn1(obj){
    obj => window
}

oDiv.onclick = function (){
    this
    fn1(this);
};
function fn1(obj){  obj => oDiv }
*/

window.onload = function (){
    var aBtn = document.getElementsByTagName('input');
    var that = null;            // 空
    
    for(var i=0; i<aBtn.length; i++){
        /*
        aBtn[i].onclick = function (){
            // this.style.background = 'yellow';
            
            that = this;
            
            fn1();
        };
        */
        aBtn[i].onclick = fn1;
    }
    
    function fn1(){
        // this        =>  window
        // that.style.background = 'yellow';
        
        // this.style.background = 'red';
    }
};
</script>

</head>

<body>

<input type="button" value="按钮1" />
<input type="button" value="按钮2" />
<input type="button" value="按钮3" />

</body>
</html>

View Code

day11-this的应用2

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
li { width:100px; height:150px; float:left; margin-right:30px; background:#f1f1f1; position:relative; z-index:1; }
div { width:80px; height:200px; background:red; position:absolute; top:75px; left:10px; display:none; }
</style>
<script>
window.onload = function (){
    var aLi  = document.getElementsByTagName('li');
    var that = null;
    
    for( var i=0; i<aLi.length; i++ ){
        aLi[i].onmouseover = function (){
            that = this;
            fn1();
        };
        aLi[i].onmouseout = function (){
            this.getElementsByTagName('div')[0].style.display = 'none';
        };
    }
    
    function fn1(){
        that.getElementsByTagName('div')[0].style.display = 'block';
    }
};
</script>
</head>

<body>

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

</body>
</html>

View Code

posted @ 2019-02-24 18:47 三号小玩家阅读(167) 评论(0) 编辑收藏举报

刷新页面返回顶部

三号小玩家

javascript-初级-day02-this关键字

国之殇，未敢忘！

南京大屠杀!

731部队!

以及核污染水排海等一系列全无人性的操作，购买他们的食品和为它们提供帮助只会更加变本加厉的害你，呼吁大家不要购买日本相关产品

昭昭前事，惕惕后人

吾辈当自强，方使国不受他人之侮！

公告