您的位置：首页 > Web前端 > JQuery

jQuery如何使用

2015-10-26 17:49 555 查看

首先要明确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"%>
<html>
<head>
<title>隐藏测试</title>
<span style="color:#FF0000;"><script src="jquery.js"></script>
<script type="text/javascript">
function toHide(id){
$("#"+id).hide();
}
</script></span>
</head>
<table width=200 height=30 border="1">
<tr id="1">
<td> ddd</td>
<td><button type="button" onclick="toHide(1)">hide</button></td>
</tr>
</table>

</body>
</html>

以上代码中最核心的就是红色部分。
第一行将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中，传递参数可以通过按钮的onclick="test(param)"，其中param就是要传递的参数。

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

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

$(document).ready(function(){
$(".button").click(function(){
var name = $(this).attr("myvalue");
$("#"+name).hide();
});
});这种情况下，body中的代码是这样的。
<tr id="2">
<td> bbb</td>
<td><input class="button" type="button" value="hide" myvalue="2"/></td>
</tr>

$(".button")

表示去定位class="button" 的所有元素（jQuery的基础语法）
而具体是哪个button，通过参数myvalue来定位，这样也算是把参数传进来了。

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

3.

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

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

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

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

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

<tr id="1">
<td> aaa</td>
<td><button id="hide1" type="button">hide</button></td>
</tr>

有两个$符号，我们可以理解为jQuery定位了两次。
第一次是检测哪个button在点击，

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

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

OVER！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航