Heim >Web-Frontend >js-Tutorial >JS-Objekte, datenbezogene Instanzen
Dieser Artikel teilt Ihnen hauptsächlich JS-Objekte und datenbezogene Beispiele mit. JS ist eine objektbasierte Sprache, aber sie ist nicht direkt objektorientiert, da es keine Klassen gibt. Ich hoffe, es hilft allen.
1. Objekt
Grundsätzlich das Objekt definieren: var obj=new Object(); oder 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>
Globales Fensterobjekt
JavaScript-Dokumentobjekt
JavaScript-Rahmenobjekt
JavaScript-Verlaufsobjekt
JavaScript-Standortobjekt
JavaScript-Navigatorobjekt
JavaScript-Bildschirmobjekt
Gemeinsame Methoden
valueof()-Methode: Gibt den ursprünglichen Wert des angegebenen Objekts zurück. Die
split()-Methode teilt den String in ein String-Array auf und gibt dieses Array zurück.
Die Methode indexOf() gibt die Position des ersten Vorkommens eines angegebenen Zeichenfolgenwerts in der Zeichenfolge zurück. Die Methode
substring() wird verwendet, um Zeichen zwischen zwei angegebenen Indizes in einer Zeichenfolge zu extrahieren. Die
substr()-Methode extrahiert die angegebene Anzahl von Strings beginnend mit der startPos-Position aus dem String. Die
join()-Methode wird verwendet, um alle Elemente im Array in einen String zusammenzufassen. Die Methode
arrayObject.join(separator)
reverse() wird verwendet, um die Reihenfolge der Elemente in einem Array umzukehren.
Die Methode „slice()“ kann die ausgewählten Elemente aus dem vorhandenen Array zurückgeben
二、数组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标签中事件处理器的语法是:
47af9e58ceca2fc4ffb024486b71e7c0
document对象:
d
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('btn2');获得btn2按钮对象 //给btn2添加onclick属性,属性又触发了一个事件处理程序 btn2.onclick=function(){} //添加匿名函数 btn2.onclick=null //删除onclick属性
innerText、innerHTML、outerHTML、outerText:
innerText, innerHTML, äußereHTML, äußererText
innerText: Stellt den Text zwischen dem Start-Tag und dem End-Tag dar
innerHTML: Stellt den HTML-Code aller Elemente und den Text des Elements dar
Zum Beispiel: < ;p> Der innerText von a4b561c25d9afb9ac8dc4d70affff419Hello world94b3e26ee717c64999d7867364b1b4a3 ist Hello world und innerHTML ist Hello world.
outerText: Der Unterschied zum ersteren besteht darin, dass der gesamte Zielknoten ersetzt wird Frage gibt den gleichen Inhalt zurück wie innerText
outerHTML: Der Unterschied zu ersterem besteht darin, dass es den gesamten Zielknoten ersetzt und den vollständigen HTML-Code des Elements zurückgibt, einschließlich des Elements selbst
Das obige ist der detaillierte Inhalt vonJS-Objekte, datenbezogene Instanzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!