标签：
javascriptnote
js初始化要在head头
js行为要在body体最后
js定义变量用var
var str="hello world";
js变量作用域：
1.在函数外面定义的变量 不管加不加var 全都是全局变量
2.在函数里面定义的变量 前面加var是局部变量 不带var是全局变量
document.write("test words");//输出东西 写哪儿在哪儿输出 很少用
alter("dsadsa")//弹窗输出
字符串连接符 +
js基础对象
1 window //窗口对象
2 document //文档对象
3 document.documentElement //html对象
4 document.body
5 document.head
var obj=document.getElementById("id");
js十种变量类型
1.字符串
2.整形
3.浮点
4.布尔
5.数组
1.var arr=new Array(1,2,3);
2.var arr=new Array();
arr[0]="a";
arr[1]="b";
3.var arr=[1,2,3];
4.var arr=[];
arr[0]="a";
arr[1]="b";
6.对象
1.alert(window.document.documentElement);
2.var obj=new Object();
3.var obj={"name":"user1","age":"30"};
alert(obj.age);
7.json对象
8.null
9.Nan //not a number
10.undefined
测试变量类型：
typeof();
执行表达式字符串 eval(str);
把json字符串转成json对象
var str=‘{"name":"user1"}‘;
var obj=eval("("+str+")");
alter(obj.name);
//打印对象函数
function writeObj(obj){
var description = "";
for(var i in obj){
var property=obj[i];
description+=i+" = "+property+"\n";
}
alert(description);
}
document.getElementById();
document.getElementsByTagName();
document.getElementsByClassName();
获取页面上所有元素对象
document.getElementsByTagName("*");
总结元素对象常用属性：
obj.innerHTML;
objs.length;
obj.outerHTML;
obj.textContent;
obj.tagName;
document.all判断是否为ie浏览器
if(document.all)alert(ie浏览器)；
else alert(非ie浏览器);
当为非ie浏览器 document.all返回undefine
document.documentElement.clientHeight;//可见的高
document.body.clientHeight;//body的高
获取浏览器宽高
var s = "网页可见区域宽："+ document.body.clientWidth;
s += "\r\n网页可见区域高："+ document.body.clientHeight;
s += "\r\n网页可见区域高："+ document.body.offsetWeight +" (包括边线的宽)";
s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
s += "\r\n网页正文全文宽："+ document.body.scrollWidth;
s += "\r\n网页正文全文高："+ document.body.scrollHeight;
s += "\r\n网页被卷去的高："+ document.body.scrollTop;
s += "\r\n网页被卷去的左："+ document.body.scrollLeft;
s += "\r\n网页正文部分上："+ window.screenTop;
s += "\r\n网页正文部分左："+ window.screenLeft;
s += "\r\n屏幕分辨率的高："+ window.screen.height;
s += "\r\n屏幕分辨率的宽："+ window.screen.width;
s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;
alert(s);
//ie ff 可以用document.documentElement.scrollHeight;chrome 只能用document.body.scrollHeight;
//当网页到底部时 加载id为test的图片
<img src="" id="test">
window.onscroll=function(){
var winScrollHeight=document.body.scrollHeight;
var winScrollTop=document.body.scrollTop;
var winClient=document.documentElement.clientHeight;
if(winClient+winScrollTop==winScrollHeight){
document.getElementById(‘test‘).src="1.jpg";//加载图片的src
//document.body.scrollTop=0;//直接跳转到顶部
}
}
//阻止a标签默认行为(跳转)
1.<a href="javascript:;" onclick=""></a>
2.<a href="javascript:void(0)" onclick=""></a>
3.<a href="" onclick="function(){};return false;"></a>
//阻止表单默认行为 默认行为就是跳转
1.<form action="" onsubmit="return false;">
<input type="submit">
</form>
2.<form action="" onsubmit="return check();">
<input type="submit">
</form>
function check()
{
return false;
}
3.<form action="" id=formid>
<input type="submit" id="inputid">
</form>
<script>
var formobj=document.getElementById("formid");
formobj.onsubmit=function(event){
var userval=document.getElementById("inputid").value;
if(!userval){
alert("用户名不能为空");
event.preventDefault();//阻止默认行为
}
}
</script>
js事件
onerror 图片加载失败
onfocus 元素获得焦点
//选中方法。当输入框获取焦点后，可以选择是否删除input框内自带文字（请输入文字）；
<input type="text" id="inputid" value="请输入文字">
$(inputid).onfocus=function(){
this.select();
}
//当页面加载完毕 让输入框获得焦点
window.onload=funciton(){
$("inputid").focus();
}
onblur 元素失去焦点
oncontextmenu//右键
return false;//阻止默认右键菜单
//右键弹出图片
<img src="a.png" style="display:none;position=absolute;" id=imgid>
document.oncontextmune=function(event){
var x=event.clientX;
var y=event.clientYl
$("imgid").style.top=y+"px";
$("imgid").style.left=x+"px";
$("imgid").style.display="block";
return false;
}
//右键弹出自定义菜单 只要把img换成div，div里面ul和li
//event.button 鼠标左键=1 滚轮=2 右键=3
//如果想让图片跟着鼠标移动
只需要把图片的x，y坐标改变即可
//如果要取得相应的属性 用this.getAttribute("src")
this.获取的是标签上的专属属性
如果img标签里面有username=‘dusk’ 则只能用getAttribute（‘username’）获得
//验证码大写
$("inputid").onkeyup=function(){
this.value=this.value.toUpperCase();
}
//BOM======================
1.windows对象
属性：
frames 窗口数组
length frame个数
name 窗口名字 target=“win2”
opener 打开我的那个窗口
parent 父窗口
top 顶级窗口
closed 测试某个窗口是否被关闭
方法：
open（“right。html”，“win2”，“特性”）
窗口特性
fullscreen=1|0 是否全屏
width=“” 窗口宽
height=“” 窗口高
left=“” 离屏幕左上角的left
top=“”离屏幕左上角的top
locaition=1|0 是否有地址栏
menubar=1|0 是否有菜单
2.navigator
属性：
appName //大概判断
userAgent //更精确的版本
用法：
alert(navigator.userAgent)
3.screen
属性
width
height
//alert(window.screen.height)//本地分辨率
4.history
history.back() //跳回前一页
history.go(-2)//跳回前两页
history.go(2)//前进两页
location对象：
属性：
hash//获取href里的锚点
host
href
pathname
port
protocol
search
方法：
reload()//加载当前页面，刷新当前页面
replace()//加载当前页面，还可以跳转
DOM对象和Ajax对象
obj.getAttribute("name")
obj.setAttribute("name","123")
获取元素标签内的html内容：
obj.innerHTML
获取元素标签内的text内容：
obj.textContent
获取标签外的内容：
obj.outerHTML
5.locaition
6.document
var arr=[];
arr[0]="user1";
arr[‘name‘]="user2";
alert(arr.name)//user2
//获取网页上所有的form表单，并修改
var forms=document.form;
var elements=form[0].elements;
elements[0].value="123";
//全选
for (var i = 0 ; i < elements.length;i++)
{
elements[i].checked=0;
}
//option实现多选 select加个multiple
from
select multiple
option value="123" 123 </option>
//ajax无刷新技术
1.找到Ajax对象xmlHttpRequest(xhr)
ff:
xmlhttp=new XMLHttpRequest();
IE7:
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
2.Ajax属性
3.Ajax方法
4.Ajax事件
标签：
原文地址：http://www.cnblogs.com/Duskcl/p/4596248.html
