python 前端学习_python学习之路7 前端学习3
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)容是一起滾動(dòng)的
加了Overflow則會(huì)和fixed的情況一致
2.
.通過觸擊鼠標(biāo)某位置就會(huì)在該處顯示一個(gè)欄目
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)? 在編譯的時(shí)候自動(dòng)執(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");
我們在一個(gè)類調(diào)用函數(shù)的時(shí)候 引入了一個(gè)原型的概念
Foo.prototype={//創(chuàng)建一個(gè)匿名函數(shù)
"sayName":function(){
console.log(this.name)
}
}//調(diào)用的時(shí)候
obj1.sayName()
Dom補(bǔ)充
1.直接查找
var obj= document.getElementById(' i1 ')
2.間接查找
innnerText 僅文本
innerHTML 全內(nèi)容
value
input value 獲取當(dāng)前標(biāo)簽的值
通過value可以更改select中的option選項(xiàng) 也可以更改其它含有內(nèi)容的標(biāo)簽
3.實(shí)現(xiàn)一個(gè)小功能，以初級(jí)的寫法
我愛你中國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)容”
為某個(gè)標(biāo)簽創(chuàng)建一個(gè)屬性：obj1.setAttribute("value","d")/ 移除一個(gè)屬性obj1.removeAttribute("value")
創(chuàng)建一個(gè)標(biāo)簽，將標(biāo)簽添加到另一個(gè)標(biāo)簽里面：
//將整個(gè)標(biāo)簽放進(jìn)去
functionAddEle()
{var tag = '';
document.getElementById("i1").insertAdjacentHTML("beforeEnd",tag);
}
//將標(biāo)簽的類放進(jìn)去 利用appendChildfunctionAddEle2()
{var tag =document.createElement('input');
tag.setAttribute("type",'text');
tag.style.fontSize="16px";
document.getElementById("i1").appendChild(tag)
}
利用其他標(biāo)簽進(jìn)行提交！
提交
functionsubmitForm(){
document.getElementById("f1").submit();
}
alert(123) //消息提示 放在js中
confirm("內(nèi)容") //確認(rèn)框 正確返回true 錯(cuò)誤返回false
location.href => 獲取當(dāng)前Url
location.href=url //跳轉(zhuǎn)到某個(gè)url ，重定向
o1=setInterval(function(){},1000) //定時(shí)器每隔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寫法的時(shí)候我們要使用this的時(shí)候必須現(xiàn)在標(biāo)簽里穿this作為形參，如果直接在js中調(diào)用那么就相當(dāng)于this是一個(gè)全局變量windows 是沒有效果的
6. 第三種綁定方式 dom2 :
obj.addEventListener("click",funciton(){ },false)；
obj.addEventListener("click",funciton(){ },false)；
這樣我們就實(shí)現(xiàn)了一個(gè)對象可以綁定兩種功能。
參數(shù)false是指事件模型中的冒泡模型
true 則是?捕捉模型
7.詞法分析 學(xué)習(xí)根據(jù)這位老師
http://www.cnblogs.com/zingp/p/6102561.html
總結(jié)
以上是生活随笔為你收集整理的python 前端学习_python学习之路7 前端学习3的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 广发银泰信用卡申请多久下卡
- 下一篇： mysql pmm 布署_给 mysql