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>
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>
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>
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>
[循环包函数得到的是循环最终的值]
[循环中性能的小技巧：先把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>
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>
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>
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>
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>
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>
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>
javascript-初级-day02-this关键字的更多相关文章
- javascript call与apply关键字的作用
apply接受两个参数.第一个参数指定函数体内this对象的指向,第二个参数为一个带下标的集合. call则是apply的语法糖,如果参数数量固定,则可以不用带下标的集合传第二个参数. 1 2 3 4 ...
- 转载 深入理解JavaScript中的this关键字
转载原地址: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html 深入理解JavaScript中的this关键字 1. 一 ...
- JavaScript中的this关键字的用法和注意点
JavaScript中的this关键字的用法和注意点 一.this关键字的用法 this一般用于指向对象(绑定对象); 01.在普通函数调用中,其内部的this指向全局对象(window); func ...
- 如何理解JavaScript中的this关键字
前言 王福朋老师的 JavaScript原型和闭包系列 文章看了不下三遍了,最为一个初学者,每次看的时候都会有一种 "大彻大悟" 的感觉,而看完之后却总是一脸懵逼.原型与闭包 可以 ...
- 关于javascript中的this关键字
this是非常强大的一个关键字,但是如果你不了解它,可能很难正确的使用它. 下面我解释一下如果在事件处理中使用this. 首先我们讨论一下下面这个函数中的this关联到什么. function doS ...
- 浅显易懂的理解JavaScript中的this关键字
在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余. 1. 一般用处 对 ...
- JavaScript中的this关键字
在JavaScript中,函数的this关键字的行为与其他语言相比有很多不同.在JavaScript的严格模式和非严格模式下也略有区别. 在绝大多数情况下,函数的调用方式决定了this的值.this不 ...
- 正确理解JavaScript中的this关键字
JavaScript有this关键字,this跟JavaScript的执行上下文密切相关,很多前端开发工程师至今对this关键字还是模棱两可,本文将结合代码讲解下JavaScript的this关键字. ...
- 用自然语言的角度理解JavaScript中的this关键字
转自:http://blog.leapoahead.com/2015/08/31/understanding-js-this-keyword/ 在编写JavaScript应用的时候,我们经常会使用th ...
- 【转】JavaScript中的this关键字使用的四种调用模式
http://blog.csdn.net/itpinpai/article/details/51004266 this关键字本意:这个.这里的意思.在JavaScript中是指每一个方法或函数都会有一 ...
随机推荐
- Miller Rabin 详解 && 小清新数学题题解
在做这道题之前,我们首先来尝试签到题. 签到题 我们定义一个函数:\(qiandao(x)\) 为小于等于 x 的数中与 x 不互质的数的个数.要求 \(\sum\limits _{i=l}^r qi ...
- 定制input元素
定制input元素 input元素可以用来生成一个供用户输入数据的简单文本框.其缺点在于用户在其中输入什么值都可以.有时这还不错,但是有时设计者可能希望让用户输入特定类型的数据.在后一种情况下,可以对 ...
- 在IDEA中创建SpringBoot项目01
1.选择创建项目 2.填写项目信息 3. 4. 5.Finish后会下载,之后生成目录结构: 6.在自己的包目录结构下添加了Controllr和Entiy测试项目: Controller: 1 pac ...
- 关于C、Java、Python程序运行耗时及内存用量
最近没有刷题,而是在PTA找几个题目寻找有关程序输入流问题以及各种语言在运行时对计算机消耗内存的问题, 以免很多同学解题的时候发现自己做的对但是出现运行超时的问题:针对运行内存,肯定用C/C++的同学 ...
- 命名空间、作用域、LEGB法则、垃圾回收机制
一.命名空间.作用域.LEGB法则. 1.命名空间和作用域 : 命名空间:变量名称与值的映射关系 作用域:变量作用的区域,即范围. 注意:class/def/模块会产生作用域:分支语句,循环语句,异常 ...
- linux系统（centos）下su和sudo命令的区别
linux系统(centos)下su和sudo命令的区别 区别 我们在日常使用过程中,这2个命令很多时候能达到相同的效果,对细节区别十分模糊,这里进行简单的解释和区分.希望大家能够正确使用这2个命令, ...
- 初学Python-day7 案例（乘法口诀 已更新！！）
案例::(乘法口诀) 用for循环做乘法口诀: 1 # 第一种 2 for i in range(1, 10): 3 for j in range(1, i + 1): 4 print('{} * ...
- noj加1乘2平方
广度优先搜索典例 00 题目 描述: 最简单的队列的使用#include <iostream>#include <queue>using namespace std;queue ...
- Harbour.Space Scholarship Contest 2021-2022 (Div. 1 + Div. 2) Editorial题解
A 略,发现只有当末尾为9时才满足条件.. B 简单模拟,注意数组大小!!! C 简单模拟. D 比较暴力的一个做法就是每次找一个开始匹配的起始点,然后每次不同时向后跳2就行了. 注意这里最后还要判断 ...
- P4430 小猴打架
P4430 小猴打架 题目意思就是让你求,在网格图中(任意两点都有边)的生成树的个数(边的顺序不同也算不同的方案). 首先我们考虑一个生成树,由于一定有n-1条边,单单考虑添加边的顺序,根据乘法原理, ...