JS类和对象
文章目录
-
- 类
-
- 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="双击测试" ondblclick="testOndblclick()"/
- 单击:
-
2.鼠标事件
- onmouseover
- onmousemove
- onmouseout
-
3.键盘事件
- onkeyup
- onkeydown
-
4.焦点事件
- onfocus
- onblur
-
5.页面加载事件
JS中的事件只有在当前HTML元素有效
一个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函数
1,2,3的代码粘贴
<html>
<head>
<meta charset="utf-8">
<title>事件2title>
<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>