智能社JS笔记—

智能社JS笔记——Js基础1

一、初探JS魅力

这部分的内容有5课时，是JS最基础的部分，在学习过程中简单了解了JS变量、事件、函数，还有知道一些常见的JS语法像通过Id或标签获取元素。

事件：用户操作；(onmouseover，onmouseout， onclick）

函数：

函数定义：只是告诉系统有这个函数，不会实际执行；

函数调用：真正执行函数里的代码；

函数传参：

参数就是占位符；什么时候用传参——函数里定不下来的东西；

变量：

给一个东西取一个别名；

字符串和变量：（用引号和不用引号）

-字面量（常量）：看到东西，自然知道是什么；比如：12 、‘abc’

-变量：可以变的量；比如：a

-变量和参数不需要加引号，除此之外的字符串需要加引号；

getElementById：

第一个JS兼容性问题，在FF下直接使用ID存在问题——引入document.getElementById()，document.getElementById在任何浏览器下均可使用；

this：

当前发生事件的元素

样式优先级：

*<标签<class<ID<行间

练习：

1、鼠标提示框

鼠标移入到input上，让div1显示；（onmouseover）

鼠标移除input 让div1隐藏；（onmouseout）

onmouseover="div1.style.display='block';"

onmouseout="div1.style.display='none';"

兼容性（Firefox div不能直接用，要用documnent.getElementById）

onmouseover="document.getElementById('div1').style.display='block';"

onmouseout="document.getElementById('div1') .style.display='none';"

<!DOCTYPE html>

<head>

<title>鼠标提示框</title>

#div1{ 200px; height: 100px; background: #999; border: 1px solid black; display: none;}

</style>

</head>

<body>

<!-- <input type="checkbox" onmouseover="div1.style.display='block'" onmouseout="div1.style.display='none'" />

<div id="div1">为了你的信息安全</div> -->

<div id="div1">为了你的信息安全</div>

</body>

</html>

2、Div的颜色和大小都在改变

函数基本格式

function toGreen(){

var odiv=document.getElementById('div1');

odiv.style.width='300px';

odiv.style.height='300px';

odiv.style.background='red';

}

onmouseover='toGreen()'

<!DOCTYPE html>

<head>

<title>改变div样式</title>

#div1{ 200px; height: 200px; background: red; }

</style>

function toGreen(){

var oDiv=document.getElementById("div1");

oDiv.style.width="300px";

oDiv.style.height="300px";

oDiv.style.background="green";

}

function toRed(){

var oDiv=document.getElementById("div1");

oDiv.style.width="200px";

oDiv.style.height="200px";

oDiv.style.background="red";

}

</script>

</head>

<body>

</body>

</html>

3、网页换肤

-任何标签都可以加id，包括link； <link id='l1' rel='stylesheet' type='text/css' href='huanfu1.css' />

-任何标签里的任何属性，也都可以修改；

-HTML里怎么写，JS里就怎么写；

（通过一些属性来增加东西，HTML对应于什么属性，JS里面就可以添加什么属性，但className是个例外，html中class属性在Js中要写className）

<!DOCTYPE html>

<head>

function to1(){

var oL=document.getElementById("l1");

oL.href="css1.css";

}

function to2(){

var oL=document.getElementById("l1");

oL.href="css2.css";

}

</script>

</head>

<body>

</body>

</html>

/*css1.css*/

body{

background: black;

}

input{

200px;

height: 100px;

background: yellow;

}

/*css2.css*/

body{

background: #ccc;

}

input{

100px;

height: 50px;

background: red;

}

4、改文字 //点击按钮，文本框有title

<!DOCTYPE html>

<head>

function showTxt(){

var oTxt=document.getElementById("txt1");

// html里怎么写，JS里面就怎么写

txt1.title="sdfdgfdgfg";

};

</script>

</head>

<body>

</body>

</html>

5、下拉菜单（！！！！！！！！！！！！！！！）

当用户点击的时候，如果div是显示的，隐藏掉；如果div是隐藏的，显示出来；

if（odiv.style.display=='block'）{

odiv.style.display='none';

}else{

odiv.style.display='block';

}

<!DOCTYPE html>

<head>

<title>显示隐藏if使用</title>

div{ 200px; height: 200px; background: red; display: none;}

</style>

function showHide(){

var oDiv=document.getElementById("div1");

if(oDiv.style.display=="block"){

oDiv.style.display="none";

}else{

oDiv.style.display="block";

}

};

</script>

</head>

<body>

</body>

</html>

6、为a链接添加JS

-平时在href里面是放一个网址；

-也可以在a里面放js，表示执行这个js语句；

-一般不会在Js里面放置代码，而是让它空着，1 a里面放Js非常不好（后面会学到），给个空的放到这儿代替#号（不会跳转）；

7、改变背景颜色/样式（！！！！！！！！！！！！！）

</div>

//改变背景颜色传颜色1个参数

function setColor(color){

var odiv=document.getElementById('div1');

odiv.style。background="yellow";

}

//改变背景样式传name value两个参数

function setStyle(name, value){

var odiv=document.getElementById('div1');

odiv.style[name]=value;

}

操作属性的方法

-----------------------------------------------------------------04------------------------------------------------------------------------------

8、函数传参

style与className

-元素.style.属性=XXX是修改行间样式

-之后再修改className不会有效果

<!DOCTYPE html>

<head>

<title>函数传参改变div颜色</title>

#div1{ 200px; height: 200px; border: 1px solid black; }

</style>

function setColor (color) {

var oDiv=document.getElementById("div1");

oDiv.style.background=color;

};

</script>

</head>

<body>

</body>

</html>

9、改变div属性的任意样式

<!DOCTYPE html>

<head>

<title>方括号属性操作样式</title>

#div1{ 100px; height: 100px; background: red; }

</style>

function setStyle(name,value){

var oDiv=document.getElementById("div1");

oDiv.style[name]=value;

};

</script>

</head>

<body>

</body>

</html>

10、提取行间事件

style加样式，在行间里加；style取样式，在行间里取；

-如何为元素添加事件

事件和其他属性一样，可以用JS添加

window.onload的意义页面加载完成的时候发生 window.onload=function (){};

行为、样式、结构三者分离

-获取一组元素

getElementsByTagName

<!DOCTYPE html>

<head>

<title>提取行间事件onclick</title>

window.onload=function (){

var oBtn=document.getElementById("btn1");

oBtn.onclick=function (){

alert('a');

};

</script>

</head>

<body>

// var oBtn=document.getElementById("btn1");

// function abc(){

// alert('a');

// };

// 记住这里添加事件是直接给函数的名字

//oBtn.onclick=abc;

</script>

</body>

</html>

问题：Js函数调用什么时候加括号，什么时候不加括号

函数只要是要调用它进行执行的，都必须加括号。此时，函数()实际上等于函数的返回值。当然，有些没有返回值，但已经执行了函数体内的行为，这个是根本，就是说，只要加括号的，就代表将会执行函数体代码。
不加括号的，都是把函数名称作为函数的指针，用于传参，此时不是得到函数的结果，因为不会运行函数体代码。它只是传递了函数体所在的地址位置，在需要的时候好找到函数体去执行。
所以一般时候我们都是采用的是无括号的原因。这也是由于括号的二义性，因为括号是“函数调用运算符”，相当于在执行这样一个函数,所以产生的问题在理解了之后也就理解了。

11、匿名函数

<!DOCTYPE html>

<head>

</head>

<body>

var oBtn=document.getElementById("btn1");

oBtn.onclick=function (){

alert('a');

};

</script>

</body>

</html>

12、循环

for(var i=0; i<odiv.length; i++)

<!DOCTYPE html>

<head>

<title>getElementsByTagName</title>

div{ 200px; height: 200px; border: 1px solid black; float: left; margin:20px;}

</style>

window.onload=function(){

var oDivs=document.getElementsByTagName("div");

for(var i=0; i<oDivs.length; i++){

oDivs[i].style.background="red"

; }

};

</script>

</head>

<body>

</body>

</html>

13、复选框

邮箱全选/不选/反选

var obtn1=document.getElementById('btn1');

var odiv=document.getElementById('div1');

var ach=odiv.getElementsByTagName('input');

<!DOCTYPE html>

<head>

<title>checkbox</title>

window.onload=function (){

var oBtn1=document.getElementById("btn1");

var oBtn2=document.getElementById("btn2");

var oBtn3=document.getElementById("btn3");

var ach=document.getElementsByTagName("input");

oBtn1.onclick=function (){

for(var i=1; i<ach.length; i++){

ach[i].checked=true;

}

};

oBtn2.onclick=function (){

for(var i=1; i<ach.length; i++){

ach[i].checked=false;

}

};

oBtn3.onclick=function (){

for(var i=1; i<ach.length; i++){

if(ach[i].checked==true){

ach[i].checked=false;

}else{

ach[i].checked=true;

}

};

</script>

</head>

<body>

</body>

</html>

11、选项卡/标签切换（！！！！！！！！！）//了解逻辑过程

<!DOCTYPE html>

<head>

#div1 div{ 200px; height: 200px; background: #ccc; border: 1px solid black; display: none; }

#div1 .active{ background: yellow;}

</style>

window.onload=function (){

var oDiv=document.getElementById("div1");

var aBtn=div1.getElementsByTagName("input");

var aDiv=div1.getElementsByTagName("div");

for(var i=0; i<aBtn.length; i++){

//给当前事件一个自定义的属性，用来储存下标

aBtn[i].index=i;

aBtn[i].onclick=function (){

for(var j=0; j<aBtn.length; j++){

aBtn[j].className=" ";

aDiv[j].style.display="none";

}

this.className="active";

aDiv[this.index].style.display="block";

};

}

};

</script>

</head>

<body>

</div>

</body>

</html>

12、JS简易日历（！！！！！！！！！！）

类似选项卡，只是下面只有一个div

innerHTML

<!DOCTYPE html>

<head>

window.onload=function (){

var arr=[

"dfdgfdgfg",

"dfdfdsfdfdsfdf",

"dsfsq23r",

"dfertg",

"dfdgfdgfg",

"dfdfdsfdfdsfdf",

"dsfsq23r",

"dfertg",

"dfdgfdgfg",

"dfdfdsfdfdsfdf",

"dsfsq23r",

"dfertg",

];

var oDiv=document.getElementById("tab");

var aLi=oDiv.getElementsByTagName("li");

var oTxt=oDiv.getElementsByTagName("div")[0];

for(var i=0; i<aLi.length; i++){

aLi[i].index=i;

aLi[i].onmouseover=function (){

for(var j=0; j<aLi.length; j++){

aLi[j].className=" ";

}

this.className="active";

oTxt.innerHTML="<h2>"+(this.index+1)+"月活动</h2><p>"+arr[this.index]+"</p>";

};

}

};

</script>

</head>

<body>

<ul>

</ul>

<p>过年了，大家可以商量着去哪儿玩呢~</p>

</div>

</body>

</html>