智能社:javascript教程(基础)

 

1)

js事件绑定

onmouseover="";   //鼠标焦点

onmouseout="";    //鼠标移出

 

更改元素样式

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

 

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

B.href="css1.css";

 

判断逻辑 if

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

<button id="btn"></button>

<div id="oDiv" display="none"></div>

<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)

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

<div id="div1"></div>

<button id="btn1" ></button>

<button id="btn2"></button>

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 class="light"></button>

<button</button>

<button></button>

<div style="display:block"></div>

<div></div>

<div></div>

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() 将字符串用指定符号分割成数组              //多关键词搜索

 

 

 

 

 

 

博主设置当前文章不允许评论。

没有更多推荐了,返回首页