智能社：javascript教程（基础）

来源：互联网发布：直到世界的尽头知乎编辑：程序博客网时间：2024/04/28 07:49

1）

js事件绑定

onmouseover=""; //鼠标焦点

onmouseout=""; //鼠标移出

更改元素样式

A.style.样式（width/color/display/...）=""; //可以更改元素任何属性，A.value="";/A.title="";

//网页一键换肤功能：点击事件绑定+更改外链css样式表链接

B.href="css1.css";

判断逻辑 if

//点击下拉菜单显示和隐藏：点击事件绑定+if判断属性display

<script>
(function (){
var oDiv=document.getElementById("oDiv");
var btn=document.getElementById("btn");
if (oDiv.style.display=="block") {
btn.onclick=function(){ oDiv.style.display="none";
}
else {
btn.onclick=function(){ oDiv.style.display="block";
}
}()); //立即调用函数
</script>

//选取class元素必须写成className

2）

函数传参 //调用函数具有同一功能，参数值不同

var div1=document.getElementById("div1");
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
function setColor(color){ //设置函数参数
div1.style.background=color;
}
btn1.onclick=setColor("green"); //传参
btn2.onclick=setColor("blue");

//另一种操作属性的方法，[ ]可以储存传递参数，适用于不固定的属性

A.style[width]="100px"; //等同于 A.style.width="100px";

function setStyle(name,value){
var A=document.get.......;
A.style[name]=value;
}
B.onclick=setStyle("width","200px");

style操作的是行间样式，class操作的是样式表中样式

// 对于用一元素，根据优先级会造成样式覆盖，建议统一属性操作

window.onload=function(){......}; //页面加载之后执行函数

document.getElementsByTagName('') //通过标签名获取多个元素，形成数组

//JS中改变元素属性只针对一个元素，可以用循环遍历数组

while循环
var i=0;
while (i<5) {
alert(i);
i++;
}
for循环
for (var i=0;i<5;i++) {
alert(i);
}

<div></div><div></div><div></div> //改变n个div的背景色

var A=document.getElementsByTagName("div");
for (var i=0;i<A.length;i++) {
A[i].style.background="black";
}

布尔值 ture/false //checked=ture/false

//选项卡，点击后按钮高亮及内容显示，其他按钮不高亮，其他内容隐藏：

//点击事件绑定当前按钮添加class高亮；其他按钮移除class高亮；

//当前内容display:block，其他内容display:none；

.light=background:yellow;

<button</button>

var oBtn=document.getElementsByTagName("button");
var aDiv=document.getElementsByTagName("div");
for (var i=0;i<oBtn.length;i++) {
aBtn[i].index=i; //为每个按钮添加自定义属性index，赋值i
oBtn[i].onclick=function(){ //每个按钮绑定点击事件
for(var i=0;i<oBtn.length;i++) {
oBtn[i].className=" "; //使每个按钮的class为空
aDiv[i].style.display="none"; //使每个div都隐藏
}
this.className="light"; //当前执行函数的按钮的class=light
aDiv[this.index].style.display="block"; //当前执行函数的按钮所对应的div显示
}；
}

//创作，调用数组

var arr = [1,2,3,4]; arr[0];

3）

typeof 运算符 //返回变量的类型

NaN与NaN不相等

非数字检测方法 isNaN() //返回布尔值ture/false

变量类型转换：

parseInt() //将字符串转换成整数

parseFloat //将字符串转换成小数

== //变量转换成相同类型后，进行比较

=== //绝对相等比较

一句话解释闭包：子函数可以使用父函数的局部变量

命名规范：匈牙利命名法

运算符号：

%求模 //隔行变色，分秒时间转换

&& 与 and ； || 或 or

流程控制：

判断语句

if....else if...else if....else....

switch(变量){

case "值1";

语句1；

break;
case "值2";

语句2；

break;
default;

语句n

}

循环语句 while for

//break 中断整个循环过程

//continue 跳过此次循环，继续循环

JSON

类似于数组的储存对象

var json={a=1,b=2,c=3};
alert(json.a); //1
alert(json["a"]) //下标是字符串，没有length

for in 循环可以不需要length

for(var i in arr){...}
for(var i in json){...}

4）

函数传参，可变参

arguments //用于函数中参数不确定的情况，是数组

//不定参数求和

function sum(){

var result=0; //定义一个中间参数
for(var i=0;i<arguments.length;i++) { result+=arguments[i]; } //循环遍历不定参并相加
return result; //返回中间参数的值
}

alert(sum(1,2,3,4,5)); //15

//css函数

//语法：css(obj,name,value);

function css(obj,name,value) {

if(arguments.length===2) { return obj.style[name]; } //两个参数时，获取样式
else { obj.style[name]=value; } //三个参数时，修改样式

}
css("oDiv","width","200px"); //修改oDiv的宽度200px·

//调用非行间样式

//js处理浏览器兼容性，通常用if语句判断true/false

function getStyle(obj,name){ //包装为公共函数

if(obj.currentStyle) { return obj.currentStyle[name]; } //turn，currenStyle兼容
else { return getComputeStyle(obj,false)[name]; } //false，getComputeStyle兼容

}
getStyle(oDiv,width);

数组操作：

length可以设置

var arr=[1,2,3,4];
arr.length=3;
alert(arr); //1,2,3

//清空数组 arr.length=0;

添加数组尾部元素添加数组头部元素

arr.push(5); arr.unshift();

删除数组尾部元素删除数组头部元素

arr.pop(); arr.shift();

splice 插入、删除、替换

var arr=[1,2,3];
// 删除：splice(起点，长度);
arr.splice(1,1); //1,3
// 插入：splice(起点，长度，插入元素);
arr.splice(1,0,"a") //1,2,a,3
// 替换：splice(起点，长度，替换元素);
arr.splice(1,1,"a") //1,a,3

数组的连接 concat()

var a=[1,2];
var b=[3,4];
a.cancat(b); //1,2,3,4

分隔符 join ，连接数组元素，形成字符串

var arr=[1,2,3];
arr.join("-"); //1-2-3

排序 sort()

字符串：

var arr=["boy","cat","apple"];
arr.sort(); //apple,boy,cat

数字： //默认字符串标准排序，用其他标准需要使用比较函数作为参数

var arr=[1,3,2];
arr.sort(function(n1,n2){ //比较函数，也可以单独写

return n1-n2; //返回正负数来确定两个元素的相对顺序

});
alert(arr); //1,2,3

5）

定时器

间隔型：setInterval(函数，时间); //间隔时间，一直执行函数

延时型：setTimeout(函数，时间); //只执行一次函数

关闭定时器

clearIntetval(); clearTimeout(); //需要给定时器命名变量后，指定关闭

function showA(){ alert("a"); }
var timeA=setInterval(showA,1000); //每隔1000毫秒，弹出a
clearInterval(timeA); //关闭定时器

//数码时钟：

//获取系统时间

//将系统时间设置成字符串

//将数字转换为字符串，设置相应图片路径，显示时间

//定时器执行函数

<img src="0.png"> <img src="0.png"> //时

<img src="0.png"> <img src="0.png"> //分

<img src="0.png"> <img src="0.png"> //秒

var aImg=document.getElementsByTagName("img");
function tDate(n){ //小于10的数字前面加0，并将数字变成字符串

if(n<10){ return "0"+n; }
else { return " "+n; }

}
function tick(){

var oDate=new Date(); //获取当前时间，返回值是数字
var str=tDate(oDate.getHours())+tDate(oDate.getMinutes())+tDate(oDate.getSeconds()); //6位字符串
for(var i=0;i<aImg.length;i++){

aImg[i].src=str[i]+“.png”;

}

}
setInterval(tick,1000); //在执行tick函数之前有1000毫秒延迟
tick(); //立即执行一次函数，解决延迟问题

//str[...] 获取字符串第...位的方法，浏览器不兼容

//解决办法 str.charAt(...)，兼容

6）

DOM基础

子节点 children // childNodes及nodeType 需要解决兼容性问题

父节点 parentNode

offsetParent 查询定位的父节点，没有则一直往上级寻找

首位子节点、兄弟节点 //兼容问题

设置元素节点样式 getAttribute() setAttribute() removeAttribute()

//通过className获取元素

//封装成单独函数

function getByClassName(oParent,aClass) { //参数（父节点，classname）

var aResult=[]; //定义数组
var aElement=document.getElementsByTagName("*"); //获取所有元素
for(var i=0;i<aElement.length;i++) {

if(aElement[i].className==aClass) { aResult.push(aElement[i]); } //class相同的放入数组

return aResult; //返回数组

}

}
//调用
var oDiv=document.getElementsByTagName("div")[0];
var oBox=getByClassName(oDiv,"box"); //选中所有oDiv下所有class=box的元素
for(var i=0;i<oBox.length;i++){

oBox[i].style.background="#000";

}

7）

DOM操作

创建

var 子节点=ducument.createElement("元素");
父级.appendChild(子节点);

插入

父级.insertBefore(子节点，指定元素); //在指定元素之前插入元素

删除

父级.removeChlid(子节点)

//文档碎片，可用性不高 document.createDocumentFragment();

8）

//表格的操作

tBodies=getElementsByTagName("tbody")

rows=getElementsByTagName("tr")

cells=getElementsByTagName("td")

//隔行变色

//添加、删除表格行

//搜索、高亮、筛选

toLowerCase() 将字符串转换为小写 //忽略大小写

search() 找到并返回字符串出现的位置，没找到返回-1 //模糊搜索

split() 将字符串用指定符号分割成数组

//排序

阅读全文

0 0