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元素时,将执行此函数。事件侦听器也将在以后的文章中介绍。
在简单的情况下,仅此而已。在本教程的其余部分中,我们将了解如何满足更高级案例的需求。