javaweb正则表达式 /\w/ : 查看是否含有字符 js中获取dom对象的方法 1.getELementTagNa

正则表达式

/\w/ : 查看是否含有字符

js中获取dom对象的方法 1.getELementTagName 获取指定标签下的孩子节点

创建子元素节点

var newOnj= document.createElement("tagName") 父节点.appendChild(newObj)

jQuery

使用jQuery $().ready(function(){}) 简写为$ (function(){})

过滤选择器

id选择器

even：选择奇数的
odd：选择偶数的
gt（mid）：选择大于mid
eq(mid):选择等于mid
lt(mid):选择小于mid的

插入元素

1.appendTo,prependTo a.appendTo(b)，把a插到b的末尾 a.pretendTo(b),把a插到a的前面

2.insertAfter,insertbefore 外部插入元素，成为父元素的子元素 a.insertAfter(b) a.insertbefore(b)

3.replaceAll,replaceWith

4.empty,remove empty:清除标签内的所有对象

复选框案例

Document

你喜欢哪些运动哇？全选/全不选

篮球排球乒乓球足球羽毛球

全选全不选反选

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <!-- 导入jQuery.js -->
  <script src="jQuery.js"></script>
  <script>
    $(function () {
      //判断name=items复选框是否全选
      var flag =
        $(":checkbox[name='items']:checked").length ==
        $(":checkbox[name='items']").length;
      //获取全选复选框的checked状态，遍历name=items复选框，使name=items的复选框的状态为全选复选框的状态
      $("#allcheckbox").click(function () {
        $(":checkbox[name='items']").prop("checked", this.checked);
      });
      //获取全选按钮，
      //使name=items的复选框的状态为全选复选框的状态
      //让全选复选框checked状态为true
      $("#allcheckBox").click(function () {
        $(":checkbox[name='items']").prop("checked", true);
        flag =
          $(":checkbox[name='items']:checked").length ==
          $(":checkbox[name='items']").length;
        $("#allcheckbox").prop("checked", flag);
      });
      //获得反选复选框的选中状态，
      //遍历name=items复选框，
      //检查此时的全选复选框
      $("#revcheck").click(function () {
        $(":checkbox[name='items']").each(function () {
          console.log(this);
          this.checked = !this.checked;
          flag =
            $(":checkbox[name='items']:checked").length ==
            $(":checkbox[name='items']").length;
          $("#allcheckbox").prop("checked", flag);
        });
      });
      //获得全不选复选框
      //遍历name=items复选框，将其复选框checked状态改为false
      $("#nonecheck").click(function () {
        $(":checkbox[name=items]").prop("checked", false);
        $("#allcheckbox").prop("checked", false);
      });

      $("#allcheckbox").prop("checked", flag);
      $("#submit").click(function () {
        $(":checkbox[name='items']:checked").each(function () {
          alert(this.value);
        });
        return false;
      });
    });
  </script>
  <body>
    <div>
      <span>你喜欢哪些运动哇？</span
      ><input type="checkbox" id="allcheckbox" />全选/全不选
    </div>
    <div>
      <input type="checkbox" name="items" id="1" value="篮球" />篮球<input
        type="checkbox"
        name="items"
        id="2"
      />排球<input type="checkbox" name="items" id="3" />乒乓球<input
        type="checkbox"
        name="items"
        id="4"
      />足球<input type="checkbox" name="items" id="5" />羽毛球
    </div>
    <div>
      <input type="button" id="allcheckBox" />全选
      <input type="button" id="nonecheck" />全不选
      <input type="button" id="revcheck" />反选
      <input type="submit" id="submit" />
    </div>
  </body>
</html>

动态信息添加案例

Document table{ margin: auto; }

name	webplace	操作
java	http:www.baidu.com	delete

name
webplace

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
<style>
  table{
    margin: auto;
    
  }
 
</style>

  <script src="jQuery.js"></script>
  <script>
    $(function () {
      //删除信息条
      function deleteFun(e){
        //获取点击的a的父亲的父亲
      var $trobj = $(e).parent().parent();
      //获取a的父亲的父亲的id值
      var id = $trobj.id; 
      //删除操作
        if(confirm("你确定要删除id为{"+id+"}的吗"))
        //移除a的父亲的父亲节点
        $trobj.remove();
        }
        //
      var num = 0;
      $("a").click(function(){
        var $trobj = $(this).parent().parent();
        var name = $trobj.find("td:first").text(); 
        if(confirm("你确定要删除name为{"+name+"}的吗"))
          $trobj.empty();
      })
      //添加信息条
      $("#submit").click(function(){
        var name = $("#name").val();
      var webplace = $("#webplace").val();
        num++;
        var obj = $("<tr>"+
        "<td>" + name +"</td>"+
        "<td>"+ webplace +"</td>"+
        "<td><a href='#' id=" +num +">delete</td>"+
     " </tr>")
       obj.appendTo($("table"))
       var $trobj = $(this).parent().parent();
       $trobj.find("a").click(function(){deleteFun(this)})
       //阻止默认事件
        return false;
      })
      //点击触发删除信息条
      $("a").click(function(){deleteFun(this)})
    });
  </script>
  <body>
    <table>
      <tr>
        <th>name</th>
        <th>webplace</th>
        <th>操作</th>
      </tr>
      <tr>
        <td>java</td>
        <td>http:www.baidu.com</td>
        <td><a href="#" id="0">delete</a></td>
      </tr>
    </table>
    <form action="">
      name<input type="text" id="name" /></br>
      webplace<input type="text" id="webplace" /><br>
      <input type="button" value="提交" id="submit" />
    </form>
  </body>
</html>