JavaScript基础知识（下）
2018-04-24 本文已影响15人
奇怪的她的他
本文是对上一篇文章的接续：https://www.jianshu.com/p/5a906b72bd1c
一、JS中创建对象。
<script>
//1.创建对象
var dog={
name:'xiaohuang',
age:18,
height:1.2,
dogFriends:['laifu','lisi'],
eat:function (someThing) {
console.log(this.name+'吃!'+someThing);
},
//this就是此函数属于哪个对象,那么this就代表这个对象!
run:function (where) {
console.log(this.age+'跑'+where);
}
};//object
console.log(dog.name,dog.age);
dog.eat('板烧鸡腿堡');
dog.run('家里');
</script>
二、JS中构造函数创建对象
<script>
//普通函数
//new
var Dog = function (name,age,height) {
this.name = name;
this.age = age;
this.height = height;
this.eat = function (someThing) {
console.log(this.name + '吃'+someThing)
};
this.run = function (someWhere) {
console.log(this.name + '跑'+someWhere)
}
}
//创建对象
var dog1 = new Dog('小黄',18,1.1)
var dog2 = new Dog('旺财',17);
console.log(dog1,dog2);
dog1.eat('板烧鸡腿堡')
dog2.eat('叉烧包')
</script>
三、内置对象
1、Window
<script>
//window作用
//1.所有全局的变量都是window的属性
//2.所有全局的函数都是window的方法
//全局的变量
var age = 17;
// console.log(window.age);
//全局函数
function Dog() {
console.log('这是一直够');
}
function Person() {
console.log(this);
}
Person();//window
new Person();//Person 因为哥么变成了构造函数了!!所属类就是Person类!!
//第二大作用
//动态跳转
window.alert(0);
window.location.href = 'http://OC:我爱你';
</script>
2、Document
<script>
//document 内置对象的作用:
//1.可以动态获取网页中所有的标签(节点)
//2.可以对获取到的标签CRUD(增删改查)
document.write('你好hello');
document.write('<input type="file">');
document.write(' <img src="http://img4q.duitang.com/uploads/item/201212/02/20121202152935_nQY5C.jpeg">')
</script>
- Document常用操作1
<head>
<meta charset="UTF-8">
<title>常用操作1</title>
<script>
function changeImag() {
//1.拿到图片
var img = document.getElementsByClassName('icon')[0];
//2.修改src属性!
img.src = 'imgs/img_02.jpg'
}
</script>
</head>
<body>
<img class="icon" src="imgs/img_01.jpg">
<p></p>
<button onclick="changeImag();">更换图片</button>
</body>
- Document常用操作2：隐藏与显示图片
<body>
<img class="icon" src="imgs/img_01.jpg">
<p id="word">这里的风景真的好美!!!!!</p>
<p></p>
<button >隐藏</button>
<script>
//1.1拿到所有要操作的标签
var icon = document.getElementsByClassName('icon')[0];
var p = document.getElementById('word');
var btn = document.getElementsByTagName('button')[0];
console.log(btn);
//1.2 监听按钮的点击
btn.onclick = function () {
if(btn.innerText == '隐藏'){
//隐藏 css属性 style display
icon.style.display = 'none';
p.style.display = 'none';
btn.innerText = '显示';
}else {
icon.style.display = 'block';
p.style.display = 'inline-block';
btn.innerText = '隐藏';
}
}
</script>
</body>
- Document常用操作3：切换图片
<body>
<img name="icon" src="imgs/icon_01.png">
<p></p>
<button>上一张</button>
<button>下一张</button>
<script>
//1.定义一些变量
var maxIndex = 9;
var minIndex = 1;
var currentIndex = minIndex;
//2.拿到img\两个按钮
var img = document.getElementsByName('icon')[0];
var pre = document.getElementsByTagName('button')[0];
var next = document.getElementsByTagName('button')[1];
//3.监听按钮的点击
pre.onclick = function () {
//改变currentIndex
if(currentIndex == minIndex){
currentIndex = maxIndex;
}else {
console.log(currentIndex);
currentIndex--;
}
//改变img的src
img.src = 'imgs/icon_0'+currentIndex+'.png';
};
//3.2 下一张
next.onclick = function () {
if(currentIndex == maxIndex){
currentIndex == minIndex;
}else {
currentIndex += 1;
}//改变img的src
img.src = 'imgs/icon_0'+currentIndex+'.png';
}
</script>
</body>
3、定时器
<body>
<img id="icon" src="imgs/flower.gif">
<p id="word">我想对你说,嫁给我!!!</p>
<div id="number">10</div>
<script>
//1.拿到所有的标签
var img = document.getElementById('icon');
var word = document.getElementById('word');
var number = document.getElementById('number');
//2.设置定时器
var timer = setInterval(function () {
//改变倒计时数字
number.innerText -= 1;
//判断
if(number.innerText == 0){
//结束定时器
clearInterval(timer);
//显示
word.style.display = 'block';
img.style.display = 'inline-block'
//隐藏number
number.style.display = 'none';
}
},1000);
</script>
</body>
4、JS中常见的事件
<script>
//当页面加载完毕
window.onload = function () {
alert(0);
var img = document.getElementsByTagName('img')[0];
var input = document.getElementsByTagName('input')[0];
img.onmousemove = function () {
console.log('在图片上移动')
}
img.onmouseover = function () {
console.log('进入图片')
}
img.onmouseout = function () {
console.log('离开图片')
}
input.onfocus = function () {
input.style.width = '500px';
}
}
</script>
四、外部JS
- JS文件
window.onload = function () {
//拿到div
var main = document.getElementById('main');
//1.创建一个图片标签
var img = document.createElement('img');
//路径相对的是HTML文件!!!
img.src = 'imgs/img_02.jpg';
//2.添加到 main里面去
main.appendChild(img);
img.remove();
console.log(main.childNodes);
}
//增
document.write('哈哈哈哈');
- HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部js</title>
<style>
#main{
background-color: red;
width: 400px;
height: 300px;
}
</style>
<script src="js/index.js">
</script>
</head>
<body>
<div id="main">
<p>我是描述图片的</p>
</div>
</body>
</html>
