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.                增加

父对象.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个数的大小

<script type="text/javascript">

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

<script>

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>

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

.倒三角

<script type="text/javascript">

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

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

document.write("&nbsp;");

}

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("&nbsp;");

}

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("&nbsp;");

}

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>

<tr></tr>

</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(标签名)就是获取到的只有一个元素,它也是一个数组

父对象.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对象

原文地址:https://www.cnblogs.com/wujunbin/p/7445825.html