关于JavaScript DOM的学习总结
关于JavaScript的学习总结
通过对《JavaScript DOM编程艺术》这本书的学习，总共学习到三大部分的内容：JavaScript1,JavaScript DOM和CSS样式表。CSS和JavaScript 都是通过控制页面标签的方式，来完善页面，使页面更美观，内容更丰富。
一、JavaScript部分
1．关于JavaScript
js脚本语言
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
2．JS变量
2.1 JS的变量为易变量，没有类型的限制可以等于所有的类型。
2.2 JS变量的命名规则和java相同，且区分大小写。
JS的数据类型有7种：Number 数字类型、String 字符串类型、Boolean 布尔类型、Array 数组类型、Object 对象、Null 空对象、Undefined 未定义。
2.3 变量的声明，直接用var关键字声明即可：var a=90。也可以一次性声明多个变量：var b=1,c=2,d=3。如果一个变量没有声明就使
用，或是声明了没有设置值都是undefined。
3．数据类型的定义
数值类型: var age=33;
字符串类型: var mood=”happy”
布尔值类型: var add=true;
数组类型: var list= Array(2)
list[0]=”jhon”;
list[1]=33;
或者: var list=Array(“jhon”,33)
(注:数组内可定义任意类型的数据,且数组下标从0 开始)
NULL类型: var name=null ;或name=””;
Undefined类型: var person;
对象类型: var jer= new person;
对象类型是一种非常重要的数据类型.对象是自我包含的数据集合,包含在对象里的数据可以通过两种方式--属性(property)和方法(method) 访问
例如: person.age
Math.round()
4．JS操作符
算数操作符:加法(+),减法(-),乘法(*),除法(/)
如: var num=1+1; var num=num-1;
var num=num*num; var num=num/2;
赋值操作符: = 如: var age=33
比较操作符:>,>=,<,<=,==,===,!=(不等于)
逻辑运算符: &&(逻辑与), ||(逻辑或)
其中JS的运算符号和java的基本类似，有区别的地方在于JS有==和===，==只比较数据的值不比较类型，===叫全等于既比较值也比较数据类型
5．条件语句(或判断语句)
if(condition)
{
statements;
}
(注:条件必须放在if后边括号中,条件的求值结果永远是布尔值,true或false)
6．循环语句
6.1 while(condition){
statements;
} //只要给定条件求值为true,花括号内代码反复执行
6.2 do{
statements;
} while(condition)
// 控制条件的求值发生在每次循环后,即使循环控制条件首次求值结果为false,花括号内语句也至少会被执行一次
6.3 for(initial condition;test condition;alter condition ){
statements;
}
// 与循环有关的内容都放在for后边的圆括号内
如: for(var i=0;i<10;i++){
alert(i);
}
7．JS函数
function 函数的名称(【参数的名称】){
函数体
【return返回值】
}
【】中的为可选项。
8．变量范围
8.1变量的作用范围：使用了var关键字的变量如果不在函数里则为全局变量，在函数中带有var关键字的变量为局部变量，只能在此函数中使用。没有使用var关键字的变量即使在函数中，在此函数被调用后该变量也为全局变量。
8.2全局变量:可以在脚本任何位置引用,作用域是整个脚本.
8.3局部变量:只存在于对它做出声明的那个函数,作用域为某个特定函数
二、DOM 部分
1．关于DOM
文档对象模型（Document Object Model，简称DOM），是W3C 组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。
2．DOM的运用
DOM把一份表示为一棵树，更具体表示为“家谱树”，；来互相表示各个成员之间的关系。
如：
这个网页中所有html元素关系可表示为如下
3．节点
节点这个名词来自网络，代表网络中的一个连接点。网络是由节点构成的集合。
元素节点:如在上图中，
等元素节点,文本节点:
元素中包含文本”Do not forget to buy this stuff.”
属性节点:title="a gentle reminder",属性节点包含于元素节点当中。
关系图：
4．相关代码（以下以此段代码为示例）
4.1 getElementById（）方法
这个方法是与document对象相关联的函数。函数名后带有圆括号，内含函数参数，id值必须放在单引号或双引号里
document.getElementById（id）
例子：document.getElementById("purchases") getElementById（）方法将返回一个对象（object），该对象对应着文档里一个特定的元素节点。测试语句，用typeof操作符来查看返回的值
4.2 getElementByTagName（）方法
element.getElementByTagName（tag）
（Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。）
例子：document.getElementsByTagName("li") getElementByTagName（）方法将返回一个对象数组，他们分别对应着文档里的一个特定的元素节点。测试语句
4.3 getAttribute（）方法
该方法是一个函数，参数为：你要查询的属性的名字，不能通过document调用，只能通过一个元素节点对它调用object.getAttribute（attribute）
例子：查询每个
元素的属性
检测所有
元素的title属性.
4.4 setAttribute（）方法
也只能通过元素节点调用,该方法需要传递两个参数,一个是元素的属性,另一个是要设置的值
object.setAttribute（attribute,value）
例子:
检测带有title的
元素,并修改title的属性值.
5．childNodes属性
childNodes属性可以将任何一个元素的所有子元素检索出来。该属性将返回一个数组，数组中包含给定的元素节点的所有子元素。
element.childNodes
例子：
document.getElementsByTagName("body")[0].childN odes；
或者 document.body.childNodes；
6．nodeType属性
调用语法： node.nodeType
例子:
常用类型:
7．nodeValue属性
用于检索（和设置）节点的值。
调用语法：node.nodeValue
例子：检索节点值（如：检索一个id为des的节点第一个子元素的属性）
设置节点值：
8．firstChild和lastChild
访问childNodes[]数组的第一个元素和最后一个元素
调用语法：node.firstChild
https://www.wendangku.net/doc/1414559725.html,stChild
9．innerHTML属性
可以用来读、写某给定元素里的HTML内容
例子：
注：有
10．createElement（）方法
创建一个新的元素
调用方法：document.createElement（nodeName）
例子：
创建一个新元素
并给它设置id属性值为description 11．appendChild()方法
把新建节点插入节点树，使新建节点成为某个节点的子
节点。
调用方法：parent.appendChild（child）
例子：
12．insertBefore（）方法
这个方法把一个新元素插入到一个现有元素的前面。
注意事项：
1.想插入的新元素（newElement）
2.把它插入哪个现有元素（targetElement）前面
3.两个元素的共同父元素（parentElement）
调用方法：parentElement.insertBefore（newElement，targetElement）
例子：
注：parentNode 属性以Node 对象的形式返回指定节点的父节点。
如果指定节点没有父节点，则返回null。
（后文中有insertAfter（）方法，把一个新元素插入到一个现有元素的后面，是自己定义的方法，多被采用）
三、CSS部分
1.关于CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2.属性值
①整数和实数
这和普通意义上的整数和实数没有多大区别。在CSS中只能使用浮点小数，而不能像其他编程语言那样使用科学记数法表示实数，即1.2E3在CSS中将是不合法的。下面是几个正确的例子，整数：128、-313，实数：12.20、1415、-12.03。
②长度量
一个长度量由整数或实数加上相应的长度单位组成。长度量常用来对元素定位。而定位分为绝对定位和相对定位，因而长度单位也分为相对长度单位和绝对长度单位。
相对长度单位有：em——当前字体的高度，也就是font.size属性的值；ex——当前字体中小写字母x的高度；Dx——一个像素的长度，其实际的长度由显示器的设置决定，比如在800*600的设置下，一个像素的长度就等于屏幕的宽度除以800。
另一一点值得注意的是，子级元素不继承父级元素的相对长度值，只继承它们的实际计算值。
③百分数量（percentages）
百分数量就是数字加上百分号。显然，百分数量总是相对的，所以和相对长度量一样，百分数量不被子级元素继承。
3.CSS选择器
4.语法示例
界面：
（需要相关js文件配合）
四、常用语法
1.把执行函数加载到window.onload事件处理函数
(1)把现有window.onload事件处理函数存入变量oldonload
(2)如果处理函数上没绑定任何函数,把新函数添加给它
(3)如果已经绑定了一些函数,把新函数追加到现有指令的末尾
注:()内参数为要执行的函数名，不带有括号、参数等
2.给某一新元素追加新的class值
（1）className属性值是否为null（2）如果是，把新的class 设置值赋值给className属性（3）如果不是，把一个空格和新的class设置值追加到className属性上去
函数参数：将获得新class设置值的元素（element）和新的class
设置值（value）
3.把一个新元素插入到一个现有元素的后面
nextSibling属性：返回指定节点之后紧跟的节点，在相同的树层级中。
被返回的节点以Node 对象返回。
注释：如果没有nextSibling 节点，则返回值为null。
4.图片实现动画效果
5.给当前页面超链提供一个class属性,取值为here
6.选择的显示和隐藏div元素,让他们某一时刻只有一个在浏览器窗口可见(此处以div的class=”section”为例)
7.点击一个图片链接,在当前页面打开,且显示title属性值
(调用时shouPic(this) this做参数代表当前)
8.给表格的奇数行(或偶数行)设置class属性,以便于改变样式
(找出所有table,遍历其中所有行,设置变量odd初始为false 如果odd值为true,设置样式(或不设置)并把变量改为false)
五、总结
1.首先要考虑通过JavaScript去改变这个网页是否是必要的，
写代码并不是越多越好。
2.一定要“预留退路”，并不是每个浏览器都支持JavaScript。我们要保证，当JavaScript不被执行时，网页能完成基本操作
3.实现页面与JavaScript分离。网页大体分为三个部分：结构
层（由HTML标签组成的），表示层（CSS样式）和行为层（JavaScript语言和DOM领域）。我们要保证表示层和行为层要为结构层服务，但是也要独立存在。内嵌的JavaScript语句一旦网页不支持，整个网页将无法执行
4.进行必要的检查。如:if(!document.getElementById)
return false;如果浏览器不理解这个函数立即离开.
5.创建必要的变量。如：
var intro=document.getElementById("intro");
避免每次都要写后边那一段。
6.正确的理解JavaScript中的对象、函数、数组、变量等
7.每一种语言都有它存在的意义
六、测试代码
1.global.js
1.function addLoadEvent(func)
{
var oldonload=window.onload;
if(typeof window.onload!='function')
{
window.onload=func;
JavaScript常用知识点
1、GET和POST的区别，何时使用POST？ GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符 POST：一般用于修改服务器上的资源，对所发送的信息没有限制。 GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值， 也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。 然而，在以下情况中，请使用POST 请求： 无法使用缓存文件（更新服务器上的文件或数据库） 向服务器发送大量数据（POST 没有数据量限制） 发送包含未知字符的用户输入时，POST 比GET 更稳定也更可靠JavaScript是客户端和服务器端脚本语言，可以插入到HTML页面中，并且是目前较热门的Web开发语言。同时，JavaScript也是面向对象编程语言。 类似的基本题目还包括：JavaScript都有哪些类型?JavaScript是谁发明的?……2、列举Java和JavaScript之间的区别? Java是一门十分完整、成熟的编程语言。相比之下，JavaScript是一个可以被引入HTML页面的编程语言。这两种语言并不完全相互依赖，而是针对不同的意图而设计的。Java是一种面向对象编程(OOPS)或结构化编程语言，类似的如C ++或C，而JavaScript是客户端脚本语言，它被称为非结构化编程。
3. JavaScript和ASP脚本相比，哪个更快? JavaScript更快。JavaScript是一种客户端语言，因此它不需要Web服务器的协助来执行。另一方面，ASP是服务器端语言，因此总是比JavaScript慢。值得注意的是，Javascript现在也可用于服务器端语言(nodejs)。 4、什么是负无穷大? 负无穷大是JavaScript中的一个数字，可以通过将负数除以零来得到。 5、如何将JavaScript代码分解成几行吗? 在字符串语句中可以通过在第一行末尾使用反斜杠“\”来完成 例：document.write(“This is \a program”); 如果不是在字符串语句中更改为新行，那么javaScript会忽略行中的断点。
个人心得avascript总结
个人心得avascript总结 1、javascript是一种基于对象，和事件驱动的并具有安全性的脚本语言；基于对象，动态语言，无需编译，直接解释执行； 2、可以放在的地方；A、中，一对之间；B、单独文件中C、将脚本程序代码作为属性值、javascript 3、保留字以及关键字； 4、javascript基本语法：4.1标识：大小写字母，数字，下划线，和美元符号：不能以数字开头；4.2javascript严格区分大小写4.3 每条语句必须以分号结束；（不写，一般没事，但是可能会引起不必要的歧义）4.4多行注释/**/单行注释： //4.5Functiontest(){Vari=100;//不加var就会自动变成全局变量，这样在以后会产生冲突；Alert(i);}Test();5、数据类型:(数字，boolean，String字符串；日期什么的是对象了)特殊值：NaN，Infinity，函数isNaN（）；isFinite（）；Boolean，取值只能是true，和false全是小写逻辑运算符vara=100;varb=0;varc=a||b;alert(c);//返回值是100：就是当两边返回值都是false时，返回第一个或最后一个不为false的值；6、什么值在javascript中是false？逻辑运算中，0，“”，false，null，undefined，NaN均表示false6.1想要赋个默认值：怎么办？ functiontest(e){e=e||newobject();if(https://www.wendangku.net/doc/1414559725.html,!=ang){alert(e);}}test(3);看这里：Varsth=test;//相当于将函数赋给一个变量，这个变量之后可以传参运行了；Alert(sth(100));7、javascript中的系统函数：
javaScript重点知识总结
1、JavaScript 显示数据 JavaScript 可以通过不同的方式来输出数据： 使用window.alert()弹出警告框。 使用document.write()方法将内容写到HTML 文档中。 使用innerHTML写入到HTML 元素。 使用console.log()写入到浏览器的控制台。 实例： document.getElementById("demo").innerHTML = "段落已修改。"; document.write("
这是一个标题
");//write可以直接写入格式！ 2、JavaScript 数据类型 var length = 16; // Number 通过数字字面量赋值var points = x * 10; // Number 通过表达式字面量赋值var lastName = "Johnson"; // String 通过字符串字面量赋值var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值 var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW"; 3、JavaScript事件HTML 事件可以是浏览器行为，也可以是用户行为。 以下是HTML 事件的实例： HTML 页面完成加载。 HTML input 字段改变时。 HTML 按钮被点击。 右图是常见的事件(前面都有on) 事件有三种写法，举onclick为例： //后面再写函数实现方式。 4、JavaScript 字符串 var carname = "Volvo XC60"; var character = carname[7]; //字符串的索引从0 开始 JavaScript本身对单引号还是双引号没有区别。一般都用双引号，两个都存在时，再考虑。
JavaScript复习题
复习题1 一、选择题 1、写“Hello World”的正确javascript语法是 A. ("Hello World") B. "Hello World" C. ("Hello World") D. ("Hello World") 2、JS特性不包括( ) A.解释性 B.用于客户端 C.基于对象 D.面向对象 3、下列JS的判断语句中( )是正确的 (i==0)(i=0) i==0 then i=0 then 4、下列JavaScript的循环语句中( )是正确的 (i<10;i++) (i=0;i<10) i=1 to 10 (i=0;i<=10;i++) 5、下列的哪一个表达式将返回假 A.!(3<=1) B.(4>=4)&&(5<=2) C.(“a”==”a”)&&(“c”!=”d”) D.(2<3)||(3<2) 6、下列选项中,( )不是网页中的事件 7、有语句“var x=0;while(____) x+=2;”，要使while循环体执行10次，空白处的循环判定式应写为： A．x<10 B. x<=10 <20 <=20 8、JS语句 var a1=10; var a2=20; alert(“a1+a2=”+a1+a2) 将显示( )结果 +a2=30 +a2=1020+a2=a1+a2 9、将字串s中的所有字母变为小写字母的方法是( ) 、以下( )表达式产生一个0~7之间(含0,7)的随机整数. . floor()*8) 11、产生当前日期的方法是( ) (); () Date() Now() 12、如果想在网页显示后,动态地改变网页的标题( ) A.是不可能的 B.通过(“新的标题内容”) C. 通过=(“新的标题内容”) D. 通过(“新的标题内容”) 13、某网页中有一个窗体对象,其名称是mainForm,该窗体对象的第一个元素是按钮,其名称是myButton,表述该按钮对象的方法是()
个人心得javascript总结模板
个人心得javascript总结模板 个人心得javascript总结模板 篇一：个人心得javascript总结 1、javascript 是一种基于对象，和事件驱动的并具有安全性的脚本语言；基于对象，动态语言，无需编译，直接解释执行； 2、可以放在的地方； A、中，一对 之间； B、单独文件中 C、将脚本程序代码作为属性值、javascript 3、保留字以及关键字； 4、javascript基本语法： 4.1 标识：大小写字母，数字，下划线，和美元符号：不能以数字开头； 4.2 javascript严格区分大小写 4.3 每条语句必须以分号结束；（不写，一般没事，但是可能会引起不必要的歧义） 4.4 多行注释**单行注释： 4.5 Function test(){ Var i=100;不加var 就会自动变成全局变量，这样在以后会产生冲突；
Alert(i); } Test(); 5、数据类型：(数字，boolean，String字符串；日期什么的是对象了) 特殊值：NaN，Infinity，函数isNaN（）；isFinite（）； Boolean，取值只能是true，和false 全是小写 逻辑运算符 var a=100; var b=0; var c=a||b; alert(c);返回值是100：就是当两边返回值都是false时，返回第一个或最后一个不为false的值； 6、什么值在javascript中是false？ 逻辑运算中，0，“”，false，null，undefined，NaN均表示false 6.1想要赋个默认值：怎么办？ function test(e){ e=e||new object(); if(https://www.wendangku.net/doc/1414559725.html,!='ang'){ alert(e);}} test(3); 看这里： Var sth=test;相当于将函数赋给一个变量，这个变量之后可以传参运行
Bootstrap知识简单归纳
Bootstrap 响应式实用工具---目前只适用于块和表切换 Bootstrap 字形图标（Glyphicons） 什么是字形图标（Glyphicons）？ 字形图标（Glyphicons）是在Web 项目中使用的图标字体。 字形图标（Glyphicons）列表 点击这里，查看可用的字形图标（Glyphicons）列表 用法 如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。 在线定制字形图标（Glyphicons） 点击这里，在线定制字形图标（Glyphicons）。 插入符 使用插入符表示下拉功能和方向。使用带有class caret 的 元素得到该功能。 关闭图标 使用通用的关闭图标来关闭模态框和警告框。使用class close 得到关闭图标。 快速浮动 您可以分别使用class pull-left 或pull-right 来把元素向左或向右浮动。下面的实例演示了这点。 如需对齐导航栏中的组件，请使用.navbar-left 或.navbar-right 代替。请查看Bootstrap 导航栏。 居中内容块 使用class center-block 来居中元素。
清除浮动 如需清除元素的浮动，请使用.clearfix class。 显示和隐藏内容 您可以通过使用class .show 和.hidden 来强行设置元素显示或隐藏（包括屏幕阅读器）。屏幕阅读器 您可以通过使用class .sr-only 来把元素对所有设备隐藏，除了屏幕阅读器。 Bootstrap 下拉菜单（Dropdowns） 对齐 通过向.dropdown-menu 添加class .pull-right 来向右对齐下拉菜单class="dropdown-menu pull-right" 标题 您可以使用class dropdown-header 向下拉菜单的标签区域添加标题 Bootstrap 按钮组 按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。您可以通过Bootstrap 按钮（Button）插件添加可选的JavaScript 单选框和复选框样式行为 Bootstrap 按钮下拉菜单 本章将讲解如何使用Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单，只需要简单地在在一个.btn-group 中放置按钮和下拉菜单即可。您也可以使用 来指示按钮作为下拉菜单。
文本节点:
元素中包含文本”Do not forget to buy this stuff.”
属性节点:title="a gentle reminder",属性节点包含于元素节点当中。
关系图：
4．相关代码（以下以此段代码为示例）
4.1 getElementById（）方法
这个方法是与document对象相关联的函数。函数名后带有圆括号，内含函数参数，id值必须放在单引号或双引号里
document.getElementById（id）
例子：document.getElementById("purchases") getElementById（）方法将返回一个对象（object），该对象对应着文档里一个特定的元素节点。测试语句，用typeof操作符来查看返回的值
4.2 getElementByTagName（）方法
element.getElementByTagName（tag）
（Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。）
例子：document.getElementsByTagName("li") getElementByTagName（）方法将返回一个对象数组，他们分别对应着文档里的一个特定的元素节点。测试语句
4.3 getAttribute（）方法
该方法是一个函数，参数为：你要查询的属性的名字，不能通过document调用，只能通过一个元素节点对它调用object.getAttribute（attribute）
例子：查询每个
元素的属性
检测所有
元素的title属性.
4.4 setAttribute（）方法
也只能通过元素节点调用,该方法需要传递两个参数,一个是元素的属性,另一个是要设置的值
object.setAttribute（attribute,value）
例子:
检测带有title的
元素,并修改title的属性值.
5．childNodes属性
childNodes属性可以将任何一个元素的所有子元素检索出来。该属性将返回一个数组，数组中包含给定的元素节点的所有子元素。
element.childNodes
例子：
document.getElementsByTagName("body")[0].childN odes；
或者 document.body.childNodes；
6．nodeType属性
调用语法： node.nodeType
例子:
常用类型:
7．nodeValue属性
用于检索（和设置）节点的值。
调用语法：node.nodeValue
例子：检索节点值（如：检索一个id为des的节点第一个子元素的属性）
设置节点值：
8．firstChild和lastChild
访问childNodes[]数组的第一个元素和最后一个元素
调用语法：node.firstChild
https://www.wendangku.net/doc/1414559725.html,stChild
9．innerHTML属性
可以用来读、写某给定元素里的HTML内容
例子：
注：有
10．createElement（）方法
创建一个新的元素
调用方法：document.createElement（nodeName）
例子：
创建一个新元素
并给它设置id属性值为description 11．appendChild()方法
把新建节点插入节点树，使新建节点成为某个节点的子
节点。
调用方法：parent.appendChild（child）
例子：
12．insertBefore（）方法
这个方法把一个新元素插入到一个现有元素的前面。
注意事项：
1.想插入的新元素（newElement）
2.把它插入哪个现有元素（targetElement）前面
3.两个元素的共同父元素（parentElement）
调用方法：parentElement.insertBefore（newElement，targetElement）
例子：
注：parentNode 属性以Node 对象的形式返回指定节点的父节点。
如果指定节点没有父节点，则返回null。
（后文中有insertAfter（）方法，把一个新元素插入到一个现有元素的后面，是自己定义的方法，多被采用）
三、CSS部分
1.关于CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2.属性值
①整数和实数
这和普通意义上的整数和实数没有多大区别。在CSS中只能使用浮点小数，而不能像其他编程语言那样使用科学记数法表示实数，即1.2E3在CSS中将是不合法的。下面是几个正确的例子，整数：128、-313，实数：12.20、1415、-12.03。
②长度量
一个长度量由整数或实数加上相应的长度单位组成。长度量常用来对元素定位。而定位分为绝对定位和相对定位，因而长度单位也分为相对长度单位和绝对长度单位。
相对长度单位有：em——当前字体的高度，也就是font.size属性的值；ex——当前字体中小写字母x的高度；Dx——一个像素的长度，其实际的长度由显示器的设置决定，比如在800*600的设置下，一个像素的长度就等于屏幕的宽度除以800。
另一一点值得注意的是，子级元素不继承父级元素的相对长度值，只继承它们的实际计算值。
③百分数量（percentages）
百分数量就是数字加上百分号。显然，百分数量总是相对的，所以和相对长度量一样，百分数量不被子级元素继承。
3.CSS选择器
4.语法示例
界面：
（需要相关js文件配合）
四、常用语法
1.把执行函数加载到window.onload事件处理函数
(1)把现有window.onload事件处理函数存入变量oldonload
(2)如果处理函数上没绑定任何函数,把新函数添加给它
(3)如果已经绑定了一些函数,把新函数追加到现有指令的末尾
注:()内参数为要执行的函数名，不带有括号、参数等
2.给某一新元素追加新的class值
（1）className属性值是否为null（2）如果是，把新的class 设置值赋值给className属性（3）如果不是，把一个空格和新的class设置值追加到className属性上去
函数参数：将获得新class设置值的元素（element）和新的class
设置值（value）
3.把一个新元素插入到一个现有元素的后面
nextSibling属性：返回指定节点之后紧跟的节点，在相同的树层级中。
被返回的节点以Node 对象返回。
注释：如果没有nextSibling 节点，则返回值为null。
4.图片实现动画效果
5.给当前页面超链提供一个class属性,取值为here
6.选择的显示和隐藏div元素,让他们某一时刻只有一个在浏览器窗口可见(此处以div的class=”section”为例)
7.点击一个图片链接,在当前页面打开,且显示title属性值
(调用时shouPic(this) this做参数代表当前)
8.给表格的奇数行(或偶数行)设置class属性,以便于改变样式
(找出所有table,遍历其中所有行,设置变量odd初始为false 如果odd值为true,设置样式(或不设置)并把变量改为false)
五、总结
1.首先要考虑通过JavaScript去改变这个网页是否是必要的，
写代码并不是越多越好。
2.一定要“预留退路”，并不是每个浏览器都支持JavaScript。我们要保证，当JavaScript不被执行时，网页能完成基本操作
3.实现页面与JavaScript分离。网页大体分为三个部分：结构
层（由HTML标签组成的），表示层（CSS样式）和行为层（JavaScript语言和DOM领域）。我们要保证表示层和行为层要为结构层服务，但是也要独立存在。内嵌的JavaScript语句一旦网页不支持，整个网页将无法执行
4.进行必要的检查。如:if(!document.getElementById)
return false;如果浏览器不理解这个函数立即离开.
5.创建必要的变量。如：
var intro=document.getElementById("intro");
避免每次都要写后边那一段。
6.正确的理解JavaScript中的对象、函数、数组、变量等
7.每一种语言都有它存在的意义
六、测试代码
1.global.js
1.function addLoadEvent(func)
{
var oldonload=window.onload;
if(typeof window.onload!='function')
{
window.onload=func;
JavaScript常用知识点
1、GET和POST的区别，何时使用POST？ GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符 POST：一般用于修改服务器上的资源，对所发送的信息没有限制。 GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值， 也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。 然而，在以下情况中，请使用POST 请求： 无法使用缓存文件（更新服务器上的文件或数据库） 向服务器发送大量数据（POST 没有数据量限制） 发送包含未知字符的用户输入时，POST 比GET 更稳定也更可靠JavaScript是客户端和服务器端脚本语言，可以插入到HTML页面中，并且是目前较热门的Web开发语言。同时，JavaScript也是面向对象编程语言。 类似的基本题目还包括：JavaScript都有哪些类型?JavaScript是谁发明的?……2、列举Java和JavaScript之间的区别? Java是一门十分完整、成熟的编程语言。相比之下，JavaScript是一个可以被引入HTML页面的编程语言。这两种语言并不完全相互依赖，而是针对不同的意图而设计的。Java是一种面向对象编程(OOPS)或结构化编程语言，类似的如C ++或C，而JavaScript是客户端脚本语言，它被称为非结构化编程。
3. JavaScript和ASP脚本相比，哪个更快? JavaScript更快。JavaScript是一种客户端语言，因此它不需要Web服务器的协助来执行。另一方面，ASP是服务器端语言，因此总是比JavaScript慢。值得注意的是，Javascript现在也可用于服务器端语言(nodejs)。 4、什么是负无穷大? 负无穷大是JavaScript中的一个数字，可以通过将负数除以零来得到。 5、如何将JavaScript代码分解成几行吗? 在字符串语句中可以通过在第一行末尾使用反斜杠“\”来完成 例：document.write(“This is \a program”); 如果不是在字符串语句中更改为新行，那么javaScript会忽略行中的断点。
个人心得avascript总结
个人心得avascript总结 1、javascript是一种基于对象，和事件驱动的并具有安全性的脚本语言；基于对象，动态语言，无需编译，直接解释执行； 2、可以放在的地方；A、中，一对之间；B、单独文件中C、将脚本程序代码作为属性值、javascript 3、保留字以及关键字； 4、javascript基本语法：4.1标识：大小写字母，数字，下划线，和美元符号：不能以数字开头；4.2javascript严格区分大小写4.3 每条语句必须以分号结束；（不写，一般没事，但是可能会引起不必要的歧义）4.4多行注释/**/单行注释： //4.5Functiontest(){Vari=100;//不加var就会自动变成全局变量，这样在以后会产生冲突；Alert(i);}Test();5、数据类型:(数字，boolean，String字符串；日期什么的是对象了)特殊值：NaN，Infinity，函数isNaN（）；isFinite（）；Boolean，取值只能是true，和false全是小写逻辑运算符vara=100;varb=0;varc=a||b;alert(c);//返回值是100：就是当两边返回值都是false时，返回第一个或最后一个不为false的值；6、什么值在javascript中是false？逻辑运算中，0，“”，false，null，undefined，NaN均表示false6.1想要赋个默认值：怎么办？ functiontest(e){e=e||newobject();if(https://www.wendangku.net/doc/1414559725.html,!=ang){alert(e);}}test(3);看这里：Varsth=test;//相当于将函数赋给一个变量，这个变量之后可以传参运行了；Alert(sth(100));7、javascript中的系统函数：
javaScript重点知识总结
1、JavaScript 显示数据 JavaScript 可以通过不同的方式来输出数据： 使用window.alert()弹出警告框。 使用document.write()方法将内容写到HTML 文档中。 使用innerHTML写入到HTML 元素。 使用console.log()写入到浏览器的控制台。 实例： document.getElementById("demo").innerHTML = "段落已修改。"; document.write("
这是一个标题
");//write可以直接写入格式！ 2、JavaScript 数据类型 var length = 16; // Number 通过数字字面量赋值var points = x * 10; // Number 通过表达式字面量赋值var lastName = "Johnson"; // String 通过字符串字面量赋值var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值 var cars=new Array(); cars[0]="Saab"; cars[1]="Volvo"; cars[2]="BMW"; 3、JavaScript事件HTML 事件可以是浏览器行为，也可以是用户行为。 以下是HTML 事件的实例： HTML 页面完成加载。 HTML input 字段改变时。 HTML 按钮被点击。 右图是常见的事件(前面都有on) 事件有三种写法，举onclick为例： //后面再写函数实现方式。 4、JavaScript 字符串 var carname = "Volvo XC60"; var character = carname[7]; //字符串的索引从0 开始 JavaScript本身对单引号还是双引号没有区别。一般都用双引号，两个都存在时，再考虑。
JavaScript复习题
复习题1 一、选择题 1、写“Hello World”的正确javascript语法是 A. ("Hello World") B. "Hello World" C. ("Hello World") D. ("Hello World") 2、JS特性不包括( ) A.解释性 B.用于客户端 C.基于对象 D.面向对象 3、下列JS的判断语句中( )是正确的 (i==0)(i=0) i==0 then i=0 then 4、下列JavaScript的循环语句中( )是正确的 (i<10;i++) (i=0;i<10) i=1 to 10 (i=0;i<=10;i++) 5、下列的哪一个表达式将返回假 A.!(3<=1) B.(4>=4)&&(5<=2) C.(“a”==”a”)&&(“c”!=”d”) D.(2<3)||(3<2) 6、下列选项中,( )不是网页中的事件 7、有语句“var x=0;while(____) x+=2;”，要使while循环体执行10次，空白处的循环判定式应写为： A．x<10 B. x<=10 <20 <=20 8、JS语句 var a1=10; var a2=20; alert(“a1+a2=”+a1+a2) 将显示( )结果 +a2=30 +a2=1020+a2=a1+a2 9、将字串s中的所有字母变为小写字母的方法是( ) 、以下( )表达式产生一个0~7之间(含0,7)的随机整数. . floor()*8) 11、产生当前日期的方法是( ) (); () Date() Now() 12、如果想在网页显示后,动态地改变网页的标题( ) A.是不可能的 B.通过(“新的标题内容”) C. 通过=(“新的标题内容”) D. 通过(“新的标题内容”) 13、某网页中有一个窗体对象,其名称是mainForm,该窗体对象的第一个元素是按钮,其名称是myButton,表述该按钮对象的方法是()
个人心得javascript总结模板
个人心得javascript总结模板 个人心得javascript总结模板 篇一：个人心得javascript总结 1、javascript 是一种基于对象，和事件驱动的并具有安全性的脚本语言；基于对象，动态语言，无需编译，直接解释执行； 2、可以放在的地方； A、中，一对 之间； B、单独文件中 C、将脚本程序代码作为属性值、javascript 3、保留字以及关键字； 4、javascript基本语法： 4.1 标识：大小写字母，数字，下划线，和美元符号：不能以数字开头； 4.2 javascript严格区分大小写 4.3 每条语句必须以分号结束；（不写，一般没事，但是可能会引起不必要的歧义） 4.4 多行注释**单行注释： 4.5 Function test(){ Var i=100;不加var 就会自动变成全局变量，这样在以后会产生冲突；
Alert(i); } Test(); 5、数据类型：(数字，boolean，String字符串；日期什么的是对象了) 特殊值：NaN，Infinity，函数isNaN（）；isFinite（）； Boolean，取值只能是true，和false 全是小写 逻辑运算符 var a=100; var b=0; var c=a||b; alert(c);返回值是100：就是当两边返回值都是false时，返回第一个或最后一个不为false的值； 6、什么值在javascript中是false？ 逻辑运算中，0，“”，false，null，undefined，NaN均表示false 6.1想要赋个默认值：怎么办？ function test(e){ e=e||new object(); if(https://www.wendangku.net/doc/1414559725.html,!='ang'){ alert(e);}} test(3); 看这里： Var sth=test;相当于将函数赋给一个变量，这个变量之后可以传参运行
Bootstrap知识简单归纳
Bootstrap 响应式实用工具---目前只适用于块和表切换 Bootstrap 字形图标（Glyphicons） 什么是字形图标（Glyphicons）？ 字形图标（Glyphicons）是在Web 项目中使用的图标字体。 字形图标（Glyphicons）列表 点击这里，查看可用的字形图标（Glyphicons）列表 用法 如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。 在线定制字形图标（Glyphicons） 点击这里，在线定制字形图标（Glyphicons）。 插入符 使用插入符表示下拉功能和方向。使用带有class caret 的 元素得到该功能。 关闭图标 使用通用的关闭图标来关闭模态框和警告框。使用class close 得到关闭图标。 快速浮动 您可以分别使用class pull-left 或pull-right 来把元素向左或向右浮动。下面的实例演示了这点。 如需对齐导航栏中的组件，请使用.navbar-left 或.navbar-right 代替。请查看Bootstrap 导航栏。 居中内容块 使用class center-block 来居中元素。
清除浮动 如需清除元素的浮动，请使用.clearfix class。 显示和隐藏内容 您可以通过使用class .show 和.hidden 来强行设置元素显示或隐藏（包括屏幕阅读器）。屏幕阅读器 您可以通过使用class .sr-only 来把元素对所有设备隐藏，除了屏幕阅读器。 Bootstrap 下拉菜单（Dropdowns） 对齐 通过向.dropdown-menu 添加class .pull-right 来向右对齐下拉菜单class="dropdown-menu pull-right" 标题 您可以使用class dropdown-header 向下拉菜单的标签区域添加标题 Bootstrap 按钮组 按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。您可以通过Bootstrap 按钮（Button）插件添加可选的JavaScript 单选框和复选框样式行为 Bootstrap 按钮下拉菜单 本章将讲解如何使用Bootstrap class 向按钮添加下拉菜单。如需向按钮添加下拉菜单，只需要简单地在在一个.btn-group 中放置按钮和下拉菜单即可。您也可以使用 来指示按钮作为下拉菜单。