JavaScript基础知识(二)

 北美历史     |      2020-01-01 21:55
    <div id="div">
        <button id="btn1">按钮</button>
    </div>
    <script>
        var btn1 = document.getElementById("btn1");
        btn1.addEventListener("click",demo1);//不会被覆盖,依次执行
        btn1.addEventListener("click",demo2);
        function demo1(){
            alert("Hello DOM2级事件出现程序1")
        }
        function demo2(){
            alert("Hello DOM2级事件出现程序2")
        }  
     btn1.removeEventListener("click",demo2);//移除事件2

  </script> 
</body>

window.open() - 打开新窗口

  这段代码表明,函数不但可以当作构造函数,而且还可以带参数,还可以为对象添加成员和方法。其中的第9行,Employee构造函数又将自己接收的 this作为参数调用Person构造函数,这就是相当于调用基类的构造函数。第21、22行还表明这样一个意思:BillGates是由Person构造的,而SteveJobs是由Employee构造的。对象内置的constructor属性还指明了构造对象所用的具体函数!

从父元素中删除子元素:parent.removeChild(child);

  Math 对象用于执行数学任务。

POSITIVE INFINITIVE

 var obj = {}; 

Math.LN2

五、面向对象

Number对象

    • window.open() - 打开新窗口
    • window.close() - 关闭当前窗口
    • window.moveTo() - 移动当前窗口
    • window.resizeTo() - 调整当前窗口的尺寸

var str="Visit Microsoft!"

    • document.body.clientHeight
    • document.body.clientWidth

3:

//升序排列
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
//降序排列
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});

Math.floor(x) : 返回小于等于x且与x最接近的整数

3、原型

14:

var myCars=new Array(); myCars[0]="Saab"; myCars[1]="Volvo"; myCars[2]="BMW";

creatElement(): 创建元素节点

  ①计时事件

逻辑对象 Boolean

  ②DOMO级事件处理:把一个函数赋值给一个事件处理程序属性

确认框: var r = confirm("text")

  ②用这简单的掩盖机制实现了对象的“多态”性(类似于Java中的overrid):

Math.SQRT1_2

 1 <body onload="myWin()">
 2     <button id="btn" onclick="stopWin()">按钮</button>
 3     <script>
 4         var win;
 5         function myWin(){
 6             alert("hello")
 7             //延迟3秒弹出,自调自,形成死循环
 8             win = setTimeout(function(){myWin()},3000);
 9         }
10         //停止执行
11         function stopWin() {
12             clearTimeout(win);
13         }
14     </script>
15 </body>

这是在 Javascript 中使用这些值的方法:(与上面的算数值一一对应)

  创建新对象有两种不同的方法:

10:

  max(): max() 来返回两个给定的数中的较大的数。

数组:

方法 描述
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementsByName() 返回包含带有指定name名称的所有元素的节点列表(集合/节点数组)。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
childNodes() 访问子节点
parentNode() 访问父节点
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。
offsetHeight 返回,任何一个元素的高度包括边框和填充,但不是边距
scrollHeight 返回整个元素的高度(包括带滚动条的隐蔽的地方)

15 :

①创建一个没有任何属性的对象:

location.hostname 返回 web 主机的域名

  事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?

appendChild(): 向节点添加最后一个子节点;

  ②Window 尺寸

算数对象:Math.round(0.6) = 1;   Math.round(0.49) = 0; Math.round(-4.40) = -4;

1、对象  

JavaScript window:

2、对象的另外一种创建方法(函数构造器)

Math.SQRT2

 示例:

22:

  ①字符串属性

方法:

二、JavaScript内置对象

window.history.back()

①History对象

prototype

window.history 对象包含浏览器的历史(url)的集合。

16:

function Person(name){
    this.name = name;
};

Person.prototype.SayHello = function(){  //建立对象前定义的方法
    alert("Hello, I'm " + this.name);
};

var BillGates = new Person("Bill Gates");   //建立对象

BillGates.SayHello();

Person.prototype.Retire = function(){    //建立对象后再动态扩展原型的方法
    alert("Poor " + this.name + ", bye bye!");
};

BillGates.Retire(); //动态扩展的方法即可被先前建立的对象立即调用

this.age=age;

  min():使用 min() 来返回两个给定的数中的较小的数。

window.navigator :包含有关访问者浏览器的信息

③创建一个对象并设置属性和方法:

8:

  一些属性:

window.close() - 关闭当前窗口

  JavaScript 允许自定义对象

删除已有的HTML元素:

  继承的体现:

20 :

 var person = {name:"Angel",age:18,married:false}; 

MIN VALUE

<body>
    <div id="div">
        <button id="btn" onclick="demo()">按钮</button>
    </div>
    <script>
        function demo() {
            alert("Hello html事件处理");
        }
    </script>
</body>

2:

  window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

JavaScript 提供 8 种可被 Math 对象访问的算数值:

  通过 JavaScript,您能够定义并创建自己的对象。

Math.max(5,7);

  Date 对象用于处理日期与实际。

document.write(Date());

function Refresh() {

       window.location.reload();

}

setTimeout('Refresh()',1000);

  ②字符串常见方法

算数值

  字符串可以存储一系列字符,如 "John Doe"。

onmouseout 鼠标移出元素上方的时候触发函数。

    • Date() :获得当前的时间。
    • getFullYear():使用 getFullYear() 获取年份。
    • getTime():getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
    • setFullYear():如何使用 setFullYear() 设置具体的日期。
    • toUTCString():如何使用 toUTCString() 将当日的日期(根据 UTC)转换为字符串。
    • getDay():如何使用 getDay() 和数组来显示星期,而不仅仅是数字。
    • Display a clock:如何在网页上显示一个钟表。
    • 1
      2 <html>
      3 <head>
      4     <meta charset="utf-8">
      5     <title>菜鸟教程(runoob.com)</title>
      6     <script>
      7         function startTime(){
      8              var today=new Date();
      9              var h=today.getHours();
      
      10 var m=today.getMinutes(); 11 var s=today.getSeconds();// 在小于10的数字前加一个‘0’ 12 m=checkTime(m); 13 s=checkTime(s);
         document.getElementById('txt').innerHTML=h+":"+m+":"+s; 14 t=setTimeout(function(){startTime()},500); 15 } 16 function checkTime(i){ 17 if (i<10){ 18 i="0" + i; 19 } 20 return i; 21 } 22 23 24 25
      26 27

属性:

  window.location.assign("") 

Math.E

  • 定义并创建对象的实例
  • 使用函数来定义对象,然后创建新的对象实例

toUpperCase(): 将文本转化为大写。

* window.clearTimeout(timeoutVariable) *

对象构造器

  每个对象带有属性和方法的特殊数据类型。

test() 方法检索字符串中的指定值。返回值是 true 或 false。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <p name="pn">Hello</p>
 9     <p name="pn">Hello</p>
10     <p name="pn">Hello</p>
11     <p name="pn">Hello</p>
12     <a id="aid" title="得到了a标签的属性"></a>
13     <a id="aid2"></a>
14     <ul><li>1</li><li>2</li><li>3</li></ul>
15     <div id="div">
16         <p id="pid">div的p元素</p>
17     </div>
18     <script>
19         //获取元素
20         function getName() {
21             var count = document.getElementsByName("pn");//以name方式获取获取该类集合
22             //var count = document.getElementsByTagName("p");//以元素名获取集合
23             alert(count.length);
24             var p = count[2];
25             p.innerHTML = "World";
26         }
27         //获取节点属性
28         function getAttr() {
29             var anode = document.getElementById("aid");
30             var attr = anode.getAttribute("title");
31             alert(attr);
32         }
33         //设置节点属性
34         function setAttr() {
35             var anode = document.getElementById("aid2");
36             anode.setAttribute("title","动态标签title属性");
37             var attr = anode.getAttribute("title");
38             alert(attr);
39         }
40         //获取子节点
41         function getChildNode() {
42             var childnode = document.getElementsByTagName("ul")[0].childNodes;
43             alert(childnode.length);
44             alert(childnode[0].nodeType);
45         }
46         //获取父节点
47         function getParentNode() {
48             var div = document.getElementById("pid");
49             alert(div.parentNode.nodeName);
50         }
51         //创建节点
52         function createNode() {
53             var body = document.body;
54             var input = document.createElement("input");
55             input.type="button";
56             input.value="按钮";
57             body.appendChild(input);//添加节点到body末尾
58         }
59         //指定位置添加节点
60         function addNode() {
61             var div = document.getElementById("div");
62             var node = document.getElementById("pid");
63             var newnode = document.createElement("p");
64             newnode.innerHTML = "动态添加一个p元素";
65             div.insertBefore(newnode,node);
66         }
67         //删除节点
68         function removeNode() {
69             var div = document.getElementById("div");
70             var p = div.removeChild(div.childNodes[1]);
71         }
72         //获取页面尺寸
73         function getSize() {
74             var width = document.body.offsetWidth || document.documentElement.offsetWidth;
75             //前半句兼容性较好
76             var height = document.documentElement.offsetHeight;
77             alert(width+","+height);
78         }
79         getSize();
80     </script>
81 </body>
82 </html>

{

  • screen.availWidth - 可用的屏幕宽度
  • screen.availHeight - 可用的屏幕高度

  • screen.width-屏幕宽度
  • screen.height -屏幕高度

RegExp 对象有 3 个方法:test()、exec() 以及 compile()。

Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法,调用时可直接写该方法,省略window

需要先获得该元素的父元素:var parent=document.getElementById("div1");

     使用Math的属性/方法的语法:

location.protocol 返回所使用的 web 协议(http:// 或 https://)

  • 简洁方式:var myCars=new Array("Saab","Volvo","BMW");
  • 字面:var myCars=["Saab","Volvo","BMW"];

this.firstname=firstname;

    • 所有浏览器都支持 window 对象。它表示浏览器窗口。
    • 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
    • 全局变量是 window 对象的属性。
    • 全局函数是 window 对象的方法。
    • 甚至 HTML DOM 的 document 也是 window 对象的属性之一

向HTML添加元素需创建该元素,然后向一个已存在的元素追加该元素;

四、JavaScript浏览器对象

浏览器窗口内部宽度:window.innerWidth  ||  document.documentElement.clientWidth  ||  document.documentElement.clientWidth

4、JavaScript Window Location

19 :

  上述创建方法等价于:

合并两个数组: concat() : arr1.concat(arr2)

var x=Math.PI;

this.lastname=lastname;

属性

描述

constructor 返回创建字符串属性的函数
length 返回字符串的长度
prototype 允许您向对象添加属性和方法

document.write(str.replace(/Microsoft/,"W3School"))

 在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。

window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。window.location对象在编写时可不使用 window 这个前缀。

  •   常规方式:

6:

       window.setTimeout("javascript 函数",毫秒数); 

17:

1、事件流:描述的是在页面中结束事件的顺序

可用屏幕高度:screen.availHeight

     clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

10 的自然对数

  在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。

toFixed()

  或者

字符串:

  • 一切事物皆对象
  • 对象具有封装和继承特性
  • 对象与对象之间使用消息通信,各自存在信息隐藏

其他window方法:

②History方法:

以 10 为底的 e 的对数

  ①HTML事件处理:直接添加到HTML结构中

以 2 为底的 e 的对数

  ①事件对象event:

match(): 来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。

  ① JavaScript的所有function类型的对象都有一个prototype属性。这个prototype属性本身又是一个object类型的对 象,因此我们也可以给这个prototype对象添加任意的属性和方法。既然prototype是对象的“原型”,那么由该函数构造出来的对象应该都会具 有这个“原型”的特性。事实上,在构造函数的prototype上定义的所有属性和方法,都是可以通过其构造的对象直接访问和调用的。也可以这么 说,prototype提供了一群同类对象共享属性和方法的机制。(类似于Java 中的继承)

AG贵宾会在线,常数

  ③DOM2级事件处理:

valueOf()

 在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。

18:

             clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

Window Location Href : location.href 属性返回当前页面的 URL。

  ⑤原型模型大致写法

toExponential()

②创建一个对象并设置属性及初始值:

11:

    • setInterval() - 间隔指定的毫秒数不停地执行指定的代码。 

indexOf() :定位字符串中某一个指定的字符首次出现的位置。

    • setTimeout() - 暂停指定的毫秒数后执行指定的代码 

window.resizeTo() - 调整当前窗口的尺寸

上一篇:当我们稳步丧失感知生活的力量。 下一篇:没有了