JS笔记

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+" ";
}
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 += " 网页可见区域高："+ document.body.clientHeight;
s += " 网页可见区域高："+ document.body.offsetWeight +" (包括边线的宽)";
s += " 网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
s += " 网页正文全文宽："+ document.body.scrollWidth;
s += " 网页正文全文高："+ document.body.scrollHeight;
s += " 网页被卷去的高："+ document.body.scrollTop;
s += " 网页被卷去的左："+ document.body.scrollLeft;
s += " 网页正文部分上："+ window.screenTop;
s += " 网页正文部分左："+ window.screenLeft;
s += " 屏幕分辨率的高："+ window.screen.height;
s += " 屏幕分辨率的宽："+ window.screen.width;
s += " 屏幕可用工作区高度："+ window.screen.availHeight;
s += " 屏幕可用工作区宽度："+ 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(IE7 IE8):
xmlhttp=new XMLHttpRequest();
IE6:
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
//创建
var xhr=new XMLHttpRequest();
//用xhr的open方法准备连接php
xhr.open("get","index.php","true");
//用xhr的send方法真正的发起请求
xhr.send();
//用xhr获取从php响应的数据
xhr.responseText
//给xhr加readystatechange事件
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status==200){
alert(xhr.responseText);
}
}
2.Ajax属性
xhr.responseText;
3.Ajax方法
get:
xhr.open("get","index.php",true);
xhr.send();

post
xhr.open("post","index.php",true);
xhr.setRequestHeader("Content-type",application/x-www-form-urlencoded);
$str="id=10&name=user1";
xhr.send($str);
4.Ajax事件
xhr.readystatechange=function(){}

=========================!!!php js 通信!!!===============================
一、数组
<?php
$arr=array(
"name"=>"user1",
"age"=>"20",
"sex"=>"nv"
);

$str=jason_encode($arr)
echo $str;
?>

html:
json=eval("("+xhr.responseText+")");
str='';
for(var i in json){
str+= i + "===>" + json[i];
}
divobj.innerHTML=str;

二、表
<?php
$post=array(
array("username"=>"user1","pass"=>"123"),
array("username"=>"user2","pass"=>"456")
);
echo "<table width='500px' border='1px'>";
foreach($post as $row){
echo "<tr>";
echo "<td>{$row['username']}</td>";
echo "<td>{$row['pass']}</td>";
echo "</tr>";
}
echo "</table>";
?>
html:
divid.innerHTML=xhr.respostTEXT;
//这样 html的div里面直接显示这张从php获取的表