Javascript 基础控件属性记录

<pre name="code" class="html">Javascript属性记录：

1、 window.history.[属性、方法]
back()-->加载history列表中的前一个URL<---------------->相当于go(-1)
forward()---->加载history列表中的下一个URL<---------------->相当于go(1);
go()------>加载history列表中的某一个具体的URL
length属性获取当前窗口浏览历史的总长度}
2、 location用于获取或设置窗体的url, 并且可以用于解析URL   location.[属性、方法]

属性：
hash设置或返回从“#” 开始的URL
host设置或返回主机名和当前URL的端口号
hostname设置或返回当前URL的主机名
href设置或返回完整的URL
pathname 设置或返回当前URL的路径部分
port设置或返回当前URL的端口号
protocol 设置或返回当前URL的协议
search 设置或返回从“？”开始的URL（查询部分）
方法：

assign(); 加载新的文档
reload(); 重新加载当前文档
replace();用新的文档替换当前文档

3、 Navigator对象包含有关浏览器的信息，通畅用于检测浏览器与操作系统的版本

appCodeName   浏览器代码名的字符串表示
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息
platform 返回运行浏览器的操作系统平台
userAgent 返回由客户机发送服务器的user-agent头部的值
alert("Browser version"+b_version);
var b_version=navigator.appVersion;

4、userAgent 返回用户代理头的字符串表示（就是包括浏览器版本信息等的字符串）

语法：navigator.userAgent
Chrome u_agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like 	Gecko) Chrome/47.0.2526.106 BIDUBrowser/8.5 Safari/537.36
5、screen获取用户屏幕信息

语法：
window.screen.属性
availHeight:窗口可以使用的屏幕高度，单位像素
availWidth:窗口可以使用的屏幕宽度，单位像素
colorDepth:用户浏览器表示的颜色位数，通常为32位(每像素的位数)
pixelDepth:用户浏览器表示的颜色位数，通常为32位(每像素的位数)（IE 不支持此属性）
height:屏幕的高度，单位像素
width:屏幕的宽度，单位像素
6、屏幕分辨率的高和宽

screen.height 返回屏幕分辨率的高
screen.width 返回屏幕分辨率的宽
单位以像素计。
window.screen 对象在编写时可以不使用 window 这个前缀。
我们来获取屏幕的高和宽，代码如下:

屏幕宽度：screen.width
屏幕高度：screen.height

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如任务栏。
不同系统的任务栏默认高度不一样，及任务栏的位置可在屏幕上下左右任何位置，所以有可能可用	宽度和高度不一样
可用宽度：screen.availWidth
可用高度：screen.availHeight
screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如任务栏。

可用高度：screen.availHeight
7、三种获取DOM节点的方法
document.getElementById('id');
document.getElementsByName('name属性名称');
document.getElementsByTagName('标签名称');
8、setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
设置当前标签的属性以及值
elementNode.setAttribute(name,value)  getAttribute()  获取标签的属性值
注意：
1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。
2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。
9、在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性 ：
nodeName : 节点的名称
nodeValue ：节点的值
nodeType ：节点的类型
nodeName 属性: 节点的名称，是只读的。
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
nodeValue 属性：节点的值
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值
nodeType 属性: 节点的类型，是只读的。以下常用的几种结点类型:
元素类型    节点类型
元素          1
属性          2
文本          3
注释          8
文档          9
var node=document.getElementsByTagName("li");
for(var i=0;i<node.length;i++){
document.write("li["+(i+1)+"]:"+"<br/>"+"节点名:"+node[i].nodeName+"<br/>");
document.write("节点值:"+node[i].nodeValue+"<br/>");
document.write("节点类型:"+node[i].nodeType+"<br/><br/>");
}
访问子节点的第一项和最后一项
node.firstChild.(nodeName/nodeValue/nodeType)
node.lastChild.(nodeName/nodeValue/nodeType)
访问父节点：
语法：elementNode.parentNode.parentNode;
访问兄弟节点:
nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）
nodeObject.nextSibling
previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）
nodeObject.previousSibling
javascript作为一种脚本语言可以放在HTML的任何位置，但是浏览器解析HTML是按照先后顺序，所以前面的script就被先执行，比如进行页面显示初始化的js必须放在	head里面，因为初始化都要求提前进行
(例如给页面设置css样式等)，而如果是通过事件调用执行function那么对位置没什么要求的

变量命名规范：
必须使用字母，下划线，或者美元符开始
可以使用多个任意的英文字母，数字，下划线，或者美元符组成
不能使用javascript的关键字和保留字
生命的变量区分大小写
变量要先声明再赋值
变量可以重复赋值

javascript弹出框
警告对话框:alert(字符串或变量);
确认对话框:confirm(在消息对话框中要显示的文本);返回值为Boolean 确定返回true 取消返回false
var mymessage= confirm("消息提示");
可输入对话框:prompt("提示文字"，"输入框中默认显示(此属性可不填)")

javascript 打开新窗口
window.open('http://www.imooc.com','_blank','width=600,height=400,top=100px,left=0px');
top 顶部  left距左  width 窗口宽度  height  窗口高度  menubar 窗口有没有菜单  toolbar 窗口有没有工具条 scrollbars 窗口有没有滚动条  status  窗口有	<span style="white-space:pre">	</span><span style="white-space:pre">	</span>没有状态栏

关闭窗口
window.close();关闭本窗口
<窗口对象>.close();
var mywin=window.open("http://www.imooc.com");
mywin.close();
innerHTML 属性
innerHTML属性用于获取或替换HTML元素的内容（value）
语法：object.innerHTML;

修改HTML样式：
语法：Object.style.property=new style("red");
backgroundColor设置元素的背景颜色
height设置元素的高度
width设置元素的宽度
color设置文本的颜色
font在一行设置所有的字体属性
fontFamily设置所有元素的字体系列
fontSize设置元素的字体大小

例如：
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";

元素的显示和隐藏：
语法：Object.style.display=value;
none:隐藏  block:显示
//清楚设置的当前标签内容的所有属性
content.removeAttribute('style');

控制类名：className属性
className属性设置或返回元素的class属性
语法：object.className=classname;
作用：
获取元素的class属性
为网页内的某个元素指定一个css样式来更改该元素的外观
可以通过设置className
例如：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>className属性</title>
<style>
body{ font-size:16px;}
.one{
border:1px solid #eee;
width:230px;
height:50px;
background:#ccc;
color:red;
}
.two{
border:1px solid #ccc;
width:230px;
height:50px;
background:#9CF;
color:blue;
}
</style>
</head>
<body>
<p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="添加样式" onclick="add()"/>
<p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
<input type="button" value="更改外观" onclick="modify()"/>

<sc
4000
ript type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className="one"
}
function modify(){
var p2 = document.getElementById("p2");
p2.className="two"
}
</script>
</body>
</html>
<span style="white-space:pre">	</span><span style="white-space:pre">	</span>sum=sum+result;<----------->等价于sum+=result;

Javascript中的Math方法：

Math.pow(2,53);------------------>//9007199254740992：2 的53次幂

Math.round(.6);------------------>//1.0:四舍五入

Math.ceil(.6);------------------>//1.0向上求整

Math.floor(.6);------------------>//0.0:向下求整

Math.abs(-5);------------------>5://求绝对值

Math.max(x,y,z);------------------>//返回最大值

Math.min(x,y,z);------------------>//返回最小值

Math.random();------------------>//生成一个大于等于零小于 1.0 的伪随机数

Math.PI------------------>//圆周率

Math.E------------------>//自然对数的底数

Math.sqrt(3);------------------>//3的平方根

Math.pow(3,1/3);------------------>//三的立方根

Math.sin(0);------------------>//三角函数:还有Math.cos,Math.atan

Math.log(10);------------------>//10的自然对数

Math.log(100)/Math.LN10------------------>//以10为底100的对数

Math.log(512)/Math.LN2------------------>//以2为底512的对数

Math.exp(3)------------------>//e的三次幂

Javascript中的日期和时间

var then = new Date(2011,0,1);------------------>//2011年1月1日

var later = new Date(2011,0,1,17,10,30);------------------>//同一天，当地时间5:10:30pm

var now = new Date();------------------>//当前日期和时间

var elapsed = now-then;------------------>//日期减法，计算时间间隔的毫秒数

later.getFullYear();------------------>//2011

later.getMonth();------------------>//0,从零开始计数的月份

later.getDate();------------------>//1,从一开始计数的天数

later.getDay();------------------>//5,得到星期几，零代表星期天，5代表星期一

later.getHours();------------------>//得到当地时间

later.getUICHours();------------------>//使用UTC表示小时的时间，基于时区

Javascript中的转义字符

\oNUL字符(\u0000)

\b退格符(\u0008)

\t水平制表符(\u0009)

\n换行符(\u000A)

\v垂直制表符(\u000B)

\f换页符(\u000c)

\r回车符(\u000D)

\"双引号(\u0022)

\'撇号或单引号(\u0027)

\\反斜线(\u005C)

\xXX由两位十六进制数XX指定的Latin-1字符

\uXXXX由4位十六进制数XXXX指定的Unicode字符

Javascript中的字符串使用

var s = "hello,world"

s.length//得到字符串的长度

s.charAt(0);//获取第一个字符串

s.charAt(s.length-1);//最后一个字符

s.subString(1,4);//“ell” 获取第二到四个字符

s.slice(1,4);//获取第二到四个字符

s.slice(-3);//获取最后三个字符

s.indexOf("l");//获取字符L首次出现的位置（2）

s.lastIndexOf("l");//字符串L最后出现的位置

s.indexOf("l",3);//在位置3及之后首次出现字符L的位置

s.split(", ");按照逗号分割成效字符串

s.replace("h","H");//全文字符替换

s.toUpperCase();//将所有字符串转换为大写

Javascript中的模式匹配

例：

var text = "testing :1,2,3";//文本示例

var pattern = /\d+/g    //匹配所有包含一个或多个数字的实例

pattern.test(text);--->true  匹配成功

text.search(pattern);--->表示首次匹配成功的位置

text.match(pattern);---->["1","2","3"]所有匹配成功的数组

text.replace(pattern,"#");-->"testing,#,#,#"

text.split(/\D+/);"["","1","2","3"]"用非数字字符截取字符串

function getResult(){
//Javascript中的数字处理
//var result = -0.6 ;
//幂函数
//alert(Math.pow(result,2));
//四舍五入
//alert(Math.round(result));
//向上取整数
//alert(Math.ceil(result));
//向下取整
//alert(Math.floor(result));
//求绝对值
//alert(Math.abs(result));
//求最大值
//alert(Math.max(1,-9,3));
//返回最小值
//alert(Math.min(2,5,6));
//生成一个0到1的随机数
//alert(Math.random());
//圆周率
//alert(Math.PI);
//自然对数的底数
//alert(Math.E);
//3的平方根
//alert(Math.sqrt(3));
//三的立方根
//alert(Math.pow(3,1/3))
//三角函数
//alert(Math.sin(0));
//Math.log(10);------------------>//10的自然对数
//Math.log(100)/Math.LN10------------------>//以10为底100的对数
//Math.log(512)/Math.LN2------------------>//以2为底512的对数
//Math.exp(3)------------------>//e的三次幂

//Javascript中的日期和时间
//var date = new Date();
//var witchDay = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//获取当前日期
//var nowDay = new Date(2016,9,19);
//获取当前年份
//var nowDay = date.getFullYear();
//获取当前月份
//var nowDay = date.getMonth();
//一月中的天数
//var nowDay = date.getDate();
//获取星期
//var nowDays = date.getDay();
//var nowDay = witchDay[nowDays];
//得到当前的时间点
//var nowDay = date.getHours();
//使用UTC表示小时的时间，基于时区
//var nowDay = date.getUICHours();
//alert(nowDay);

//截取字符串
//var result = "hello,world,myLove" ;
//获取字符串的长度
//var s = result.length;
//获取第一个字符串
//var s = result.charAt(0);
//获取字符串最后一个字符
//var s = result.charAt(result.length-1);
//获取第二到三个字符串
//var s = result.subString(2,3);
//获取第二到四个字符
//var s = result.slice(1, 4)
//获取最后三个字符
//var s = result.slice(-3);
//获取字符L首次出现的位置
//var s = result.indexOf("l");
//获取字符L最后出现的位置
//var s = result.lastIndexOf("l");
//在位置3之后出现L的位置
//var s = result.indexOf("l",3);
//按照逗号分割字符串
//var s = result.split(",");
//将全文的h都替换成大写
//var s = result.replace("h","H");
//将字符串中的所有字符替换成大写
//var s = result.toUpperCase();
//alert(s);
}