1.頁面布局

PosTion :fixed

Title

.left{float:left;

}.right{float:right;

}.head{height:58px;background-color:#3c3c3c;

}.head .fontsquarl{width:120px;height:58px;background-color:#F22E00;line-height:58px;

}.head .logosuqarl{width:120px;height:58px;background-color:#F22E00;line-height:58px;

}.nick .course{position:fixed;width:200px;background-color:#F22E00;left:0;top:58px;bottom:0;

}.nick .content{position:fixed;background-color:green;left:200px;right:0;top:58px;bottom:0;overflow:auto;

}

我愛你中國

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

positon:absoluted

如果不加overflow的情況下 我們的 菜單和內(nèi)容是一起滾動的

加了Overflow則會和fixed的情況一致

2.

.通過觸擊鼠標某位置就會在該處顯示一個欄目

Title

.left{float:left;

}.right{float:right;

}.head{height:58px;background-color:#3c3c3c;

}.head .fontsquarl{width:120px;height:58px;background-color:#F22E00;line-height:58px;

}.head .logosuqarl{width:120px;height:58px;background-color:#F22E00;line-height:58px;

}.nick .course{position:absolute;width:200px;background-color:#F22E00;left:0;top:58px;bottom:0;z-index:9;

}.nick .content{position:absolute;background-color:green;left:200px;right:0;top:58px;bottom:0;

}.head .logosuqarl:hover{background-color:#dddddd;

}.head .logosuqarl .label{display:none;width:100px;text-align:center;z-index:10;position:absolute;top:58px;right:40px;background-color:#3c3c3c}.head .logosuqarl:hover .label{display:block;

}

我愛你中國

愛你中國

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

ok

3 .setInterval("func()",5000)

4.匿名函數(shù)：

function(){}

使用： setinterval(? function(arg){? console.log(arg);} ,5000)

5.自執(zhí)行函數(shù)：

(function(arg){? console.log(arg);}) (1)? 在編譯的時候自動執(zhí)行內(nèi)部函數(shù)

6.javascript的序列化以及轉(zhuǎn)義

1、序列化

JSON.stringify(obj) ? 序列化

JSON.parse(str) ? ? ? ?反序列化

2、轉(zhuǎn)義

decodeURI( ) ? ? ? ? ? ? ? ? ? URl中未轉(zhuǎn)義的字符

decodeURIComponent( ) ? URI組件中的未轉(zhuǎn)義字符

encodeURI( ) ? ? ? ? ? ? ? ? ? URI中的轉(zhuǎn)義字符

encodeURIComponent( ) ? 轉(zhuǎn)義URI組件中的字符

escape( ) ? ? ? ? ? ? ? ? ? ? ? ? 對字符串轉(zhuǎn)義

unescape( ) ? ? ? ? ? ? ? ? ? ? 給轉(zhuǎn)義字符串解碼

URIError ? ? ? ? ? ? ? ? ? ? ? ? 由URl的編碼和解碼方法拋出

3、eval

JavaScript中的eval是Python中eval和exec的合集，既可以編譯代碼也可以獲取返回值。

eval()

EvalError ? 執(zhí)行字符串中的JavaScript代碼

6.Javascript的面對對象

functionFoo(n)

{this.name=n;

}var obj1=new Foo("we");

我們在一個類調(diào)用函數(shù)的時候 引入了一個原型的概念

Foo.prototype={//創(chuàng)建一個匿名函數(shù)

"sayName":function(){

console.log(this.name)

}

}//調(diào)用的時候

obj1.sayName()

Dom補充

1.直接查找

var obj= document.getElementById(' i1 ')

2.間接查找

innnerText 僅文本

innerHTML 全內(nèi)容

value

input value 獲取當前標簽的值

通過value可以更改select中的option選項 也可以更改其它含有內(nèi)容的標簽

3.實現(xiàn)一個小功能，以初級的寫法

我愛你中國

functionFocus()

{var tag=document.getElementById("i3");var val=tag.value;if(val=="請輸入關(guān)鍵字")

{

tag.value="";

}

}functionBlur()

{var tag=document.getElementById("i3");var val=tag.value;if(val=="")

{

tag.value="請輸入關(guān)鍵字";

}

}

4.樣式操作

classList : classList.add / classList.remove

更改樣式 ： obj.style.功能= “ 需要修改的內(nèi)容”

為某個標簽創(chuàng)建一個屬性：obj1.setAttribute("value","d")/ 移除一個屬性obj1.removeAttribute("value")

創(chuàng)建一個標簽，將標簽添加到另一個標簽里面：

//將整個標簽放進去

functionAddEle()

{var tag = '';

document.getElementById("i1").insertAdjacentHTML("beforeEnd",tag);

}

//將標簽的類放進去 利用appendChildfunctionAddEle2()

{var tag =document.createElement('input');

tag.setAttribute("type",'text');

tag.style.fontSize="16px";

document.getElementById("i1").appendChild(tag)

}

利用其他標簽進行提交！

提交

functionsubmitForm(){

document.getElementById("f1").submit();

}

alert(123) //消息提示 放在js中

confirm("內(nèi)容") //確認框 正確返回true 錯誤返回false

location.href => 獲取當前Url

location.href=url //跳轉(zhuǎn)到某個url ，重定向

o1=setInterval(function(){},1000) //定時器每隔1000執(zhí)行一次

clearInterval(o1);//取消

o2=setTimeour(function(){}.5000) //5秒后只執(zhí)行一次

clearTimeout(o2);//取消

5.樣式行為相分離的寫法

var tag=document.getElementById("i3");if(tag.value=="請輸入關(guān)鍵字")

{

tag.οnfοcus=function()

{this.value="";

}

}

總結(jié)：dom0寫法的時候我們要使用this的時候必須現(xiàn)在標簽里穿this作為形參，如果直接在js中調(diào)用那么就相當于this是一個全局變量windows 是沒有效果的

6. 第三種綁定方式 dom2 :

obj.addEventListener("click",funciton(){ },false)；

obj.addEventListener("click",funciton(){ },false)；

這樣我們就實現(xiàn)了一個對象可以綁定兩種功能。

參數(shù)false是指事件模型中的冒泡模型

true 則是?捕捉模型

7.詞法分析 學習根據(jù)這位老師

http://www.cnblogs.com/zingp/p/6102561.html

總結(jié)

以上是生活随笔為你收集整理的python 前端学习_python学习之路7 前端学习3的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。