@Secretmm
2016-06-05T07:24:37.000000Z
字数 43315
阅读 1194
web前端html
padding-top, padding-right, padding-bottom, and padding-left
padding: 10px 20px 10px 20px;
margin-top, margin-right, margin-bottom, and margin-left
margin: 10px 20px 10px 20px;
内联元素，比如：
链接（或叫锚点）（links / anchors） <a>
强调词（emphasised words） <em>
着重词（important words） <strong>
短引用（short quotes） <q>
缩写（abbreviations） <abbr>
引用（cite） <cite>
斜体（italic）<i>
图片（image）<img>
输入框（input box）<input>
选择框（select box）<select>
间隔（span）<span>
输入标签（label）<label>
<button class="btn btn-block btn-primary">
<i class="fa fa-thumbs-up"></i>
Like
</button>
关于栅格样式的理解
http://www.cnblogs.com/linjiqin/p/3559800.html
<h3 class="text-primary text-center">
jQuery Playground
</h3>
字会变成蓝色哦
第一个js 代码
<script>
$(document).ready(function(){
});
</script>
元素 element
Use the jQuery addClass() function to give the classes animated and bounce to your button elements.
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
});
</script>
You see how we made all of your button elements bounce? We selected them with $("button"), then we added some CSS classes to them with .addClass("animated bounce");.
You just used jQuery's .addClass() function, which allows you to add classes to elements.
addClass 增加样式
类 class
Use the jQuery addClass() function to give the classes animated and shake to all your elements with the class well.
<script>
$(document).ready(function() {
$(".well").addClass("animated shake");
});
</script>
First, let's target your div elements with the class well by using the $(".well") selector.
Note that, just like with CSS declarations, you type a . before the class's name.
Then use jQuery's .addClass() function to add the classes animated and shake.
addClass 增加样式
id
Target the element with the id target3 and use the jQuery addClass() function to give it the class fadeOut.
<script>
$(document).ready(function() {
$("#target3").addClass("fadeOut");
});
</script>
First target your button element with the id target3 by using the $("#target3") selector.
Note that, just like with CSS declarations, you type a # before the id's name.
Then use jQuery's .addClass() function to add the classes animated and fadeOut.
Let's remove the btn-default class from all of our button elements.
<script>
$(document).ready(function() {
$("button").removeClass("btn-default");
});
</script>
you can remove them with jQuery's removeClass() function.
Your target1 element should have red text.
<script>
$(document).ready(function() {
$("#target1").css("color","red");
});
</script>
jQuery has a function called .css() that allows you to change the CSS of an element.
Disable your target1 button.
<script>
$(document).ready(function() {
$("#target1").prop("disabled", true);
});
</script>
You can also change the non-CSS properties of HTML elements with jQuery. For example, you can disable buttons.【翻译：您还可以更改使用jQuery的HTML元素的非CSS属性。例如，您可以禁用按钮。】
jQuery has a function called .prop() that allows you to adjust the properties of elements.【翻译：jQuery有一个名为.prop（）函数，它允许您调整元素的属性。】
Emphasize（强调） the text in your target4 button by adding HTML tags.
<script>
$(document).ready(function() {
$("#target4").html("<em>#target4</em>");
});
</script>
jQuery has a function called .html() that lets you add HTML tags and text within an element. Any content previously within the element will be completely replaced with the content you provide using this function.【翻译：jQuery有一个名为的.html（）函数，可以让你在一个元素内添加HTML标记和文字。以前在元素中的任何内容将与您提供使用此功能的内容被完全替换。】
Use jQuery to remove your target4 element from your page.
<script>
$(document).ready(function() {
$("#target4").remove();
});
</script>
jQuery has a function called .remove() that will remove an HTML element entirely
Remove element target4 from the page by using the .remove() function.
jQuery has a function called .appendTo() that allows you to select HTML elements and append them to another element.
For example, if we wanted to move target4 from our right well to our left well, we would use:
<script>
$(document).ready(function() {
$("#target4").appendTo("#left-well");
});
</script>
A copy of your target5 element should also be inside your left-well.
<script>
$(document).ready(function() {
$("#target5").clone().appendTo("#left-well");
});
</script>
you can also copy them from one place to another.
jQuery has a function called .clone() that makes a copy of an element.
jQuery has a function called .parent() that allows you to access the parent of whichever element you've selected.
Here's an example of how you would use the parent() function if you wanted to give the parent element of the left-well element a background color of blue:
用.parent()改变父类的属性
<script>
$(document).ready(function() {
$("#left-well").parent().css("background-color", "blue")
});
</script>
jQuery has a function called .children() that allows you to access the children of whichever element you've selected.
Here's an example of how you would use the children() function to give the children of your left-well element the color of blue:
用.children()改变其子类属性
<script>
$(document).ready(function() {
$("#left-well").children().css("color", "blue")
});
</script>
(声明变量用 var)
JavaScript provides seven different data types which are
undefined, null, Boolean, string, symbol, number, and object.
变量名可以任意取名，但要遵循命名规则:
1.变量必须使用字母、下划线(_)或者美元符($)开始。
2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
3.变量名区分大小写，如:A与a是两个不同变量。
4.不能使用JavaScript关键词与JavaScript保留字。http://www.imooc.com/code/117
（定义函数用function）
<script type="text/javascript">
function contxt() //定义函数
{
alert("哈哈，调用函数了!");
}
//contxt();
</script>
<form>
<input type="button" value="点击我" onclick=" contxt()"/>
</form>
（document.write）
document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。
第一种:输出内容用“”括起，直接输出""号内的内容。
<script type="text/javascript">
document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。
</script>
第二种:通过变量，输出内容
<script type="text/javascript">
var mystr="hello world!";
document.write(mystr); //直接写变量名，输出变量存储的内容。
</script>
第三种:输出多项内容，内容之间用+号连接。
<script type="text/javascript">
var mystr="hello";
document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接
</script>
第四种:输出HTML标签，并起作用，标签使用“”括起来。
<script type="text/javascript">
var mystr="hello";
document.write(mystr+"<br>");//输出hello后，输出一个换行符
document.write("JavaScript");
</script>
（alert 消息对话框）
我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。(只有确定这一个按钮)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>alert</title>
<script type="text/javascript">
function rec(){
var mychar="I love JavaScript";
alert(mychar);//输出 I love JavaScript;
alert("myclar");//输出 mychar;
}
</script>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="点击我，弹出对话框" />
</body>
</html>
（confirm 消息对话框）
confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮（true）和一个取消（false）按钮)。
语法:
confirm(str);
例子：
<script type="text/javascript">
var mymessage=confirm("你喜欢JavaScript吗?");
if(mymessage==true)
{ document.write("很好,加油!"); }
else
{ document.write("JS功能强大，要学习噢!"); }
</script>
（prompt 消息对话框）
prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。
prompt(str1, str2);
参数说明：
str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改
返回值:
1. 点击确定按钮，文本框中的内容（str2）将作为函数返回值
2. 点击取消按钮，将返回null
看看下面代码:
var myname=prompt("请输入你的姓名:");
if(myname!=null)
{ alert("你好"+myname); }
else
{ alert("你好 my friend."); }
（window.open）
open() 方法可以查找一个已经存在或者新建的浏览器窗口。
语法：
window.open([URL], [窗口名称], [参数字符串])
参数说明:
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
1.该名称由字母、数字和下划线字符组成。
2."_top"、"_blank"、"_selft"具有特殊意义的名称。
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页
3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window.open</title>
<script type="text/javascript">
function Wopen(){
window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
}
</script>
</head>
<body>
<input name="button" type="button" onClick="Wopen()" value="点击我，打开新窗口!" / >
</body>
</html>
（window.close）
close()关闭窗口
用法：
window.close(); //关闭本窗口
或
<窗口对象>.close(); //关闭指定的窗口
例如:关闭新建的窗口。
<script type="text/javascript">
var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中
mywin.close();
</script>
onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。
比如，我们单击按钮时，触发 onclick 事件，并调用两个数和的函数add2()。代码如下：
<html>
<head>
<script type="text/javascript">
function add2(){
var numa,numb,sum;
numa=6;
numb=8;
sum=numa+numb;
document.write("两数和为:"+sum); }
</script>
</head>
<body>
<form>
<input name="button" type="button" value="点击提交" onclick="add2()" />
</form>
</body>
</html>
注意: 在网页中，如使用事件，就在该元素中设置事件属性。
鼠标经过事件，当鼠标移到(不是点击哦)一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠标经过事件 </title>
<script type="text/javascript">
function message(){
confirm("请输入密码后，再单击确定!"); }
</script>
</head>
<body>
<form>
<input name="确定" type="button" value="确定" onmouseover="message()"/>//当鼠标移到这个按钮时，弹出。。
</form>
</body>
</html>
鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。
http://www.imooc.com/code/673
onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。
如下代码, 网页中有用户和密码两个文本框。当前光标在用户文本框内时（即焦点在文本框），在光标离开该文本框后（即失焦时），触发onblur事件，并调用函数message()。
http://www.imooc.com/code/672
选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。
http://www.imooc.com/code/671
通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。
事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意：1. 加载页面时，触发onload事件，事件写在<body>标签内。
2. 此节的加载页面，可理解为打开一个新页面时。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 加载事件 </title>
<script type="text/javascript">
function message(){
alert("加载中，请稍等…"); }
</script>
</head>
<body onload="message()">
欢迎学习JavaScript。
</body>
</html>
当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。
注意：不同浏览器对onunload事件支持不同。
如下代码,当退出页面时，弹出对话框“您确定离开该网页吗？”。
此处有不同！！
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 卸载事件 </title>
<script type="text/javascript">
window.onunload = onunload_message;
function onunload_message(){
alert("您确定离开该网页吗？");
}
</script>
</head>
<body>
欢迎学习JavaScript。
</body>
</html>
objectName.propertyName;
对象名.属性名;
访问对象方法的语法：
objectName.methodName();
对象名.方法名();
定义一个时间对象 :
var Udate=new Date();
使 Udate 成为日期对象，并且已有初始值：当前时间(当前电脑系统时间)。
如果要自定义初始值，可以用以下方法：
var d = new Date(2012, 10, 1); //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日
代码如下:
var d = new Date();
console.log(d); // 输出：Mon Nov 04 2013 21:50:33 GMT+0800 (中国标准时间)
console.log(d.toDateString()); // 日期字符串，输出：Mon Nov 04 2013
console.log(d.toGMTString()); // 格林威治时间，输出：Mon, 04 Nov 2013 14:03:05 GMT
console.log(d.toISOString()); // 国际标准组织（ISO）格式，输出：2013-11-04T14:03:05.420Z
console.log(d.toJSON()); // 输出：2013-11-04T14:03:05.420Z
console.log(d.toLocaleDateString()); // 转换为本地日期格式，视环境而定，输出：2013年11月4日
console.log(d.toLocaleString()); // 转换为本地日期和时间格式，视环境而定，输出：2013年11月4日 下午10:03:05
console.log(d.toLocaleTimeString()); // 转换为本地时间格式，视环境而定，输出：下午10:03:05
console.log(d.toString()); // 转换为字符串，输出：Mon Nov 04 2013 22:03:05 GMT+0800 (中国标准时间)
console.log(d.toTimeString()); // 转换为时间字符串，输出：22:03:05 GMT+0800 (中国标准时间)
console.log(d.toUTCString()); // 转换为世界时间，输出：Mon, 04 Nov 2013 14:03:05 GMT
在JavaScript中，使用getFullYear()、getMonth()和getDate()这3种方法来获取当前的年、月、日。
getFullYear() 返回一个表示年份的4位数字
getMonth() 返回值是0（一月）到11（十二月）之间的一个整数
getDate() 返回值是1~31之间的一个整数
在JavaScript中，使用getHours()、getMinutes()、getSeconds()这3种方法分别用来获取当前的时、分、秒。
getHours() 返回值是0~23之间的一个整数，来表示小时数
getMinutes() 返回值是0~59之间的一个整数，来表示分钟数
getSeconds() 返回值是0~59之间的一个整数，来表示秒数
get/setFullYear() 返回/设置年份，用四位数表示。
1
var mydate=new Date();//当前时间2014年3月6日
document.write(mydate+"<br>");//输出当前时间
document.write(mydate.getFullYear()+"<br>");//输出当前年份
mydate.setFullYear(81); //设置年份
document.write(mydate+"<br>"); //输出年份被设定为 0081年。
2
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获得年份 </title>
<script type="text/javascript">
var mydate=new Date();
var myyear=mydate.getFullYear();
document.write(myyear);
</script>
</head>
<body>
</body>
</html>
getDay() 返回星期，返回的是0-6的数字，0 表示星期天。如果要返回相对应“星期”，通过数组完成，代码如下:
<script type="text/javascript">
var mydate=new Date();//定义日期对象
var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定义数组对象,给每个数组项赋值
var mynum=mydate.getDay();//返回值存储在变量mynum中
document.write("今天是："+ weekday[mynum]);//输出星期几
</script>
get/setTime() 返回/设置时间，单位毫秒数，计算从 1970 年 1 月 1 日零时到日期对象所指的日期的毫秒数。
如果将目前日期对象的时间推迟1小时，代码如下:
<script type="text/javascript">
var mydate=new Date();
document.write("当前时间："+mydate+"<br>");
mydate.setTime(mydate.getTime() + 60 * 60 * 1000);
document.write("推迟一小时时间：" + mydate);
</script>
注意:1. 一小时 60 分，一分 60 秒，一秒 1000 毫秒
2. 时间推迟 1 小时,就是: “x.setTime(x.getTime() + 60 * 60 * 1000);”
在之前的学习中已经使用字符串对象了，定义字符串的方法就是直接赋值。比如：
var mystr = "I love JavaScript!"
定义mystr字符串后，我们就可以访问它的属性和方法。
访问字符串对象的属性length:
stringObject.length; 返回该字符串的长度。
var mystr="Hello World!";
var myl=mystr.length;
以上代码执行后，myl 的值将是：12
访问字符串对象的方法：
使用 String 对象的toUpperCase()方法来将字符串小写字母转换为大写：
var mystr="Hello world!";
var mynum=mystr.toUpperCase();
以上代码执行后，mynum 的值是：HELLO WORLD!
toLowerCase()方法，将字符串所有大写字母都变成小写的字符串。
charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。
语法:
stringObject.charAt(index)
参数说明：
index：表明字符串中某个数字的位置，即字符在字符串中的下标【必需】
注意：1.字符串中第一个字符的下标是 0。最后一个字符的下标为字符串长度减一（string.length-1）。
2.如果参数 index 不在 0 与 string.length-1 之间，该方法将返回一个空字符串。
如:在字符串 "I love JavaScript!" 中，返回位置2的字符：
<script type="text/javascript">
var mystr="I love JavaScript!"
document.write(mystr.charAt(2));
</script>
注意：一个空格也算一个字符。
以上代码的运行结果：
l
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
语法
stringObject.indexOf(substring, startpos)
参数说明：
substring:规定需检索的字符串值【必需】；
startpos:可选的整数参数。规定在字符串中开始检索的位置。它的合法值是0到stringObject.length-1,如果省略该参数，则从字符串的首字符开始检索
说明：
1.该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 substring。
2.可选参数，从stringObject的startpos位置开始查找substring，如果没有此参数将从stringObject的开始位置查找。
3.如果找到一个 substring，则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
注意：1.indexOf() 方法区分大小写。
2.如果要检索的字符串值没有出现，则该方法返回 -1。
例如: 对 "I love JavaScript!" 字符串内进行不同的检索：
<script type="text/javascript">
var str="I love JavaScript!"
document.write(str.indexOf("I") + "<br />");
document.write(str.indexOf("v") + "<br />");
document.write(str.indexOf("v",8));//从第八个【a】开始找 v 第一次出现的位置【在整个字符串中的位置】
</script>
以上代码的输出：
0
4
9
split()知识讲解：
split() 方法将字符串分割为字符串数组，并返回此数组。
语法：
stringObject.split(separator,limit)
参数说明:
separator(分隔符)：从该参数指定的地方分割stringObject；【必需】
limit：分割的次数，如设置该参数，返回的子串不会多余这个参数指定的数组，如果无此参数，则不限制次数；【可选】
注意：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。
我们将按照不同的方式来分割字符串：
使用指定符号分割字符串，代码如下:
var mystr = "www.imooc.com";
document.write(mystr.split(".")+"<br>");
document.write(mystr.split(".", 2)+"<br>");
运行结果:
www,imooc,com
www,imooc
将字符串分割为字符，代码如下：
document.write(mystr.split("")+"<br>");
document.write(mystr.split("", 5));
运行结果:
w,w,w,.,i,m,o,o,c,.,c,o,m
w,w,w,.,i
substring()substring() 方法用于提取字符串中介于两个指定下标之间的字符。
语法:
stringObject.substring(starPos,stopPos)
参数说明:
starPos:一个非负整数，开始的位置【必需】
stoPos:一个非负整数，结束的位置，如果为空，则返回的对象会一直到字符串对象的结尾（包括最后一个字符）【可选】
注意：
返回的内容是从 start开始(包含start位置的字符)到 stop-1 处的所有字符，其长度为 stop 减start。
如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。
使用 substring() 从字符串中提取字符串，代码如下：
<script type="text/javascript">
var mystr="I love JavaScript";
document.write(mystr.substring(7));
document.write(mystr.substring(2,6));
</script>
运行结果:
JavaScript
love
substr()substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。
语法:
stringObject.substr(startPos,length)
参数说明:
starPos:一个数值，开始的位置【必需】
length：提取字符串的长度。如果省略，则返回的对象会一直到字符串对象的结尾（包括最后一个字符）【可选】
注意：如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
如果startPos为负数且绝对值大于字符串长度，startPos为0。
使用 substr() 从字符串中提取一些字符，代码如下：
<script type="text/javascript">
var mystr="I love JavaScript!";
document.write(mystr.substr(7));
document.write(mystr.substr(2,4));
</script>
运行结果：
JavaScript!
love
Math对象
http://www.imooc.com/code/850
Math对象，提供对数据的数学计算。
使用 Math 的属性和方法，代码如下：
<script type="text/javascript">
var mypi=Math.PI;
var myabs=Math.abs(-15);
document.write(mypi);
document.write(myabs);
</script>
运行结果:
3.141592653589793
15
注意：Math 对象是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别。
ceil()ceil() 方法可对一个数进行向上取整。
语法:
Math.ceil(x)
参数说明:
x:必须是一个数值【必需】
注意：它返回的是大于或等于x，并且与x最接近的整数。
我们将把 ceil() 方法运用到不同的数字上，代码如下：
<script type="text/javascript">
document.write(Math.ceil(0.8) + "<br />")
document.write(Math.ceil(6.3) + "<br />")
document.write(Math.ceil(5) + "<br />")
document.write(Math.ceil(3.5) + "<br />")
document.write(Math.ceil(-5.1) + "<br />")
document.write(Math.ceil(-5.9))
</script>
运行结果：
1
7
5
4
-5
-5
floor()floor() 方法可对一个数进行向下取整。
语法:
Math.floor(x)
参数说明：
x:必须是一个数值【必需】
注意：返回的是小于或等于x，并且与 x 最接近的整数。
我们将在不同的数字上使用 floor() 方法，代码如下:
<script type="text/javascript">
document.write(Math.floor(0.8)+ "<br>")
document.write(Math.floor(6.3)+ "<br>")
document.write(Math.floor(5)+ "<br>")
document.write(Math.floor(3.5)+ "<br>")
document.write(Math.floor(-5.1)+ "<br>")
document.write(Math.floor(-5.9))
</script>
运行结果：
0
6
5
3
-6
-6
round()round() 方法可把一个数字四舍五入为最接近的整数。
语法:
Math.round(x)
参数说明：
x:必须是一个数值【必需】
注意：
返回与 x 最接近的整数。
对于 0.5，该方法将进行上舍入。(5.5 将舍入为 6)
如果 x 与两侧整数同等接近，则结果接近 +∞方向的数字值 。(如 -5.5 将舍入为 -5; -5.52 将舍入为 -6),如下图:
把不同的数舍入为最接近的整数,代码如下：
<script type="text/javascript">
document.write(Math.round(1.6)+ "<br>");
document.write(Math.round(2.5)+ "<br>");
document.write(Math.round(0.49)+ "<br>");
document.write(Math.round(-6.4)+ "<br>");
document.write(Math.round(-6.6));
</script>
运行结果：
2
3
0
-6
-7
random()random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之间的一个随机数。
语法：
Math.random();
注意：返回一个大于或等于 0 但小于 1 的符号为正的数字值。
我们取得介于 0 到 1 之间的一个随机数，代码如下：
<script type="text/javascript">
document.write(Math.random());
</script>
运行结果：
0.190305486195328
注意:因为是随机数，所以每次运行结果不一样，但是0 ~ 1的数值。
获得0 ~ 10之间的随机数，代码如下:
<script type="text/javascript">
document.write((Math.random())*10);
</script>
运行结果：
8.72153625893887
<script type="text/javascript">
var myarr=new Array(8); //定义数组
myarr[0]=80;
myarr[1]=60;
myarr[2]=99;
document.write("第一个人的成绩是:"+myarr[0]);
document.write("第二个人的成绩是:"+myarr[1]);
document.write("第三个人的成绩是:"+myarr[2]);
</script>
//var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
// var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）
注意：数组存储的数据可以是任何类型（数字、字符、布尔值等）
如果我们想知道数组的大小，只需引用数组的一个属性length。Length属性表示数组的长度，即数组中元素的个数。
语法：
var arr=[55,32,5,90,60,98,76,54];//包含8个数值的数组arr
document.write(arr.length); //显示数组长度8
document.write(arr[7]); //显示第8个元素的值54
同时，JavaScript数组的length属性是可变的，这一点需要特别注意。
arr.length=10; //增大数组的长度
document.write(arr.length); //数组长度已经变为10
数组随元素的增加，长度也会改变，如下:
var arr=[98,76,54,56,76]; // 包含5个数值的数组
document.write(arr.length); //显示数组的长度5
arr[15]=34; //增加元素，使用索引为15,赋值为34
alert(arr.length); //显示数组的长度16
http://www.imooc.com/code/871
数组对象是一个对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，是从零开始的
数组定义的方法：
var 数组名= new Array();
var 数组名 =new Array(n);
3.定义数组的时候，直接初始化数据：
var 数组名 = [<元素1>, <元素2>, <元素3>...];
我们定义myArray数组，并赋值，代码如下：
var myArray = [2, 8, 6];
说明：定义了一个数组 myArray，里边的元素是：myArray[0] = 2; myArray[1] = 8; myArray[2] = 6。
数组元素使用：
数组名[下标] = 值;
注意: 数组的下标用方括号括起来，从0开始。
数组属性：
length 用法：<数组对象>.length；返回：数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。
concat()concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。
语法
arrayObject.concat(array1,array2,...,arrayN)
注意: 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
我们创建一个数组，将把 concat() 中的参数连接到数组 myarr 中，代码如下：
<script type="text/javascript">
var mya = new Array(3);
mya[0] = "1";
mya[1] = "2";
mya[2] = "3";
document.write(mya.concat(4,5)+"<br>");
document.write(mya);
</script>
运行结果：
1,2,3,4,5
1,2,3
我们创建了三个数组，然后使用 concat() 把它们连接起来，代码如下：
<script type="text/javascript">
var mya1= new Array("hello!")
var mya2= new Array("I","love");
var mya3= new Array("JavaScript","!");
var mya4=mya1.concat(mya2,mya3);
document.write(mya4);
</script>
运行结果：
hello!,I,love,JavaScript,!
join()join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。
语法：
arrayObject.join(分隔符)
参数说明:
separator:【可选】，指定要使用的分隔符，如果省略，则默认使用逗号作为分隔符
注意：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。这个方法不影响数组原本的内容。 我们使用join（）方法，将数组的所有元素放入一个字符串中，代码如下：
<script type="text/javascript">
var myarr = new Array(3);
myarr[0] = "I";
myarr[1] = "love";
myarr[2] = "JavaScript";
document.write(myarr.join());
</script>
运行结果：
I,love,JavaScript
我们将使用分隔符来分隔数组中的元素，代码如下：
<script type="text/javascript">
var myarr = new Array(3)
myarr[0] = "I";
myarr[1] = "love";
myarr[2] = "JavaScript";
document.write(myarr.join("."));
</script>
运行结果：
I.love.JavaScript
reverse()reverse() 方法用于颠倒数组中元素的顺序。
语法：
arrayObject.reverse()
注意：该方法会改变原来的数组，而不会创建新的数组。
定义数组myarr并赋值，然后颠倒其元素的顺序：
<script type="text/javascript">
var myarr = new Array(3)
myarr[0] = "1"
myarr[1] = "2"
myarr[2] = "3"
document.write(myarr + "<br />")
document.write(myarr.reverse())
</script>
运行结果：
1,2,3
3,2,1
slice()slice() 方法可从已有的数组中返回选定的元素。
语法
arrayObject.slice(start,end)
参数说明：
start:规定从何处开始选取。如果参数start是负数，从数组的尾部开始算起的位置。也就是说，-1 指数组中最后一个元素，-2。【必需】 指倒数第二个元素，以此类推。
end:规定从何处结束选取。该参数是数组片段结束处的数组下标。如果为空，则到数组结束；如果为负数，从数组的尾部开始算起的位置。【不包括该元素】【可选】
1.返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
注意：
2.如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
String.slice() 与 Array.slice() 相似。我们将创建一个新数组，然后从其中选取的元素，代码如下：
<script type="text/javascript">
var myarr = new Array(1,2,3,4,5,6);
document.write(myarr + "<br>");
document.write(myarr.slice(2,4) + "<br>");
document.write(myarr);
</script>
运行结果：
1,2,3,4,5,6
3,4
1,2,3,4,5,6
sort()sort()方法使数组中的元素按照一定的顺序排列。
语法:
arrayObject.sort(方法函数)
参数说明：
方法函数：规定排序顺序，必须是函数【可选】
1.如果不指定<方法函数>，则按unicode码顺序排列。
2.如果指定<方法函数>，则按<方法函数>所指定的排序方法排序。
myArray.sort(sortMethod);
注意: 该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。
若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。
若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。
1.使用sort()将数组进行排序，代码如下：
<script type="text/javascript">
var myarr1 = new Array("Hello","John","love","JavaScript");
var myarr2 = new Array("80","16","50","6","100","1");
document.write(myarr1.sort()+"<br>");
document.write(myarr2.sort());
</script>
运行结果：
Hello,JavaScript,John,love
1,100,16,50,6,80
注意:上面的代码没有按照数值的大小对数字进行排序。
2.如要实现这一点，就必须使用一个排序函数，代码如下：
<script type="text/javascript">
function sortNum(a,b) {
return a - b;
//升序，如降序，把“a - b”该成“b - a”
}
var myarr = new Array("80","16","50","6","100","1");
document.write(myarr + "<br>");
document.write(myarr.sort(sortNum));
</script>
运行结果：
80,16,50,6,100,1
1,6,16,50,80,100
语法:
switch(表达式)
{
case值1:
执行代码块 1
break;
case值2:
执行代码块 2
break;
...
case值n:
执行代码块 n
break;
default://是冒号
与 case值1 、 case值2...case值n 不同时执行的代码
}
语法说明:
Switch必须赋初始值，值与每个case值匹配。满足执行该 case 后的所有语句，并用break语句来阻止运行下一个case。如所有case值都不匹配，执行default后的语句。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>switch</title>
<script type="text/JavaScript">
var myweek =3;//myweek表示星期几变量
switch(myweek)
{
case 1:
case 2:
document.write("学习理念知识");
break;
case 3:
case 4:
document.write("到企业实践");
break;
case 5:
document.write("总结经验");
break;
document.write("周六、日休息和娱乐");
break;
default:
}
</script>
</head>
<body>
</body>
</html>
m=a++ 相当于
m=a;
a=a+1;
m=++a 相当于
a=a+1;
m=a ;
这种自加运算和自减运算,都相当于两步骤
总结: a++ 是先把 a 赋值,然后自己加一, ++a,是先自己加一,然后再把 a 赋值。
在写JS代码的时候，大家可以会发现这样现象:
document.write(" 1 2 3 ");
结果: 1 2 3
无论在输出的内容中什么位置有多少个空格，显示的结果好像只有一个空格。
这是因为浏览器显示机制，对手动敲入的空格，将连续多个空格显示成1个空格。
解决方法:
1. 使用输出html标签` `来解决
document.write(" "+"1"+" "+"23");
结果: 1 23
2. 使用CSS样式来解决
document.write("<span style='white-space:pre;'>"+" 1 2 3 "+"</span>");
结果: 1 2 3
在输出时添加“white-space:pre;”样式属性。这个样式表示"空白会被浏览器保留"
<!DOCTYPE html>
<html>
<head>
<title> 事件</title>
<script type="text/javascript">
function count(){
var a= parseInt(document.getElementById("txt1").value) ;//value的值类型是string
//获取第一个输入框的值
var b= parseInt(document.getElementById("txt2").value);
//获取第二个输入框的值
var c= document.getElementById("select").value;
//获取选择框的值
//获取通过下拉框来选择的值来改变加减乘除的运算法则
//设置结果输入框的值
switch (c){
case "+":
m=a+b;
break;
case "-":
m=a-b;
break;
case "*":
m=a*b;
break;
case "/":
m=a/b;
break;
default:
}
var m;
document.getElementById("fruit").value=m;
}
</script>
</head>
<body>
<input type='text' id='txt1' />
<select id='select'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type='text' id='txt2' />
<input type='button' value=' = ' onclick="count()"/> <!--通过 = 按钮来调用创建的函数，得到结果-->
<input type='text' id='fruit' />
</body>
</html>
window对象window对象是BOM的核心，window对象指当前的浏览器窗口。
http://www.imooc.com/code/1146
在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。
setInterval()在执行时,从载入页面后每隔指定的时间执行代码。
语法:
setInterval(代码,交互时间);
参数说明：
代码：要调用的函数或要执行的代码串。
交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。
返回值:
一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。
调用函数格式(假设有一个clock()函数):
setInterval("clock()",1000)
或
setInterval(clock,1000)
我们设置一个计时器，每隔100毫秒调用clock()函数，并将时间显示出来，代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
var int=setInterval(clock, 100)
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
</form>
</body>
</html>
clearInterval()clearInterval() 方法可取消由 setInterval() 设置的交互时间。
语法：
clearInterval(id_of_setInterval)
参数说明:
id_of_setInterval：由 setInterval() 返回的 ID 值。
每隔 100 毫秒调用 clock() 函数,并显示时间。当点击按钮时，停止时间,代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
function clock(){
var time=new Date();
document.getElementById("clock").value = time;
}
// 每隔100毫秒调用clock函数，并将返回值赋值给i
var i=setInterval("clock()",100);
</script>
</head>
<body>
<form>
<input type="text" id="clock" size="50" />
<input type="button" value="Stop" onclick="clearInterval(i)" />
</form>
</body>
</html>
setTimeout()setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
语法:
setTimeout(代码,延迟时间);
参数说明：
当我们打开网页3秒后，在弹出一个提示框，代码如下:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
setTimeout("alert('Hello!')", 3000 );
</script>
</head>
<body>
</body>
</html>
当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function tinfo(){
var t=setTimeout("alert('Hello!')",5000);
}
</script>
</head>
<body>
<form>
<input type="button" value="start" onClick="tinfo()">
</form>
</body>
</html>
要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0;
function numCount(){
document.getElementById('txt').value=num;
num=num+1;
setTimeout("numCount()",1000);
}
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>
clearTimeout()setTimeout()和clearTimeout()一起使用，停止计时器。
语法:
clearTimeout(id_of_setTimeout)
参数说明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。
下面的例子和上节的无穷循环的例子相似。唯一不同是，现在我们添加了一个 "Stop" 按钮来停止这个计数器：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0,i;
function timedCount(){
document.getElementById('txt').value=num;
num=num+1;
i=setTimeout(timedCount,1000);
}
setTimeout(timedCount,1000);
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
<input type="text" id="txt">
<input type="button" value="Stop" onClick="stopCount()">
</form>
</body>
</html>
History 对象history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。
注意:从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
语法：
window.history.[属性|方法]
注意：window.可以省略。
History 对象属性
length:返回浏览器历史列表中URL的数量
History 对象方法
back():加载history列表中的前一个URL；
forward():加载history列表中的下一个URL；
go():加载history列表中某个具体的界面；
使用length属性，当前窗口的浏览历史总长度，代码如下：
<script type="text/javascript">
var HL = window.history.length;
document.write(HL);
</script>
back()方法，加载 history 列表中的前一个 URL。
语法：
window.history.back();
比如，返回前一个浏览的页面，代码如下：
window.history.back();
注意：等同于点击浏览器的倒退按钮。
back()相当于go(-1),代码如下:
window.history.go(-1);
具体代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<script type="text/javascript">
function GoBack() {
history.back();
}
</script>
</head>
<body>
使用下面按钮，实现返回前一个页面:
<form>
<input type="button" value="返回前一个页面" onclick="GoBack();" />
</form>
</body>
</html>
forward()方法，加载 history 列表中的下一个 URL。
如果倒退之后，再想回到倒退之前浏览的页面，则可以使用forward()方法,代码如下:
window.history.forward();
注意：等价点击前进按钮。
forward()相当于go(1),代码如下:
window.history.go(1);
go()方法，根据当前所处的页面，加载 history 列表中的某个具体的页面。
语法：
window.history.go(number);
浏览器中，返回当前页面之前浏览过的第二个历史页面，代码如下：
window.history.go(-2);
注意：和在浏览器中单击两次后退按钮操作一样。
同理，返回当前页面之后浏览过的第三个历史页面，代码如下：
window.history.go(3);
location用于获取或设置窗体的URL，并且可以用于解析URL。
语法:
location.[属性|方法]
location对象属性图示:
location 对象属性：
location 对象方法:
http://www.imooc.com/code/1153
Navigator对象Navigator 对象包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本。
语法：
navigator.属性
对象属性:
appCodeName:浏览器代码名的字符串表示；
appName:返回浏览器名称；
appVersion:返回浏览器的平台和版本信息；
platform:返回运行浏览器的操作系统平台；
userAgent:返回由客户机发送服务器的user-agent头部的值
查看浏览器的名称和版本，代码如下:
<script type="text/javascript">
var browser=navigator.appName;
var b_version=navigator.appVersion;
document.write("Browser name"+browser);
document.write("<br>");
document.write("Browser version"+b_version);
</script>
userAgent
返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
语法
navigator.userAgent
几种浏览的user_agent.，像360的兼容模式用的是IE、极速模式用的是chrom的内核。
使用userAgent判断使用的是什么浏览器(假设使用的是IE8浏览器),代码如下:
function validB(){
var u_agent = navigator.userAgent;
var B_name="Failed to identify the browser";
if(u_agent.indexOf("Firefox")>-1){
B_name="Firefox";
}else if(u_agent.indexOf("Chrome")>-1){
B_name="Chrome";
}else if(u_agent.indexOf("MSIE")>-1&&u_agent.indexOf("Trident")>-1){
B_name="IE(8-10)";
}
document.write("B_name:"+B_name+"<br>");
document.write("u_agent:"+u_agent+"<br>");
}
screen对象screen对象用于获取用户的屏幕信息。
语法：
window.screen.属性
window.screen 对象包含有关用户屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的宽
注意:
1.单位以像素计。
2. window.screen 对象在编写时可以不使用 window 这个前缀。
我们来获取屏幕的高和宽，代码如下:
screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。
screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。
注意:
不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样。
我们来获取屏幕的可用高和宽度，代码如下：
<script type="text/javascript">
document.write("可用宽度：" + screen.availWidth);
document.write("可用高度：" + screen.availHeight);
</script>
注意:根据屏幕的不同显示值不同。
见慕课
http://www.imooc.com/learn/36
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
</head>
<body>
<h2 id="con">I love JavaScript</H2>
<p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<script type="text/javascript">
var h=document.getElementById("con");
//document.write(h);
h.style.color="red";
h.style.backgroundColor="#CCC";
h.style.display="none"
</script>
</body>
</html>
网页中经常会看到显示和隐藏的效果，可通过display属性来设置。
语法：
Object.style.display = value
注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
value取值:none(隐藏)；block（显示）
例子：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
<script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("con");
mychar.style.display="none";
}
function showtext()
{
var mychar = document.getElementById("con");
mychar.style.display="block";
}
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p>
<form>
<input type="button" onclick="hidetext()" value="隐藏内容" />
<input type="button" onclick="showtext()" value="显示内容" />
</form>
getElementsByName()方法返回带有指定名称的节点对象的集合。
语法：
document.getElementsByName(name)
与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。
注意:
1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。
看看下面的代码:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function getnum(){
var mynode=document.getElementsByName("myt"); ;
alert(mynode.length);
}
</script>
</head>
<body>
<input name="myt" type="text" value="1">
<input name="myt" type="text" value="2">
<input name="myt" type="text" value="3">
<input name="myt" type="text" value="4">
<input name="myt" type="text" value="5">
<input name="myt" type="text" value="6">
<br />
<input type="button" onclick="getnum()" value="看看有几项？" onclick="getnum()" />
</body>
</html>
getElementsByTagName()方法返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
语法:
document.getElementsByTagName(Tagname)
说明:
1. Tagname是标签的名称，如p、a、img等标签名。
2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JavaScript</title>
</head>
<body>
<form name="Input">
<table align="center" width="500px" height="50%" border="1">
<tr>
<td align="center" width="100px">
学号:
</td>
<td align="center" width="300px">
<input type="text" id=userid name="user" onblur="validate();">
<div id=usermsg></div>
</td>
</tr>
<tr>
<td align="center" width="100px">
姓名:
</td>
<td align="center">
<input type="text" name="name">
</td>
</tr>
<tr>
<td align="center" width="%45">
性别:
</td>
<td align="center">
<input type="radio" name="sex" value="男">
男
<input type="radio" name="sex" value="女">
女
</td>
</tr>
<tr>
<td align="center" width="30%">
年龄:
</td>
<td align="center" width="300px">
<input type="text" name="age">
</td>
</tr>
<tr>
<td align="center" width="100px">
地址:
</td>
<td align="center" width="300px">
<input type="text" name="addr">
</td>
</tr>
</table>
</form>
<h1 id="myHead" onclick="getValue()">
看看三种获取节点的方法?
</h1>
<p>
点击标题弹出它的值。
</p>
<input type="button" onclick="getElements()"
value="看看name为sex的节点有几个?" />
<Br>
<input type="button" onclick="getTagElements()"
value="看看标签名为input的节点有几个?" />
<script type="text/javascript">
function getValue()
{
var myH=document.getElementById("myHead");
alert(myH.innerHTML)
}
function getElements()
{
var mys=document.getElementsByName("sex");
alert(mys.length);
}
function getTagElements()
{
var myI=document.getElementsByTagName("input");
alert(myI.length);
}
</script>
</body>
</html>
getElementByID,getElementsByName,getElementsByTagName方法总结如下:
getElementByID：通过指定id获得元素；一个；
getElementsByName：通过元素名称name属性获得元素；一组；
getElementsByTagName：通过标签名称获得元素；一组；
注意：方法区分大小写
通过下面的例子(6个name="hobby"的复选项，两个按钮)来区分三种方法的不同:
<input type="checkbox" name="hobby" id="hobby1"> 音乐
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 阅读
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步
<input type="button" value = "全选" id="button1">
<input type="button" value = "全不选" id="button1">
document.getElementsByTagName("input")，结果为获取所有标签为input的元素，共8个。document.getElementsByName("hobby")，结果为获取属性name="hobby"的元素，共6个。document.getElementById("hobby6")，结果为获取属性id="hobby6"的元素，只有一个，"跑步"这个复选项。getAttribute()方法通过元素节点的属性名称获取属性的值。
语法：
elementNode.getAttribute(name)
参数说明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。
2. name：要想查询的元素节点的属性名字
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>getAttribute()</title>
</head>
<body>
<p id="intro">课程列表</p>
<ul>
<li title="第1个li">HTML</li>
<li>CSS</li>
<li title="第3个li">JavaScript</li>
<li title="第4个li">Jquery</li>
<li>Html5</li>
</ul>
<p>以下为获取的不为空的li标签title值:</p>
<script type="text/javascript">
var con=document.getElementsByTagName("li");
for (var i=0; i< con.length;i++){
var text=con[i].getAttribute("title");
// document.write(text);
if(text!=null)
{
document.write(text+"<br>");
}
}
</script>
</body>
</html>
setAttribute()方法？？？不能实现setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
语法：
elementNode.setAttribute(name,value)
参数说明：
1.name: 要设置的属性名。
2.value: 要设置的属性值。
注意：
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。
childNodes访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。
语法：
elementNode.childNodes
注意：
如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。
我们来看看下面的代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div>
javascript
<p>javascript</p>
<div>jQuery</div>
<h5>PHP</h5>
</div>
<script type="text/javascript">
var x=document.getElementsByTagName("div")[0].childNodes;
for(i=0;i<x.length;i++){
document.write("节点"+i+"的名称"+x[i].nodeName+"<br>");
document.write("节点"+i+"的值"+x[i].nodeValue+"<br>");
document.write("节点"+i+"的类型"+x[i].nodeType+"<br>");
}
</script>
</body>
</html>
一、JavaScript创建节点
在JavaScript中，创建新节点都是先用document对象中的createElement()和createTextNode()这2种方法创建一个元素节点，然后再通过appendChild()、insertBefore()等方法把新元素节点插入现有的元素节点中去。
语法：
var e = document.createElement("元素名"); //创建元素节点
var t = document.createTextNode("元素内容"); //创建文本节点
e.appendChild(t); //把元素内容插入元素中去
举例1：创建简单节点
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var e = document.createElement("h1");
var txt = document.createTextNode("绿叶学习网");
e.appendChild(txt); //把元素内容插入元素中去
document.body.appendChild(e);
</script>
</body>
</html>
分析：
这里使用document.createElement()方法创建了h1标签，但是此时h1标签是没有内容；然后使用document.createTextNode()方法创建了一个“文本节点”。之后我们只有使用appendChild()方法往h1标签中插入文本节点，h1标签才有内容。最后使用“document.body.appendChild(e);”把新创建的节点h1输入到HTML文档中去。
上面例子创建的是一个简单的节点，如果想要创建以下节点该怎么做呢？
<input id="submit" type="button" value="提交"/>
举例2：创建复杂节点
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var e = document.createElement("input");
e.id = "submit";
e.type = "button";
e.value = "提交";
document.body.appendChild(e);
</script>
</body>
</html>
1、appendChild()【只能在节点的末尾插入】
在JavaScript中，我们可以使用appenChild()方法把新的节点插入到当前节点的“内部”。
语法：
obj.appendChild(new)
说明：
obj表示当前节点，new表示新节点。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function insert() {
var e = document.createElement("li");
var str = document.getElementById("txt").value; //获取文本框的值
var txt = document.createTextNode(str);
e.appendChild(txt);
var list = document.getElementById("list");
list.appendChild(e);
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
列项文本：<input id="txt" type="text"/><br />
<input type="button" value="插入新项" onclick="insert()" />
</body>
</html>
2、insertBefore()【可以选择节点的位置】
在JavaScript中，我们可以使用insertBefore()方法将新的子节点添加到当前节点的“末尾”。
语法：
obj.insertBefore(new,ref)
说明：
obj表示父节点；
new表示新的子节点；
ref指定一个节点，在这个节点前插入新的节点。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function insert() {
var e = document.createElement("li");
var str = document.getElementById("txt").value; //获取文本框的值
var txt = document.createTextNode(str);
e.appendChild(txt);
var list = document.getElementById("list");
list.insertBefore(e,list.firstChild);
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
列项文本：<input id="txt" type="text"/><br />
<input type="button" value="插入新项" onclick="insert()"/>
</body>
</html>
一、JavaScript删除节点
在JavaScript中，我们可以使用removeChild()方法来删除当前节点下的某个子节点。
语法：
obj.removeChild(oldChild);
说明：
参数obj表示当前节点，而参数oldChild表示需要当前节点内部的某个子节点。
举例1：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//定义删除函数
function del() {
var e = document.getElementById("list");
//判断元素节点e是否有子节点
if (e.hasChildNodes) {
e.removeChild(e.lastChild);
//document.getElementById("list").removeChild(e.lastChild);
//删除e元素的最后一个子节点
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ASP.NET</li>
</ul>
<input type="button" value="删除" onclick="del()"/></div>
</body>
</html>
分析：
这里“if(e.hasChildNodes)”判断元素节点e是否有子节点。而“e.lastChild”表示获取元素节点额的最后一个子节点。
假如我们想要把整个列表删除，该如何实现呢？
举例2：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function del() {
var e = document.getElementById("list");
document.body.removeChild(e);
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ASP.NET</li>
</ul>
<input type="button" value="删除" onclick="del()" />
</body>
</html>
分析：
当我们点击“删除”按钮时，整个列表都被删除了。我之所以举这两个例子是让大家明白一个知识点，在使用removeChild()方法删除元素之前我们必须找到2点：
（1）被删除的子节点；
（2）被删除子节点的父节点；
在这个例子中，ul元素的父节点就是body了。
在JavaScript中，我们可以使用cloneNode()方法来实现复制节点。
语法：
obj.cloneNode(bool)
说明：
参数obj表示被复制的节点，而参数bool是一个布尔值，取值如下：
（1）1或true：表示复制节点本身以及复制该节点下的所有子节点；
（2）0或false：表示仅仅复制节点本身，不复制该节点下的子节点；
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function add() {
var e = document.getElementById("list");
document.body.appendChild(e.cloneNode(1));
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ASP.NET</li>
</ul>
<input type="button" value="添加" onclick="add()" />
</body>
</html>
一、JavaScript替换节点
在JavaScript中，我们可以使用replaceChild()方法来实现替换节点。
语法：
obj.replaceChild(new,old)
说明：
obj，表示被替换节点的父节点；
new，表示替换后的新节点；
old，需要被替换的旧节点。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function replace() {
//获取两个文本框的值
var tag = document.getElementById("tag").value;
var txt = document.getElementById("txt").value;
//获取p元素
var lvye = document.getElementById("lvye");
//根据两个文本框的值创建新节点
var e = document.createElement(tag);
var t = document.createTextNode(txt);
e.appendChild(t);
document.body.replaceChild(e,lvye);
}
</script>
</head>
<body>
<p id="lvye">绿叶学习网</p>
<hr />
输入标签：<input id="tag" type="text"/><br />
输入文本：<input id="txt" type="text"/><br />
<input type="button" value="替换" onclick="replace()" />
</body>
</html>
由于id为lvye的p元素父节点为body，所以根据替换节点的语法“obj.replaceChild(new,old)”应该判断得出obj应该是body元素。大家一定要理解好这一句代码“document.bodyceplaceChild(e,lvye);”。
也就是说，想要实现替换节点，就必须找到3点：
（1）新节点；
（2）被替换的子节点；
（3）被替换子节点的父节点；
innerHTML和innerText一、innerHTML和innerText简介
在之前的学习中，我们可以使用apendChild()方法在一个元素节点内部插入一个节点，但是这种方法使用麻烦，并且只能一个个把子节点插进去。
在JavaScript中，我们可以使用innerHTML和innerText这2个属性很方便地获取和设置某一个元素内部子元素或文本。
innerHTML属性被多数浏览器所支持，而innerText只能被IE、chrome等支持而不被Firefox支持。
innerHTML属性声明了元素含有的HTML文本，不包括元素本身的开始标记和结束标记。设置该属性可以用于为指定的HTML文本替换元素的内容。
innerText属性与inerHTML属性的功能类似，只是该属性只能声明元素包含的文本内容。即使指定的是HTML文本，它也会认为是普通文本而原样输出。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="lvye"><strong>绿叶学习网</strong></div>
innerHTML内容是：<input id="txt1" type="text"><br/>
innerText内容是：<input id="txt2" type="text">
<script type="text/javascript">
var e = document.getElementById("lvye");
document.getElementById("txt1").value = e.innerHTML;
document.getElementById("txt2").value = e.innerText;
</script>
</body>
</html>
分析：
上面例子使用innerHTML和innerText来获取某个元素节点内部信息，当然我们也可以使用这2个属性来设置某个元素节点内部信息。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="lvye"></div>
<script type="text/javascript">
var e = document.getElementById("lvye");
e.innerHTML="<span style='color:red;font-weight:bold;'>绿叶学习网</span><span style='color:blue;font-weight:bold;'>JavaScript入门教程</span>";
</script>
</body>
</html>
innerHTML和innerText属性返回值的区别:
HTML代码 innerHTML返回值 innerText返回值
<div>绿叶学习网</div> "绿叶学习网" "绿叶学习网"
<div><b>绿叶学习网</b></div> "<b>绿叶学习网</b>" "绿叶学习网"
<div><b></b></div> "<b></b>" ""（空字符串）
JavaScript操作CSS样式一、JavaScript操作CSS简介
JavaScript初学者都会问这么一个问题：如果想要使用JavaScript操作某个元素的CSS样式，那我该怎么做呢？
对于元素的CSS样式操作，其实也是属于DOM中的内容。市面上很多课程对这一个知识点都是一笔带过，这对初学者而言，是相当不好的。
为了帮助大家把JavaScript初学知识系统化，我在这里把这一知识点独立成一节，详细给大家讲解一下。
在JavaScript中，对于元素的CSS操作，我们使用的是DOM对象中的style对象来操作。
语法：
obj.style.属性名;
说明：
obj指的是DOM对象，也就是通过document.getElementById()等获取而来的DOM元素节点对象。
属性名为CSS属性名。有一点大家要非常清楚，就是这里的属性名使用的“骆驼峰”型的CSS属性名。何为“骆驼峰”型呢？举个例子，“font-size”应该写成“fontSize”，“border-bottom-width”应该写成“borderBottomWidth”，以此类推。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function change() {
var e = document.getElementById("lvye");
e.style.color = "red";
e.style.border = "1px solid gray";
}
</script>
</head>
<body>
<h1 id="lvye">绿叶学习网</h1>
<input type="button" value="改变样式" onclick="change()"/>
</body>
</html>
有人就问了，像CSS3中“-webkit-box-shadow”这种奇葩式的CSS兼容属性名该怎么写呢？也很简单，应该写成“webkitBoxShadow”
在DOM学习中，记住最重要的一句话：每一个元素节点都看成一个“对象”。由于元素节点也是一个对象，因此他们有自身的属性和方法。
DOM常用的节点属性
属性 说明
parentNode ： 获取当前节点的父节点
childNodes： 获取当前节点的子节点集合
firstChild： 获取当前节点的第一个子节点
lastChild：获取当前节点的最后一个子节点
previousSibling ：获取当前节点的前一个兄弟节点
nextSibling： 获取当前节点的后一个兄弟节点
attributes：元素的属性列表
在JavaScript中，可以通过以下2种方式来选中指定元素：
（1）getElementById()；
（2）getElementsByName()；
1、创建节点
在JavaScript中，创建新节点都是先用document对象中的createElement()和createTextNode()这2种方法创建一个元素节点，然后再通过appendChild()、insertBefore()等方法把新元素节点插入现有的元素节点中去。
语法：
var e = document.createElement("元素名");
var txt = document.createTextNode("元素内容");
e.appendChild(t); //把元素内容插入元素中去
2、插入节点
在JavaScript中，插入节点有2种方法：appendChild()和insertBefore()。
（1）appendChild()
在JavaScript中，我们可以使用appenChild()方法把新的节点插入到当前节点的“内部”。
语法：
obj.appendChild(new)
说明：
obj表示当前节点，new表示新节点。
（2）insertBefore()
在JavaScript中，我们可以使用insertBefore()方法将新的子节点添加到当前节点的“末尾”。
语法：
obj.insertBefore(new,ref)
说明：
obj表示父节点；
new表示新的子节点；
ref指定一个节点，在这个节点前插入新的节点。
3、删除节点
在JavaScript中，我们可以使用removeChild()方法来删除当前节点下的某个子节点。
语法：
obj.removeChild(oldChild);
说明：
参数obj表示当前节点，而参数oldChild表示需要当前节点内部的某个子节点。
4、复制节点
在JavaScript中，我们可以使用cloneNode()方法来实现复制节点。
语法：
obj.cloneNode(bool)
说明：
参数obj表示被复制的节点，而参数bool是一个布尔值，取值如下：
（1）1或true：表示复制节点本身以及复制该节点下的所有子节点；
（2）0或false：表示仅仅复制节点本身，不复制该节点下的子节点；
5、替换节点
在JavaScript中，我们可以使用replaceChild()方法来实现替换节点。
语法：
obj.replaceChild(new,old)
说明：
obj，表示被替换节点的父节点；
new，表示替换后的新节点；
old，需要被替换的旧节点。
6、innerHTML和innerText
在JavaScript中，我们可以使用innerHTML和innerText这2个属性很方便地获取和设置某一个元素内部子元素或文本。
innerHTML属性被多数浏览器所支持，而innerText只能被IE、chrome等支持而不被Firefox支持。
7、JavaScript操作CSS样式
在JavaScript中，对于元素的CSS操作，我们使用的是DOM对象中的style对象来操作。
语法：
obj.style.属性名;
说明：
obj指的是DOM对象，也就是通过document.getElementById()等获取而来的DOM元素节点。