学习 jQuery - 4 使用方法选择
2008-07-01 21:25
519 查看
使用方法来取得元素
使用方法可以取得更强大的功能，首先我们看 find 函数，通过 find 可以在已经取得元素集合中进行条件查找，例如：$("#orderedlist").find(“li”)，查找在 orderedlist 中的 li 元素，相当于 $( “#orderedlist li” )。查找的结果为元素的集合。
遍历返回的元素集合 each()
each 处理函数可以传递一个表示顺序号的参数，顺序号从 0 开始。
在函数中通过 this 取得当前被处理的元素对象，例如，下面的函数，将找到 id 为 orderedlist 的元素中的 li 元素，并将其内容依次增加 Hello,world 和顺序号码。
$( function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});
注意：在 each 函数中 this 表示当前正在处理的元素，参数 i 表示当前处理的元素在集合中的序号。
其中没有参数的 html()方法是获取对象的html代码，而有参数的方法 html( 内容 )则是设置元素的 html。
下面的例子通过一个超级链接来实现表单的重置
超级链接的内容为
<a id="reset" href="#">Reset!</a>
取得这个超级链接的方法为 $( “#reset” )，点击这个超级链接的事件为 click，即 $( “#reset” ).click，写出其处理函数为
$( “#reset” ).click( function(){
} )
取得表单 id 为 myform 的表单表示为 $( “#myform” )[0]，调用其 reset 方法就是 $("#form")[0].reset()，注意，由于 $() 返回的结果为集合，所以取得集合中第一个元素就是 $()[0] 了。
因此合起来的代码为：
// use this to reset a single form
$("# reset ").click(function() {
$("#form1")[0].reset();
});
如果要将所有的表单重置，那就通过元素的标记名取得元素，结合 each 函数，就是如下的代码了。
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
全部代码如下：
<html>
<head>
<title>Hello</title>
<script src="jquery-1.2.5.js" type="text/javascript"></script>
<script type="text/javascript">
$( function() {
$("#reset").click(function() {
$("#form1")[0].reset();
});
});
</script>
</head>
<body>
<a id="reset" href="#">Reset!</a>
<form id="form1">
<input type="text" />
</form>
</body>
</html>
使用方法可以取得更强大的功能，首先我们看 find 函数，通过 find 可以在已经取得元素集合中进行条件查找，例如：$("#orderedlist").find(“li”)，查找在 orderedlist 中的 li 元素，相当于 $( “#orderedlist li” )。查找的结果为元素的集合。
遍历返回的元素集合 each()
each 处理函数可以传递一个表示顺序号的参数，顺序号从 0 开始。
在函数中通过 this 取得当前被处理的元素对象，例如，下面的函数，将找到 id 为 orderedlist 的元素中的 li 元素，并将其内容依次增加 Hello,world 和顺序号码。
$( function() {
$("#orderedlist").find("li").each(function(i) {
$(this).html( $(this).html() + " BAM! " + i );
});
});
注意：在 each 函数中 this 表示当前正在处理的元素，参数 i 表示当前处理的元素在集合中的序号。
其中没有参数的 html()方法是获取对象的html代码，而有参数的方法 html( 内容 )则是设置元素的 html。
下面的例子通过一个超级链接来实现表单的重置
超级链接的内容为
<a id="reset" href="#">Reset!</a>
取得这个超级链接的方法为 $( “#reset” )，点击这个超级链接的事件为 click，即 $( “#reset” ).click，写出其处理函数为
$( “#reset” ).click( function(){
} )
取得表单 id 为 myform 的表单表示为 $( “#myform” )[0]，调用其 reset 方法就是 $("#form")[0].reset()，注意，由于 $() 返回的结果为集合，所以取得集合中第一个元素就是 $()[0] 了。
因此合起来的代码为：
// use this to reset a single form
$("# reset ").click(function() {
$("#form1")[0].reset();
});
如果要将所有的表单重置，那就通过元素的标记名取得元素，结合 each 函数，就是如下的代码了。
$("#reset").click(function() {
$("form").each(function() {
this.reset();
});
});
全部代码如下：
<html>
<head>
<title>Hello</title>
<script src="jquery-1.2.5.js" type="text/javascript"></script>
<script type="text/javascript">
$( function() {
$("#reset").click(function() {
$("#form1")[0].reset();
});
});
</script>
</head>
<body>
<a id="reset" href="#">Reset!</a>
<form id="form1">
<input type="text" />
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 前端学习笔记-jquery-13-其他选择/过滤函数方法
- jQuery学习笔记--jqGrid的使用方法(编辑,删除,更新,新增)
- 快速学习jQuery插件 Cookie插件使用方法
- 快速学习jQuery插件 Form表单插件使用方法
- JQuery官方学习资料（译）：使用JQuery的.index()方法
- <<< Jquery查找元素、选择器使用方法总结
- 使用jquery选择多个相同class中的一个的方法
- 使用JQuery选择HTML遍历函数的方法
- 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
- 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
- Jquery选择器使用方法大全
- jQuery怎么选择自身元素andSelf()方法使用
- JQuery的使用方法汇总(1)——认识并学习JQuery
- JQuery的使用方法汇总(1)——认识并学习JQuery
- jQuery学习(七)——使用JQ完成下拉列表左右选择
- jquery 一些选择器使用方法
- jQuery学习笔记--jqGrid的使用方法(编辑,删除,更新,新增)
- Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1)：格式化数字字符串 小程序开发之图片转Base64（C#、.Net） jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作
- crawler_解析之_jquery_语法选择器使用方法
- “jquery于each方法和选择”学习笔记