文章目錄
- 類
- 1.類的宣告
- 2.類的使用
- 3.類的繼承（prototype）
- 物件
- 自定義物件
- 常用物件和方法
- JS事件
- 事件型別
- 5.頁面加載事件
- 1.給合適的HTML加合適的事件
- 2.事件的阻斷
- 3.超鏈接呼叫JS函式
- 1,2,3的代碼粘貼
類
1.類的宣告
function 類名（形參1，形參…）{
this.屬性名1=形參1;
this.屬性名2=形參2;
…}
// 1.類的宣告
function Person(name,age){
this.name = name
this.age = age
this.test = function(a){
alert(a)
}
2.類的使用
var 物件名=new 類名（實參1，實參2…）
// 2.類的使用
var p1 = new Person('張三',66)
var p2 = new Person('李四',18)
p2.address = '北京市'
alert(p1.name)
alert(p2.address)
注：JS類的內容相當于物件的公共內容，每個物件還可以自定義進行擴充
3.類的繼承（prototype）
prototype：實作不同物件之間的資料共享
<script type="text/javascript">
// 1.類的宣告
function Person(name,age){
this.name = name
this.age = age
this.test = function(a){
alert(a)
}
Person.prototype.test1 = function(a){alert('haha')}
}
// 2.類的使用
var p1 = new Person('張三',66)
var p2 = new Person('李四',18)
p2.address = '北京市'
// alert(p1.name)
// alert(p2.address)
alert(p1.test1 === p2.test1)//true
alert(p1.test === p2.test)//false
</script>
作用1.實作某個類的所有子物件的方法區物件的共享，減少記憶體占用
function Person(name,age){
this.name = name
this.age = age
this.test = function(a){
alert(a)
}
Person.prototype.test1 = function(a){alert('haha')}
Person.prototype.user = new User()
}
var p1 = new Person('張三',66)
function User(uname,pwd){
this.uname =uname
this.pwd = pwd
User.prototype.testU = function(){alert('i am user')}
}
p1.user.testU()
物件
自定義物件
原因:很多時候我們沒有辦法預先知道一個物件應該有哪些屬性，所以只能臨時的創建一個物件來自定義屬性存盤資料，來保證資料的完成性，
// 創建一個自定義物件
// 方式1
var obj = Object()
obj.name = 'zs'
obj,age = 23
obj.test=function(){
alert('i am obj')
}
// 方式2
var objj ={}
objj.name = 'ls'
alert(objj.name)
- 1.一般用來存盤資料，不會再自定義物件中存盤函式物件，
- 2.js中的物件屬性和內容是可以自定義的擴充的，不是依賴于類的宣告的，類只是物件公共部分的一種宣告，是為了節省代碼的冗子的，
常用物件和方法
String物件
查找字符位置
- indexOf 回傳指定字符第一次出現的位置，
- lastIndexOf 回傳指定字符最后一.次出現的位置，
function testString(){
var str = 'qwert'
// 大小寫轉換
alert(str.toUpperCase()+':'+str.toLowerCase())
// 字串截取
alert(str.substr(0,1)+':'+str.substring(0,1))//substr是指定位置和長度，substring是指定位置的開始和結尾（不包含結尾）
}
Date物件
注：獲取的是客戶端的時間
function testDate(){
var d = new Date()
alert(d)
//操作日期和時間
alert(d.getYear())//回傳從1900到今天的年份數
alert(d.getFullYear())//回傳當前年份
alert(d.getMonth())//回傳當前月份-1
alert(d.getDate())//回傳當前日期
alert(d.getDay())//回傳當前星期，星期日=0
alert(d.getHours()+':'+d.getMinutes()+':'+d.getSeconds())
}
Math物件
function testMath(){
alert(Math.floor(Math.random()*9000+1000))
alert(Math.ceil(1.23))
}
Global物件
Global物件從不直接使用，并且不能用:new運算子創建，它在Scripting引擎被初始化時創建，并立即使其方法和屬性可用，
-
eval：把字串轉換為js代碼執行
-
isNaN：如果值是NaN，那么isNaN 函式回傳true ，否則回傳false ，使用這個函式的典型情況是檢查 parseInt和parsePloat方法的回傳值，
還有一種辦法，變數可以與它自身進行比較，如果比較的結果不等，那么它就是HaJ，這是因為HaJ是唯一與自身不等的值，
- parseInt方法：回傳與保存在nmString 中的數字值相等的整數，如果nmString 的前綴不能解釋為整數，則回傳HaN (而不是數字)，
- parseInt (“abc”)//回傳NalNo
- parseInt (“12abc”)//回傳12，
function testGlobal(){
eval("var a='qwe'")
if(isNaN(a)){
alert('不是數字')
}else{
alert('是數字')
}
}
alert(parseInt('12qwe'))//12
alert(parseInt('qwe123'))//NaN
JS事件
當行為和動作滿足某種條件下，會觸發事務的執行，
事件型別
-
1.單雙擊事件
- 單擊:
<input type="button" value="單擊測驗" onclick="testOnclick()"/> - 雙擊:
input type="button" value="雙擊測驗" ondblclick="testOndblclick()"/
- 單擊:
-
2.滑鼠事件
- onmouseover
- onmousemove
- onmouseout
-
3.鍵盤事件
- onkeyup
- onkeydown
-
4.焦點事件
- onfocus
- onblur
-
5.頁面加載事件
JS中的事件只有在當前HTML元素有效
一個HTML元素可以添加多個不同事件
一個事件可以監聽觸發多個函式的執行，但是不同的函式要使用分號隔開
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS事件學習</title>
<script type="text/javascript">
// 單雙擊事件
function testOnclick(){alert('我是單擊')}
function testOndblclick(){alert('我是雙擊')}
// 滑鼠事件
function testOnmouseover(){alert('我是滑鼠懸停事件')}
function testOnmousemove(){alert('我被移動了')}
function testOnmouseout(){alert('我被移出了')}
// 鍵盤事件
function testOnkeyup(){alert('我是鍵盤彈起事件')}
function testOnkeydown(){alert('我是鍵盤下壓事件')}
// 焦點事件
function testOnfocus(){
document.getElementById("showdiv").innerHTML="Helloword"
}
function testOnblur(){alert('我是失去焦點')}
// 頁面加載事件
function testOnload(){alert('我是頁面加載事件')}
</script>
<style type="text/css">
#showdiv{
width: 300px;
height: 300px;
border: solid 1px red;
}
</style>
</head>
<body onload="testOnload()">
<hr >
<input type="button" value="單擊測驗" onclick="testOnclick()"/>
<input type="button" value="雙擊測驗" ondblclick="testOndblclick()"/>
<hr >
<br><br>
<div id="showdiv" onmouseover="testOnmouseover()" onmousemove="testOnmousemove()" onmouseout="testOnmouseover">
</div>
<hr >
鍵盤事件：<input type="text" id="" value="" onkeyup="testOnkeyup()"/><br>
鍵盤事件：<input type="text" id="" value="" onkeydown="testOnkeydown()"/>
<hr >
獲取焦點事件：<input type="text" id="" value="" onfocus="testOnfocus()"/><br>
失去焦點事件：<input type="text" id="" value="" onblur="testOnblur()"/><br>
</body>
</html>
1.給合適的HTML加合適的事件
- 1.onchange-----select下拉框
- 2.onload--------body標簽
- 3.單雙擊--------用戶會進行點擊動作的HTML元素
- 4.滑鼠事件-----用戶會進行滑鼠移動操作的HTML元素
- 5.鍵盤事件-----用戶會進行鍵盤移動操作的HTML元素
注：給HTML元素添加多個事件時，注意事件的沖突（當事件觸發條件包含相同的部分的時候，會產生事件的沖突）
2.事件的阻斷
當事件所監聽的函式將回傳值回傳給函式時
false：則會阻斷當前事件所在的HTML標簽功能
true：則繼續執行當前事件所在的HTML標簽功能
3.超鏈接呼叫JS函式
<a href="javascript:testHref();">呼叫函式</a>
1,2,3的代碼粘貼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件2</title>
<script type="text/javascript">
function testOnchange(){
alert('我被改變了')
}
//單擊事件
function testOnclick(){alert('我是單擊事件')}
function testOndblclick(){alert('我是雙擊事件')}
// 事件的阻斷
function testA(){
alert('事件的阻斷')
return false
}
// 超鏈接呼叫JS函式
function testHref(){alert('超鏈接呼叫函式')}
</script>
</head>
<body>
<hr >
<select name="" id="" onchange="testOnchange()">
<option value="">北京</option>
<option value="">上海</option>
<option value="">廣州</option>
</select>
<hr >
<input type="button" value="事件沖突" onclick="testOnclick()" ondblclick="testOndblclick()"/>
<a href="https:www.baidu.com" onclick="return testA()">百度一下</a>
<a href="javascript:testHref();">呼叫函式</a>
</bod>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/278481.html
標籤：其他
上一篇：Request 物件 錯誤 'ASP 0101 : 80004005' 意外錯誤 upfile.asp，行 130 函式回傳