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的情況下 我們的 菜單和內容是一起滾動的
加了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的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 广发银泰信用卡申请多久下卡
- 下一篇: python操作sqlite3 导入cs