js对象属性与Bom

Posted 黎明NB

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js对象属性与Bom相关的知识,希望对你有一定的参考价值。

1JavaScript 的对象

1.1字符串

1.2Array对象

1.3Date对象

1.4Math对象

1.5Function对象(重点)

2 Bom对象

1   JavaScript对象

在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象,也可以用创建对象的方法定义变量,String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象,在JavaScript程序大多数功能都是基于对象实现的。

1.1字符串对象

字符串对象创建2种方法:

 //字符串创建的方法
//       var s=hello
//        var s1=new String(hello)

字符串对象的属性和函数(只有length是属性其余都是方法):

//属性和方法 一个属性是length其余都是方法
        var s=helloworld
//        console.log(s.length)//包括字符串中的空格
//        console.log(s.toUpperCase())//把字符串变成大写
//        console.log(s.trim()) //去掉字符串两边的空格
//        console.log(s.charAt(4))//通过索引找元素
//        console.log(s.indexOf(l))//通过字符找索引(找到第一个)
//        console.log(s.lastIndexOf(h))//通过字符找最后一个出现的字符的索引
//        console.log(s.match(hehh))//返回的是匹配到的字符串,如果没有返回的是null
//        console.log(s.search(world))//返回的是匹配到的字符串,出现的索引
//       res=s.substr(1,8)
//        console.log(typeof res)//返回的是截取到的字符串,1 是开始的索引,8是截取的长度。
//       res=s.substring(1,4)
//        console.log(typeof res)//返回的是截取到的字符串,1是开始索引,4取不到。又叫顾头不顾尾
//        console.log(s.slice(1,4))//切片返回的是字符串,也是顾头不顾尾。
//        res=s.split(w)
//        console.log(typeof res)
//        console.log(res[0],res[1])//返回的是数组类型,python中返回的列表
        console.log(s.replace(l, fuck))//替换一个函数   只能替换第一个字母,python中可以全部替换
//        console.log(s.concat(99999))//拼接字符串

1.2Array对象

创建数组的三种方式:

//数组对象的创建三种方式
//        创建方式一
//        var arr=[11,22,33]
        //创建方式二
//        var arr=new Array(11,22,33)
        //创建方式三
//        var cnweek=new Array(7)
//            cnweek[0]=星期日
//            cnweek[1]=星期一
//            cnweek[2]=星期二
//            cnweek[3]=星期三
//            cnweek[4]=星期四
//            cnweek[5]=星期五
//            cnweek[6]=星期六

创建二维数组:

var cnweek=new Array(7);
for (var i=0;i<=6;i++){
    cnweek[i]=new Array(2);
}
cnweek[0][0]="星期日";
cnweek[0][1]="Sunday";
cnweek[1][0]="星期一";
cnweek[1][1]="Monday";
...
cnweek[6][0]="星期六";
cnweek[6][1]="Saturday";

数组的属性和方法:

join方法:

数组方法
//        ss=[jaljgljal]
//        var arr=[11,22,33,88,2];
//        console.log(arr[2]);
//        join方法
//          ret=arr.join(-)
//        console.log(ret)

cocat方法:

 //concat方法
//        var a=[2,4]
//        console.log(a.concat(arr))
//        console.log(a.toString())//变成字符串

 

reverse sort方法:

//reverse sort 方法
        var arr=[11,22,33,88,2];
//        console.log(arr.reverse())//翻转排序
//        console.log(arr.sort())//按照acci码值进行排序[11,2,22,33,88]
//        console.log(arr.sort(foo1))//这种方法可以按照大小排序[2,11,22,33,88]
        //方法一
//        function  foo(x,y) {
//            if(x>y){
//                return 1
//            }
//            else  if(x<y){
//                return -1
//            }
//            else {
//                return 0
//            }
//
//        }
//方法二
//        function foo1(x,y){
//            return x-y
//        }

slice方法:

slice
//             var arr=[11,22,33,88,2];
//             console.log(arr.slice(1,3))//得到的结果[22,33]

删除数组

    //x. splice(start, deleteCount, value, ...)

//使用注解

//x代表数组对象
//splice的主要用途是对数组指定位置进行删除和插入
//start表示开始位置索引
//deleteCount删除数组元素的个数
//value表示在删除位置插入的数组元素
//value参数可以省略
//        var a=[1,2,3,4,5,6,7]
//        a.splice(1,2)
//        console.log(a)//[1,4,5,6,7]
//        console.log(a.toString(),typeof a)
//        a.splice(1,0,2,3)
//        console.log(a.toString())//[1,2,3,4,5,6,7]

push pop方法

 //push 和pop的用法这两个方法模拟的是一个栈操作

//x.push(value, ...)  压栈
//x.pop()             弹栈
//使用注解
//
//x代表数组对象
//value可以为字符串、数字、数组等任何值
//push是将value值添加到数组x的结尾
//pop是将数组x的最后一个元素删除
//            var a=[1,2,3,4,5,6,7]
//        ret=a.push(2,3)
//        console.log(ret)//9
//        console.log(a)//[1,2,3,4,5,6,7,2,3]
//        ret1=a.pop()
//        console.log(ret1)//pop 的值
//        console.log(a)//去掉最后一个数值

unshift shift方法

     //x.unshift(value,...)
//x.shift()
//使用注解

//x代表数组对象
//value可以为字符串、数字、数组等任何值
//unshift是将value值插入到数组x的开始
//shift是将数组x的第一个元素删除
        var arr=[1,2,3,4]
        console.log(arr.unshift(4,5))
        console.log(arr)//[4,5,1,2,3,4]
        ret=arr.shift()


        console.log(ret)//[4]
        console.log(arr)//[5,1,2,3,4]
 js中数组的特性
//java中数组的特性, 规定是什么类型的数组,就只能装什么类型.只有一种类型.
//js中的数组特性1: js中的数组可以装任意类型,没有任何限制.
//js中的数组特性2: js中的数组,长度是随着下标变化的.用到多长就有多长.

1.3Date对象
创建形式
var day=new Date()
Date对象的方法:
var day=new Date()
//        console.log(day)
//        console.log(day.toString())//变成字符串
//        console.log(day.getDate())  //几号
//        console.log(day.getDay())//周几
//        console.log(day.getFullYear())//四位数的年表示形式
//        console.log(day.getYear())//从1900开始到现在多少年117
//        console.log(day.getMonth())//8月要加1月
//        console.log(day.getTime())//返回累计毫秒(从1970年?1月/1午夜)
//        console.log(day.getHours())//小时20小时
//        console.log(day.getSeconds())//从获取秒数
//        console.log(day.getMinutes())//获取分钟数

拼接日期:

    " 2012-12-12 12:12 星期三 "
//拼接日期
//        var date=new Date()
//        function  foo(y) {
//          var  year=y.getFullYear()
//             var month=y.getMonth()
//          var  day=y.getDate()
//          var   hours=y.getHours()
//           var  minth=y.getMinutes()
//           var weeked=y.getDay()
//            var ss=[星期日,星期一,星期二,星期三,星期四]
//           return  year+"-"+cc(month+1)+-+day+ +hours+:+minth+ +ss[weeked]
//
//        }
//        function  cc(x)  {
//            if(x<10) {return 0+x}
//            else {return(x)}
//
//        }
//        console.log(ss)
//    console.log(foo(date))

三元运算符:

  var i=+1
//        console.log(i)//1
//        console.log(typeof i )//num
//        console.log(2>1?2:1)//三元运算符

设置日期与时间

//设置日期和时间
//setDate(day_of_month)       设置日
//setMonth (month)                 设置月
//setFullYear (year)               设置年
//setHours (hour)         设置小时
//setMinutes (minute)     设置分钟
//setSeconds (second)     设置秒
//setMillliseconds (ms)       设置毫秒(0-999)
//setTime (allms)     设置累计毫秒(从1970/1/1午夜)
    
var x=new Date();
x.setFullYear (1997);    //设置年1997
x.setMonth(7);        //设置月7
x.setDate(1);        //设置日1
x.setHours(5);        //设置小时5
x.setMinutes(12);    //设置分钟12
x.setSeconds(54);    //设置秒54
x.setMilliseconds(230);        //设置毫秒230
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日5点12分54秒

x.setTime(870409430000); //设置累计毫秒数
document.write(x.toLocaleString( )+"<br>");
//返回1997年8月1日12点23分50秒

日期与时间转换:

日期和时间的转换:

getTimezoneOffset():8个时区×15度×4分/度=480;
返回本地时间与GMT的时间差,以分钟为单位
toUTCString()
返回国际标准时间字符串
toLocalString()
返回本地格式时间字符串
Date.parse(x)
返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.UTC(x)
返回累计毫秒数(从1970/1/1午夜到国际时间)

1.4Math对象

console.log(Math.max(11,22,66,99,789))
//        console.log(Math.min(11,22,66,99,789))
//        console.log(Math.ceil(89.4656513646))//向上取整
//        console.log(Math.floor(89.4656513646))//向下取整
//        console.log(Math.exp(0))//以e为底的指数
//        console.log(Math.pow(2,3))//幂
        var  num=Math.random();//取0-1之间的数不包括1
        num=num*100;
        num=Math.round(num)//四舍五入
        console.log(num)

1.5Function对象

函数的定义:

function 函数名 (参数){?<br>    函数体;
    return 返回值;
}

功能说明:

可以使用变量、常量或表达式作为函数调用的参数
函数由关键字function定义
函数名的定义规则与标识符一致,大小写是敏感的
返回值必须使用return
Function 类可以表示开发者定义的任何函数。

function  foo() {
//            return console.log(ok)
//        }
//        var ret=foo()
//        console.log(ret)

注:js的函数加载执行与python不同,它是整体加载完才会执行,所以执行函数放在函数声明上面或下面都可以:

<script>
    //f(); --->OK

    function f(){
        console.log("hello")

    }

    f() //----->OK
</script>

function对象的调用:

function func1(a,b){

    alert(a+b);
}

    func1(1,2);  //3
    func1(1,2,3);//3
    func1(1);    //NaN
    func1();     //NaN

    //只要函数名写对即可,参数怎么填都不报错.

-------------------面试题-----------
 function a(a,b){
    alert(a+b);
}

   var a=1;
   var b=2;
   a(a,b)

内置对象:arguments

function  add() {
//            var sum=0;
//            for (var i=0;i<arguments.length;i++)
//            { console.log(arguments[i])
//                sum+=arguments[i]
//            }
//            for(i in arguments) {//法二
//                sum+=arguments[i]
//            }
//            return sum
//        }
//
//        ret=add(5,6,9,2)
//        console.log(ret)

匿名函数

 (function(arg){
        console.log(arg);
    })(123);
(function(){
        alert("tony");
    } )();

2 Bom对象

window对象

所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.
alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。

setInterval()      按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

 function foo() {
          var date=new Date();
          var date=date.toLocaleString();
        
          var ele=document.getElementById("timer");
          ele.value=date;
      }

      var ID;
      function begin() {

           if (ID==undefined){
                 foo();
                 ID=setInterval(foo,1000);

                 var ele=document.getElementById("show");
                 ele.disabled="disabled"
            }

         
      }
      
      
      function end() {
          clearInterval(ID);
          ID=0;
      }

 

















以上是关于js对象属性与Bom的主要内容,如果未能解决你的问题,请参考以下文章

JS DOM(文档对象模型)与BOM(浏览器对象模型)

JS之BOM与DOM

JS浏览器对象(BOM)

javascript--BOM(browser object model)五大对象

javascript之BOM对象(二location对象)

JavaScript BOM篇