這樣是把網站分為了上中下三部分,最上面是頭部,中間是主要内容,下面是底部的資訊
當滑動右邊滾動條的時候其他區域保持不變隻有aaa占的部分會發生滾動
實作代碼:
這種情況是當滑動滾輪的時候,左邊菜單不會跟着走,即:
因為滑動,左邊已經沒有菜單,實作代碼如下:
其實這裡如果想要和布局一有相同的效果隻需要更改一個地方就可以實作:(這種設定用的也是最多的)
這裡需要記住一個位址:
http://fontawesome.io/
這個位址中存放了我們需要的各種圖示
如下所示
将檔案下載下傳下來
通過在頭部導入:
<link rel="stylesheet" href="font-awesome/css/font-awesome.css" />
做出的效果如下:
當把滑鼠放在頭像的時候顯示資料和登出資訊,圖檔中的圖示就是從下載下傳的圖示中直接引用的
實作代碼如下:
通常情況下我寫函數是如下所示:
如果寫成匿名函數如下所示:
上面的為普通函數,下面的為自執行函數
JSON.stringify(obj) 序列化即将對象轉換為字元串
JSON.parse(str) 反序列化即将字元串轉換為對象類型
decodeURI() URI中未轉義的字元
decodeURIComponent() URI元件中的未轉義字元
encodeURI() URI中的轉義字元
encodeURIComponent() 轉義URI元件中的字元
escape() 對字元串轉義
unescape() 給轉義字元串解碼
URIError 由URI的編碼和解碼方法抛出
示範例子如下:
是以轉義的一個應用就是:将資料轉義後儲存在cookie
python:
val=eval(表達式)
=exec(執行代碼)
JavaScript
eval是python中eval和exec的集合
Date類
var d = new Date()
d.getXXX 表示擷取
d.setXXX 表示設定
其他語言大部分是以代碼塊為作用域
public void Func(){
if(1==1){
string name = "C#"
}
console.writeline(name)
}
如果按照上面的執行Func()調用函數就會報錯,因為這裡是以代碼塊為作用域
即if後面的{}為作用域,name是在if的代碼塊裡定義的是以當出了這個代碼塊就無法
找到定義的name
是以代碼需要改為如下:
public void Func(){
console.writeline(name)
def func():
if 1==1:
name = "python"
print(name)
func()
python的作用域和C#中就不相同了,python的這種調用方式就不會報錯
因為在python中是以函數作為作用域
作用域也是以函數作為作用域
function func(){
var name = "js"
console.log(name)
關于js的作用域的一個總結:
以函數作為作用域
函數的作用域在函數未被調用之前,已經建立
函數的作用域存在作用域鍊,并且也是在被調用之前建立
函數内部變量提前聲明
function Foo(n){
this.name=n;
}
var obj = new Foo('ww');
this代指對象(類似python 中的self)
建立對象時,new函數()
#Foo的原型
Foo.prototype={
"sayName":function(){
console.log(this.name)
調用
obj1 = new Foo('we')
obj1.sayName()
obj2=new Foo('ss')
obj2.sayName()
直接查找:
var obj = document.getElementById(‘i1’)
間接查找:
文本内容操作:
innerText 僅文本
innerHTM 全部内容
value
input value擷取目前标簽中的值
select value擷取選中的value值(selectedIndex)
textarea value擷取目前變遷中的值
下面可以通過上述的内容實作一個小功能
當輸入框獲得焦點的時候輸入框中内容清空,離開恢複
在最新的浏覽器上可以通過如下實作:
<input type="text" placeholder="請輸入關鍵字" >
obj.attributes 擷取所有的屬性
obj.getAttribute 設定屬性
obj.removeAttribute 删除屬性
代碼例子:
第一種方式:以字元串形式建立
這樣就實作了點選添加,依次添加一個輸入框
document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag)
這裡有三個參數:beforeBegin、afterBegin、beforeEnd、afterEnd
分别表示在不同的位置插入
第二種方式:(以對象方式建立)
和方式一實作相同的效果
console.log 輸出框
alert 彈出框
confirm 确認框
//url重新整理
location.href 擷取url
location.href 重定向,跳轉
locatioin.reload 重新加載,重新整理
//定時器
setInterval 多次定時器
clearInterval 清除多次定時器
setTimeout 單次定時器
clearTimeout 清除單次定時器
我們之前寫html代碼都是最普通的Dom0的寫法,這種不建議工作中這樣寫,工作中要實作行為,樣式,結構相分離的頁面,即js、css、html相分離
代碼例子如下:
這樣就實作了三部分的分離,而不用和之前之前,将js的調用還放在html語言中
再寫一個例子:
實作的效果就是如下:
滑鼠放在那一行,機會有紅色的背景色
離開的時候紅色機會消失
小結:
這裡可以看出綁定事件兩種方式:
直接綁定:onclick=“xx()”
先擷取dom對象,然後在綁定
document.getElementById(‘xx’).onclick
this 目前觸發事件的标簽
第一種綁定方式:
<input id="i1" type="button" onclick="ClickOn(this)">
function ClickOn(self){
//self 目前點選的标簽
第二種綁定方式
<input id="i1" type="button">
document.getElementById("i1").onclick=function(){
//this 代指目前點選的标簽
第三種綁定方式(dom2)
下面先通過一個例子了解:
這樣就實作了點選同時執行兩個事件
最後的一個參數需要注意:
false:冒泡模型
true:捕捉模型
通過下面例子了解冒泡和捕捉模型
當點選粉色區域的時候先出的是content後出現main
因為參數設定的是flase,是以采用的是冒泡
如果參數設定為true
當點選粉色區域的時候先出的是main後出現content
所有的努力都值得期許,每一份夢想都應該灌溉!