今天抽个空把JS剩下的一些操作介绍下,当然不可能介绍的很全面,大部分是我认为很重要的部分,还有很多事在实际工作会遇到的,再去查资料,不断完善知识体系。
首先,我们来看下JS中的内置对象
一、Window
这里可不是iOS中的Window对象,在JS中,Window 对象表示浏览器中打开的窗口。如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。它有连个特点,1.所有的全局变量都是window的属性;2. 所有全局的函数都是window的函数。下面我们看一个例子:
console.log(window.age);
function Dog(){
var age = 1000;
console.log(window.age);
}
window.Dog();
function Dog(){
console.log(this);
}
Dog();
var dog1 = new Dog();
window.alert(0);
window.console.log('----wedewfd---');
这里还有个很重要的应用,动态跳转:
window.location.href = 'http://baidu.com';
我们可以通过iOS中的webView拦截这个请求,从而做对应的操作,这是iOS和JS交互的一种方法。
二、Document
简单来说,document是window的一个对象属性。它主要有三个用途:
1.动态的获取当前网页中的任意一个标签
2.动态的对获取到的标签进行CRUD
3.增加(Create)、读取(Retrieve)(重新得到数据)、更新(Update)和删除(Delete)
例子:
<script type="text/javascript">
// 动态插入
document.write('hello world!');
// 插入标签
document.write('<input type="date">');
// 插入一张图片
document.write('<img src="image/img_01.jpg">');
</script>
三、JS中的CRUD
然后我们看下增删改查的操作:
// c 创建create
// 1.直接往body中动态的添加标签(可以是任意类型)
document.write('helloWorld');
document.write('<img src="image/img_01.jpg">');
// 2. 创建一个新的标签,然后插入到body中任意的一个标签中 appendChild
var div = document.createElement('div');
div.style.background = 'red';
div.style.width = '500px';
div.style.height = '300px';
// 添加到父标签
document.body.appendChild(div);
// 往div中插入一张图片
var img = document.createElement('img');
img.src = 'image/img_02.jpg';
div.appendChild(img);
// 拿到p标签
var img1 = document.createElement('img');
img1.src = 'image/img_03.jpg';
var p = document.getElementById('word');
p.appendChild(img1);
// 删除有3种方式: 1. 直接用body进行删除,但是只能作用于直接子标签
// 2. 拿到当前标签的父标签,再来删除
// 3. 直接拿当前的标签,调用 remove()方法.
// document.body.removeChild(p);
// 拿到当前标签的父标签,再来删除
// p.parentNode.removeChild(p);
// 3
// p.remove();
// 改 拿到对应的标签,做出改变...
// 查
// 第一种方式:
// document.getElementsByClassName();
// document.getElementsByName();
// document.getElementsByTagName();
// document.getElementById();
// (注意:id返回一个值,其他的都是返回数组)
// 第二种方式:遍历标签内部的内容
// find(document.body);
//
// function find(object){
// for(var i in object){
// console.log(object[i]);
// }
// }
console.log(document.body.childNodes);
然后,我们看下JS中的常用事件
<script type="text/javascript">
//拿到对应的标签
var img = document.getElementsByName('icon')[0];
// console.log(img);
// 常用的事件
// 当鼠标进入图片
img.onmouseover = function(){
console.log('手指进入图片');
}
// 当鼠标在图片上移动
img.onmousemove = function(){
console.log('当鼠标在图片上移动');
}
// 当鼠标已出图片
img.onmouseout = function(){
console.log('当鼠标已出图片');
}
// 当页面加载完毕
window.onload = function(){
// alert('页面加载完毕');
}
// 拿到对应的输入框
var input = document.getElementById('int');
input.onfocus = function(){
input.width = '700px';
input.height = '60px';
// css中的属性要通过style
input.style.outline = 'none';
input.style.fontSize = '30px';
input.style.border = '2px solid red';
}
// 拿到选中的内容
input.onselect = function(){
alert(input.value);
}
</script>
了解了这些基本操作,最后我们 运用上面的这些知识, 来做一个简单的Demo。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
background-color: black;
text-align: center;
margin-top: 100px;
}
img{
display: none;
}
p{
color: red;
font-size: 50px;
text-shadow: 3px 3px 4px purple;
display: none;
}
div{
color: red;
font-size: 200px;
}
</style>
</head>
<body>
<img id="icon" src="image/flower.gif">
<p id="word">我对你的爱如滔滔江水.......</p>
<div id="times">5</div>
<script type="text/javascript">
// 拿到所有的标签
var img = document.getElementById('icon');
var p = document.getElementById('word');
var div = document.getElementById('times');
// 倒计时 ms
var timer = setInterval(function(){
// 拿到div内部的10
div.innerText -= 1;
// 判断
if(div.innerText == '0'){
// 清除计时器
clearInterval(timer);
// 隐藏div
div.style.display = 'none';
// 显示图片和文字
img.style.display = 'inline-block';
p.style.display = 'block';
}
}, 1000)
</script>
</body>
</html>