JS对象、数据相关实例-js教程-PHP中文网

本文主要和大家分享JS对象、数据相关实例，JS是基于对象的语言，但不是直接的面向对象，因为没有类。希望能帮助到大家。

一、对象

基本定义对象：var obj=new Object(); 或var obj={name:"xiaoming",sex:"man"};

var browser = {        //对象是由花括号括起来的
            name: "Firefox",
            kernel: "Gecko",
            run: function () { return "123"; }
        };
        //通过点号（.）或“[]”来访问对象的属性
        alert(browser.name + "==" + browser["name"]);
        //访问方法
        alert(browser.run());
    </script>

登录后复制

全局window对象

JavaScript document 对象
JavaScript frames 对象
JavaScript history 对象
JavaScript location 对象
JavaScript navigator 对象

JavaScript screen 对象

常用方法

valueof()方法：返回指定对象的原始值
split() 方法将字符串分割为字符串数组，并返回此数组。
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。
join()方法用于把数组中的所有元素放入一个字符串。
arrayObject.join(分隔符)
reverse() 方法用于颠倒数组中元素的顺序。

slice() 方法可从已有的数组中返回选定的元素

二、数组Array对象

基本定义：

var arr = [2, 3, 45, 6];
 var arr1 = new Array(2, 4, 5, 7);//避免此种写法

登录后复制

//排序方法(升序)
        var arr = [11, 11, 2, 28, 4, 5, 1];
        //不带参数按照字符编码的顺序 return  [1, 11, 2, 28, 4, 5]
        alert(arr.sort());
        //带参数 return  [1, 2, 4, 5, 11, 28]
        //按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。
//比较函数应该具有两个参数 a 和 b
//若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
        //若 a 等于 b，则返回 0。
        //若 a 大于 b，则返回一个大于 0 的值。
        alert(arr.sort(
                    function (a, b) {
                        return a - b;
                    })
                );

登录后复制

DOM:

D理解为web加载网页文档；

O理为documnet的Object对象；

M模型理解为网页文档的模型结构；

DOM包含window

Window对象包含属性：document、location、navigator、screen、history、frames

Document根节点包含子节点：forms、location、anchors、images、links

事件类型：

鼠标事件：click、dbclick、mousedown、mouseup、mouseover、mouseout、mousemove
键盘事件：keydown、keypress、keyup
HTML事件：load、unload、abort、error、select、change、submit、reset、resize、scroll、focus、blur

HTML标签中事件处理器的语法是：

document对象：

ocument对象：实际上是window对象的属性，document == window.document为true，是唯一一个既属于BOM又属于DOM的对象
document.lastModified //获取最后一次修改页面的日期的字符串表示
document.referrer //用于跟踪用户从哪里链接过来的
document.title //获取当前页面的标题，可读写
document.URL //获取当前页面的URL，可读写
document.anchors[0]或document.anchors["anchName"] //访问页面中所有的锚
document.forms[0]或document.forms["formName"] //访问页面中所有的表单
document.images[0]或document.images["imgName"] // 访问页面中所有的图像
document.links [0]或document.links["linkName"] //访问页面中所有的链接
document.applets [0]或document.applets["appletName"] //访问页面中所有的Applet
document.embeds [0]或document.embeds["embedName"] //访问页面中所有的嵌入式对象
document.write(); 或document.writeln(); //将字符串插入到调用它们的位置

登录后复制

location对象：

location对象：表示载入窗口的URL，也可用window.location引用它
location.href //当前载入页面的完整URL，如http://www.somewhere.com/pictures/index.htm
location.portocol //URL中使用的协议，即双斜杠之前的部分，如http
location.host //服务器的名字，如www.wrox.com
location.hostname //通常等于host，有时会省略前面的www
location.port //URL声明的请求的端口，默认情况下，大多数URL没有端口信息，如8080
location.pathname //URL中主机名后的部分，如/pictures/index.htm
location.search //执行GET请求的URL中的问号后的部分，又称查询字符串，如?param=xxxx
location.hash //如果URL包含#，返回该符号之后的内容，如#anchor1
location.assign("http:www.baidu.com"); //同location.href，新地址都会被加到浏览器的历史栈中
location.replace("http:www.baidu.com"); //同assign()，但新地址不会被加到浏览器的历史栈中，不能通过back和forward访问
location.reload(true | false); //重新载入当前页面，为false时从浏览器缓存中重载，为true时从服务器端重载，默认为false

登录后复制

navigator对象

navigator`对象：包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用，也可用window.navigator引用它
`navigator.appCodeName` //浏览器代码名的字符串表示
navigator.appName //官方浏览器名的字符串表示
navigator.appVersion //浏览器版本信息的字符串表示
navigator.cookieEnabled //如果启用cookie返回true，否则返回false
navigator.javaEnabled //如果启用java返回true，否则返回false
navigator.platform //浏览器所在计算机平台的字符串表示
navigator.plugins //安装在浏览器中的插件数组
navigator.taintEnabled //如果启用了数据污点返回true，否则返回false
navigator.userAgent //用户代理头的字符串表示

登录后复制

screen对象

screen对象：用于获取某些关于用户屏幕的信息，也可用window.screen引用它
screen.width/height //屏幕的宽度与高度，以像素计
screen.availWidth/availHeight //窗口可以使用的屏幕的宽度和高度，以像素计
screen.colorDepth //用户表示颜色的位数，大多数系统采用32位
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight); //填充用户的屏幕

登录后复制

函数赋值：

<input type="button" value="按钮2" id="ben2"/>
var btn2=document.getElementById(&#39;btn2&#39;);获得btn2按钮对象
//给btn2添加onclick属性，属性又触发了一个事件处理程序
btn2.onclick=function(){}
 //添加匿名函数
btn2.onclick=null
 //删除onclick属性

登录后复制

innerText、innerHTML、outerHTML、outerText：

innerText、innerHTML、outerHTML、outerText
innerText: 表示起始标签和结束标签之间的文本
innerHTML: 表示元素的所有元素和文本的HTML代码
如：

Hello world

的innerText为Hello world，innerHTML为Hello world
outerText: 与前者的区别是替换的是整个目标节点，问题返回和innerText一样的内容
outerHTML: 与前者的区别是替换的是整个目标节点，返回元素完整的HTML代码，包括元素本身

以上是JS对象、数据相关实例的详细内容。更多信息请关注PHP中文网其他相关文章！