js一些基础知识2
程序员文章站
2022-06-30 19:55:11
...
72、按钮控制选项卡，加左右按钮实现
<style>
#box div{
width: 200px;
height: 100px;
border: 1px solid #000000;
display:none;
}
#box .on{
background: red;
}
</style>
<script>
window.onload = function(){
var oBox = document.getElementById('box');
var aBtn = oBox.getElementsByTagName('input');
var aDiv = oBox.getElementsByTagName('div');
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
var iNow = 0;
for(var i = 0; i<aBtn.length;i++){
aBtn[i].index = i;
aBtn[i].onclick = function(){
iNow = this.index;
tab();
};
}
function tab(){
for(var i = 0; i< aBtn.length; i++){
aBtn[i].className = '';
aDiv[i].style.display = 'none';
}
aBtn[iNow].className = 'on';
aDiv[iNow].style.display = 'block';
}
//前一个
oPrev.onclick = function(){
iNow--;
if (iNow < 0){
iNow = aBtn.length - 1;
}
tab();
};
//后一个
oNext.onclick = function(){
iNow++;
if (iNow >= aBtn.length){
iNow = 0;
}
tab();
};
};
</script>
</head>
<body>
<div id="box">
<a href="javascript:;" id="prev">☜</a>
<input type="button" class="on" value="体育">
<input type="button" value="娱乐">
<input type="button" value="新闻">
<input type="button" value="新闻2">
<a href="javascript:;" id="next">→</a>
<div style="display:block;">1111111111</div>
<div>1122111111</div>
<div>222222222222</div>
<div>333333333333333333333333</div>
</div>
</body>
73、自动播放选项卡，定时运行按钮选项卡中的next
<style>
#box div{
width: 200px;
height: 100px;
border: 1px solid #000000;
display:none;
}
#box .on{
background: red;
}
</style>
<script>
window.onload = function(){
var oBox = document.getElementById('box');
var aBtn = oBox.getElementsByTagName('input');
var aDiv = oBox.getElementsByTagName('div');
var iNow = 0;
for(var i = 0; i<aBtn.length;i++){
aBtn[i].index = i;
aBtn[i].onclick = function(){
iNow = this.index;
tab();
};
}
function tab(){
for(var i = 0; i< aBtn.length; i++){
aBtn[i].className = '';
aDiv[i].style.display = 'none';
}
aBtn[iNow].className = 'on';
aDiv[iNow].style.display = 'block';
}
//后一个
function next(){
iNow++;
if (iNow >= aBtn.length){
iNow = 0;
}
tab();
};
setInterval(next,2000)
};
</script>
</head>
<body>
<div id="box">
<input type="button" class="on" value="体育">
<input type="button" value="娱乐">
<input type="button" value="新闻">
<input type="button" value="新闻2">
<div style="display:block;">1111111111</div>
<div>1122111111</div>
<div>222222222222</div>
<div>333333333333333333333333</div>
</div>
</body>
74、延时选项卡（京东）：onmouseover，setTimeout定时器里的this坏了-- _this=this;
<style>
#box div{
width: 200px;
height: 100px;
border: 1px solid #000000;
display:none;
}
#box .on{
background: red;
}
</style>
<script>
window.onload = function(){
var oBox = document.getElementById('box');
var aBtn = oBox.getElementsByTagName('input');
var aDiv = oBox.getElementsByTagName('div');
var timer;
for(var i = 0; i<aBtn.length;i++){
aBtn[i].index = i;
aBtn[i].onmouseover = function(){
var _this = this;
timer = setTimeout(function(){
for(var i = 0; i< aBtn.length; i++){
aBtn[i].className = '';
aDiv[i].style.display = 'none';
}
_this.className = 'on';
aDiv[_this.index].style.display = 'block';
},200);
};
aBtn[i].onmouseout = function(){
clearTimeout(timer);
};
}
};
</script>
</head>
<body>
<div id="box">
<input type="button" class="on" value="体育">
<input type="button" value="娱乐">
<input type="button" value="新闻">
<div style="display:block;">1111111111</div>
<div>222222222222</div>
<div>333333333333333333333333</div>
</div>
</body>
75、QQ头像 事件连等 76、封闭空间： (function(){alert(1);})(); 用途：1）解决变量冲突 (小红和你同时用 oBtn) 2）循环里面加定时器，定时器里的i也不能用了--封闭空间解决 77、arguments:实参数组 78、with(重复代码){} 79、cssText:设置样式，兼容性没问题，没什么必要使用
80、字符串：
取某一个 str.charAt()
#str.indexOf(小字符串);
<script>
var str = 'abcdefdsfd';
//alert(str.indexOf('e')); // 4
//alert(str.indexOf('cde')); //2
//alert(str.indexOf('d')); //3
//alert(str.indexOf('x')); //-1
alert(str.indexOf('D'));
</script>
#浏览器判断 UA：navigator.userAgent
Chrome Firefox MSIE
扩展:IE11不再包含MSIE，判断方法：(sUA.toLowerCase().indexOf("trident") > -1 && sUA.indexOf("rv") > -1);
<script>
if (navigator.userAgent.indexOf('Chrome') != -1){
alert('这里是chrome');
}else if(navigator.userAgent.indexOf('Firefox') != -1){
alert('这里是火狐');
}else if(navigator.userAgent.indexOf('MSIE') != -1){
alert('这里是ie');
}
//alert(typeof navigator.userAgent);
</script>
#str.lastIndexOf(小字符串);
#str.substring(开始位置，结束位置); //结束位置不包含想要的最后那个
str.substring(开始位置); //截取到最后
<script>
var str = 'width';
//alert(str.substring(1,3));//id
alert(str.substring(1)); //idth
<script>
#str.split(切的方式); //切成了数组
split(''); //切碎
<script>
/*var str = 'welcome-to-beijing';
alert(str.split('-')[1]);*/
var str = 'welcome to beijing';
//alert(str.split(' '));
alert(str.split(''));
<script>
str.toUpperCase(); //转大写
str.toLowerCase(); //转小写
#字符串比较：
1)英文单词 字典序
2)数字(字符串) 字典序
3)数字，数字(字符串) 先转为数字，再比较
4)汉字，没规律， unicode编码 0x4e00 到 0x9fa5
81、数组
var arr = [1,2,3];
var arr = new Array(1,2,3);
var arr = new Array(3); //表示长度是3，并不是只有一个元素是3
var arr = [3]; //表示只有一个元素是3
#函数：
arr.push(元素); //加到后面
arr.unshift(元素); //加到前面
arr.pop(); //删除后面
arr.shift(); //删除前面
#arr.splice(开始位置，删除几个[,元素1，元素2...]);// 万能方法，灵活使用，
#可实现各操作
删除：var arr = [2,3,8,9,10,22];
arr.splice(2,1); //从第2个位置开始，删除1个
增加：arr.splice(3,0,100); //2,3,8,100,9,10,22
arr.splice(3,0,100,200); //2,3,8,100,200,9,10,22
替换：arr.splice(3,2,55,66); // 2,3,8,55,66,22
#模拟：
增加：push---arr.splice(arr.length,0,数1);
unshift---arr.splice(0,0,数1，数2);
删除：pop---arr.splice(arr.length-1,1);
shift---arr.splice(0,1);
#arr.join(连接方式); //数组转字符串
#arr.concat(数组1，数组2...); //数组连接
#arr.reverse(); //数组反转
#arr.sort(); //排序 默认字典序
#排序数字时需要自己实现：
arr.sort(function(n1,n2){
return n1-n2;
});
数组长度： arr.length --还能赋值
#清空数组：
1) arr.length = 0;
2) arr = [];
3) arr.splice(0,arr1.length);
4)while(arr1.length){arr1.pop()}
82、JSON:
json是什么？
给变量打个包，存储多个东西
json={name: value, name2: value2, name3: value3,......};
json 数组
下标 字符串 数字
length undefined 有length
for for in循环 普通for循环
有序 无序 有序
#83、 json添加一项：
json.x=xx;
json删除一项：
delete json.x
#84、另一种循环：for in循环：循环json对象
<script>
var json = {a:1,c:100,d:'100px',ff:[1,3,9,20]};
//alert(json.ff);
/*for(var i = 0;i < json.ff.length; i++){
alert(json.ff[i]);
}
*/
for(var name in json){
if (name == 'ff'){
for(var i = 0;i < json[name].length; i++){
alert(json[name][i]);
}
}
}
</script>
普通循环：for while
* 能用for循环尽量用for循环，实在没办法采用for in
#85、 json的写法：
a). json={a:1};
b). json={"a":1}; √
c). json={'a':"张三"}; √
#86、题
json = {a:1,b:2};
json['a']++;
console.log(json); //{a:2,b:2}
#87、json中什么都可以存，比如，描述 小明 的特点及亲戚
#88、用json的方法完善 setStyle:
function setStyle(){
var obj = arguments[0];
if (arguments.length == 3){...
else if(arguments.length == 2){...
#89、getByClass(完美版)
document.getElementsByClassName(类名); --兼容高级浏览器
oParent.getElementsByTagName('*');--获取oParent下的所有标签
完美版：
function getByClass(oParent,sClass){
if(oParent.getElementsByClassName){
return oParent.getElementsByClassName(sClass);
}else{
var aEle=oParent.getElementsByTagName('*');
// 用来装满足条件的元素
var arr=[];
for(var i=0; i<aEle.length; i++){
var aClass=aEle[i].className.split(' ');
if(findInArr(aClass, sClass)){
arr.push(aEle[i]);
}
}
return arr;
}
90、select的使用
onchange --变化时的事件
oSle.value --获取选中项的值
<option selected... --默认选中项设置属性
当前选中的索引值：
oS.selectedIndex
获取所有option:
aO = oS.getElementsByTagName('option');
oS.options;
选中项的文本：
a). aO[oS.selectedIndex].innerHTML
b). aO[oS.selectedIndex].text
动态添加一个option：
创建：new Option(文本, value);
添加：oS.options.add(option);
删除：oS.options.remove(索引);
91、Math：
Math.random(); 随机数
Math.abs(); 绝对值
Math.max(); 最大值
Math.min(); 最小子值
Math.pow(n,m); n的m次方
Math.sqrt(); 开平方
Math.ceil(); 向上取整
Math.floor(); 向下取整
Math.round(); 四舍五入
92、eval深入： eval(json)的时候出问题了 eval('('+json+')');
93、删除数组中的偶数
<script>
var arr = [1,2,2,3,1,1,1,1,8,8,9,100,23,45];
for(var i = 0; i < arr.length; i++){
if(arr[i] % 2 == 0){
//偶数
arr.splice(i,1);
i--;
}
}
alert(arr);
</script>
94、统计字符串中出现次数最多的字母
<script>
var str = 'aabbcdefggggggggggggggggggggggggggssssssssssssssssssssss';
var json = {};
/*
json = {};
a json['a'] = 1;
a json['a']++; json['a']=2
b json['b'] =1;
json -- {'a':1,'b':2,s:100}
*/
for(var i = 0 ;i < str.length; i++){
/*alert(str.charAt(i));*/
if(json[str.charAt(i)]){
json[str.charAt(i)]++;
}else{
json[str.charAt(i)] = 1;
}
}
//console.log(json);
var aaa = '';
var iCount = 0;
for(var name in json){
//name a b ... s
//json[name] 2 2 1 1 ....21 22
if (json[name] > iCount){
aaa = name;
iCount = json[name];
}
}
document.write('出现最多次数的字母是：'+aaa+',出现了'+iCount+'次');
</script>
95、复选框联动全选
<script>
window.onload = function(){
var oChkAll = document.getElementById('ckbAll');
var oDiv2 = document.getElementById('div2');
var aChk = oDiv2.getElementsByTagName('input');
var iCount = 0; //当前选中了几个
//全选，点上面
oChkAll.onclick = function(){
if (oChkAll.checked == true){
for(var i = 0;i < aChk.length;i++){
aChk[i].checked = true;
}
iCount = aChk.length;
}else{
for(var i = 0;i < aChk.length;i++){
aChk[i].checked = false;
}
iCount = 0;
}
document.title = iCount;
};
//下面
for(var i = 0;i<aChk.length;i++){
aChk[i].onclick = function(){
if(this.checked == true){
iCount++;
}
else{
iCount--;
}
if (iCount >= aChk.length){
oChkAll.checked = true;
}else{
oChkAll.checked = false;
}
document.title = iCount;
};
}
};
</script>
<body>
<div id="div1">
<input type="checkbox" name="" id="ckbAll">
</div>
<hr>
<div id="div2">
<input type="checkbox" name="" id=""><br>
<input type="checkbox" name="" id=""><br>
<input type="checkbox" name="" id=""><br>
<input type="checkbox" name="" id=""><br>
<input type="checkbox" name="" id=""><br>
<input type="checkbox" name="" id=""><br>
</div>
</body>
96、数组去重三种办法：
1）用findInArray，把结果放到新数组
<script>
function findInArray(arr,n){
for(var i = 0; i < arr.length; i++){
if (n == arr[i])
{
return true;
}
}
return false;
}
var arr = [1,2,2,3,1,1,1,1,8,8,9,100,23,45];
var arr2 = [];
for(var i = 0; i < arr.length; i++){
if (!findInArray(arr2,arr[i])){
arr2.push(arr[i]);
}
}
alert(arr2);
</script>
#2）和下一项比，如果重复就splice删除，i--
<script>
//去重方法2
function findInArray(arr,n){
for(var i = 0; i < arr.length; i++){
if (n == arr[i])
{
return true;
}
}
return false;
}
var arr = [1,2,2,3,1,1,1,1,8,8,9,100,23,45];
for(var i = 0; i < arr.length; i++){
if (findInArray(arr,arr[i])){
console.log(i + '-----' + arr);
arr.splice(i,1);
i--;
}
}
alert(arr);
</script>
3）利用json的name不重复的特性
<script>
//去重方法3
var arr = [1,2,2,3,1,1,1,1,8,8,9,100,23,45];
var json = {}; //{'1':sss,'2':ssfd,'3':sss,'8':fdfd}
for(var i = 0; i< arr.length; i++){
if(!json[arr[i]]){
json[arr[i]] = 'zns';
}
}
//console.log(json);
var arr2 =[];
for(var name in json){
//name 1 2 3 8..
//json[name] zns
arr2.push(name);
}
alert(arr2);
</script>
97、自己实现排序 （选择排序）
98、JS特性-预解析
JS特性-预解析：预先解析一些东西|--变量定义、函数定义 会预解析
先alert再var->-uncefined而不是报错
预解析的作用范围：会找本作用域之之内, --函数，script
题1：
var a = 12;
if (a%2){
function show(){alert('奇数');}
}else{
function show(){alert('偶数');}
}
show();
题2：
function show(){
alert(a);
return;
var a = 123;
}
show();
#99、引用
和对象打交道的 ： oDate,oDiv,json,arr...
对象之间有才是引用的
指的是同一个东西（多人一个柜子）
基本类型不是引用
#100、字符编码
str.charAt(1);
str.charCodeAt(索引); -> 字母对应的编码
汉字在计算机中都有编码，范围是 0x4e00-0x9fa5
已知编码，变成对应的字-- String.fromCharCode('0x4e00');
统一编码：unicode包含 utf-8/16 和 gb2312
表示方法： \u
比如： 一 \u4e00
#101、in:
var json = {a:1,b:2};
alert(json.a); //是对的，说明 a 在json里面
全局的东西，默认都在window里
#102、异常
异常捕获：try{} cache(e){}
#103、定义变量，但是没有使用var，就变成全局的了
var a= b=c=d=1; //连等导致b c d 全局
#104、逗号表达式 逗号运算符，只看最右面，优先级最低
题1：
if(1,0,true,undefined){alert(1);}
else{alert(2);}
题2：
for(var i =0,j=0,k=1;i<10,j<5,k<3;i++,j++,k++){}
alert(i+j+k);
#105、赋值表达式，值是赋值后的结果
106、严格模式 'use strict'
a、定义变量必须加 var
b、不允许在(if,for)等语句里定义函数了
c、干掉了 with
严格模式的作用范围：
1、冲不出script标签
2、可以作用到函数内部（写到函数里）
3、放到整个js文件，开头
建议：以后大家每个js文件的开头，都要加上 'use strict'
预解析跟严格模式没有关系，严格模式并没有把预解析干掉
107、JS组成部分：
ECMA： ECMAScript，解释器，解析语法、词法
var, if(){} , while(){}
arr.push arr.reverse()....第一部分学的知识
兼容性：完全兼容 现在所学的是稳定版本4，
DOM
Document Object Model 文档对象模型
就是跟页面打交道
比如，获取元素，设置样式。。。。等和页面有关的
兼容性： 一般还行吧。 大部分都兼容，少部分不太兼容，也可以去处理
document.getElementsByClassName();
BOM
Browser Object Model 浏览器对象模型
就是跟浏览器打交道
navigator.userAgent
alert();//在不同的浏览器下长得不一样，但没办法改
兼容性：大部分都不兼容，不兼容的地方没办法处理
108、DOM
#1)子级：一级（一层） 父级.children
children不包含文本节点
#2)父级: obj.parentNode
#3）兄弟元素
下一个兄弟： var oNext=obj.nextElementSibling || obj.nextSibling;
obj.nextElementSibling || obj.nextSibling 不能换位置
上一个兄弟：var oPrev=obj.previousElementSibling || obj.previousSibling;
首节点： var firstLi=obj.firstElementChild || obj.firstChild; 或 父级.children[0]
尾节点： var lastLi=obj.lastElementChild || obj.lastChild; 或 父级.children[父级.children.length-1]
#109、创建元素： var obj=document.createElement('标签名');
#110、添加元素：父级.appendChild(obj); //剪切
插入到父级的最后
父级.insertBefore(obj, 谁之前); //剪切
#111、删除元素：
父级.removeChild(obj);
112、简易留言板：添加留言，隐藏，删除，每次往前面加
<style>
div{
width: 100%;
height: 30px;
background: red;
margin: 5px;
float:left;
}
</style>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn1');
var oUL = document.getElementById('ul1');
var oT = document.getElementById('txt1');
oBtn.onclick = function(){
//创建li，并加到ul里
var oLI = document.createElement('li');
oLI.innerHTML = oT.value + '<a href="javascript:;">删除</a>';
//oUL.appendChild(oLI);
var oFirst = oUL.firstElementChild || oUL.firstChild;
oUL.insertBefore(oLI,oFirst);
//实现隐藏功能
var oLink = oLI.children[0];
oLink.onclick = function(){
//this.parentNode.style.display = 'none';
oUL.removeChild(oLI);
};
//清空文本框
oT.value = '';
};
};
</script>
</head>
<body>
留言内容：<input type="text" id="txt1">
<input type="button" value="留言" id="btn1">
<ul id="ul1">
</ul>
</body>
114、BOM
window.open(地址, 方式);
方式：默认是新页面打开
_blank：新页面打开
_self：当前页面打开
* 只要是用户打开的(触发事件)，都不拦截
window.open(); 有返回值->新页面的window对象
115、window.close();
* 可以关闭自己open出来的页面
116、类似于在线运行代码：
var win=window.open(); 返回值 -> 新页面的window对象
win.document.write(oT.value);
117、地址栏信息：
window.location：可以读取，可以赋值
window.location.href：地址
window.location.search：数据
window.location.hash：锚
其他信息：
window.location.protocol：协议
window.location.host：地址
window.location.hostname：域名
window.location.port：端口号
window.location.pathname：路径
118、历史记录：
window.history
window.history.forward(); 前进
window.history.back(); 后退
window.history.go(数字);
window.history.go(-1); 后退
windiw.history.go(1); 前进
119、右下角悬浮框
滚动条滚动纵向的距离：var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
滚动条滚动的横向距离：var scrollLeft=document.documentElement.scrllLeft || document.body.scrllLeft;
几个事件：
window.onload：当页面加载完成
window.onscroll：当滚动条滚动的时候
window.onresize：当页面缩放的时候
可视区宽度：document.documentElement.clientWidth;
可视区高度： document.documentElement.clientHeight;
物体宽度：obj.offsetWidth
物体高度：obj.offsetHeight