jQuery教程

1.jQuery简介

Jquery是jsp的一个库，极大简化了它的编程。

2.jQuery基础语法

$(selector).action()

  • 美元符号来定义jQuery。
  • 选择符（selector）”查询”和”查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

可以看出，我们是对HTML元素进行有关控制的，其由Javascript来控制的。

3.jQuery开始使用

jQuery本质上是对html的元素来进行操作的，所以，你不能在html没加载完时就开始加载jQuery语句，所以，你需要在前面使用：

$(document).ready(function(){

   // 开始写 jQuery 代码.. 
});

当然，这里给你介绍一种更为简单的写法，两者本质上是一致的：

$(function(){

   // 开始写 jQuery 代码...

});

4. jQuery选择器

jQuery本质就是对特定的HTML元素来进行相关函数操作，而这些元素就被称为选择器。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。

1) 元素选择器

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

这里对<p>的HTML标签来进行操作，当点击button按钮的时候，对<p>标签开始隐藏进行隐藏操作。

看这段代码，我们其实是对button这个元素来对点击之后行为的定义。

2) #id 选择器

前面我们是对HTML标签元素，现在，我们需要针对一个特定的个体来进行操作，我们这是就需要标记其id。
其具体的实现方法是用#来标记其id值。

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

这个是，当我们点击按钮之后，我们就寻找id="test"的元素，然后对其进行隐藏操作。

注意：对于id，它会自动匹配第一个与之相符合的元素，第二个会自动忽视，无法对多个元素来进行操作。

3) .class 选择器

我们用#,这个ID选择器只能对单个元素来进行操作，如果对多个元素，那么我们就需要使用类操作，其具体实现方法是：

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

我们只需要在有关html的元素中声明其类就好，如class="test",这样之后就能对其进行有关控制。

6.在文件中独立存放jQuery函数

我们可以在页面中引用有关网络资源，但是，我们有时为了方便代码的维护，放在相应的.js的单独的文件中，这是你要明确的。

<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

通过src来指出引用文件的地址。

5.jQuery 事件

什么是事件？页面对不同访问者的相应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

如上面代码所示的，当按钮事件被点击时，其调用test类的隐藏方法。