js知识总结

小天天天天    前端    999+次    2017-08-15 10:24:53


js语言

变量:

通常就2件事:取值,赋值!

赋值:只有一种情况(模式):   变量数据(值);

取值:形式大致有如下几种情形(以变量v1例)

var  v2  =  v1;          //这就是取值——取得v1的值,并赋值给v2

alert( v1 )                            //取得v1的值,并alert()出来

document.write( v1 );    //也可以这样:document.write( “文字。。。。”  +  v1 );

var  v3  = v1 * 2 + 3 - 4;   //取得v1的值,并进行一定的计算后,,将结果赋值给v3

var  v4  = f1 (1,  v1 );      //取得v1的值,并当做调用函数f1时的第2个实参数据!

 

数据类型:

字符串型:string

2种形式:

字符串内容”: 

其中可使用的转义符有:\”        \\     \n    \r     \t

字符串内容

其中可使用的转义符有:\’        \\     \n    \r     \t

 

数字型:number

1, 2,  3,

1.1,  2.3,  4.5

 

布尔型:boolean

只有2个数据(值):true  false

 

对象类型:object

包括多种“对象类型”

 

js中的原生对象:

比如String对象, Date对象, Math对象

 

js中的自定义对象:

var  obj1  =  {name:”张三”,  age: 18}

DOM中的标签对象:

var  obj  =  document.getElementById(“dd1”);

BOM中的浏览器内部对象:

window,   document.  location,  history,  navigator,  screen...

 

undefined

 

null

 

流程控制:

if分支结构

switch分支结构:

while循环语句:

do  while循环:

for循环:

循环的中断:

break          完全终止循环,退出循环语句

continue      终止“当次”循环,进入下一次“该做的事情”(循环的开头)

函数:

function  函数名(形参1,形参2 ....){

 

}

函数名(实参1,实参2.....);

1,调用函数时,实参要跟形参“一一对应”;

2,形参就是局部变量:只能在该函数内部使用;

3,实参就是“数据”值,应该是一个有效的数据;

4,函数内部可以使用return语句,有两种用法:

return         //只是终止函数,回到函数调用位置;

return  XX数据;       //终止函数,并返回该数据到函数调用位置——也就是相当于得到了该数据

内置对象:

数组对象:

var  arr  =  new  Array(5,  3,  8,  2,  11,  7); //就称为“数组对象”

var  len  =  arr.length;      //得到数组长度

能遍历数组:

有如下方法:

.pop()

.push()

.shift()

.unshift()

.concat()

.reverse()

.join()

字符串对象:

var  str1  = new  String(“字符串内容”);

var  len  =  str1.length;     //取得长度

有如下方法:

.charAt()

.charCodeAt()

.indexOf()

.lastIndexOf()

.substr()

.substring()

.replace()

.split();

.toLowerCase()

.toUpperCase();

 

时间日期对象:

var  d1  =  new  Date()

var  d2  =  new  Date(“2015/5/6 7:8:9”);

其方法主要有:

var  v1 = d1.getTime();

var  v2 = d1.toLocaleString()

一堆get      .getFullYear(), .getMonth()......

一堆set      .setFullYear(), .setMonth()

Math对象:

Math.pow(),  Math.abs(),  Math.max(),  Math.min(),  Math.floor(),  Math.ceil(),   Math.round()

Math.random().

网页对象(DOM

var  obj  =  document.getElementById(“dd1”);

对该对象的“html属性”进行操作:

<标签   属性1=”1”  属性2=”2”  >。。。。</标签>

 

取得某html属性值:

var   v1  =  obj.属性名;

给该某html属性赋值:

obj.属性名  =  “一个新的数据值”;

注意:修改了一个标签的html属性,其“外观”往往也就发生变化了

 

对该对象的“css属性”进行操作:

<标签   style=”属性1:值1;属性2:值2” >。。。。</标签>

取得某css属性值:

var   v1  =  obj.style.css属性名;         //这种形式只能取得该对象的行内样式的属性值;

给该某css属性赋值:

obj.style.css属性名 = “一个新的数据值”;

注意:修改了一个标签的css属性,其“外观”往往也就发生变化了

event

代表任何一个具体事件发生的时候的一个“事件对象”,其实也就是从中有一些可用的信息。比如:

event.clientX;

event.clientY;

event.target, event.srcElement

 

浏览器对象(BOM

BOM Browser  Object  Model(浏览器对象模型):

什么叫模式:就是一种人为设定的框架结构或层次关系。

12.bmp

window

window.alert(),  confirm(),  prompt()

window.open(“abc.html”,  “win1”,  “width=300,  height=400” )

t1  =  window.setInterval(“语句 间隔时间)

window.clearInterval(定时器名字t1)

t2  =  window.setTimeout(“语句 等待时间)

window.clearTimeout(定时器名字t2)

document

document.getXXXX()           //3get方法;

document.write()

document.body,

document.docuemntElement

document.createElement()

 

history

该对象代表一个浏览器窗口在关闭之前,“曾经”打开过的网页的历史记录。

它作用非常有限,几乎只用于一个操作:

在代码中实现“后退”功能——它相当于点击了浏览器的“后退”按钮。

代码就是:history.back();

示例:

page1.html:

<a href=”page2.html” > go  to  page2  </a>

page2.html中:

<script>

window.onload  = init;

function  init(){

window.setTimeout( “f1();”,  5000);

}

function  f1(){

history.back();        //后退到前一个页面(page1.htm)

}

</script>

<input  type=”button”  value=”不好玩,走了!”  onclick=”f1(); “  />

网页的其他内容。。。

 

其属性有:

history.length;        //获得当前浏览器窗口中有几个历史记录;

其方法有:

history.back();        //让浏览器窗口后退到上一个页面;

history.forward();   //前进;

history.go( n );              //走几步。负数表示后退,正数表示前进。比如

history.go(-1),就是后退一步;

history.go(-2), 后退2步;

 

screen

代表用户当前使用的“电脑”的屏幕信息。

只有2个有点用处:

属性:

screen.width:  屏幕宽,

screen.height:  屏幕高,

其实就是“分辨率”

方法:

无;

location

代表当前网页的“地址”信息;

 

属性:

location.href              代表当前网页的“地址”的完整字符串;

它是一个可取值可赋值的属性:

var  v1  =  location.href;

赋值:

location.href = “一个新的url地址 //这个的作用是:让当前窗口去打开(跳转到)一个新的网页

方法:

location.assign(“一个新的url地址”);         //作用同href属性进行赋值时——打开新网页;

 

location.reload():重新加载当前网页——也就是刷新当前网页。

<style type="text/css">
        .cc{
            cursor:pointer;
            text-decoration: underline;
            color:blue;
        }
        .cc:hover{
            color:red;
        }
    </style>
    <script type="text/javascript">
        function f1(){
            location.href='page2.html';
        }
        function f2(){
            location.assign('page2.html');
        }
        function f3(){
            location.reload();
        }
    </script>
</head>
<body>
<script>
    document.write( (new Date()).toLocaleString() );
</script>
<hr />

<a href="page2.html" >go to page2</a>
<p class="cc" onclick="location.href='page2.html'; ">go to page2</p>
<h4 onclick="f1(); ">go to page2</h4>
<h4 onclick="f2(); ">go to page2</h4>


<img src="suibian.gif" onclick="location.reload();" title="点我,会重新加载页面" />
<input type="button" onclick="f3();" value="点我,会重新加载页面" />

navigator

代表“浏览器”这个“软件”的内部信息——自然只是其中的极少信息。

此对象,可以用来“区分”不同浏览器,如此而已!!!

因为不同的浏览器,会获得一些不同的信息。

我们只要据此做判断,就可以做一些“浏览器”兼容的事情。

属性:

navigator.appName:       浏览器的名字;

navigator.appCodeName: 浏览器的内部代号(名);

navigator.appVersion:            浏览器的版本号;

navigator.userAgent   浏览器的“较为完整的信息”;

方法:

无。

 

浏览器兼容性示意:

var  ua  =  navigator.userAgent;      

if ( ua 中包括 IE浏览器的特征内容 {

//就表明是IE浏览器,就写IE浏览器能识别的代码;

}

else  if( ua 中包括 FF浏览器的特征内容 {

//就表明是FF浏览器,就写FF浏览器能识别的代码;

}

else  if ...........

 

示例:

<script type="text/javascript">
    
        window.onload = init;

        function init(){
            var ua = navigator.userAgent;
            document.write(ua);
            if( ua.indexOf('Trident') >= 0 ){//表示找到了该字符:
                alert("这是IE浏览器,运行的是IE能识别的代码");
            }
            else if( ua.indexOf('Firefox') >= 0 ){//表示找到了该字符:
                alert("这是FF浏览器,运行的是FF能识别的代码");
            }
        }

    </script>

零碎知识点:

className

<标签  class=”CC1”  id=”d1”  >。。。。</标签>

var  obj  =  document.getElementById(“d1”);

obj.className :表示一个标签对象的“class”属性(类属性)的值;可取值,可赋值;

obj.className  =  “一个新的class”;    //此时,该对象的“外观”也就会受新的class所影响而改变;

innerHTML

表示一个容器标签(双标签)的“内部”的html内容部分。

它不是一个标签属性!

但它用的时候,也同样是属性的那种语法形式!

可取值,可赋值:

 

<标签   id=”d1”  >  原来的内容! </标签>

var  obj  =  document.getElementById(“d1”);

var  v1  =  obj.innerHTML;            //结果是:原来的内容!

obj.innerHTML  =  “新的内容<br /> <hr />.....”;           //此时该标签内容就变成现在设置的这些。

 

cssFloatstyleFloat

这两个属性名,都属于“css属性”floatjs中的名字,只是,不同的浏览器,用上述不同的写法。

<div id=”d1” style=”width:100px padding: 10px font-size: 20px float: left”>

内容。。。

</div>

则上述对象的css属性的操作代码类似这样:

var  obj  =  document.getElementById(“d1”);

取值:

v1  =  obj.style.width;        //100px

v2  =  obj.style.padding;    //10px

v3  =  obj.style.fontSize;    //20px

if ( IE浏览器){

v4  =  obj.style.styleFloat;

}

else{       //其他浏览器

v4  =  obj.style.cssFloat;

}

赋值:

obj.style.width  = “111px”; 

obj.style.padding  = “11px”

obj.style.fontSize  = “22px”

if ( IE浏览器){

obj.style.styleFloat  =  “right”

}

else{       //其他浏览器

obj.style.cssFloat  =  “right”

}

 



如果你觉得本篇文章对您有帮助,请打赏作者

最新评论

宝宝A 回复:不错!~[em_63][em_29]

2017-10-26 10:31:05 回复


最新评论

网站数据

网站文章数:301

注册用户数:18

TOP