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