JS objects, data related instances-JS Tutorial-php.cn

This article mainly shares with you JS objects and data-related examples. JS is an object-based language, but it is not directly object-oriented because there are no classes. Hope it helps everyone.

1. Object

Basic definition of object: var obj=new Object(); or 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>

Copy after login

Global window object

JavaScript document object
JavaScript frames object
JavaScript history object
JavaScript location object
JavaScript navigator object

JavaScript screen object

Common methods

valueof() method: Returns the original value of the specified object
split() method splits the string into a string array and returns this array.
The indexOf() method returns the position of the first occurrence of a specified string value in the string.
The substring() method is used to extract characters between two specified subscripts in a string.
The substr() method extracts the specified number of strings starting from the startPos position from the string.
The join() method is used to put all elements in the array into a string.
arrayObject.join(separator)
reverse() method is used to reverse the order of elements in an array.

slice() method returns selected elements from an existing array

二、数组Array对象

基本定义：

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

Copy after login

//排序方法(升序)
        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;
                    })
                );

Copy after login

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(); //将字符串插入到调用它们的位置

Copy after login

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

Copy after login

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 //用户代理头的字符串表示

Copy after login

screen对象

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

Copy after login

函数赋值：

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

Copy after login

innerText、innerHTML、outerHTML、outerText：

innerText, innerHTML, outerHTML, outerText
innerText: Represents the text between the start tag and the end tag
innerHTML: Represents the HTML code of all elements and text of the element
For example:

The innerText of Hello world

is Hello world, and innerHTML is Hello world
outerText: The difference from the former is that the entire target node is replaced, and the question returns the same content as innerText
outerHTML: The difference from the former is that it replaces the entire target node and returns the complete HTML code of the element, including the element itself

The above is the detailed content of JS objects, data related instances. For more information, please follow other related articles on the PHP Chinese website!