JS对象创建：
// 创建对象
var dog = {
name:'xiaoming',//属性
age:10,
height:120,
friends:['xioahua','feng'],
eat:function () {
console.log(this.name,'吃东西');//this当前对象
},
run:function (distance) {
console.log(this.name+'跑了'+distance+'米');
}
};
console.log(dog, typeof dog);
dog.eat();
dog.run(100);
// 创建一个对象
var obj = new Object();//创建一个obj对象
obj.age = 5;
obj.click = function () {
alert('我被点击了');
}
// 另一种写法
var obj1 = {
age: 10,
click: function () {
alert('我也被点击了');
}
}
JS通过构造函数创建对象：
// 普通函数
var Dog = function (name) {
console.log('这是一个普通函数');
this.name = name;
this.eat = function (someThing) {
console.log(this.name+'吃'+someThing);
};
}
// 通过new关键字创建对象
var dog1 = new Dog('ming');
dog1.eat('汉堡');
var dog2 = new Dog('feng');
JS内置对象window：
- 所有的全局变量都是window的属性
- 所有的全局函数都是window的方法
<!---->
var age = 17; //全局变量
window.age = 18;
function person() {
console.log(this)
}
person();//打印的是window
new person();//打印的是person类 不是window
// 第二大作用：动态跳转
window.alert(0);
window.location.href = 'http://www.baidu.com';
//iOS开发拦截url跳转就是这个
document：
- 可以动态获取网页的中的所有标签（节点）
- 可以对获取到的标签（节点）进行CRUD（增删改查）
//写入
document.write('haha');
// 增加标签
document.write('<input>');
小练习1：点击按钮更换图片
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 点击修改图片练习
function clickAction() {
// 拿到图片修改src属性
var img = document.getElementsByClassName('icon')[0];
// 修改src属性
img.src = 'newImg.png';
}
</script>
</head>
<body>
<img src="../imgs.png" class="icon">
<button onclick="clickAction">点我</button>
</body>
小练习2：切换图片
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var max = 9;
var min = 1;
var currentIndex = min;
// 拿到标签
var img = document.getElementsByClassName('icon');
var preBtn = document.getElementsByTagName('button')[0];
var nextBtn = document.getElementsByTagName('button')[1];
// 监听按钮点击事件
preBtn.onclick = function () {
if (currentIndex == min) {
currentIndex = max;
} else {
currentIndex -= 1;
}
img.src = 'imgName_' + currentIndex;
};
nextBtn.onclick = function () {
if (currentIndex == max) {
currentIndex = min;
} else {
currentIndex += 1;
}
img.src = 'imgName_' + currentIndex;
}
</script>
</head>
<body>
<img src="../imgs.png" name="icon">
<button>上一张</button>
<button>下一张</button>
</body>
定时器：
<body>
<p id="haha">10</p>
<script>
// 设置定时器
var p = document.getElementById('haha')[0];
var timer = setInterval(function () {
p.innerText -=1;
if (p.innerText == 0) {
clearInterval(timer);
}
}, 1000); //间隔1000毫秒
</script>
</body>
JS常用事件
<script>
// 当页面加载完毕
window.onload = function() {
alert('页面加载完毕')
var img = document.getElementById('haha')[0];
img.onmousemove = function() {
console.log('在标签上移动');
}
img.onmouseout = function () {
console.log('离开标签');
}
img.onfocus = function () {
console.log('')
}
};
</script>
