• 学习 jQuery 4 使用方法选择


      使用方法来取得元素

    使用方法可以取得更强大的功能,首先我们看 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>

  • 相关阅读:
    解析3D打印切片软件:Cura
    步步为营,打造CQUI UI框架
    PHP为什么empty可以访问不存在的索引
    这是一篇关于魔法(Science)上网的教程
    【新阁教育】这样玩PLC,是不是有意思多了
    「新阁教育」西门子TIA实现BadApple完整实例
    C#数据结构-赫夫曼树
    C#数据结构-线索化二叉树
    SQL优化器-RBO与CBO分别是什么
    Linux下安装并配置VSCode(Visual Studio Code)
  • 原文地址:https://www.cnblogs.com/haogj/p/1233546.html
Copyright © 2020-2023  润新知