js学习笔记

获取对象document.getElementById("idName")

输入输出 document.write()

改变内容 innerHTML

函数 function name(){}

点击事件 οnclick="alert(0)" οnclick="functionName()"

匹配 match()

改变样式 document.getElementById("idName").style.color="red"

验证非数字 isNaN()

数据类型： 数字 字符串 布尔(true，false) 数组 对象 null undefine

数组与对象的区别：

数组有length属性，对象没有

var cars=("aodi","baoma","jili");

访问数组方法：cars[0],cars[1],

var person={"name":"zhou","age":"20"};

访问对象方法：person.name或者person["name"]

js中的关联数组就是对象，数组更加倾向于顺序。

JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，变量，等等。

在 JavaScript 中，对象是拥有属性和方法的数据。

属性和方法

属性是相关的值

方法是对象上执行的动作

indexOf() 可返回某个指定的字符串值在字符串中首次出现的位置

var indeStr="what is your name?";
alert(indeStr.match("is"));
lert(indeStr.indexOf("is"))//返回某个指定的字符串值在字符串中首次出现的位置
alert(indeStr.replace(/zhou/,"li"))//后面替代前面的，加双引号也可以
alert(indeStr.search(/zhou/))//用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。返回起始位置

函数——普通函数 带有参数的函数 带有返回值的函数

function functionname(name,sex){
alert("我的名字是"+name",我的性别是"+sex)
}
function returnFunc(){
    var x=5;
    return x;    
}
var zzz=returnFunc();
alert(zzz)

变量——局部变量 全局变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

运算符

...

if  else

if(){} else if()}{} else{}

swich()

siwtch(变量名){
case 0:
代码片段;
break;
case 1:
代码片段;
break;
default:
代码片段;
}

break 跳出循环

continue 跳过本次循环继续执行下一个循环

//错误检查
function wrong(){
	try
	{alertt(0)}
	catch(err)
	{alert(err.message)}	
}

DOM

<div id="menu">
	<ul>
    	<li>首页</li>
        <li>首页</li>
        <li>首页</li>
        <li>首页</li>
        <li>首页</li>
    </ul>
</div>

var menuLi=document.getElementById("menu").getElementsByTagName("li");
var menuLen=menuLi.length;
var menuStr="联系我们";
for(i=0;i<menuLen;i++)
{menuLi[i].innerHTML=menuStr}

css

var obj=document.getElementById("border");
obj.style.borderColor="red";
obj.style.background="#fff";

<button id="borderbtn">改变下面div的css样式</button>
<div id="border" class="border">border</div>

var obj=document.getElementById("borderbtn");
obj.οnclick=function(){
	obj2=document.getElementById("border");
	obj2.style.borderColor="red";
	obj2.style.background="#fff";	
}

onclick
onload
onunload
onchange
onmouseover
onmouseout
onmousedown
onmouseup

DOM 节点

添加节点 appendChild()
删除节点 removeChild()

<button id="two" onClick="newtwo()">点击再点击实现不同效果</button>
<div id="two_wrap">
    <p id="two_p1">我是p1</p>
    <p id="two_p2">我是p2</p>
    <div id="tow_div">我是div</div>
</div>

var str=1;
function newtwo(){
    var two_parent=document.getElementById("two_wrap");
    var two_div=document.getElementById("tow_div");    
    if(str==1){
        var newp=document.createElement("h3");
        var newp_con=document.createTextNode("我是新添加的h3元素");
        newp.appendChild(newp_con);//打印出来是文本
        a=two_parent.appendChild(newp)//这个打印出来才是h3
        str=0;
    }
    else if(str==0){
        two_parent.removeChild(a);
        str=1;
    }
}

以上功能点击按钮两次执行不同的功能，console.log(a)

创建的元素不使用还是存在的

对象

1、创建对象

（1）直接创建

<pre>person=new Object();
person.name="li";
persion.sex="boy";
person.age=20;

或者

persion={name:"li",sex:"boy",age:20};

(2) 构造函数方法

 funcion glass(name, sex, age){
this.name=name;
this.sex=sex;
this.age=age;
}

me=new persion("li","boy",20) 

数字对象

js不是类型语言，不定义数字的类型，其中的数字都是存储为根为10的64位，浮点数。

绝不要在数字前面写零，除非您需要进行八进制转换。

字符串对象

length;

bold();

small();

big();

fontsize();

link();

match();

replace();

indexOf();

toLowerCase();

toUpperCase();

日期对象

数组对象

逻辑对象

算数对象

round()四舍五入

floor()--向下取整4.5=4

randow()--0与1之间的随机数

max()--最大数

min()--最小数

都是在Math对象下的方法，使用格式是：[前面添加Math.round()]

alert(Math.round(1.5))

正则表达式--略

浏览器对象模式

window

如何获取浏览器高度与宽度

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
alert(w+","+h)

screen--对象包含有关用户屏幕的信息

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

• location.hostname 返回 web 主机的域名
• location.pathname 返回当前页面的路径和文件名
• location.port 返回 web 主机的端口 （80 或 443）
• location.protocol 返回所使用的 web 协议（http:// 或 https://)
• location.assign,href--加载新的文档

window.history 对象包含浏览器的历史。

• history.back() - 与在浏览器点击后退按钮相同
• history.forward() - 与在浏览器中点击按钮向前相同

window.navigator 对象包含有关访问者浏览器的信息。

JS PopupAlert---弹窗

<p><button onClick="prom()">点击输入信息</button></p>
<p id="pro"></p>

function prom(){
	var name=prompt("请输入您的名字好么？","在这里输入您的名字..");
	name=name.fontcolor("red");
	var pro=document.getElementById("pro");
	if(name!=null && name!="")
	{pro.innerHTML="Excuse me!"+name+"今天过得怎么样啊？"}	
}

计时对象

setTimeout()

clearTimeout()

cookie--略