面向对象认识JS世界-BOM对象

面向对象认识JS-BOM

window

任何我们定义的全局变量 函数 对象等都会成为window对象的属性

document其实是window对象的属性

window的方法：

 1.window.parseInt('123')      /*123*/   parseInt将其他类型数据转换成整数，转换失败就返回NaN

 2.window.parseInt('1.23')   /*1.23*/    parseFloat将其他类型数据转换成小数，转换失败就返回NaN

    /*isNaN 确定某个数值是否可以参与运算*/
    isNaN(123)   /*123可以参与运算，不是NaN，返回false*/

　　

 /*eval 会将字符串当做js代码执行*/
    eval('var num=2')
    console.log(num+2)  /*结果是4*/

    //    我们可以控制窗口的各种属性：
    //    宽为100，高为400，距屏顶0象素，屏左0象素，无工具条，无菜单条，无滚动条，
    //    不可调整大小，无地址栏，无状态
        window.open ('http://www.baidu.com','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no') 

---

 

Location

location基础

window.location ='test.html'

刷新当前页面

location.reload()

query基础

1.document.location.href 返回完整的 URL

如：http://www.cftea.com/foo.asp?p=1，

2.location.search是从当前URL的?号开始的字符串

如:http://www.51js.com/viewthread.php?tid=22720，它的search就是?tid=22720

    function simpleQuery(){
        var params= window.location.search;//params:?id,date
        var arr = params.substring(1).split(",");
        return arr;
    }

query基础2　

切割字符串为数组

    var str = window.location.search.substring(1);//获取查询字符串，即"id=1&name=location"的部分
    var arr = str.split("&");//以&符号为界把查询字符串分割成数组

将带有参数url转成json对象格式

var json={num:1,id:1}

    var querystring = function() {//获取URL查询字符串参数值的通用函数
        var str = window.location.search.substring(1);//获取查询字符串，即"id=1&name=location"的部分
        var arr = str.split("&");//以&符号为界把查询字符串分割成数组
        var json = {};//定义一个临时对象
        //遍历数组
        for(var i=0;i<arr.length;i++) {
            var c = arr[i].indexOf("=");//获取每个参数中的等号小标的位置
            if(c==-1) continue;//如果没有发现测跳到下一次循环继续操作


            var d = arr[i].substring(0,c);  //截取等号前的参数名称，这里分别是id和name
            var e = arr[i].substring(c+1);  //截取等号后的参数值
            json[d] = e;//以名/值对的形式存储在对象中
        }
        return json;//返回对象
    }
var f = querystring();//调用查询字符串函数

开打链接的四种方式：

1.window.location = "http://www.baidu.com";
2.location.href = "http://www.baidu.com";
3.location.assign("http://www.baidu.com");
4.ocation.replace("http://www.baidu.com");

replace和assign的区别：

replace()方法所做的操作与assign()方法一样，但它多了一步操作，即从浏览器的历史记录中删除了包含脚本的页面，这样就不能通过浏览器的后退按钮和前进按钮来访问它了。
assign()方法却可以通过后退按钮来访问上个页面

刷新页面

重新加载当前文档reload()

        location.reload(true);    //从服务器重载当前页面
        location.reload(false);   //从浏览器缓存中重载当前页面
        location.reload();        //从浏览器缓存中重载当前页面

hash：如果URL中包含有“#”，该方法将返回该符号之后的内容
（例如：http://www.itcast.cn/index.html#welcome的hash是“#welcome”）。

host：服务器的名字，例如www.itcast.cn

hostname：通常等于host，有时会省略前面的www。

href：当前页面载入的完整URL。

pathname：URL中主机名之后的部分。

例如：http://www.itcast.cn/html/js/index.html的pathname是“/html/js/index.html”。

port：URL中声明的请求端口。默认情况下，大多数URL没有端口信息（默认为80端口），所以该属性通常是空白的。

像http://www.itcast.cn:8080/index.html这样的URL的port属性为8080。　　

protocol：URL中使用的协议，即双斜杠（//）之前的部分。

例如http://www.itcast.cn中的protocol属性是http：

      ftp://www.itcast.cn的protocol属性等于ftp:。

search：执行GET请求的URL中的问号?后的部分，又称查询字符串。

？Id=1&num=1

例如http://www.itcast.cn/search.html?name=shukui中的search属性为?name=shukui。

---

history

回退:history.back();

　　window.history.go(1)，window.history.go(-1)

前进:history.forward();

利用userAgent属性判断是哪个浏览器

function CheckBrowser(){
        var u_agent = navigator.userAgent;
        var browser_name='未知浏览器';
        if(u_agent.indexOf('Firefox')>-1){
            browser_name='Firefox';
        }else if(u_agent.indexOf('Chrome')>-1){
            browser_name='Chrome';
        }else if(u_agent.indexOf('Trident')>-1&&u_agent.indexOf('rv:11')>-1){
            browser_name='IE11';
        }else if(u_agent.indexOf('MSIE')>-1&&u_agent.indexOf('Trident')>-1){
            browser_name='IE(8-10)';
        }else if(u_agent.indexOf('MSIE')>-1){
            browser_name='IE(6-7)';
        }else if(u_agent.indexOf('Opera')>-1){
            browser_name='Opera';
        }else{
            browser_name+=',info:'+u_agent;
        }
        document.write('浏览器类型为:'+browser_name+'<br>');
        document.write('userAgent属性值为:'+u_agent+'<br>');
    }
CheckBrowser()

<!--document 对象集合-->
<!--document 对象集合得到的是一个数组，他们提供了对全体 HTML 元素或特定元素的访问-->

---

  Error

常用方法和属性

try {
alert(‘’)
}
catch(e) {
e.message
}

　

---

Navigator

常用方法和属性

appCodeName浏览器的代码名

appName浏览器名

ppVersion浏览器版本号

userAgent浏览器名和版本号

platform浏览器平台

Win32", "Win16", "WinCE", "Mac68k", "MacPPC", "HP-UX", "SunOS" 等

cpuClass CPU的信息 "x86“

online 浏览器是否处于联网状态

cookieEnabled  cookie是否可用

---

 Screen

常用方法和属性