`
fengyaodong
  • 浏览: 144027 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

学习 jQuery - 4 使用方法选择

    博客分类:
  • Java
阅读更多
使用方法来取得元素
使用方法可以取得更强大的功能,首先我们看 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权威指南-源代码

    对于初学者而言,本书应该是学习jQuery的首选。——jQuery中文用户组 jQuery因为易于使用和功能强大著称,是所有Web开发者应该掌握的一种利器,初学者如何才能快速而有效地掌握jQuery呢?最好的方法莫过于一边学习...

    jquery插件使用方法大全

    由于目前高校基本尚未开JavaScript的相关课程,目前jQuery的学习,使用,研究都仅限于在职Web程序员之间。 用jq的前提,首先要引用一个有jq的文件 [removed][removed] 这个是jquery官方最新的地址。可用在自己网站...

    从零开始学习JQuery

    从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) ...

    jQuery学习资料

    从零开始学习jQuery (二) 万能的选择器 9 一.摘要 9 二.前言 9 三.Dom对象和jQuery包装集 9 四. 什么是jQuery选择器 11 五.jQuery选择器全解 13 六 jQuery选择器实验室 19 七.API文档 20 八.总结 20 从零开始学习...

    Jquery学习手册

    jquery学习笔记,很全面的介绍jquery的用法。 存在的html片段)包装成jQuery对象。 $()方法里面支持的语法又包括3大类,分别是表达式(包括类表达式.,id表达式#,元素表达式等)、符号(包括后代符号space,next符号+...

    jQuery权威指南-配套源代码

    其次详细讲解了 jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在 jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例...

    ExtJS4中文教程2 开发笔记 chm

    8个超棒的学习jQuery的网站 JQuery 1.5 getJSON 的使用 JQuery AJAX提交中文乱码的解决方案 Jquery css函数用法 JQuery中getJSON的使用方法 Jquery中显示隐藏的实现代码分析 JQuery全选功能的实现 JQuery特效——...

    jQuery详细教程

    提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。 文档就绪函数 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready ...

    jQuery权威指南 带书签

    其次详细讲解了 jquery的各种选择器、jquery操作dom的方法、jquery中的事件与应用、jquery中的动画和特效、ajax在jquery中的应用,以及各种常用的jquery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...

    jquery权威指南高清文字版

    其次详细讲解了 jquery的各种选择器、jquery操作dom的方法、jquery中的事件与应用、jquery中的动画和特效、ajax在jquery中的应用,以及各种常用的jquery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...

    jQuery权威指南

    其次详细讲解了jquery的各种选择器、jquery操作dom的方法、jquery中的事件与应用、jquery中的动画和特效、ajax在jquery中的应用,以及各种常用的jquery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...

    JQUERY权威指南.zip.001

    其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在 jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...

    JQuery权威指南电子书第一部分

    其次详细讲解了jquery的各种选择器、jquery操作dom的方法、jquery中的事件与应用、jquery中的动画和特效、ajax在jquery中的应用,以及各种常用的jquery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...

    jQuery权威指南366页完整版pdf和源码打包

    10.2 处理选择器中的不规范元素标志 10.2.1 选择器中含有特殊符号 10.2.2 选择器中含有空格符号 10.3 优化事件中的冒泡现象 10.4 使用data()方法缓存数据 10.5 解决jquery库与其他库的冲突 ...

    JQUERY权威指南

    其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在 jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...

    column-selector:jQuery 列选择器

    此外,它还向名为nthCol的 jQuery 函数命名空间添加了一种新方法(使用哪种方法取决于您的用例,请参阅常见问题部分了解详细信息。)选择器和扩展函数都提供相同的功能并接受相同的参数。 可以使用以下参数: 甚至...

    jQuery基础教程(第四版)

    第2章讲述如何通过jQuery中的选择符表达式及DOM遍历方法,在页面中的任何地方找到想要的元素。这一章将展示如何使用各种选择符表达式为页面中的不同元素添加样式,其中一些是通过纯CSS方式做不到的。 第3章介绍如何...

    jQuery基础教程(第四版)

    本书前6章以通俗易懂的方式讲解了jQuery的核心组件,包括jQuery的选择符、事件、动画、DOM操作、Ajax支持等。第7章和第8章介绍了jQuery UI、jQuery Mobile及利用jQuery强大的扩展能力开发自定义插件。随后的几章更加...

Global site tag (gtag.js) - Google Analytics