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的情況下 我們的 菜單和內容是一起滾動的

加了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.匿名函數：

function(){}

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

5.自執行函數：

(function(arg){? console.log(arg);}) (1)? 在編譯的時候自動執行內部函數

6.javascript的序列化以及轉義

1、序列化

JSON.stringify(obj) ? 序列化

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

2、轉義

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

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

encodeURI( ) ? ? ? ? ? ? ? ? ? URI中的轉義字符

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

escape( ) ? ? ? ? ? ? ? ? ? ? ? ? 對字符串轉義

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

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

3、eval

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

eval()

EvalError ? 執行字符串中的JavaScript代碼

6.Javascript的面對對象

functionFoo(n)

{this.name=n;

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

我們在一個類調用函數的時候 引入了一個原型的概念

Foo.prototype={//創建一個匿名函數

"sayName":function(){

console.log(this.name)

}

}//調用的時候

obj1.sayName()

Dom補充

1.直接查找

var obj= document.getElementById(' i1 ')

2.間接查找

innnerText 僅文本

innerHTML 全內容

value

input value 獲取當前標簽的值

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

3.實現一個小功能，以初級的寫法

我愛你中國

functionFocus()

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

{

tag.value="";

}

}functionBlur()

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

{

tag.value="請輸入關鍵字";

}

}

4.樣式操作

classList : classList.add / classList.remove

更改樣式 ： obj.style.功能= “ 需要修改的內容”

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

創建一個標簽，將標簽添加到另一個標簽里面：

//將整個標簽放進去

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("內容") //確認框 正確返回true 錯誤返回false

location.href => 獲取當前Url

location.href=url //跳轉到某個url ，重定向

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

clearInterval(o1);//取消

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

clearTimeout(o2);//取消

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

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

{

tag.οnfοcus=function()

{this.value="";

}

}

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

6. 第三種綁定方式 dom2 :

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

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

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

參數false是指事件模型中的冒泡模型

true 則是?捕捉模型

7.詞法分析 學習根據這位老師

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。