一、函数传参
1、函数传参:参数就是占位符----函数里定不下来的东西
var a1=function(){alert(123);};function a(f){// 相当于 f=a1f();};a(a1);function skip(skipPath){var oLink1 = document.getElementById('link1');oLink1.href=skipPath;}function setStyle(name,value){var oDiv1 = document.getElementById('div1');oDiv1.style[name]=value;}
二、操作属性的第二种方式
1、两种设置属性的方法
obj.value="abcd" --------- obj['value']="abcd"
[ ]可以代替所有的. oDiv.style.background 和 oDiv[style]['background']一样
.后面只能带原本就有的属性,不能带字符串。即使a是个参数,它也以为是个属性a。
[ ]具体属性名可随意改变,可存变量、参数、字符串。
属性可以变时用[ ];其他都可以用.
function fn(a,b){
var oBox=document.getElementById('box');
oBox.style.a=b; //这样不行
oBox.style[a]=b; //正确写法
}
2、什么时候用:要改的属性不固定
字符串和变量——区别和联系
3、样式优先级
行内>class>标签>*
元素.style.属性=……是修改行间样式,之后再修改className不会有效果
三、提取行间事件
1、提取事件的几种方法
(1)function 名字(){ }
oBtn.onclick=名字
(2)oBtn.onclick=function(){ }
例一:<input id="btn" type="button" onclick="fn()" />var oBtn=document.getElementById('btn');oBtn.value=4444;function fn(){alert(1);}oBtn.onclick=fn; // 只需要放函数名, 不加括号,否则就是执行例二:var oBtn=document.getElementById('btn'); //读到此行时,input还没加载,所以找不到元素var oBox=document.getElementById('box');oBtn.value=444; //报错oBtn.onclick=function(){oBox.style.background='blue';}<input type="button" id="btn" /><div id="box"></div>
2、window.onload=function(){ }在页面加载后才开始执行
四、操作一组元素
1. document.getElementsByTagName可从document获取,也可从某个元素下获取,缩小选择范围;且不限层级。即使只有一个div,获取出来也是一组。
数组:用来存放一组东西,但是不能直接操作数组,下标从0开始
2. document.getElementById只能从document下获取。
3. children 子级,只是一级、一组下标,不管是什么标签只要是子级都获取。
4、不能直接给一组元素改变样式:
aDiv.style.background='blue'; //不能这样写,不能直接给一组元素改变样式。应该用循环while遍历
改进:aDiv[0].style.background='blue';或者:aDiv.style.background='blue';
四、循环——反复去做一件事
1、什么时候用循环:给一组元素干同样的事情。
2、一个循环的四个部分
(1)初始化、条件、语句、自增
3、while(条件){语句}
[1]下标,代表第几个,从零开始,0代表第一个,最后一个永远比length少一个。
i=i+1;即 i++,i+=1; i=i--;即i--; i-=1;
i=i+2;即i+=2; i*=2;即i=i*2; i/=2即i=i/2;
例子:var i=0;
while(i<5){alert(i);i++;}alert('条件已经走完');
4、for循环----- for(初始值;条件;自增){}
(1) for(var i=0;m=aLi.length;i<m;i++){}//性能更好一些
(2) 循环里的事件里面不能用i,因为循环结束之后才触发了事件。变量不进行人为更改,就永远都不会改。
(3)for循环适合做次数固定(能获取固定的length)的循环。
五、this
1. this---->当前用事件函数的对象,触发事件的元素本身
2. 如果不是事件函数----->window
for(var i=0;i<aLi.length;i++) {
aLi[i].onmouseover=function() {
function fn1() {
alert(this);
//window 只会去找包着this的第一层函数
};
fn1();
};
};
顶部菜单:
window.onload=function(){
aLi=document.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i].onmouseover=function(){
var oDiv=this.children[0];
if(oDiv){
oDiv.style.display='block';
var oA=oDiv.children[0];
if(oA){
oA.onclick=function(){
oDiv.style.display='none';
}
}
}
}
aLi[i].onmouseout=function(){
var oDiv=this.children[0];
if(oDiv){
oDiv.style.display='none';
}
}
}
}
七、焦点问题和鼠标按下抬起
自动聚焦:<input type="text" autofocus />
1. onfocus 获得焦点
var aInput=document.getElementByTagName('input');
for(var i=0;i<aInput.length;i++){
aInput[i].onfocus=function(){
alert(this.value);
}
}
2. onblur 失去焦点
例一:搜索框
var oSpan=document.getElementById('span1');
var oTex=document.getElementById('tex');
var oUl=document.getElementById('ul1');
var aLi=oUl.children;
oTex.onfocus=function(){
oSpan.style.display='none';oUl.style.display='block';
};
oTex.onblur=function(){
if(this.value==''){
oSpan.style.display='block';
};oUl.style.display='none';
};
for(var i=0;i<aLi.length;i++){
aLi[i].onmousedown=function(){
var str=this.children[0].innerHTML;oTex.value=str;
};
};
<div>
<span id="span1">请输入文本</span>
<input type="text" id="oInput" />
<ul>
<li><a href="javascript:;">菜单1</a></li>
<li><a href="javascript:;">菜单2</a></li>
<li><a href="javascript:;">菜单3</a></li>
</ul>
</div>
3. onmousedown 鼠标按下的时候
onmouseup 鼠标抬起
oTxt.onmousedown=function(){
alert(111);
}
4. innerHTML----获取或修改html内容(该元素必须是双标签的)如果内容有标签,则连标签一起返回
window.onload=function(){
var oBox=document.getElementById('box');
oBox.onclick=function(){
oBox.innerHTML=333333; //会覆盖原来的内容
oBox.innerHTML=''; //清空
oBox.innerHTML='<h1>标题</h1>'; //创建标签
}
}
js简易日历
例子:乘法表
oUl=document.getElementsById('ul1');
for(var i=0;i<9;i++){
var s='<li>';
//循环嵌套i不能同名
for(j=0;j<i+1;j++){
s+='<span>'+(j+1)+'*'+(i+1)+'='+(i+1)*(j+1)+'</span>';
}
s+='</li>';
oUl.innerHTML+=s;
}
八、全选反选不选
window.onload=function(){
var oBtn1=document.getElementById('btn1');var oBtn2=document.getElementById('btn2');var oBtn3=document.getElementById('btn3');var aInput=document.getElementById('box').getElementsByTagName('input');oBtn1.onclick=function(){
for(var i=0;i<aInput.length;i++){
aInput[i].checked=this.checked;
};oBtn2.checked=false;oBtn3.checked=false;if(!this.checked){
oBtn2.checked=true; //点全选切换 如果达到全不选的效果 第二个全选框得勾上
};
};for(var i=0;i<aInput.length;i++){
aInput[i].onclick=function(){var count=0;for(var j=0;j<aInput.length;j++){if(aInput[j].checked){count++;}}if(count==aInput.length){oBtn1.checked=true;}else{oBtn1.checked=false;}}
}oBtn2.onclick=function(){
for(var i=0;i<aInput.length;i++){
aInput[i].checked=false;
};oBtn1.checked=false;oBtn3.checked=false;
};oBtn3.onclick=function(){
for(var i=0;i<aInput.length;i++){
/*if(aInput[i].checked){aInput[i].checked=false;}else{aInput[i].checked=true;};*/
aInput[i].checked=!aInput[i].checked;
};
oBtn1.checked=false;oBtn2.checked=false;
};
};
九、选项卡
在循环的事件里,不要用i,改用this,index
1. <input a="0" 在标题里直接写自定义属性,只有IE8及以下才能直接获取xxx.a
2. HTML加载顺序:
加载HTML——>高级浏览器过滤掉自定义属性(不等于取不着)——>)JS
解决:自定义属性在第三步走js的时候才加上
多个选项卡
window.onloadd=function(){
f('box','div','onclick');
f('box2','p','onmouseover');
f('box3','div','onclick');
//每调用一次函数,都是一个新的函数,相当于复制函数。
function f(id,tagname,mouse){
var oBox=document.getElementById(id);
var aBtn=oBox.getElementsByTagName('input');
var aDiv=oBox.getElementsByTagName(tagname);
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i][mouse]=function(){
for(var i=0;i<aDiv.length;i++){
aBtn[i].className='';
aDiv.className='';
}
this.className='active';
aDiv[this.index].className='show';
}
}
}
}
十. 焦点图
window.onload=function(){
var oBox=document.getElementById('box');
var oPic=oBox.children[0];
var oNum=oBox.children[1];
var aLi1=oPic.children;
var aLi2=oNum.children;
for(var i=0;i<aLi2.length;i++){
aLi2[i].index=i;
aLi2[i].onmouseover=function(){
for(var i=0;i<aLi2.length;i++){
aLi2[i].className='';
aLi1[i].className='';}
this.className='active';
aLi1[this.index].className='active';
}
}
};
相关推荐
NULL 博文链接:https://youzhibing.iteye.com/blog/2166047
connect函数的几个用法 通过分别演示信号有无参数与对应的有无参数的槽函数 能够很好地了解connect的用法 【包括对lambda函数的应用】
第二种情况:query传参(vue版本<2.2) 快捷操作页面: html: js: 目标页面: 注意事项: 由于query相当于get请求,参数是拼接在url后面的,所以刷新不会消失。 相关说明: 重点就在于目标页面这个对于路由的监听...
bat批处理,指定文件夹,通过函数传参
将多个变量放到一个结构体中,减少函数传递时的多个参数传进传出的复杂性 结构体传进函数时,是以引用的形式传入的,不是以指针的形式。
个人写的python函数传参值改变的问题脚本,自己学习用的,大家可以拿来参考。 有问题欢迎大家指出。
python函数和函数传参ppt.pptx
python函数和函数传参ppt.zip
JavaScript提供了 4 种函数调用: 一般形式的函数调用 作为对象的方法调用 使用 call 和 apply 动态调用 使用 new 间接调用 5.2.2 函数的调用方式 2、函数的调用方式 一般形式的函数调用,是常见的函数调用方式,...
如何向回调函数中传参数 最近写JS经常会因为向回调函数中传参而头疼,今天总结一下向回调函数中传参的方法,以后的应用中就不用在到处去找了。
首先讨论函数之前,先弄清楚基本类型值与引用类型值的复制问题 一、数据类型的复制分析 内存分为栈区(stack)和堆区(heap) ,如果将内存看成一本书,栈好比是书的目录,而堆就是书的内容,基本类型可以看成内容...
计算机后端-PHP视频教程. php与mysql加强- 02. php加强26-函数传参方式.wmv
构造函数是一种特殊方法,构造函数没有返回值,连void也不能写,必须public 构造函数的名称必须和类名一样
主要介绍了Python函数定义及传参方式详解(4种),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
资源名称:Javascript完全学习手册内容简介:本书分4篇14章,介绍Javascript的知识,全书内容包括:Javascript语法基础、流程控制、函数、内置对象编程、文档对象模型DOM与事件驱动、处理XML、...
在Laravel控制器写两个方法,一个是在内部创建一个闭包函数,一个是执行传过来的闭包函数,测试闭包的写法,use使用外部变量,及闭包函数的传参。如下: //测试闭包传参及use使用外部变量 public function ...