JS对象
1、对象的创建
1.使用原始的方式创建对象
var obj = new Object();
obj.name = "zhangsan"; //为obj对象添加属性
obj.age = 20;
obj.say = function(){ //添加功能(函数/方法)
console.log(this.name,":",this.age);
}
//测试
console.log(obj.name);
console.log(obj.age);
obj.say()
2.使用工厂模式创建对象
function createObject(name,age){
var obj = new Object();
obj.name = name; //为obj对象添加属性
obj.age = age;
obj.say = function(){ //添加功能(函数/方法)
console.log(this.name,":",this.age);
}
return obj;
}
//测试
var ob1 = createObject("lisi",20);
console.log(ob1.name);
ob1.say();
var ob2 = createObject("wangwu",25);
console.log(ob2.name);
ob2.say();
3.使用自定义构造函数创建对象
function Stu(name,age){
this.name = name;
this.age = age;
this.say = function(){
console.log(this.name,":",this.age);
}
}
//测试
var s1 = new Stu("zhaoliu",28);
var s2 = new Stu("xiaoli",21);
s1.say()
s2.say()
4.直接创建自定义对象
var ob = {name:"qq",age:26};
console.log(ob.name);
console.log(ob.age);
var obj={};
obj.name="小白";
obj.say=function () {
console.log("我叫: "+this.name);
};
obj.say();
var obj2={
name:"小明",
age:20,
say:function () {
console.log("我叫: "+this.name+"; 年龄: "+this.age);
},
};
obj2.say();
var a = [10,20,30];
console.log(a.constructor == Array); //获取对象的构造方式
console.log(s1 instanceof Stu);
2、创建数组对象
var a1 = new Array(); //定义一个空数组
var a2 = new Array(10); //定义一个长度为10数组(值:undefined)
var a3 = new Array(10,20,30); //定义一个指定数值的数组
console.log(a1.length);
console.log(a2.length);
console.log(a3.length);
var a4 = [10,20,30,40,50]; //快捷定义数组
//数组的遍历
for(var i=0; i<a4.length;i++){
console.log(i,"=>",a4[i]);
}
for(var i=a4.length-1; i>=0;i--){
console.log(i,"=>",a4[i]);
}
for(var i in a4){
console.log(i,"=>",a4[i]);
}
a4.forEach(function(v){
console.log(v);
});
//数组的方法:
console.log(a4.toString()); //返回以,隔开的字符串
console.log(a4.join(":"));
var aa = [1,2,3];
console.log(aa.concat(4,5));
var b = [10,50,30,20,70,40];
console.log(b.join(":")); //返回以:隔开的字符串
console.log(b.sort().join(":")); //排序
console.log(b.reverse().join(":")); //颠倒数组
var aa = new Array(10,20,30);
console.log(aa.join(":"));
aa.push(50); //从后面加入
aa.push(40);
console.log(aa.join(":"));
aa.pop(); //从后面删除一个
console.log(aa.join(":"));
//清空
console.log(b.join(":"));
b.length = 3;
console.log(b.join(":"));
b = [];
console.log(b.join(":"));
3、Date对象
function formatDate(dd){
if(!dd instanceof Date){
return;
}
var y = dd.getFullYear(),
m = dd.getMonth()+1,
d = dd.getDate(),
hh = dd.getHours(),
mm = dd.getMinutes(),
ss = dd.getSeconds();
//判断单位数字前补零操作
hh = hh<10?'0'+hh:hh;
mm = mm<10?'0'+mm:mm;
ss = ss<10?'0'+ss:ss;
return y+"-"+m+"-"+d+" "+hh+":"+mm+":"+ss;
}
var dd = new Date();
//从1970年1月1日零时零分0秒至今的毫秒数
document.write("时间戳:"+dd.valueOf());
document.write("<h2>"+formatDate(dd)+"</h2>");
4、单击事件和获取html元素
添加单击事件:
1.任何标签都可以添加
2.在标签内加:οnclick=“响应操作”
<body>
<h1 id="hid">JavaScript语言实例--单击事件</h1>
<button onclick="fun()">点击我</button>
<ul id="uid">
<li>AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
</ul>
<ol>
<li>1111111</li>
<li>2222222</li>
</ol>
</body>
2.获取元素和改变元素样式:
function fun(){
console.log('hello js');
//获取id属性值为hid的元素标签
var hid = document.getElementById("hid");
//输出元素标签之间的文本内容
console.log(hid.innerHTML);
//修改标签之间的内容
hid.innerHTML = "JavaScript语言实例--元素操作";
//改变 HTML 元素的样式
hid.style.color = "red";
hid.style.backgroundColor = "#ddd";
}
//获取当前网页中的所有li元素标签
//var mlist = document.getElementsByTagName("li");
var mlist = document.getElementById("uid").getElementsByTagName("li");
//遍历输出
for(var i in mlist){
if(!isNaN(i)){ //mlist中包含length等属性,用if判断去掉
console.log(mlist[i].innerHTML);
mlist[i].style.color="red";
}
}
5.Timing定时事件
setTimeout(function, milliseconds)
setInterval(function,milliseconds)
clearInterval(mytime) 参数为上面两个定时对象
//定义时3秒后执行参数中的函数
setTimeout(function(){
console.log("Hello JS!");
},3000);
//定时每隔1秒执行参数回调函数一次
var m = 0;
setInterval(function(){
m++;
console.log("Hello "+m);
},1000)
6.事件绑定
1.事件源:所有html标签
2.事件:onclick、dblclick …
3.事件处理程序
事件绑定方式:
1.主动绑定
2.被动绑定
<body>
<h1>JavaScript语言实例--事件处理(事件绑定方式)</h1>
<button onclick="fun()">按钮1</button> //方式1
<button id="bid">按钮2</button>
</body>
<script>
function fun(){
console.log("按钮1被点击了");
}
document.getElementById("bid").onclick = function(){ //方式2
console.log("按钮2被点击了");
}
</script>
事件源对象的获取:
<body>
<h1>JavaScript语言实例--获取事件源对象</h1>
<h2 onclick="fun(this)">2级标题1</h2>
<h2 id="hid">2级标题2</h2>
</body>
<script>
function fun(ob){
console.log("aaaaaaaaaa");
//console.log(ob);
ob.style.color = "green";
}
document.getElementById("hid").onclick = function(){
console.log("bbbbbbbbbbb");
//此种事件绑定方式,this就表示当前事件源对象
//console.log(this);
this.style.color = "red";
}