javacripr基础总结

js中一切皆为对象

方法=函数其实也是内建对象

函数都可以用，包括数组，函数

都可以获取

核心dom编程

dom

d document文档

o 对象

1用户自定义对象，

2内建对象如Array Math和Data

3宿主对象浏览器提供的对象

m 模型节点树

1，内嵌式可以放在任何位置（因为浏览器是上而下的顺序进行解析。）

{要先出现对象，才可以操作。比如先有body，才能操作body

document.body.bgcolor.bgColor="#ff0000";所以有时候要放在后面。

最好的方法是，放在</div>之前。为了方便，可以放在相对应的后面

2，外链式

3，行内式<img src="" style="cur" onclick="javascript:alert('啊啊啊啊')"

print_r() var_dump()的区别

--------------------------------------

核心dom-------

document.firstChild 第一个就是 <html>

.lastChild

.nextSibling 下一个兄弟姐妹

.parentNote 父节点

父对象.createElenment("标签名"); 创建

父对象.appendChild. 增加

父对象.removeChild. 删除

table对象

tbodies

rows

cells

属性getAttribute（"属性名"）

html dom---------

document.getElementById("id值"); id=”“

document.getElementsByTagName("标签名"); name=“”

getElementsByClassName 返回是数组 class=“”

一类：用户参与

事件

1、通用事件：

onblur: 当输入框失去推动焦点

onfocus: 当输入框获得焦点时

onchange:当内容改变时触发

onselect: 当内容被选中时触发

onsubmit 当表单提交时触发

onreset: 当表单重置时触发

onresize: 当元素大小改变时触发

阻止默认行为主要是应用在a标签的点击和form表单的提交

取消表单的默认行为: <form onsubmit=”return check()”/>

取消a链接的默认行为：<a href=”http://www.234.com” onclick=”return conform(‘是否真的删除’)”>删除</a>

2、鼠标事件：

onclick 当在一个对象上点击鼠标时触发

onmouseover 当鼠标移动到对象上时触发

onmouseout 当鼠标移出一个对象时触发

onmousemove 当鼠标在一个对象上移动时触发

ondbclick 当鼠标在一个对象上双击触发

3、键盘事件

onkeydown 当键盘某个键被按下时触发

onkeypress 介于onkeydown与onkeyup之间触发

onkeyup 当键盘某个键被按下后抬起时触发

event对象：此对象记录了事件发生现场的相关信息

event.clientX 记录了鼠标与当前窗口横坐标

event.clientY 记录了鼠标与当前窗口纵坐标

event.keyCode 记录了键盘被按下的键的unicode码

二类：无需用户参与

onload事件：当页面全部加载完毕时触发属于body标签

事件绑定-

-----------------------------

第一种静态绑定

事件的程序写在html标签的事件属性中要传this

onclick=“func1（this）”

第二种，动态绑定

使用DOM方法获取对象，并为对象指定事件处理程序

可以直接this

----------------------------------------

每次输出document.write 都会调用资源，所以尽量使用

var str="";

str+="";

document.write(str);

-------------------------

高内聚低耦合

函数里面的功能尽量不要依赖外面的变化

给形参

function show（a1）{

}

--------------------------------

alert(""); 警告框

document.write(""); 显示文本只是用于测试（会删除输出流，重新开始）

window.confirm(""); 弹出一个确认对话框

window.prompt("");弹出一个可输入框接收

var v1=window.prompt("请输入第一个数字")；

var v2=window.prompt("请输入第二个数字")；

var con=window.confirm("您是否需要转账");//确定时，返回true，取消返回flase

//所有可以用if（con）来判断

if（con）{

alert（"您的500万转账成功"）;

}else{

alert("您未进行转账");

}

----------------------------------

基本数据类型与复合数据类型的对比

var n1=30;

var str=”zhangsan”;

var b1=true;

基本数据类型，一个数据对应一个对应一个变量名

数组：

var arr=[20,30,true,”zhangsan”];

多个数据对应一个对象，多个数据共同拥有一个名字

对象：

var person1={name:'zhangsan',age:29,marraiaged:true};

多个数据对就一个对象，多个数据又各自有各自的名字

---------------------------对象----

var person=new Object(); 空对象

person.weight=200;

person.height=180;

person.dance function(){

alert("haha");

}

alert(person.dance);

alert(person.weight);

复合型数据地址在栈区，数据在堆区.堆区速度相对慢

简单型数据都在栈区

func1() func1栈区地址 ——指向 func1（）堆区代码

js中的两种数据传递方式

传值和传址

全局作用域，局部作用域

var str= new String（"hello word"）;

var str= new String（123）

----------------------------------------------------

字符串也有下标，var str=javascript

str[0]=j

str[1]=a

同时也可以遍历

一、String对象字符串 ----------------

.lenght 字符个数

.charAt(0) 第几个位置出现的值；

.indexOf(substr);返回子字符串在原字符首次出现的位置(从左往右)，如果找得到则返回其下标。反之返回-1；

.lastIndexOf();

返回子字符串在原字符最后一次出现的位置，如果找得到则返回其下标。反之返回-1；

.substr(startIndex,[length]); //[]是可选的意思

从原字符串中截取子字符串，startIndex,从哪里截取下标。length长度，如果没有，默认是到结尾

.substring(starIndex,[endIndex]);也是从原字符串中截取子字符串

startIndex,从哪里截取下标。[endIndex]);到哪里下标的前一位，如果没有，默认是到结尾

.toLowerCase();将字符串转换为小写

.toUpperCase()将字符串转换为大写

.split(sep);指定的分割法，将字符串分割为数组split(","）;如果为""则每一个字符都为一个下标；

localeCompare():将汉字进行排序

二、Math对象数学计算方法

Math.abs(n);绝对值

Math.ceil(n);天花板，向上取整

Math.floor(n);地板，向下取整

Math.round(n);四舍五入

Math.max(3,2,100,200);取出最大值

Math.min(3,2,100,200);取出最小值

Math.random()返回0到1之间的随机数，包含0不包含1

Math.ceil(Math.random()*(max-min)+min);

Math.floor(Math.random()*(max-min+1)+min);包含max和min

三、Number对象

toFixed（n）进行四舍五入后保留n位小数

num=138.383838 num.toFixed(3) //138.3834

四、Array数组对象

.length 数组长度

.shift()删除数组的第一个元素;并且把第一个位置也删了

.unshift()向数组开头添加一个元素并将新数组元素的长度返回;

.pop()删除数组中最后一个元素并将它返回

.push()向数组的末尾添加一个或者多个元素；

.join([sep])将一个数组合并为一个字符串，sep不写的话，则默认是逗号

.reverse();数组倒序，颠倒

.sort（[sortby]）默认是按字符编码排序的

对数组元素进行排序

.sort（sortby）是可选参数，

function sortby(a,b){

return a-b;

}倒序就b-a

//这个是字符串的比较

.sort（sortby）是可选参数，

function sortby(a,b){

return a.localeCompare.b;

}倒序就b.localeCompare.a

五、Date对象日期

var today=new Data();

六、window对象 (顶级对象)

alert(""); 警告框

document.write(""); 显示文本

window.confirm(""); 弹出一个确认对话框

window.prompt("");弹出一个可输入框接收

.print

-----------------函数-----------------------

function 函数名（形参1，形参2，形参3...){

//函数体

[return值]

}

return 当函数遇到此语句就会立即停止

调用函数名（实参1，实参2，实参3...)//参数可以不定义

var n1=30;

var n2=90;

function func2(p1,p2){

var min=p1>p2?p2:p1;

return min;

}

var result=func2(n1,n2);

alert(result);

--------------匿名函数-----------------------

1.就是把其赋给一个变量。那样就可以不要函数名字，这个变量也就是一个函数，就是i是一个函数

i=function(){}

i();

2.自调用：它的作用：就是写完后，立即执行里面的代码；可以自传参数

（function(){}）（）;

(function(name,age){

document.write("他的名字:"+name+"他的年龄:"+age);})("钟汉良","38");

return 2个作用

1.向函数调用者返回数据

2，结束当前函数体；

1，要定义一个变量来接收。return

function func(){

return "hello";

}

var str=func();

document.write(func());

2，直接输出它

function func(){

return "hello";

}

alert (func());

document.write (func());

高内聚，低耦合

内聚性强:定义函数时，函数的功能要专一，比如定义一个函数是增加功能；那么整个函数是围绕增加功能添加新的；

-----------------------------------arguments形如一个数组，把传进来的参数储存

function func1(){

alert（"我接收了"+arguments.length+"个参数"）;

alert(arguments[0]);

}

func1(10,20,30,40,50);

在参数不确定时------

function total（）{

var he=0;

for（var i=0;i<arguments.length;i++）{

he+=arguments[i];

}

return he;

}

alert(total(10,20,30,40,50));

return一般返回是用来判断使用的；

function func(){

if(){

return true;

}else{

return false;

}

//语句

}

var obj=new Object();

obj.name="钟汉良";

obj.age="25";

obj.job="歌手";

obj.fun=function(){

document.write("他的名字:"+obj.name+"他的年龄:"+obj.age+"他的工作:"+obj.job);}

obj.fun();

--------------数组---------------------

第一种：使用new关键字和Array（）构造函数和 var一个变量是一样的

a var arrA=new Array();

arrA=[10，20,30];

b var arrB=new Array(5) 数组长度

var arrB=new Array（'5'）定义数组第一个元素赋值

var arrC=new Array（10，20,30）;

第二种：直接量

var arrA=[10,20,30,40];

第三种

var arrA=new Array（3）;

arrA[0]="10";

arrA[1]="20";

arrA[2]="30";

二维数组

arrA=[ [10,23,2,5,6,45,],2,3,8,8,[213,453] ];

var arrA=[10,20,'ah',true，null]

var arrB=[5];

var arrC=new Array();

arrA[5]数组的值 1个

new Array（5）整个数组 5个

new Array('5') 1个

数组名[行小标][列下标]

arra.length

数组的操作（CRUD）

访问一个数组元素

数组名[元素下标];

对数组元素的更改

var arrA=[10,20,'ah',true，null];

//修改

arrA[2]="lisi";

//增加一个元素

arrA[6]="低调的小男孩";

//删除delete仅是删除元素的值,它所占的位置还是存在。存的是undifind，算是个漏洞。

delete(arrA[2]);

//查一个元5素

arrY[1]=

------------json对象-----------------------------

var person={'username':'二师兄'，

'sex':true,

'show':function(){}

}

javascriptObject 结构

person.show();调用方法;

//w3c内置对象。

遍历，就是for循环

for in循环结构----------------------------------------

语法结构

注意，把arrA.length先定义，这样减少for里面length又一次浪费重新取长度

也就是先把

var arrA_length=arrA,length

以前的

for(var i=0;i<arrA_length;i++){

alert(arrA[i]);

}

现在的

for（index in arrA）{ \\index是一个变量（可以随便起），此变量在循环开始时会被自动声明，此index变量中存放的就是数组元素的下标

document.write(arrA[index]);

}

for（j in window）{

document.write(window[j]+"</br>");

}

------------------------------三目------------------

var vl=20;

var str=vl>30?"表达式成立":"表达式不成立";

alert(str);

表达式？表达式true取这个：表达式flase取这个；

--------------------------------------

ECMAScript 中可用的 3 种强制类型转换如下：

Boolean(value) - 把给定的值转换成 Boolean 型；

Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；

String(value) - 把给定的值转换成字符串；

parseInt 从一个字符串中提取整型数值,从左往右，直到第一个不是数字的字符停止

parseFloat 从一个字符串中提取浮点型数据,从左往右，直到第一个不是数字的字符停止

isNaN 判断一个数据是否为非数字

--------------------------强制类型转换-------------------------

typeof判断其类型typeof(width)

强制类型转换

Number 强制将其他数据类型转换为数值型

String 强制将其他数据类型转换为字符型

Boolean 强制将其他数据类型转换为布尔型

一般都不是真实存的都会转换为false

parseInt 从字符串中提取整型数据从左向右提取，直遇到第一个不为数字的字符(包含小数点)

parseFloat 从字符串中提出浮点数从左向右提取，直遇到第一个不为数字的字符

isNaN 判断一个字符串是否是纯数字字符串，如果不是一个纯数字字符串返回true

流程控制

分支结构

if(条件表达式){

//语句体

}

if(条件表达式){

//语句体1

}else{

//缺省语句体

}

if(条件表达式1){

//语句体1

}else if(条件表达式2){

//语句体2

} else if(条件表达式3){

//语句体3

} else if(条件表达式4){

//语句体4

}else{

//缺省语句体

}

当if（）{

中间没有判断语句时，可以把2个if合起来写，&&||

if（）{

}

switch结构

switch(变量){

case 变量值1:

//语句体1

break;

case 值2:

//语句体2

break;

case 值3:

//语句体3

break;

default:

//缺省语句体

}

if结构与switch结构区别

if结构的条件表达式一般判断的是一个范围

switch结构判断的具体的某个值

循环结构

for(循环控制变量初始化;循环条件;循环控制变量更改){

//循环体

}

执行过程：

1、循环控制变量初始化，只执行一次

2、判断循环条件是否成立，成立则执行循环体，不成立则直接退出

3、对循环控制变量进行更改，

4、使用更改后的循环控制变量的值再判断循环条件是否成立

while循环结构

while(条件表达式){

//循环体

}

do{

}while(条件表达式)

while与do… while的区别

while是先判断条件表达式，再根据条件表达式的结果去执行循环体

do…while是先执行循环体，再判断条件表达式是否成立，(无论条件表达式成立与否，循环体至少会执行一次，)

for结构与while结构的区别

for一般用于已知循环次数或循环次数可能通过某种方式确定，while循环一般用于，循环次未知。

作业讲解：

break; 中止当前循环结构

continue; 中止当前的本次循环，继续下一次循环

---------------------------------------------------

var v1=window.prompt("请输入第一个数字")；

var v2=window.prompt("请输入第二个数字")；

var v3=Number(v1)+Number(v2);

alert(v3);

var v1=window.prompt("请输入第一个数字")；

if(isNaN(v1)){

alert("您输入的是一个数");

}

if(){

}else if{

}else{

}

-----------------------------------------------------------

var v1=window.prompt("请输入您的年龄")；

if(!isNaN(age)){

age=Number(age);

switch(age){

case :

alert();

break;

case :

alert();

break;

default:

alert();

}else{

alert();

}

continue; 结束本次循环

break;结束整个循环

break 2;

--------------------------------------------

var v1=window.prompt("请输入您的分数")；

//对用户输入的数据进行判断

if(!isNaN(score)){

//当用户输入的数据合法进行操作

score=parseInt(Number(sore)/10);

//90/10=9 91/10=9.1 92/10=9.2

var n=10;

score=Number(age);

switch(age){

case :9 //用户输入的90-100之间的数执行此case语句

alert("成绩优秀");

break;

case :8

alert("成绩优良");

break;

default:

alert();

}else{

alert();

}

var v1=window.prompt("请输入第一个数字");

var score=parseInt(Number(v1)/10);

if(score>=9){

alert(v1+"分成绩很优秀");

}else if(score>=8){

alert(v1+"分成绩良好");

}else if(score>=7){

alert(v1+"分成绩还行");

}else{

alert("成绩一般般");

}

if结构与switch结构区别

if结构的条件表达式一般判断的是一个范围

switch结构判断的具体的某个值

所以if（score=9）这样是赋值，为true。会影响判断，必须score>=9 或者>8或者==9 这样才对不能取=应该是==

if（score==9）才对

-------------------------------------------------

--------------------------------------------------

“”+（i+1）+“”；

-------------

while（条件表达式）{

循环体}

do{循环体}while（条件表达式）

---------------------

鸡兔共35 脚94，求

var ji=1;

while(ji<35){

tu=35-ji;

if(ji*2+tu*4==94){

document.write("鸡的数量"+ji+""+"兔的数量"+tu);

}

ji++;

}

---------

for(ji=1;ji<35;ji++){

tu=35-ji;

if(ji*2+tu*4==94){

document.write("鸡的数量"+ji+""+"兔的数量"+tu);

}

-------------------------------------------------------

1-100能被3整除

for(i=1;i<100;i++){

if(i%3==0){document.write("</br>"+i);}

}

----------------------------------------------------------

3个数的大小

var a=20; var b=10; var c=30;

var min=a>b?(b<c?b:c):(a<c?a:c);

alert (min);

</script>

-------------------------

100能被3整除又是偶数的数

var v1=0;

for(i=1;i<1000;i++){

if(i%6==0){v1+=1;document.write("</br>"+i);}

}document.write(v1);

--------------------------------------------------

九九乘法口诀

在于b<=a

for( var a = 1; a < 10; a++ )//这个循环语句决定外层循环

{

for( var b = 1; b <= a; b++ )//这个决定内层循环，关键在于，外层循环的a ，当a=1时，b循环一次，当a=2时，b循环2次。。。。。控制着，所以b<=a

{

document.write( b + "x" + a + "=" + a*b );

document.write( " " );

}

document.write( "<br />" );

}

</script>

------------------------------

.倒三角

for(var row=1;row<=10;row++){//控制外层多少层

for(var space=1;space<10-row;space++){//控制左边倒三角空space<10-row

document.write(" ");

}

for(var cols=1;cols<=row;cols++){//控制里层的*多少cols<=row;

document.write("*"+"");//控制右边的倒三角空

}

document.write("</br>");

}

</script>

for(var row=1;row<=10;row++){//控制外层多少层10

for(var space=1;space<10-row;space++){//控制左边倒三角空10-row

document.write(" ");

}

for(var colsp=1;colsp<=2*row-1;colsp++){//控制里层的*多少2*row-1;

document.write("*");

}

document.write("</br>");

}

for(var row=1;row<=10;row++){//控制外层多少层10

for(var space=1;space<=row;space++){//控制左边倒三角空10-row

document.write(" ");

}

for(var colsp=1;colsp<=2*(10-row)-1;colsp++){//控制里层的*多少2*row-1;

document.write("*");

}

document.write("</br>");

DOM和BOM

//作用域链两链一包，原型链，闭包

window对象，当前窗口，顶级对象，所有的对象都是以属性的方式添加在window对象下面，一般可以省略不写

document对象代表当前文档HTML文件

history对象历史对象

location 地址栏对象

navigator 浏览器对象

screen 屏幕对象

BOM

***************************************************************

1。window//--------------------------------------------------

window.innerWidth:窗口的内宽

window.innerHeight:窗口的内高

window.outerWidth:窗口的外宽

window.outerHeight:窗口的外高

2.window对象的方法------------------------------------------

window.alert()弹出警示窗口

window.prompt()输入框

window.confirm();确定框

window.close（）关闭当前窗口

window.open(url,name,option)打开窗口，

window.setTimeout(code,Millisec)//延时器

window.clearTimeout(timer);//清除延时器

window.setInterval(code,Millisec)//定时器。按指定的毫秒周期循环

window.clearInterval(timer);//清除定时器

3.screen对象-----------------------------------------------

screen.width获取屏幕的宽度

screen.height获取屏幕的高度

screen.availWidth获取屏幕的有效宽度

screen.colorDepth 屏幕的色深

4.location对象---------------------------------------------

location.href:主要是用于实现网页跳转

location.reload()相当于浏览器的刷新按钮

5.history--------------------------------------------------

history.go():主要的功能是用来显示浏览器的历史记录；

history.go(-1):相当于后退

history.go(0):相当于刷新

history.go(1):相当于前进

onclick="history.go(1)"

6.navigator------------------------------------------------

navigator.appName获取到浏览器的名称(判断什么是ie浏览器，什么是w3c浏览器)

navigator.appVersion 获取浏览器的版本

navigator.cpuClass 获取cpu，只有IE能支持

.DOM

*************************************************************

主要用来操作HTML文档中的各标记的属性和方法（也可以操作XML，XHTML等）

ie 的js在本地，所有老是有提示是否开启

学习DOM操作首先要明确两点:

**DOm把HTML中的每个标记都看做一个对象

**HTML标记中所拥有的属性，这个对象也同时拥有，

核心DOM

-----------------------------------------------------

主要的功能是操作HTML和XHML

注意，在写代码时，我们经常会换行，空格，但是DOM会把这些当做一个文本节点。

所以，有时获取节点时，会取错，最后的方法是把空格去点，网上有专门的压缩工具

就是

<table>

</table>

改为<table><tr></tr></table>

firstChild:第一个子节点

lastChild：最后一个子节点

nodeValue：节点值

parentNode：父节点

childNodes：子节点列表，它是一个数组，就算只有一个子节点，也是一个数组

object.setAttribute(属性名，属性值)增加属性，修改属性

object.getAttribute(属性名) 查找

object.removeAttribute(属性名) 删除

document.createElement("创建的标签名")

创建的标签不带尖括号

创建好的标签名它是存放在内存中，暂时没有任何作用

追加节点

父对象.appendChild(创建的标签名的返回值)

删除节点

父对象.removeChild(创建的标签名的返回值)

HTML DOM

-----------------------------------------------------

主要是用于操作HTML文档

为什么会有HTML DOM 因为随着HTML的文档层次越深，那么核心DOM

操作HTML文档会更加繁琐，所以才有了HTML DOM操作HTML

document.getElementById(id)这个方法只有document对象才拥有

父对象.getElementsByTagName(标签名)就是获取到的只有一个元素，它也是一个数组

父对象.getElementsByName(获取类名)。如果添加class要写为clssName

HTML DOM标签属性的操作

标签对象.属性获取属性的值

标签对象.属性="赋值" 修改属性值

标签对象.属性="" 删置空有一些赋值为0或者null

以上操作均不包含对clss属性的操作。如果需要对clss属性操作，需要将clss属

性名更改为className

对标签属性的操作，

有核心DOM

HTML DOM

CSS DOM

zencodi插件

3，XML DOM 主要拥有操作XML文档

51.4，CSS DOM

----------------------------------------------------------------------

主要拥有操作标签的style属性

每一个HTML标签都拥有一个style属性，那么这个style属性其实也是一个对象

css样式其实都是这个style对象的属性

标签对象.style.CSS样式属性="CSS值"

和核心DOM的标签属性一样，但是css DOM更方便

5，event DOM ----------------------------------------

用户的一些行为如鼠标点击，鼠标经过等事件

它主要操作even

在js中，当事件发生时，有一些相关的信息会保存在

even中，比如键盘按下时。会将键盘的keyCode码保存在event事件中，

当鼠标在图片上点击时，获取到点击的位置坐标

event事件的相关属性

clientX离窗口左边多远

clientY离窗口上边多远

pageX：离网页左边多远

pageY：离网页上面多远

还有键盘的keyCode码

function(event){

var eve=event||window.event;//兼容

alert(event)

console.log(event)

eve.clientX

eve.pageX

}

------------

可以先判断

if（event）{}

最好是 var eve=event||window.event;

----

ie中

function(event){

alert(event)

console.log(event)

要加window

window.event.clientX

window.event.X

}

------------

console.log();

事件绑定：1行内绑定将事件处理程序写在HTML标签中

2动态绑定通过JS程序获取到HTML标签对象然后再给它绑定事件处理程序，实现行为，样式，结构分离

onkeypress

onload页面加载完

onclick鼠标点击时

onblur当失去焦点时（这2个主要配合input。用来用户名，默认名）

onfocus当得到焦点时

onsubmit当表单提交时。它是给form标签绑定的

怎样来阻止表单提交。

1:当onsubmit是行内绑定时 return false; 绑定的事件也要加个return

2 当onsubmit是动态绑定时直接return false即可

onchange//内容改变时。

onkeydown当键盘按下时

rgb只能用sty background-color 标签的bgcolor不支持RGB

select与option对象的相关属性

select对象.length：可以设置或者是获取到option的个数

select对象.options:它返回所有的option它是一个数组

select对象.selectedIndex:返回默认选中的下标

value:它是给option设置value值

text:它是向option标记中书写内容

this------------------------------------------------------

行内绑定 this 指向自己

动态绑定也是自己，如果没有自己，指向window

表格的专用属性

先获取table

要给其加tbody

表格对象.tBodies【0】

tbody对象.rows

行对象。cells

tobody对象