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="" alt="">
<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>