javascript 学习总结第二天
函数和对象
对象
声明方式
newObject()
{}
构造函数
元素的操作
.
[]
this
对象的遍历
for in
with简便操作
函数
函数的声明方式
functiondemo(){}
var demo= function(){}
var demo= new Function(‘x‘,‘y‘,‘alert(x+y)‘);
函数的调用
在代码中直接调用
事件触发
赋值给一个变量
注意事项
优先级
在js中定义变量的时候不能跟函数名冲突否则会覆盖函数
参数
参数初始值
声明函数的时候不要给参数设置初始值 (IE浏览器有问题)
参数的个数
调用函数的参数多或者少
如果函数调用的参数个数多于函数声明的参数个数,多于的参数将被‘忽略‘ 如果函数调用的参数个数少于函数声明时的参数个数,那么没有传递的参数默认是undefined
参数可有可无
获取参数列表
arguments对象
返回值
如果不使用return返回一个值的话那么函数的默认返回值是undefined
可以返回一个函数
作用域
变量作用域
javascript代码是相通的
声明的变量只能在当前代码块和同级函数以及同级函数的子函数代码块中有效
如果在函数内部定义变量的时候不加var,那么该变量默认会称为全局变量
函数作用域
声明的函数只能在当前代码块或者同级函数或者同级函数的子函数中使用
重点掌握
对象声明方式
对象的属性和方法的操作方式
.
[]
this
函数的声明方式
fucntion demo(){}
var demo = function(){}
注意点
函数的命名不能跟变量的名字重名
函数参数 (arguments)
作用域
第一种声明方式
<script type="text/javascript">
var Godness = new Object();
Godness.name = ‘高原原‘; //添加属性
Godness.height = ‘4200px‘;
var str = ‘age‘;
Godness[str] = 33; //动态方式添加
delete(Godness.age); //删除属性
var into = ‘name‘;
delete(Godness[into]); //动态方式删除
Godness.type = ‘活泼‘; //修改属性
var foo = ‘height‘;
Godness[foo] = ‘4000px‘; //动态方式修改
//获取
console.log(Godness.hegiht);
//添加方法
Godness.yanxi = function(someone)
{
alert(‘某某正在和‘+someone+‘拍戏‘);
}
Godness.yanxi(‘ccc‘);
console.log(Godness);
//console.log(typeof(Godness));
<script>
第二种方式
<script type="text/javascript">
//第二种方式 {}
//注意属性和属性之间是用,隔开
//属性与方法之间也是使用,隔开
var Cars = {
brand:‘路虎-揽胜‘,
color:‘绿色‘,
price:‘120w‘,
running: function(someone)
{
alert(‘可以跑‘+someone);
},
zairen: function()
{
alert(‘可以载人‘);
}
};
//添加属性
Cars.fadongji = ‘v8‘;
var str = ‘type‘;
Cars[str] = ‘运动型‘;
//删除
delete(Cars.fadongji);
//修改属性
Cars.brand = ‘路虎-极光‘;
//获取属性
//alert(Cars.brand);
//添加方法
Cars.lahuo = function()
{
alert(‘可以拉货‘);
}
//调用
Cars.running(‘美国‘);
console.log(Cars);
</script>
第三种方式构造方法
<script type="text/javascript">
//第三种方式 构造方法
functionStu(name, age, height)
{
this.name= name;
this.age= age;
this.height= height;
this.study=function()
{
alert(‘正在学习中!!!!‘);
}
this.test= function()
{
return‘我叫‘+this.name+‘,今年‘+this.age+‘,身高‘+this.height+‘的我至今有了女朋友‘;
}
}
//实例化
var xx = newStu(‘许晓贤‘,20,‘4450px‘);
var hua = newStu(‘况江华‘,24,‘4500px‘);
//添加属性
// xx.sex = ‘男‘;
// document.write(xx.test());
/*console.log(xx);
console.log(hua);*/
//对象的遍历
for(var i inxx) {
document.write(i+‘=======‘+xx[i]+‘<br>‘);
}
//
/*alert(xx.name);
alert(xx.height);
alert(xx.age);*/
with(xx){
//alert(name);
study();
}
</script>
三种声明方式
<script type="text/javascript">
//第一种声明方式
//注意点 在js中变量名不要和函数名重复 要不然会覆盖函数
function func()
{
alert(‘this is a first‘);
}
var func = 100;
func();
//第二种声明方式
// foo();
var foo = function()
{
alert(‘this is a 第二种‘);
}
//第三种声明方式
var into = new Function(‘x‘,‘y‘,‘alert(x+y)‘);
into(10,10);
</script>
三种调用方法
<div id=‘dvs‘onclick="foo()"></div>
<scripttype="text/javascript">
//第一种调用
functionfunc()
{
//alert(‘first‘);
}
func();
//第二种调用
functionfoo()
{
alert(‘second‘);
}
//第三种调用
functioninto()
{
alert(‘three‘);
}
var str =into;
str();
</script>
<script type="text/javascript">
functionfunc(a, b, c)
{
//alert(a+b+c);
//2+3+undefined NaN
//console.log(a+b+c);
}
func(2,3);
//可以不加参数
functionfoo()
{
alert(‘2345‘);
}
// foo();
//获取参数列表
functioninfo()
{
//console.log(arguments.length);
//console.log(arguments); count()
vartotal = 0;
for(var i = 0; i < arguments.length; i++) {
total+= arguments[i];
};
returntotal;
}
console.log(info(10,3,5,6,7,8,3,56,76,87,98,34,54,787,98,100));
//返回值
functionbar()
{
//return 124;
//returntrue;
//return new Object();
//return null;
//return new Array(12,32);
returnfunction()
{
alert(‘今天天气挺热的!!!!!‘);
}
}
// console.log(bar()());
var str =bar(); //bar()---->function(){ alert(‘2345‘)}
//----------------------------------
/*var str =function()
{
alert(‘今天天气挺热的!!!!!‘);
}
*/
// str();
//
/*(function()
{
alert(‘自己调用自己‘);
})()*/
</script>
<script type="text/javascript">
var names =‘jack‘;
</script>
<scripttype="text/javascript">
alert(names+age);
</script>
变量作用域
<scripttype="text/javascript">
//变量的作用域
// var res =100;
// info =200;
var info =null;
functionfunc()
{
//alert(res);
//var res = 200;
/*functionfoo()
{
alert(res);
}
foo();*/
// varrow = 200;
row =200;
info =300;
}
func();
//alert(info);
//函数作用域
function z()
{
functionx()
{
alert(‘水哥,你黑不到我了....‘);
}
//x();
functiony()
{
function r()
{
x();
}
r();
}
y();
}
z();
</script>
添加样式
<div id=‘divs‘></div>
<img src="" >
<script type="text/javascript">
//添加样式
//获取div元素 通过id get获取 Element 元素 By通过 Id
var divs = document.getElementById(‘divs‘);
// console.log(divs);
divs.style.width = ‘160px‘;
divs.style.height = ‘160px‘;
divs.style.background = ‘lightblue‘;
divs.style.marginLeft = ‘100px‘; //单驼峰
//获取样式
//注意: 使用style获取样式的时候 只能获取行内样式的值
var w = divs.style.width;
var ba = divs.style.background;
/*console.log(w);
console.log(ba);
*/
//设置属性
// divs.setAttribute(‘class‘,‘cur‘);
//divs.setAttribute(‘src‘,‘./2.jpg‘);
//单击事件
/*divs.onclick = function()
{
divs.setAttribute(‘class‘,‘cur‘);
}*/
//鼠标放上去的事件
/*divs.onmouseover = function()
{
divs.setAttribute(‘class‘,‘cur‘);
divs.innerHTML = ‘景水是个好‘;
divs.style.bacgroung = ‘green‘;
divs.style.marginLeft = ‘20px‘;
divs.style.marginTop = ‘20px‘;
}*/
//鼠标离开事件
divs.onmouseout = function()
{
divs.setAttribute(‘class‘,‘‘);
divs.innerHTML = ‘‘;
divs.style.bacgroung = ‘‘;
divs.style.marginLeft = ‘‘;
divs.style.marginTop = ‘‘;
}
//setInterval()
//计时器
var i = 0;
var into = null;
into = setInterval(function(){
//获取左边的偏移量
var l = divs.style.marginLeft;
console.log(typeof(l));
//距离的基础上+步数
var ls = parseInt(l) + 10;
//把改变之后的距离给到div的左边的偏移量
divs.style.marginLeft = ls+‘px‘;
divs.innerHTML = i++;
// console.log(l);
// console.log(123);
},1000);
divs.onmouseover = function()
{
clearInterval(into);
}
//添加文本
// divs.innerHTML = ‘景水是个好人‘;
/*function func(obj)
{
// alert(12345);
}*/
</script>
鼠标移动事件
<div id=‘dvs‘></div>
<scripttype="text/javascript">
var dvs =document.getElementById(‘dvs‘);
//鼠标移上去的事件
dvs. function()
{
/*dvs.style.marginLeft= ‘20px‘;
dvs.style.marginTop= ‘20px‘;
dvs.style.border= ‘solid 3px purple‘;*/
dvs.setAttribute(‘class‘,‘cur‘);
}
dvs. function()
{
/* dvs.style.marginLeft = ‘‘;
dvs.style.marginTop= ‘‘;
dvs.style.border= ‘‘;*/
dvs.setAttribute(‘class‘,‘‘);
}
</script>
