zoukankan      html  css  js  c++  java
  • 练习jQuery

    1.创建节点并添加到页面$("ul").append("$li_1").append("$li_2")

     1 <!doctype html>
     2 <html lang="en">
     3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     4 <meta charset="UTF-8">
     5 <head>
     6  <link href="css/animate.css" rel="stylesheet">
     7   <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
     8  <style>
     9  </style>
    10 </head>
    11 <body>
    12 <p title="请选择你最喜欢的水果">你喜欢的水果是?</p>
    13 <ul>
    14 <li title="苹果">苹果</li>
    15 <li title="橘子">橘子</li>
    16 <li title="菠萝">菠萝</li>
    17 </ul>
    18 
    19 <script type="text/javascript">
    20 
    21 var $li_1=$("<li>凤梨</li>");
    22 var $li_2=$("<li>奇异果</li>");
    23 $("ul").append($li_2).append($li_1)
    24 </script>
    25 </body>
    26 </html>

    2.获取属性元素var $a=$("p").attr("title"); alert("$a")

    注:这里既可以用jQuery对象,也可以用dom对象,嘻嘻,虽然我也不知道两者最大的区别在哪,因为我刚开始用。

    <script type="text/javascript">
      var $para=$("p")
      var p_txt=$para.attr("title")
      alert(p_txt)
    
    </script>

    3.设置节点属性$("p").attr("name":"名称","title":"你的名称是");

    <script type="text/javascript">
      $("p").attr({"title":"your","name":"test"})
      </script>

    4.移动节点

    <script type="text/javascript">
    //移动第2个LI到最后
    $("ul li:eq(1)").appendTo("ul")
    
    </script>

    5.删除节点后,还可添加该节点

    $(function () {
    //删除节点
    var $li=$("ul li:eq(1)").remove();
    $("ul").append("$li");//$("ul").append("$li");这里添加的内容是“”里面的文字即文本节点,而非变量值
    $("ul").append($li);//($li)指的是添加的jQuery对象
    })

    结果如下

    6.删除带参数的节点

    <script type="text/javascript">
    //删除title为非菠萝的节点
    $("ul li[title!=菠萝]").remove();
    //$("ul li").remove("li[title!='菠萝']");
    //注意:菠萝不加引号,或者加单引号
    //注意:remove()括号里面加引号
    </script>

    7.复制节点clone()$("li").clone().apeendTo("ul")

    <script type="text/javascript">
     $(function(){
          $("ul li").click(function () {
             $(this).clone(true).appendTo("ul");
         })
    
     })
    
    </script>

    8.detach删除节点后,再添加到页面里,其绑定事件还在

    <script type="text/javascript">
    $(function(){
    
         $("ul li").click(function () {
             alert($(this).html());
         })
    
        var $li=$("ul li:eq(1)").detach();
        $("ul").append($li);
    })
    
    
    </script>
  • 相关阅读:
    mysql 5.6
    mysql5.7 二进制包安装
    centos 6 编译安装httpd-2.4
    mysql 5.5源码包安装
    BZOJ4945 & 洛谷3825 & UOJ317:[NOI2017]游戏——题解
    BZOJ4943 & 洛谷3823 & UOJ315:[NOI2017]蚯蚓排队——题解
    BZOJ3435 & 洛谷3920 & UOJ55:[WC2014]紫荆花之恋
    BZOJ5343 & 洛谷4602 & LOJ2555:[CTSC2018]混合果汁——题解
    真·APIO2018滚粗记
    BZOJ4518:[SDOI2016]征途——题解
  • 原文地址:https://www.cnblogs.com/qfly/p/4729404.html
Copyright © 2011-2022 走看看