JS函数及DOM

最新推荐文章于 2023-01-06 09:40:27 发布

QuellanAn

最新推荐文章于 2023-01-06 09:40:27 发布

阅读量460

点赞数 1

文章标签：前端函数 dom javascript

本文链接：https://blog.csdn.net/zlf520520/article/details/52313490

版权

函数是对象

在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。

但是JavaScript 函数描述为一个对象更加准确。

JavaScript 函数有属性和方法。

arguments.length 属性返回函数调用过程接收到的参数个数：

实例

    function myFunction(a, b) { 
   
     return arguments.length; 
   
     }

函数定义作为对象的属性，称之为对象方法。

函数如果用于创建新的对象，称之为对象的构造函数。

this 关键字

一般而言，在Javascript中，this指向函数执行时的当前对象。

	注意 this 是保留关键字，你不能修改 this 的值。

函数作为方法调用

在 JavaScript 中你可以将函数定义为对象的方法。

以下实例创建了一个对象 (myObject), 对象有两个属性 (firstName 和 lastName), 及一个方法 (fullName):

实例

    var myObject = { 
   
     firstName:"John", 
   
     lastName: "Doe", 
   
     fullName: function () { 
   
         return this.firstName + " " + this.lastName; 
   
     } 
   
 } 
   
     myObject.fullName();         // 返回 "John Doe"

作为函数方法调用函数

在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。

call() 和 apply() 是预定义的函数方法。两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

实例

    function myFunction(a, b) { 
   
     return a * b; 
   
 } 
   
 myFunction.call(myObject, 10, 2);      // 返回 20

实例

    function myFunction(a, b) { 
   
     return a * b; 
   
 } 
   
 myArray = [10,2]; 
   
 myFunction.apply(myObject, myArray);   // 返回 20

两个方法都使用了对象本身作为第一个参数。两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。

在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值，即使该参数不是一个对象。

在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。

	通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。

JavaScript 内嵌函数

所有函数都能访问全局变量。

实际上，在 JavaScript 中，所有函数都能访问它们上一层的作用域。

JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。

该实例中，内嵌函数 plus() 可以访问父函数的 counter 变量：

实例

    function add() { 
   
     var counter = 0; 
   
     function plus() {counter += 1;} 
   
     plus();     
   
     return counter;  
   
     }

如果我们能在外部访问 plus() 函数，这样就能解决计数器的困境。

我们同样需要确保 counter = 0 只执行一次。

我们需要闭包。

JavaScript 闭包

还记得函数自我调用吗？该函数会做什么？

实例

    var add = (function () { 
   
     var counter = 0; 
   
     return function () {return counter += 1;} 
   
 })(); 
   
 add(); 
   
 add(); 
   
 add(); 
   
 // 计数器为 3

实例解析

变量 add 指定了函数自我调用的返回字值。

自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。

add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。

这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。

计数器受匿名函数的作用域保护，只能通过 add 方法修改。

	闭包是可访问上一层函数作用域里变量的函数，即便上一层函数已经关闭。

HTML DOM (文档对象模型)

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树：

HTML DOM 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

本例查找 id="intro" 元素：

实例

    var x=document.getElementById("intro"); 
  

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

如果未找到该元素，则 x 将包含 null。

通过标签名查找 HTML 元素

本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：

实例

    var x=document.getElementById("main"); 
   
     var y=x.getElementsByTagName("p");

通过类名找到 HTML 元素

本例通过 getElementsByClassName 函数来查找 class="intro" 的元素：

实例

    var x=document.getElementsByClassName("intro"); 
  

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

    document.getElementById( 
   id).innerHTML= 
   新的 HTML 
  

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

    document.getElementById( 
   id). 
   attribute=新属性值 
  

本例改变了 <img> 元素的 src 属性：

实例

    <!DOCTYPE html> 
   
 <html> 
   
 <body> 
   
 <img id="image" src="smiley.gif"> 
   
 <script> 
   
 document.getElementById("image").src="landscape.jpg"; 
   
 </script> 
   
 </body> 
   
     </html>

改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

    document.getElementById( 
   id).style. 
   property= 
   新样式 
  

下面的例子会改变 <p> 元素的样式：

实例

    <html> 
   
 <body> 
   
 <p id="p2">Hello World!</p> 
   
 <script> 
   
 document.getElementById("p2").style.color="blue"; 
   
 </script> 
   
 <p>以上段落通过脚本修改。</p> 
   
 </body> 
   
     </html>

使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：

实例

向 button 元素分配 onclick 事件：

    <script> 
   
 document.getElementById("myBtn"). 
   onclick=function(){ 
   displayDate()}; 
   
 </script> 
  

在上面的例子中，名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。

按钮点击时Javascript函数将会被执行。

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

实例

    <body  
   onload="checkCookies()"> 
  

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

实例

    <input type="text" id="fname"  
   onchange="upperCase()"> 
  

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

实例

    <input type="text" id="fname"  
   onchange="upperCase()"> 
  

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

addEventListener() 方法

实例

在用户点击按钮时触发监听事件：

    document.getElementById("myBtn").addEventListener("click", displayDate); 
  

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。

你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。

你可以使用 removeEventListener() 方法来移除事件的监听。

向同一个元素中添加多个事件句柄

addEventListener() 方法允许向同个元素添加多个事件，且不会覆盖已存在的事件：

实例

element.addEventListener("click", myFunction); 
    
    element.addEventListener("click", mySecondFunction);

事件冒泡或事件捕获？

事件传递有两种方式：冒泡与捕获。

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

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

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

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

    addEventListener( 
   event,  
   function,  
   useCapture); 
  

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

实例

    document.getElementById("myDiv").addEventListener("click", myFunction, true); 
  

removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

实例

 
   element.removeEventListener("mousemove", myFunction); 
  

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

实例

    <div id="div1"> 
   
 <p id="p1">这是一个段落。</p> 
   
 <p id="p2">这是另一个段落。</p> 
   
 </div> 
   
 <script> 
   
 var para=document.createElement("p"); 
   
 var node=document.createTextNode("这是一个新段落。"); 
   
 para.appendChild(node); 
   
 var element=document.getElementById("div1"); 
   
 element.appendChild(para); 
   
     </script>

删除已有的 HTML 元素

以下代码演示了如何删除元素：

实例

    <div id="div1"> 
   
 <p id="p1">这是一个段落。</p> 
   
 <p id="p2">这是另一个段落。</p> 
   
 </div> 
   
     <script> 
    
 var parent=document.getElementById("div1"); 
    
 var child=document.getElementById("p1"); 
    
 parent.removeChild(child); 
   
    </script>

QuellanAn

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS函数及DOM

函数是对象在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。但是JavaScript 函数描述为一个对象更加准确。JavaScript 函数有属性和方法。arguments.length 属性返回函数调用过程接收到的参数个数：实例function myFunction(a, b) {
复制链接

扫一扫