javascript-智能社-笔记
1
2
3
4
5
6
7
8
|
<style type= "text/css" > #div 1 { width : 200px ; height : 100px ; background : #ccc ; border : 1px solid #999 ; display : none ; } |
1
2
3
4
5
|
< input type = "checkbox" onmouseover = "div1.style.display='block';" onmouseout = "div1.style.display='none';" /> < div id = "div1" > 鼠标移入显示div1内容..... </ div > |
1
2
|
onmouseover="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById('div1').style.display='none';" |
1
2
3
4
5
6
7
8
9
|
<style type= "text/css" > #div 1 { width : 200px ; height : 100px ; background : #ccc ; border : 1px solid #999 ; display : none ; } </style> |
1
2
3
4
5
|
<input type= "checkbox" onmouseover= "document.getElementById('div1').style.display='block';" onmouseout= "document.getElementById('div1').style.display='none';" /> <div id= "div1" > 鼠标移入显示div 1 内容..... </div> |
1
2
3
4
5
|
#div 1 { width : 200px ; height : 200px ; background : red ; } |
1
2
3
4
5
|
< div id = "div1" onmouseover="document.getElementById('div1') .style.width = '300px' ; document.getElementById('div1') .style.height = '300px' ; document.getElementById('div1') .style.background = 'green' ;" onmouseout="document.getElementById('div1') .style.width = '200px' ; document.getElementById('div1') .style.height = '200px' ; document.getElementById('div1') .style.background = 'red' ;"></ div > |
1
2
3
4
5
6
7
|
<style type= "text/css" > #div 1 { width : 200px ; height : 200px ; background : red ; } </style |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<script type= "text/javascript" > function bianlv () { var odiv=document.getElementById( 'div1' ); odiv.style.width= '300px' ; odiv.style.height= '300px' ; odiv.style.background= 'green' ; } function bianhong () { var odiv=document.getElementById( 'div1' ); odiv.style.width= '200px' ; odiv.style.height= '200px' ; odiv.style.background= 'red' ; } </script> |
1
|
< div id = "div1" onmouseover = "bianlv ()" onmouseout = "bianhong ()" ></ div > |
1
2
3
4
5
|
function show () //定义函数 { alert( 'abc' ); } show(); //调用函数 |
1
|
< link id = "a1" href = "" rel = "stylesheet" > //为link命名为id=a1 |
1
2
3
4
5
6
7
8
9
10
11
12
|
<script type= "text/javascript" > function pifu1 () //定义函数皮肤1 { var ol=document.getElementById( 'a1' ); //定义变量ol通过id:a1来获取link ol.href= '网页换肤1.css' ; //改变ol下的href链接文件地址 } function pifu2 () { var ol=document.getElementById( 'a1' ); ol.href= '网页换肤2.css' ; } </script> |
1
2
|
<input type= "button" value= "皮肤1" onclick= "pifu1()<!--鼠标点击调用函数pifu1-->" /> <input type= "button" value= "皮肤2" onclick= "pifu2()<!--鼠标点击调用函数pifu2-->" /> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < head > < meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8" /> < title ></ title > < script type = "text/javascript" > function gaiwenzi () //定义函数名为gaiwenzi { var otxt=document.getElementById("txt1"); //定义变量,通过ID获取元素 //第一种操作属性的方法---.就是的,的意思,otxt的value. otxt.value="修改文本框内文字"; } </ script > </ head > < body > < input id = "txt1" type = "text" /> <!-- 为inpu命名id为txt1 --> < input type = "button" value = "改文字" onclick = "gaiwenzi()" /> <!-- 鼠标点击,执行函数gaiwenzi() --> </ body > </ html > |
1
2
3
4
5
6
7
8
|
if (条件,如预报有雨) //如果条件成立执行语句1如果不成立执行语句2 { 语句1,带伞; } else { 语句2,不带伞; } |
1
2
3
4
5
6
7
8
|
if (如果div是显示的) { oDiv.style.display= 'none' ; } else //div没有显示 { oDiv.style.display= 'block' ; } |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
< style type = "text/css" > #div1{ width: 100px; height: 200px; background: #ccc; display: none; } </ style > < script type = "text/javascript" > function anniu () //定义函数 { var odiv=document.getElementById("div1"); //定义变量,通过ID获取元素 if (odiv.style.display=="block") //条件,如果div是显示的. { odiv.style.display="none"; //如果div是显示的条件成立执行此条 } else{ odiv.style.display="block"; //如果div是显示的条件不成立执行此条 } } </ script > </ head > < body > < input type = "button" value = "显示隐藏" onclick = "anniu ()" /> <!--点击时调用执行函数anniu--> < div id = "div1" ></ div > </ body > |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
< style type = "text/css" > #div1{ width: 100px; height: 100px; border: 1px solid black; } .box{ background: red; } </ style > < script type = "text/javascript" > function bianhong () { var odiv=document.getElementById("div1"); odiv.className="box"; //JS中不可以直接引用class名字,需要写成className=class名字 } </ script > </ head > < body > < input type = "button" value = "点击变红" onclick = "bianhong ()" /> < div id = "div1" ></ div > </ body > |
1
2
3
4
5
|
function show(num) //1,num参数的值是多少,不知道.它只是一个占位符 { alert(num); } show(5); //2,当我们在调用函数show的时候传了一个5,那么num的值就是5,也就是说调用的时候,你传什么,num就是什么. |
1
2
3
4
5
|
function show(a,b) //1,参数可以有多个,每个参数中间用,号分隔. { alert(a+b); //3,所以最终弹出结果为,a5+b12=17. } show(5,12); //2,调用时传入的5和12分别对应参数a=5,b=12. |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
< style type = "text/css" > #div1{ width: 200px; height: 200px; background: red; } </ style > < script type = "text/javascript" > function bianse (yanse) //1,在定义的时候这个yanse参数是没有值的. { var odiv=document.getElementById("div1"); odiv.style.background=yanse; } </ script > </ head > < body > < input type = "button" value = "变绿" onclick = "bianse (" green")" /> // 2,在调用的时候,如果传的值为green红色那么参数yanse的值就是红色 < input type = "button" value = "变黄" onclick = "bianse (" yellow")" /> < input type = "button" value = "变黑" onclick = "bianse (" black") /> < div id = "div1" ></ div > </ body > |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
< script type = "text/javascript" > function gaiwenzi (naum)//定义函数名为gaiwenzi参数为naum { var otxt=document.getElementById("txt1");//定义变量 //第一种操作属性的方法.就是的,的意思,otxt的value. // otxt.value="修改文本框内文字"; //第二种操作属性的方法[]第二种与第一种相比,最大的优势是[]中具体属性的名字是可以变的.调用的时候传入的属性名是什么它就是什么 otxt["naum"]="修改文本框内文字"; } </ script > </ head > < body > < input id = "txt1" type = "text" /> <!-- 为inpu命名id为txt1 --> < input type = "button" value = "改文字" onclick = "gaiwenzi(value)" /> <!-- 鼠标点击,调用函数gaiwenzi(naum)传入参数value,这时naum的值就是value --> </ body > |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
< style type = "text/css" > #div1{ width: 200px; height: 200px; background: #ccc; } </ style > < script type = "text/javascript" > function bianyan(shux,zhi) //1,调用的时候传一个什么属性名进来shux就是什么属性 { var odiv=document.getElementById("div1"); odiv.style[shux]=zhi; //2,shux是什么属性名这里改变的就是哪个属性 } </ script > </ head > < body > < input type = "button" value = "变宽" onclick = "bianyan('width','400px')" /> <!--点击时调用函数bianyan()传入属性名宽,值400px--> < input type = "button" value = "变高" onclick = "bianyan('height','400px')" /> <!--点击时调用函数bianyan()传入属性名高,值400px--> < input type = "button" value = "变绿" onclick = "bianyan('background','green')" /> <!--点击时调用函数bianyan()传入属性名背景,值绿色--> < div id = "div1" ></ div > </ body > |
1
2
3
4
5
6
7
8
9
|
< input id = "btn1" type = "button" value = "按钮" /> < script > var obtn=document.getElementById("btn1"); //定义变量,通过id获取btn1元素 function abc() //定义函数 { alert("a"); } obtn.onclick=abc; //修改obtn的onclick(鼠标点击属性),调用函数abc </ script |
1
2
3
4
5
6
7
8
|
< input id = "btn1" type = "button" value = "按钮" /> < script > var obtn=document.getElementById("btn1"); //定义变量,通过id获取btn1元素 obtn.onclick=function () //修改obtn的onclick(鼠标点击属性),调用匿名函数 { alert("a"); } </ script > |
1
2
3
4
5
|
function 名字 ( ) { 代码 } obtn.onclick=函数名字 |
1
2
3
4
|
obtn.onclick= function ( ) { 代码 } |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
< script > window.onload=function () { var obtn=document.getElementById("btn1"); obtn.onclick=function () { alert("a"); }; }; </ script > < body > < input id = "btn1" type = "button" value = "按钮" /> </ body > |
1
2
3
4
|
while ( 条件:如饿了 ) //只要满足饿了的条件 { 语句吃饭 //就将执行吃饭语句 } |
1
2
3
4
5
6
|
var i=0; //初始化定义i变量值为0 while (i<5) //循环,条件:当i<小于5时执行循环 { alert(i); //弹出i的值 i=i+1; //简化写法i++; 每循环一次i的值+1 } |
1
2
3
4
5
6
|
var i=0; //1。初始化,给i一个开始的值 while (i<5) //2。条件,循环的条件 { alert(i); //3。语句,条件成立执行的语句 i=i+1; //4。自增,每次循环i的值自己+1 } |
1
2
3
4
|
for (初始化;条件;自增) { 语句 }; |
1
2
3
4
|
for ( var i=0;i<5;i++) { alert(i); }; |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
< style > div{ width: 100px; height: 100px; float: left; border: 1px solid black; margin: 10px; } </ style > < script > window.onload=function () { var adiv=document.getElementsByTagName('div'); //定义变量获取页面中的div元素组 for(var i=0;i< 4 ;i++) //循环(定义循环条件初始值为0;当i<小于4执行循环;每次循环i的值+1) { adiv[i] .style.background = 'red' ; //循环执行语句:改变div的背景为红色. }; }; </script> < body > < div ></ div > < div ></ div > < div ></ div > < div ></ div > </ body > |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
< style > div{ width: 100px; height: 100px; float: left; border: 1px solid black; margin: 10px; } </ style > < script > window.onload=function () { var adiv=document.getElementsByTagName('div'); for(var i=0;i< adiv.length ;i++) //length(个数)根据元素组有多少个元素个数,自动进行循环次数 { adiv[i] .style.background = 'red' ; }; }; </script> < body > < div ></ div > < div ></ div > < div ></ div > < div ></ div > < div ></ div > < div ></ div > < div ></ div > < div ></ div > </ body > |
length(个数)根据元素组有多少个元素个数,自动进行循环次数
小例子: 全选----checked属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
< script > window.onload=function() { var obtn1=document.getElementById('btn1'); //定义变量,使用id获取btn1全选按钮 var odiv=document.getElementById('div1'); //定义变量,使用id获取div1 var ach=odiv.getElementsByTagName('input'); //定义变量,使用元素组获取div1下的input标签,这样就避免了全选按钮也被选中. obtn1.onclick=function () //为全选按钮添加鼠标点击事件 { for(var i=0;i< ach.length ;i++) //循环 定义循环i的初始值为0;当i的值小于元素组所包含ach的个数时开始循环,每次循环i自身+1 { ach[i] .checked = true ; //循环时执行操作ach的checked选中属性值设为true真 }; }; }; </script> < body > < input id = "btn1" type = "button" value = "全选" />< br /> < div id = "div1" > < input type = "checkbox" />< br /> < input type = "checkbox" />< br /> < input type = "checkbox" />< br /> < input type = "checkbox" />< br /> </ div > </ body > |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<script> window.onload= function () { var obtn1=document.getElementById( 'btn1' ); //定义变量,使用id获取btn1全选按钮 var obtn2=document.getElementById( 'btn2' ); //定义变量,使用id获取btn2不选按钮 var obtn3=document.getElementById( 'btn3' ); //定义变量,使用id获取btn3反选按钮 var odiv=document.getElementById( 'div1' ); //定义变量,使用id获取div1 var ach=odiv.getElementsByTagName( 'input' ); //定义变量,使用元素组获取div1下的input标签,这样就避免了全选按钮也被选中. obtn1.onclick= function () //为全选按钮添加鼠标点击事件 { for ( var i=0;i<ach.length;i++) //循环 定义循环i的初始值为0;当i的值小于元素组所包含ach的个数时开始循环,每次循环i自身+1 { ach[i].checked= true ; //循环时执行操作ach的checked选中属性值为true真 }; }; obtn2.onclick= function () //为不选按钮添加鼠标点击事件 { for ( var i=0;i<ach.length;i++) //循环 定义循环i的初始值为0;当i的值小于元素组所包含ach的个数时开始循环,每次循环i自身+1 { ach[i].checked= false ; //循环时执行操作ach的checked选中属性值为false假 }; }; obtn3.onclick= function () //为反选按钮添加鼠标点击事件 { for ( var i=0;i<ach.length;i++) //循环 定义循环i的初始值为0;当i的值小于元素组所包含ach的个数时开始循环,每次循环i自身+1 { if (ach[i].checked== true ) //如果ach的checked属性值是true选中的 { ach[i].checked= false ; //那么就把它改为false不选中 } else //而反过来,如果如果ach的checked属性值不是true而是false没有选中 { ach[i].checked= true ; //那么就把它改为true选中 }; }; }; }; </script> <body> <input id= "btn1" type= "button" value= "全选" /><br /> <input id= "btn2" type= "button" value= "不选" /><br /> <input id= "btn3" type= "button" value= "反选" /><br /> <div id= "div1" > <input type= "checkbox" /><br /> <input type= "checkbox" /><br /> <input type= "checkbox" /><br /> <input type= "checkbox" /><br /> </div> </body> |
javascript-智能社-笔记的更多相关文章
- JavaScript 智能社 拖拽
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
- JavaScript 智能社 完美运动框架
简约版: function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { r ...
- JavaScript学习--(智能社视频)
JavaScript学习,这是智能社官网上的JS视频,讲解的挺不错的,就是没有视频的demo,在视频中附上自己编写的一些demo... 下载地址:http://pan.baidu.com/s/1cPz ...
- 智能社官网顶部导航实现demo
从智能社的blue老师公开课中学习到了很多,在此表示感谢. 这个导航很好玩,于是就想实现一个. html <div id="box"> <ul> <l ...
- JavaScript语言精粹笔记
JavaScript语言精粹笔记 掌握语言的每个特性可以让你出风头,但是并不推荐,因为一部分的特性带来的麻烦可能远超本身的价值.正如书中所言,坏的材料并不能雕刻出好的作品,要成为一名更好的程序员,要取 ...
- Visual Studio 2012设置Jquery/Javascript智能提示
Visual Studio 2012设置Jquery/Javascript智能提示 在Visual Studio 2008 Visual Studio 2010中微软已经开始支持jquery/java ...
- JavaScript看书笔记01
JavaScript看书笔记... ------------------- JavaScript允许var定义语句出现在函数内部的任意位置.JS中使用Var来显示的给变量声明 JavaScript是一 ...
- JavaScript正则表达式学习笔记(二) - 打怪升级
本文接上篇,基础部分相对薄弱的同学请移步<JavaScript正则表达式学习笔记(一) - 理论基础>.上文介绍了8种JavaScript正则表达式的属性,本文还会追加介绍几种JavaSc ...
- 《你不知道的javascript》读书笔记2
概述 放假读完了<你不知道的javascript>上篇,学到了很多东西,记录下来,供以后开发时参考,相信对其他人也有用. 这篇笔记是这本书的下半部分,上半部分请见<你不知道的java ...
- 《编写可维护的javascript》读书笔记(中)——编程实践
上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. ...
随机推荐
- [转载]MongoDB的真正性能
最近开始研究MySQL和MongoDB,发现这方面资料不多.尤其是真正的说到点子上的文章,太少了. 有一些对比测试的文章基本上都是瞎测,测试方法都测到了马腿上,得出的结论基本上都是NoSQL毫无价值 ...
- PHP mysql_real_escape_string() 函数
定义和用法 mysql_real_escape_string() 函数转义 SQL 语句中使用的字符串中的特殊字符. 下列字符受影响: \x00 \n \r \ ' " \x1a 如果成功, ...
- android fragment嵌套fragment出现的问题:no activity
package com.example.fragmentNavigation2.fragment; import android.content.Context; import android.os. ...
- ALT+数字,可输入汉字或拉丁字母 good
各种编码查询表:http://bm.kdd.cc/ 输入 ALT + 50385 就出 难 字了,原因是它的十六进制ANSI编码是C4D1=50385 同理: 汉=BABA=47802字=D7D6=5 ...
- 【POJ】3076 Sudoku
DLX第一题,模板留念. /* 3076 */ #include <iostream> #include <string> #include <map> #incl ...
- Medium上关于git的文章
rebase和merge的正确使用时机 https://medium.com/@porteneuve/getting-solid-at-git-rebase-vs-merge-4fa1a48c53aa ...
- ERP 及相关名词的含义
英文缩写 英文名称 中文含义 MRP Material requirements planning 物料需求计划 MRP II Manufacturing resource planning 制造 ...
- SharePoint2010主题和样式揭秘
转:http://www.cnblogs.com/Ryu666/archive/2011/07/28/2119652.html 好久好久没写技术博客了,差点以为技术已经离我远去.但鱼离不开水,我怎能把 ...
- MVC 3.0 在各个版本IIS中的部署
概述: 最近在做一个MVC 3的项目,在部署服务器时破费了一番功夫,特将过程整理下来,希望可以帮到大家! 本文主要介绍在IIS5.1.IIS6.0.IIS7.5中安装配置MVC 3的具体办法! 正文: ...
- BrnMall多店版网上商城正式发布
前些日子一直忙于多店版网上商城系统BrnMall的开发,工作比较多,所以博客断了.这几天项目完成了,时间比较自由,所以把这段时间总结的一些关于单店版BrnShop和多店版BrnMall区别写下来,希望 ...