jQuery基本的DOM操作

在示例中使用了jQuery的Dom基本操作html。jQuery表单操作，jQuery操作CSS
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Jquery - Dom</title>
</head>
<body>
    <script src="js/jquery-3.5.1.js"></script>
    <script>      
      $("body").append("<p>jQuery-DOM基础</p>");
      //jQuery 页面中添加<P>标签
      $("p").after("<hr>");
      //添加一个hr标签
      $("hr").after("<ul>");
      //添加UL
      var lis = "";
      //定义一个空值存放li
      $("ul").append(function(item){
          for(var i = 1; i < 5; i++)
          {
              lis += "<li>item"+ i +"</li>";
          }
          return lis;
      });
      //使用循环添加li标签
      $("ul li").eq(0).attr("id","test");
      //为UL中的第一个li添加一个id
      $("<li>我是用appendto添加的</li>").appendTo("ul");
      //在ul>li中添加新标签
      $("ul").prepend("<li>我是用prepend添加的</li>");
      $("<li>我是用prependTo添加的</li>").prependTo("ul");
      $("#test").css("color","blue"); 
      $("#test").html("我是被更改的text");
      $("ul li").eq(2).addClass("test");
      $("ul li").eq(2).css({
          "color":"white",
          "background":"green",
        }
      );      
      $("ul").after("<hr>");
      $("hr").after("<span>");
      $("span").eq(1).html("jQuery-form");
      $("span").eq(1).after("<p>");
      $("p:nth-of-type(2)").after("<form>");
      $("form").attr("id","form");
      $("form").attr("class","form");
      $("form").attr("method","get");
      $("<label>").appendTo("form");
      $("label").html("用户：");
      $("<input>").appendTo("form");
      $("input").attr("id","user");
      $("input").attr("type","text");    
      $("input").css({
          "width":"130px",
          "height": "25px",
          "font-size":"14px",
          "margin-bottom": "10px",
      });
      $("input").after("<br>");
      $("br").after("<label>");
      $("label:nth-of-type(2)").html("密码：");
      $("label:nth-of-type(2)").after("<input>");
      $("input").css({
          "width":"130px",
          "height": "25px",
          "font-size":"14px",
          "margin-bottom": "10px",
      });
      $("input").eq(1).attr("type","password");
      $("input").eq(1).after("<br>");
      $("br").eq(1).after("<label>");     
      $("label:nth-of-type(3)").html("存储：");
      $("label:nth-of-type(3)").after("<input>");
      $("input").eq(2).attr("type","radio");
      $("input").eq(2).after("<span>");
      $("span").eq(2).html("保存");
      $("span").eq(2).after("<input>");
      $("input").eq(3).attr("type","radio");
      $("input").eq(3).attr("checked",true);
      $("input").eq(3).after("<span>");
      $("span").eq(3).html("不保存");
      $("span").eq(3).after("<br>");
      $("br").eq(2).after("<button>")
      $("button").html("提交");
      $("button").css({
        "background-color": "#4CAF50",
        "border": "1px solid green",
        "color": "white",
        "padding": "5px 24px",
        "cursor": "pointer", 
        "float": "left", 
        "margin-top": "10px",
      });
      $("button").after("<button>");
      $("button").eq(1).html("重置");
      $("button").eq(1).css({
        "background-color": "#4CAF50",
        "border": "1px solid green",
        "color": "white",
        "padding": "5px 24px",
        "cursor": "pointer", 
        "float": "left", 
        "margin-top": "10px",
        "margin-left":"10px",
      });
      $("button").eq(1).after("<br>");
      $("br").eq(3).after("<div>");
      $("div").attr("id","box");
      $("button").eq(0).click(function(ev) {
          ev.preventDefault();
        var user = $("#user").val();       
        var tips = "";
        var users = ["admin","ynllww","dhhaha"];
        if(user.length === 0)
        {
            tips = "用户名不能为空";
        }else if(users.indexOf(user)=== -1 )
        {
            tips = '用户名不存在' + '<button type="button">请注册</button>';
        }else
        {
            tips = '<i style="color:green">用户名正确<i>';
        }       
        if($("#user").next().get(0).tagName !== "SPAN"){
        $("#user").after("<span>");
        $('span').eq(2).html(tips).css('color','red').insertAfter(user);
        }
       }); 
      $("button").eq(1).click(function(ev){
        $("#user").val("");
        $("#password").val("");          
     });
     $("input").eq(2).click(function()
     {
         $("input").eq(2).prop("checked",true);
         $("input").eq(3).prop("checked",false);
        // prop() 方法设置或返回被选元素的属性和值
     });
     $("input").eq(3).click(function()
     {
         $("input").eq(2).prop("checked",false);
         $("input").eq(3).prop("checked",true);
     });  
    </script>
</body>
</html>
示例图
总结：对于基础的掌握，借助手册和度娘，勉强写完。还需要多写多看
JQ基本的DOM操作

jQuery基本的DOM操作

相关文章
