jQuery如何使用

首先要明确JS、AJAX、JQUERY的关系。

js是jsp页面中的那些function函数，可以在JSP页面实现一些功能。

ajax是一种局部更新网页的技术，乍一看其实就是js，只是其中的函数有些不同。

jQuery是一个js函数库，有了它更方便js的编程，当然同时也方便了ajax的编程。

也就是说，jQuery是一个库。我们可以直接使用库中的一些函数，来简便JavaScript相关编程。而AJAX说白了也是JS，所以说简化了AJAX编程，也是一个意思。

实现隐藏功能，核心是调用jQuery函数库中的hide()函数

先说最简便的,也是我最终采用的实现方式。

第一步：把jquery.js放到jsp同目录下。jquery.js的获取方式：jquery.com。进入以后点Download the uncompressed, development jQuery 1.11.3，把页面中的代码保存到一个.js为后缀名的文件中即可使用。

第二步：把如下代码放到一个jsp中，运行即可看到效果。

<%@ page contentType="text/html; charset=UTF-8"%>







  
   
    
 ddd
    
hide
  

以上代码中最核心的就是红色部分。

第一行将jQuery导入。而接下来的function函数就是用普通的onclick来调用的按钮事件。

其中这一行，$("#"+id).hide();就调用了hide函数了。

从这里我们可以学到jQuery的最基础语法。

基础语法是：$(selector).action()

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

$表示调用jQuery，（）中的内容表示要进行操作的HTML元素，还有就是函数名称了。

而第二部分，表示HTML元素的几种方式如下：

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

最后一种即表示根据id来定位要进行操作的HTML元素。

接下来，贴出一些在写出如上代码之前的时候，写的一些代码

1.

function toHide(id){
	$(document).ready(function(){
		$("#"+id).hide();
	});
}

这个版本多了

$(document).ready(function()

这个我们称作document ready函数，使用它的原因，官方解释是：

为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

• 试图隐藏一个不存在的元素
• 获得未完全加载的图像的大小

但，其实，在这个例子中，加不加都可以，所以就去掉了。（大的项目中，比如加在图片需要过程的，就需要加了）

2.

在jQuery的学习过程中，遇到过一个大问题，就是传递参数。

普通的js中，传递参数可以通过按钮的οnclick="test(param)"，其中param就是要传递的参数。

jQuery当然也可以，最终版本我们已经实现了。

但学习过程中，百度到另一种做法是这样的。

$(document).ready(function(){
	$(".button").click(function(){
	    var name = $(this).attr("myvalue");
	    $("#"+name).hide();
	});
});

这种情况下，body中的代码是这样的。

   
     bbb
    

$(".button")

表示去定位class="button" 的所有元素（jQuery的基础语法）

而具体是哪个button，通过参数myvalue来定位，这样也算是把参数传进来了。

但我们可以看到，这种方法比较复杂。我们要注意一个问题，在实际的开发工作中，代码不只是你的，同时也是要写给别人看的，写给以后的自己看的，写给维护代码的人看的。所以实现某个功能时，我们要尽量让别人看懂，尽量不要采用让别人看不懂的代码。

3.

关于定位。js代码块是为了对body代码中的HTML元素来做一些操作。所以一定要保证相应的代码对应相应的元素。

onclick的方式是函数名+传递的参数

第二版是jquery查找HTML元素的基本语法+传递的参数

接下来的这一种也是这样的方法，只是定位HTML元素的方法不一样而已。

$("#hide"+1).click(function(){
	$("#"+1).hide();
	});

   
     aaa
    hide

有两个$符号，我们可以理解为jQuery定位了两次。

第一次是检测哪个button在点击，

第二次控制对哪个元素来进行操作。

所以，最终的逻辑：当我们点击按钮时，jQuery检测到按钮的id做了click操作，开始执行代码，然后找到id为1的参数，调用hide()方法让其隐藏。

OVER！