1. 事件：绑定bind和解绑unbind：

     $('选择器').bind('事件',function(){
         //  操作
     ​
     })
     ​
     $('选择器').unbind('事件')
     ​
     $('选择器').click(function(){
         //  操作
     ​
     })
     ​mouseenter  鼠标进入
     mouseleave  鼠标离开
     ​
     hover  =   mouseenter  + mouseleave

each 循环

 $('选择器').each(function(index,dom){
     $(this)  //  循环出来的每个jq对象
     //  index 索引   dom dom对象
 })
 ​

文档加载

 window.onload = function () { 
     // 文档 图片 视频 音频 都加载完 执行一次  写多次会覆盖前面的
 ​
 }
 ​
 $(window).ready(function () {   
     // 文档 图片 视频 音频 都加载完 执行一次  能写多次
 ​
 })
 ​
 $(document).ready(function () {   
     // 文档 加载完 执行一次  能写多次
 ​
 })
 ​
 $(function () {  
     // 文档 加载完 执行一次  能写多次
     
 })

事件冒泡

儿子父亲都绑定事件,触发儿子的事件,会一层层往上冒泡触发父辈的事件执行.

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .fa {
            width: 200px;
            height: 200px;
            background-color: #77acff;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: #ffbea8;
        }
    </style>
</head>
<body>
<div class="fa">
    <div class="son"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    $('.son').click(function (e) {
        alert('你是我儿子')
        // return false  // 阻止事件冒泡
        e.stopPropagation()   // 阻止事件冒泡
    })
    $('.fa').click(function () {
        alert('我是你爸爸')
    })
</script>
</body>
</html>

事件委托

利用了事件冒泡的原理,将事件委托给父亲,儿子触发事件时,执行父亲的事件.

  // 事件委托
 $('tbody').on('click','button',function () {
         $(this).parents('tr').remove()
 })

bootstrap

https://v3.bootcss.com/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--拽入bootstrap.min.css文件：-->
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <!--定义样式：-->
    <style>
        .row div{
            background-color: #77acff;
            height: 20px;
            /*加边框并固定：*/
            border: solid 1px #000000;
        }
        .son {
            background-color: #fff65b;
            height: 20px;
            z-index: 100;
        }
    </style>
</head>
<body>

<!--定义容器：-->
<div class="container-fluid">
    <!--定义行：-->
    <div class="row">
        <!--把9推3个：-->
        <div class="col-lg-9 col-lg-push-3">col-lg-9</div>
        <!--把3拉9个：-->
        <div class="col-lg-3 col-lg-pull-9">col-lg-3</div>
    </div>
    <!--定义行：-->
    <div class="row">
        <!--定义屏幕大小：-->
        <div class="col-lg-3"></div>
    </div>
    <div class="row">
          <div class="col-md-1">姓名</div>
          <div class="col-md-1">性别</div>
          <div class="col-md-1">年龄</div>
          <div class="col-md-1">爱好</div>
          <div class="col-md-1">身份证号</div>
          <div class="col-md-1">家乡</div>
          <div class="col-md-1">学历</div>
          <div class="col-md-1">婚否</div>
          <div class="col-md-1">工作</div>
          <div class="col-md-1">职业</div>
          <div class="col-md-1">地狱</div>
          <div class="col-md-1">交通工具</div>
    </div>
    <div class="row">
          <div class="col-md-8">张三</div>
          <div class="col-md-4">李四</div>
    </div>
    <div class="row">
          <div class="col-md-4">王五</div>
          <div class="col-md-4">赵六</div>
          <div class="col-md-4">王麻子</div>
    </div>
    <div class="row">
          <div class="col-md-6">男</div>
          <div class="col-md-6">女</div>
    </div>
</div>
</body>
</html>
效果如下：

按钮

表格

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--拽入bootstrap.min.css文件：-->
    <!--<link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">-->
    <!--定义样式：-->
    <style>
        .row div{
            background-color: #77acff;
            height: 20px;
            /*加边框并固定：*/
            border: solid 1px #000000;
        }
        .son {
            background-color: #fff65b;
            height: 20px;
            z-index: 100;
        }
    </style>
</head>
<body>

<!--定义容器：-->
<div class="container-fluid">
    <!--定义标题标签：-->
    <h1>h1. Bootstrap heading</h1>
    <h2>h2. Bootstrap heading</h2>
    <h3>h3. Bootstrap heading</h3>
    <h4>h4. Bootstrap heading</h4>
    <h5>h5. Bootstrap heading</h5>
    <h6>h6. Bootstrap heading</h6>
    <!--定义p标签：-->
    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
    <!--定义内联列表：-->
    <ul class="list-inline">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <!--定义行：-->
    <div class="row">
        <!--把9推3个：-->
        <div class="col-lg-9 col-lg-push-3">col-lg-9</div>
        <!--把3拉9个：-->
        <div class="col-lg-3 col-lg-pull-9">col-lg-3</div>
    </div>
    <!--定义行：-->
    <div class="row">
        <!--定义屏幕大小：-->
        <div class="col-lg-3"></div>
    </div>
    <div class="row">
          <div class="col-md-1">姓名</div>
          <div class="col-md-1">性别</div>
          <div class="col-md-1">年龄</div>
          <div class="col-md-1">爱好</div>
          <div class="col-md-1">身份证号</div>
          <div class="col-md-1">家乡</div>
          <div class="col-md-1">学历</div>
          <div class="col-md-1">婚否</div>
          <div class="col-md-1">工作</div>
          <div class="col-md-1">职业</div>
          <div class="col-md-1">地狱</div>
          <div class="col-md-1">交通工具</div>
    </div>
    <div class="row">
          <div class="col-md-8">张三</div>
          <div class="col-md-4">李四</div>
    </div>
    <div class="row">
          <div class="col-md-4">王五</div>
          <div class="col-md-4">赵六</div>
          <div class="col-md-4">王麻子</div>
    </div>
    <div class="row">
          <div class="col-md-6">男</div>
          <div class="col-md-6">女</div>
    </div>
</div>
</body>
</html>

模态框

分页

面板

导航

图标

http://www.fontawesome.com.cn/faicons/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入jquery文件：-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <!--导入bootstrap.js文件：-->
    <script src="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <!--导入bootstrap：-->
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <!--导入font-awesome：-->
    <link rel="stylesheet" href="../day42django框架/font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>
<!--定义标签页：-->
<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>
<!--定义导航条：-->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<!--定义路径导航：-->
<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>
<!--定义分页功能：-->
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
<!--<button id="b1">新增</button>-->
<!--增加新增按钮：-->
<!--<button id="b1" class="btn">新增</button>-->
<!--新增按钮增加白色：-->
<!--<button id="b1" class="btn btn-default">新增</button>-->
<!--增加深蓝色：-->
<!--<button id="b1" class="btn btn-info">新增</button>-->
<!--增加深蓝色：-->
<!--<button id="b1" class="btn btn-primary">新增</button>-->
<!--增加绿色：-->
<!--<button id="b1" class="btn btn-success">新增</button>-->
<!--增加橘黄色：-->
<!--<button id="b1" class="btn btn-warning">新增</button>-->
<!--增加红色：-->
<!--<button id="b1" class="btn btn-danger">新增</button>-->
<!--变大：-->
<!--<button id="b1" class="btn btn-danger btn-lg">新增</button>-->
<!--稍微大：-->
<!--<button id="b1" class="btn btn-danger btn-sm">新增</button>-->
<!--超小：-->
<button id="b1" class="btn btn-danger btn-xs">新增</button>
<!--定义a标签：-->
<!--<a href="">添加</a>-->
<!--定义a标签和按钮组合：-->
<!--<a href="" class="btn btn-danger btn-lg">添加</a>-->
<!--a标签加禁用状态：-->
<a href="" class="btn btn-success btn-sm" disabled="disabled">添加</a>
<button id="a">全选</button>
<!--<button id="all">全选</button>-->
<!--<button id="cancel">取消</button>-->
<button id="reverse">反选</button>
<!--定义图标span标签齿轮：-->
<span class="glyphicon glyphicon-asterisk"></span>
<!--定义i标签增加图标：-->
<i class="fa fa-bank"></i>
<!--增加火箭标签：-->
<i class="fa fa-rocket" aria-hidden="true"></i>
<!--增加span标签类型、大小、颜色：-->
<span style="font-size: 20px;color:red">
    <!--增加倍数大：-->
    <i class="fa fa-rocket fa-5x"></i>
</span>
<!--定义旋转：-->
<i class="fa fa-rocket fa-spin"></i>
<!--定义组合图标：-->
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
<!--定义下拉菜单：-->
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
<!--定义表格及全局样式：-->
<!--<table class="table">-->
<!--定义条纹表格：-->
<!--<table class="table table-striped">-->
<!--定义带边框的表格：-->
<!--<table class="table table-bordered">-->
<!--定义鼠标悬停：-->
<!--<table class="table table-bordered table-hover">-->
<!--定义间距紧凑：-->
<table class="table table-bordered table-hover table-condensed">
    <thead>
    <!--定义浅色：-->
    <tr class="active">
        <th>选择</th>
        <th>序号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <!--定义深色：-->
    <tr class="info">
        <td><input type="checkbox"></td>
        <td>1</td>
        <td>宝元</td>
        <td>不详</td>
        <td>钻</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
    <!--定义浅黄色：-->
    <tr class="warning">
        <td><input type="checkbox"></td>
        <td>1</td>
        <td>宝元</td>
        <td>不详</td>
        <td>钻</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
    <!--定义绿色：-->
    <tr class="success">
        <td><input type="checkbox"></td>
        <td>1</td>
        <td>宝元</td>
        <td>不详</td>
        <td>钻</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
    <!--定义粉红色：-->
    <tr class="danger">
        <td><input type="checkbox"></td>
        <td>1</td>
        <td>宝元</td>
        <td>不详</td>
        <td>钻</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2</td>
        <td>和尚</td>
        <td>男</td>
        <td>合气道</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
    </tbody>
</table>
<!--定义form表单：-->
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
    <!--定义行居中：-->
    <div class="col-lg-6 col-lg-offset-3">
    <!--定义堆一行：-->
    <!--<div class="col-lg-offset-3">-->
        <!--定义堆一行：-->
        <form class="form-inline">
        <!--<form>-->
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
              <!--定义顺序的：-->
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
              <!--定义单独行：-->
            <!--<input type="email" class="" id="exampleInputEmail1" placeholder="Email">-->
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <div class="form-group">
            <label for="exampleInputFile">File input</label>
            <input type="file" id="exampleInputFile">
            <p class="help-block">Example block-level help text here.</p>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox"> Check me out
            </label>
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
    </form>
    </div>
<!--定义水平排列：-->
<form class="form-horizontal">
    <!--has-success定义正常状态变绿：-->
  <!--<div class="form-group has-success">-->
    <!--加错误提示样式has-error：-->
  <div class="form-group has-error">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
        <!--#定义错误提示：-->
        <span class="help-block">A block of help text that breaks d one line.</span>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
        <!--disabled禁用：-->
      <input disabled type="password" class="form-control" id="inputPassword3" placeholder="Password">
        <!--readonly只读：-->
      <input readonly type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
      <div class="form-group">
    <label for="s1" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
        <select name="" id="s1" class="form-control">
            <option value="1">男</option>
            <option value="2">女</option>
        </select>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>
</body>
</html>

jquery和bootstrap：的更多相关文章

  1. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  2. Bootstrap-基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  3. Jquery的bootstrap在线文本编辑器插件Summernote

    http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...

  4. asp.netajax与jquery和bootstrap的无刷新完美实现

    20190421asp.netajax与jquery和bootstrap的无刷新完美实现 设计代码和后台代码中重要部分加粗和深色以及字号加大. 设计前台代码: <%@ Page Title=&q ...

  5. 标签页（tab）切换的原生js,jquery和bootstrap实现

    概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...

  6. vue框架(三)_vue引入jquery、bootstrap

    一.vue安装jquery 1.按照之前博客的内容,新建一个vue工程. 2.在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 3.在build/ ...

  7. Sublime text代码补全插件(支持Javascript、JQuery、Bootstrap框架)

    Sublime text代码补全插件(支持Javascript.JQuery.Bootstrap框架)   插件名称:javascript-API-Completions 支持Javascript.J ...

  8. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

  9. vue引入jQuery、bootstrap

    vue引入jQuery.bootstrap 1.使用vue-cli构建的vue项目 2.npm安装jquery.bootstrap npm install jquery 3.修改build/webpa ...

  10. 基于jquery的bootstrap在线文本编辑器插件Summernote （转）

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

随机推荐

  1. 删除Word中出现的空白页

    删除Word中出现的空白页 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ Word中出现空白页,怎么删都删不掉,Backspace与Delete键不管 ...

  2. 手工挖掘web常见漏洞时的一些经验总结

    一.前提: 漏洞挖掘原则 所有变量 所有头 cookie中的变量 逐个变量删除 漏洞的本质 数据与指令的混淆 对用户输入信息过滤不严判断失误,误将数据当指令 二.经典漏洞: 1.身份认证 常用弱口令/ ...

  3. MVC(基础二)

    原文链接:https://blog.csdn.net/wuzxc520/article/details/77880783 1.网站开发介绍 2.响应流程 3.MVC 介绍 4.文件夹含义

  4. R-2 - 正态分布-中心极限-置信区间-正态假设检验

    本节内容 1:样本估计总体均值跟标准差,以及标准误 2:中心极限定理 3:如何查看数据是否是正态分布QQ图 4:置信区间的理解跟案例 5:假设检验 参考文章: 假设检验的学习和理解 一.样本估计总体均 ...

  5. 201871010101-陈来弟《面向对象程序设计（java）》第一周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...

  6. Re-DD-androideasy

    题目地址 https://dn.jarvisoj.com/challengefiles/DDCTF-Easy.apk.64812266499cc050ac23e190e53b87f7 用JEB打开 返 ...

  7. day88_11_8，事务的隔离级别celery定时订单与项目整合。

    一.事务的隔离级别. mysql的默认数据库级别是可重复读,一般的应用使用的是读已提交 http://www.zsythink.net/archives/1233/ 1. Read UnCommitt ...

  8. LeetCode 5365. 可被三整除的最大和 Greatest Sum Divisible by Three

    地址 https://www.acwing.com/solution/leetcode/content/6340/ 题目描述给你一个整数数组 nums,请你找出并返回能被三整除的元素最大和. 示例 : ...

  9. python第三次作业-mooc笔记

    1.注册中国大学MOOC 2.选择北京理工大学嵩天老师的<Python网络爬虫与信息提取>MOOC课程3.学习完成第0周至第4周的课程内容,并完成各周作业 4.提供图片或网站显示的学习进度 ...

  10. docker搭建zookeeper集群

    1.在官网拉取镜像 docker pull zookeeper 2.根据镜像启动zookeeper容器 docker run -itd --name zookeeper1 -h zookeeper1 ...