Web全栈技术指南-2.3.3 jQuery - 书目录

Web全栈技术指南-2.3.3 jQuery

2.3.3 jQuery

jQuery是一个JavaScript代码库(library)。它既非ECMAScript标准库(standard library)的一部分,也非浏览器对JavaScript的扩展(如DOM API那样)。但它十分重要,有必要做一介绍。

下面的例子用jQuery实现了与上面相同的功能:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>你好</title>
  </head>
  <body>
    <button id="btn1">点我</button>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
      $('#btn1').click(function() {
        $('body').html('<h1>你好,JavaScript!</h1>');
      });
    </script>
  </body>
</html>

这行代码引入了jQuery库:

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

这段代码对button的click事件注册了一个回调函数:

<script>
  $('#btn1').click(function() {
    $('body').html('<h1>你好,JavaScript!</h1>');
  });
</script>

jQuery有几个重要功能。首先就是简单、灵活的HTML元素选择功能。如果读者对CSS选择器(selector)有一些了解就会发现:jQuery可以使用相同的选择器来选择HTML元素。例如,通过ID选择对象

$('#btn1')

或者通过元素名称选择对象

$('body')

其次就是提供简单、一致的编程接口。例如上面用来注册事件的click方法,以及用来设置内容文本的html方法,都比对应的标准API要简单。

“一致性”在此值得一提:我们希望相同的HTML文档在不同的浏览器里表现一致——内容、排版和行为都一样。但实际上这种一致性不是轻易可得的,尤其是在早些年Web标准(如HTML,CSS和ECMAScript的标准)还不完善的时候。虽然现在标准日臻完善,但各浏览器厂商在遵循/理解标准方面仍有差异。jQuery提供的编程接口“抹平”了这种差异性,使我们至少在JavaScript编程方面可以比较容易地做到跨浏览器一致。

results matching “

    No results matching “

    134021

     

    转载链接:https://getfullstack.com/web_client/javascript/jquery.html