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"%>
<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!

相关文章
相关标签/搜索