jQuery概述

时间:2020-01-09 10:47:08  来源:igfitidea点击:

使用JQuery时,通常遵循以下操作步骤:

  • 等待页面准备就绪。
  • 选择一些HTML元素进行修改。
  • 遍历选定的HTML元素。
  • 修改HTML元素属性,CSS样式等。
  • 添加监听器函数,例如click()或者等待JQuery效果完成等。

本教程将在单独的文本中详细介绍上述内容,但让我在此处向我们展示一个示例:

// 1. Wait for the page to be ready.
$(document).ready(function() {

    // 2. select the HTML element with id 'theDiv'
    var theDiv = $('#theDiv');

    // 3. since only 1 element was selected, no traversal is necessary

    // 4. modify the HTML elements CSS attributes
    theDiv.css("border", "1px solid black");

    // 5. add a click-listener function to it.
    theDiv.click(function() {
        $('#theDiv').show(300);
        });

}

首先,该示例调用JQuery的$(document).ready()函数,并将函数作为参数传递。页面准备好后,将执行作为参数传递的函数。

其次,该示例选择ID为"theDiv"的HTML元素。通过调用JQuery的选择函数$()函数,将选择字符串作为参数来实现。选择字符串将在后面的文本中更详细地介绍。

第三,该示例修改了HTML元素的CSS属性" border"。这是通过在选定的HTML元素上调用css()函数来完成的。稍后将介绍修改CSS样式的内容。

第四,该示例向HTML元素添加了一个click listener函数。通过在所选元素上调用click()函数来实现。单击HTML元素时,将执行此函数。事件侦听器也将在以后的文章中介绍。

在简单的情况下,仅此而已。在本教程的其余部分中,我们将了解如何满足更高级案例的需求。