JavaScript 拾遗
Tips：
JS在网页中放置的位置：
//==> 真实项目中我们一般会把CSS放在body的上面，把JS放在body的末尾（约定俗成的规范）。
//==> body中编写的都是HTML标签，JS很多时候都需要操作这些元素，首先我们要保证这些元素加载成功，才可以在JS中获取到（JS放在结构之后加载，JS放在body的末尾）
//==> 如果把JS放在HTML标签前面了，如何等到结构加载完成在加载JS？
//==> 原生JS：window.onload = function(){} 当页面中所有资源结构都加载完成执行操作。
//==> 利用JQ：$(document).ready(function(){}) 页面中的结构加载完成就会执行操作。
// 自己写：window.addEventListener('load',function(){},false) 但是这种方法在ie 6 7 8不兼容 / window.attachEvent('onreadystatechange',function(){}) ie下用这个 jQuery源码
=====================
1.HTML属性操作
属性名： id type value....
属性值：'btn' 'button' '按钮'.....
<input type="button" value="button" id="btn">
属性读操作：获取、找到 语法：元素.属性名 这样就可以找到引号中的属性值
<body>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn');
console.log(oBtn.type); // 结果：button
console.log(oBtn.value); // 结果：按钮
console.log(oBtn.id); // 结果：btn
}
</script>
<input type="button" value="按钮" id="btn">
</body>
Example 1 => 获取属性值
<body>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn'),
oText = document.getElementById('text'),
oSelect = document.getElementById('areaSelect');
oBtn.onclick = function () {
alert(oText.value + '在' + oSelect.value);
}
}
</script>
<input type="text" id="text" placeholder="请输入……" />
<select name="" id="areaSelect">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广东">广东</option>
</select>
<input type="button" value="按钮" id="btn" />
</body>
属性写操作：（“添加”）替换、修改 语法：元素.属性名 = 新的值
Example 2 => 修改图片路径
<body>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn'),
oText = document.getElementById('text'),
oImg = document.getElementById('img');
oBtn.onclick = function () {
oImg.src = oText.value;
}
}
</script>
<input type="text" id="text" placeholder="请输入……" />
<input type="button" value="按钮" id="btn" />
<br />
<img src="img/1.jpg" id="img" />
</body>
添加：oDiv.innerHTML += oText.value; 内容的修改替换是直接用 = 号的，添加就要用 += 号。
//=> 属性读写操作的注意事项：
1、所有的相对路径地址
img src
href ="1.css" href="htnl/index.html"
绝对路径地址是可以用来判断的
2、颜色值：color: red #f00 rgb() rgba()
3、innerHTML值 别用来做判断，会引发兼容性的问题
Example 3 => 通过两个按钮改变字体大小案例
<body>
<script>
window.onload = function () {
var oBtn1 = document.getElementById('btn1'),
oBtn2 = document.getElementById('btn2'),
oPar = document.getElementById('par'),
num = 16;
oBtn1.onclick = function () {
num--;
oPar.style.fontSize = num + "px";
};
oBtn2.onclick = function () {
num++;
oPar.style.fontSize = num + "px";
};
}
</script>
<input type="button" id="btn1" value="A-" />
<input type="button" id="btn2" value="A+" />
<p id="par">You may skip through a book, reading only those passages concerned.</p>
</body>
浮动兼容性注意事项 ie 和其他标准浏览器
<input id="inp1" type="text" />
<script>
var oInp = document.getElementById('inp1');
oInp.onclick = function (){
oInp.type = 'checkbox';
// 咱们有仨位“祖宗”
/*
IE6 IE7 IE8
*/
};
/*
oDiv.style.float = 'right'; 不起作用的，用下面的方法
oDiv.style.styleFloat = 'right'; // IE
oDiv.style.cssFloat = 'left'; // 非IE
IE（styleFloat）
非IE（cssFloat）
最好的方式可以直接改class属性
<div class="right"></div>
*/
</script>
中括号的使用 []
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid #ff0000;
}
</style>
</head>
<body>
<script>
window.onload = function () {
var oAttr = document.getElementById('attr'),
oVal = document.getElementById('val'),
oBtn = document.getElementById('btn'),
oDiv = document.getElementById('div1');
// js中允许把“.”替换成[],并且没有兼容性的问题
// oBtn['onclick'] = function () 这里把“.” 换成了[] 效果一样 别忘了中括号中的引号
oBtn.onclick = function () {
// oDiv.style.width = oVal.value; style. 点后面的值，无法修改
oDiv.style[oAttr.value] = oVal.value; // [] 里的值是可以随便写
}
}
</script>
输入属性名：<input type="text" id="attr" />
输入属性值：<input type="text" id="val" />
<input type="button" value="确定" id="btn" />
<div id="div1"></div>
</body>
</html>
在判断语句中设置开关 - 当判断的条件是上文中不允许的几种情况下，可以设置一个开关，来做相应的判断
<script>
window.onload = function () {
var oImg = document.getElementById('img1');
var onOff = true; // 设置开关 布尔值：true 1 false 0
oImg.onclick = function () {
// if( oImg.src == 'img/2.jpg' ){ 相对路径不能判断
// 有条件，就用现成的，如果没有，创造条件也得做事
if (onOff) {
oImg.src = "img/3.jpg";
onOff = false; // 关闭开关
} else {
oImg.src = "img/1.jpg";
onOff = true; // 再打开开关
}
}
}
</script>
<img src="img/1.jpg" id="img1">
</body>
小练习：制作图片切换效果，并且设置切换模式。循环切换和顺序切换，这里利用到了：
1.数字（num）与数组的匹配；
2.条件的嵌套，并且设置一个开关；
3.同样代码放入一个函数中，做到代码优化。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>slideImgs</title>
<style>
#content {
width: 400px;
height: 400px;
border: 10px solid #cccccc;
margin: 10px auto 0;
position: relative;
background: #000;
}
#content a {
width: 40px;
height: 40px;
background: #000;
border: 5px solid #ffffff;
position: absolute;
top: 175px;
text-align: center;
text-decoration: none;
line-height: 40px;
color: #ffffff;
font-size: 30px;
opacity: 0.5;
filter: alpha(opacity:50);
}
#content a:hover{
opacity: 0.8;
filter: alpha(opacity:80);
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
#text, #span1 {
width: 400px;
height: 30px;
position: absolute;
background: #000;
color: #ffffff;
left: 0;
line-height: 30px;
text-align: center;
opacity: 0.6;
filter: alpha(opacity:60);
}
#text {
margin: 0;
bottom: 0;
}
#span1 {
top: 0;
}
#img1 { width: 400px; height:400px;}
#top{width: 400px; margin: 10px auto 0; text-align: center;}
#tipText{margin: 10px 0 0; padding: 0;}
</style>
</head>
<body>
<script>
window.onload = function () {
var oPrev = document.getElementById('prev'),
oNext = document.getElementById('next'),
oP = document.getElementById('text'),
oSpan = document.getElementById('span1'),
oImg = document.getElementById('img1'),
oBtn1 = document.getElementById('btn1'),
oBtn2 = document.getElementById('btn2'),
oTip = document.getElementById('tipText'),
onOff = true;
var arrUrl = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg'],
arrText = ['女战士','机器体育','妖姬','二次元'],
num = 0; // 有数组的地方一般都放有数字
oBtn1.onclick = function () {
onOff = true;
oTip.innerHTML = "循环切换";
};
oBtn2.onclick = function () {
onOff = false;
oTip.innerHTML = "顺序切换";
};
// 初始化
function fnTab () {
oSpan.innerHTML = (num+1) + '/' + arrText.length;
oImg.src = arrUrl[num];
oP.innerHTML = arrText[num];
}
fnTab ();
oPrev.onclick = function () {
num --;
if (num == -1) {
if (onOff){
num = arrUrl.length - 1;
} else {
alert("已经是第一张图片了！");
num = 0;
}
}
fnTab ();
};
oNext.onclick = function () {
num ++;
if (num == arrUrl.length) {
if (onOff) {
num = 0;
} else {
alert("已经是最后一张图片了！");
num = 3;
}
}
fnTab ();
};
}
</script>
<div id="top">
<input type="button" value="循环切换" id="btn1" />
<input type="button" value="顺序切换" id="btn2" />
<p id="tipText">循环切换</p>
</div>
<div id="content">
<a href="javascript:;" id="prev"><</a>
<a href="javascript:;" id="next">></a>
<p id="text">图片文字加载中……</p>
<span id="span1">数量正在计算中……</span>
<img id="img1">
</div>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function () {
document.title = 123; // title 也是如此获取，因为页面中也只有一个title标签
document.body.innerHTML = "页面中只有一个标签的时候，可以用这种方法获取元素。";
}
</script>
</head>
<body>
</body>
getElementsByTagName 的动态方法特性
<script>
window.onload = function () {
var oBtn = document.getElementsByTagName('input'); // 动态特性体现在它可以获取到后来添加的内容
document.body.innerHTML = "<input type='button' value='按钮' /><input type='button' value='按钮' /><input type='button' value='按钮' />";
alert(oBtn.length); // 3 如果是getElementById 就不能这么动态获取了
}
// ById 和 ByTagName 的区别：
// 1.id前面只能跟document，而tagName前面即可是document，又可以跟其他的元素
// 2.id只能找一个，tagName找的是一堆，用[索引]
// 3.动态特性体现在它可以获取到后来添加的内容，这里要在添加新元素的下面去获取，新元素上面还是获取不到
</script>
进度 3-6
浙公网安备 33010602011771号