python写前端和js_Python之路【第十二篇】前端之jsdomejQuery
JavaScript是一種屬于網絡的腳本語言,已經被廣泛用于Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。
1、存在方式
functionfunc() {
alert("Hello Shuaige")
}
2、javascript代碼塊位置
放在
標簽內的代碼底部，為什么不能放在上面呢？為什么css的就可以放在上面呢？注：css代碼首先要記住html代碼是從上往下解釋的，如果css代碼放在下面，在上面的代碼使用css樣式，如果css代碼塊放在下面就沒有辦法顯示樣式了
另不同的瀏覽器處理請求也不同：正常來說當有一個請求過來時候會把js&css一起發送過去，咱們按照最low的方式理解的話可以這么理解：如果js文件或者js耗時比較久的話，下面的html代碼就無法執行了。
3、變量和函數的聲明
變量：
functionm1() {
alert("shuaige")var name = 'tianshuai'; //var 變量名 ,變量名前面加var為局部變量
age = '18';//注這里需要注意,建議使用的時候一般不要使用全局變量!否則如果代碼量比較大的
//時候容易出現調用混亂的問題
}
m1();
函數
//普通函數
functionfunc() {
alert("Hello Shuaige")
}//定義一個可傳參數的函數
functionfunc(arg) {
alert(arg)
}
func('Superman')//自執行函數,顧名思義,定義好之后可以自動執行
(function f3(arg) {alert(arg)})("Shuaige is good man");
//匿名函數,用處不是很大了解就行
var a = function() {
alert('meinv');
};
a();
js 的展示方法有兩種：
通過網頁來展示
functionf1() {
alert("hello shuai ge")
}
f1()
顯示效果如下：
通過console來展示
functionf1() {
console.log("Hello shuaige ")
}
f1()
顯示效果如下：
打開google chrome F12點擊"Console"，刷新頁面！
4、字符串常用方法及屬性
調試的地方可以在google chrome 上進行測試，F12點擊"Console"
obj.trim() ?去除空格
var a = "Luotianshuai"undefined
a.trimLeft()#去除左邊的空格
"Luotianshuai"a.trimRight()#去除右邊的空格
"Luotianshuai"a.trim()//去除兩邊的空格"Luotianshuai"a"Luotianshuai" #這里可以發現我執行了上面的去除空格的命令之后,實際的值是沒有改變的
b=a.trim()"Luotianshuai" #但是我們可以通過賦值來改變他
b"Luotianshuai"
obj.charAt(index) 根據索引獲取字符串里的字符
b"Luotianshuai"b.charAt(0)"L"b.charAt(1)"u"b.charAt(2)"o"
obj.substring(start,end) ?獲取字符的子序列，類似于切片
b"Luotianshuai"b.substring(0,3)"Luo"
obj.indexOf(char) 去字符串找指定的字符的索引值是多少
b"Luotianshuai"b.indexOf("t")3
obj.length ?獲取字符串的長度
b"Luotianshuai"b.length12
5、數組
聲明一個數組和python中的列表類似
a = [11,22,33,44] #聲明一個數組
[11, 22, 33, 44]
插入
a = [11,22,33,44] #聲明一個數組
[11, 22, 33, 44]
a.push(55) #在數組最后增加一個元素
5 #這里是數組的長度
a
[11, 22, 33, 44, 55]
a.unshift(00) #在數組最前面增加一個元素
6 #長度
a
[0,11, 22, 33, 44, 55]
a.splice(3,0,'insert') #在指定的索引增加一個元素,括號內(3為索引值,0為固定值,要插入的內容)
[]
a
[0,11, 22, "insert", 33, 44, 55]
a.unshift(100)8
移除
a
[100, 0, 11, 22, "insert", 33, 44, 55]
a.pop()#從尾部獲取
55a.shift()#從開頭獲取
100a
[0,11, 22, "insert", 33, 44]
a.splice(3,1) #從指定位置獲取,括號內參數為(元素的索引,后面為索引后的元素個數,包含本身)
["insert"]
a
[0,11, 22, 33, 44]
切片
a
[0,11, 22, 33, 44]
a.slice(1,3)
[11, 22]
a
[0,11, 22, 33, 44]
合并
a = [11,22]
[11, 22]
b= [44,55]
[44, 55]
a.concat(b)
[11, 22, 44, 55]
a
[11, 22]
b.concat(a)
[44, 55, 11, 22]
反轉
a
[11, 22]
a.reverse()
[22, 11]
a
[22, 11]
字符串格式化
a
[22, 11]
a.join('_')"22_11"a
[22, 11]
數組長度
a
[22, 11]
a.length2
6、字典
字典是數組的一種特殊形式
dict1 = {'k1':123,'k2':234} #定義一個字典
Object {k1: 123, k2: 234}
dict1['k1']123
7、循環
js中的循環有兩種方式
#第一種
for (var i=0;i<10;i++) {console.log(i)}#輸出結果,看本代碼下第一圖
#第二種
for (var item ina) {console.log(a[item])}#輸出結果，看本代碼下第二圖
圖二：
8、異常處理
和python中的異常處理類似，代碼如下：
try{var tiancai =isme
}catch(e) {
console.log(e)
}finally{
console.log("shuaige is so smart;")
}
顯示效果如下：
DOM編程
文件對象模型(Document Object Model，簡稱DOM)，是W3C組織推薦的處理可擴展標志語言的標準編程接口。
DOM編程：可以操作html所有的標簽，進行找、操作！他也是javascript的一部分
1、選擇器：
document.getElementById('id') ?查找指定的id，然后我們可以進行操作
123
var i = document.getElementById('id_1'); //查找指定的id
i.innerText = '456'; //innerText修改指定的字符串
顯示效果，當我們打開IE的時候123就會被修改為456
下面操作方式也類似：
document.getElementsByName('name')
123
var i = document.getElementsByName('name_1'); //查找指定的name,這里和ID不一樣name可以有多個
for (var item ini) {
i[item].innerText= '456'; //innerText修改指定的字符串
};
document.getElementsByTagName('tagname')
123
234
var i = document.getElementsByTagName('div'); //查找指定的標簽類型,這里同樣和ID不一樣標簽比如
標簽可以有多個for (var item ini) {
i[item].innerText= '456'; //innerText修改指定的字符串
};
上面的代碼試用jquery會非常方便就不需要重造輪子
2、注冊 事件
首先了解下面的意思：
事件：比如有一個“按鈕”，當你點擊的時候發生什么，雙擊的時候發生什么，這個就叫做事件！
注冊：首先這個按鈕，當你點擊的時候發生的動作，上面的事件要使他出現我們想要的效果，首先得把事件和函數進行綁定，然后把他們注冊到指定標簽上。
常用事件：
onclick
onblur
onfocus
..................
舉例代碼如下：
寫一個input的標簽，首先把事件和函數進行綁定，當你一點這個按鈕的時候就會自動執行，綁定的函數：
shuaige_js_file}
234
functionedit() {vari=document.getElementById('id_1');
i.className= 'color_red';
}
那么恢復按鈕呢？只要在新增一個即可
shuaige_js_file}
234
總結
以上是生活随笔為你收集整理的python写前端和js_Python之路【第十二篇】前端之jsdomejQuery的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网页设计上机考试原题_全国计算机三级信息
- 下一篇： python的pypi安装_python