|
使用方法来取得元素
使用方法可以取得更强大的功能，首先我们看 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> (责任编辑：admin) |