jQuery

Posted 孟庆健

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery相关的知识，希望对你有一定的参考价值。

一、jQuery

jQuery的基础语法：$(selector).action()  

 

语法规则：$("xxx")

 

 参考：http://jquery.cuishifeng.cn/

二、选择器

1、基本选择器

- ID选择器                   $("#id的值")
- 类选择器（class）          $(".class的值")
- 标签选择器(html标签)       $("标签的名字")
- 所有标签                   $("*")
 
- 组合选择器              $("xx,xxx")
2、层级选择器
- 从一个标签的子子孙孙去找   $("父亲  子子孙孙")
- 从一个标签的儿子里面找     $("父亲>儿子标签")
- 找紧挨着的标签             $("标签+下面紧挨着的那个标签")
- 找后面所有同级的           $(".outer~div")

3、筛选器
   - 写在引号里面的
   
      $(" :first") 
      $(" :not(‘‘)")
      $(" :even")
      $(" :odd")
      $(" :eq")
      $(" :gt")
      $(" :last")
      $(" :focus")
内容
$(" :contains")
$(" :empty")
$(" :has(‘‘)")
$(" :parent")  *****   区别于$("").parent()

可见性
$(" :hidden)
$(" :visible")

属性
input[name]  --> 有name属性的input
input[type=‘password‘]  --> 类型是password的input标签

表单
:input
:password
:checkbox
:radio
:submit
:button
:image
:file

表单对象属性
:enable
:disable
:checked
:selected
- 写在信号外面当方法用的

  过滤
   $("").first()
   $("").parent()
   $("").eq()
   .hasClass()
   
  查找
   .children()
   .find()
   .next()
   .nextAll()
   .nextUntil()
   
   .parent()
   .parents()
   .parentsUntil()
   
   .prev()
   .prevAll()
   .prevUntil()
   
   .siblings()
4、插找筛选器
 查找子标签：         $("div").children(".test")      $("div").find(".test")  
                               
 向下查找兄弟标签：    $(".test").next()               $(".test").nextAll()     
                    $(".test").nextUntil() 
                           
 向上查找兄弟标签：    $("div").prev()                  $("div").prevAll()       
                    $("div").prevUntil()   
 查找所有兄弟标签：    $("div").siblings()  
              
 查找父标签：         $(".test").parent()              $(".test").parents()     
                    $(".test").parentUntil()
技术分享 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例一</title>
    <style>
        .c99 {
            color: red;
        }
        .c11 {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            border: 1px solid #cccccc;
            display: inline-block;
        }

        .c12 {
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="i1">哪吒</div>
<div id="i2">
    <div id="i0"></div>
    <div id="i3">i3</div>
    <div id="i4">i4</div>
    <div class="c1">.c1</div>
    <p>pppppp</p>
    <h2>稳住，我们能学会。</h2>
    <h2>猥琐发育，别浪。</h2>
    <div class="c1">.c1</div>
    <div class="c2">.c2</div>

    <div>
        <div></div>
        <div><input type="text" value="222"></div>
        <div></div>
    </div>
    <div id="i7">
        <input type="text" value="这是第0个input">
        <input class="c1" type="text" value="这是第1个input">
        <div>
            <p></p>
            <input type="text" value="aaa"></div>
        <input  name="aaa" class="c2" type="text" value="这是第2个input">
        <input type="password" value="这是第3个input">
        <div id="i8" style="display: none"><p>div下pppppp</p></div>
    </div>
    <div></div>
    <input type="checkbox" value="1" checked>
    <input type="checkbox" value="11">
    <input type="checkbox" value="111">
    <input type="checkbox" value="1111">
    <input type="checkbox" value="1111" disabled>
    <input type="radio" value="0">
</div>

<div id="i9">
    <div>111</div>
    <div id="i99">222</div>
    <div>333</div>
    <div>444</div>
    <div id="i555">555</div>
</div>

<div class="c11"></div>

<button id="switch" class="btn btn-default">开关</button>
<script src="jquery-3.2.1.js"></script>
<script>
    // id选择器
    $("#i1")

//    $("#switch")[0].onclick = function () {
//        ....
//    }
//jQuery绑定事件

 $("#switch").on("click", function () {
        // 找灯泡
        $(".c11").toggleClass("c12");
    })
</script>
</body>
示列


技术分享



<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery选择器筛选器练习</title>
  <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
   <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">

</head>
<body>
<!--导航栏开始-->
<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="#">哪吒</a></li>
            <li><a id="i1" href="#">Egon</a></li>
            <li><a class="c1" href="#">日天</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Alex</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<!--导航栏结束-->


<div class="container">

  <div class="jumbotron">
    <div id="j1" class="container">
      <h1 class="c1">学厨师，去新东方。</h1>
      <h1 class="c1">学Python，就来老男孩。</h1>
      <p id="p1"><a class="btn btn-primary btn-lg" href="#" role="button">查看更多</a></p></div>
  </div>
  <hr>
  <div class="row">
    <div class="col-md-12">
      <table class="table table-bordered table-striped">
        <thead>
        <tr>
          <th>#</th>
          <th>姓名</th>
          <th>爱好</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <th>1</th>
          <td>Egon</td>
          <td>杠娘</td>
          <td>
            <button class="btn btn-warning">编辑</button>
            <button class="btn btn-danger">删除</button>
          </td>
        </tr>
        <tr>
          <th>2</th>
          <td>Yuan</td>
          <td>日天</td>
          <td>
            <button class="btn btn-warning">编辑</button>
            <button class="btn btn-danger">删除</button>
          </td>
        </tr>
        <tr id="tr3">
          <th>3</th>
          <td>八级哥</td>
          <td>英语</td>
          <td>
            <button class="btn btn-warning">编辑</button>
            <button class="btn btn-danger">删除</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>

  <hr>
  <div class="row">
    <div class="col-md-12">
      <form id="f1">
        <div class="form-group">
          <label for="exampleInputEmail1">邮箱</label>
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">密码</label>
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>
        <div class="form-group">
          <label for="exampleInputFile">上传头像</label>
          <input type="file" id="exampleInputFile">
          <p class="help-block">只支持img格式。</p>
        </div>
        <button id="btnSubmit" type="submit" class="btn btn-default">提交</button>
      </form>
    </div>
  </div>

  <hr>

  <div class="row">
    <div class="col-md-12">
      <div class="checkbox-wrapper">
        <div class="panel panel-info">
          <div class="panel-heading">jQuery学习指南</div>
          <div id="my-checkbox" class="panel-body">
            <div class="checkbox">
              <label>
                <input type="checkbox" value="0">
                jQuery一点都不难
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="1" checked>
                jQuery一学就会
              </label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="2">
                jQuery就要多练
              </label>
            </div>

            <div class="checkbox">
              <label>
                <input type="checkbox" value="3" disabled>
                jQuery学不好
              </label>
            </div>
          </div>
        </div>
      </div>
      <hr>
      <div class="radio-wrapper">

        <div class="panel panel-info">
          <div class="panel-heading">我来老男孩之后...</div>
          <div class="panel-body">
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                我要上课玩手机
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                我要上课好好听
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <hr>

  <div class="row">
    <div class="col-md-12">
      <h2>练习题：</h2>
      <ol id="o1">
        <li>找到本页面中id是<code>i1</code>的标签</li>
        <li>找到本页面中所有的<code>h2</code>标签</li>
        <li>找到本页面中所有的<code>input</code>标签</li>
        <li>找到本页面所有样式类中有<code>c1</code>的标签</li>
        <li>找到本页面所有样式类中有<code>btn-default</code>的标签</li>
        <li>找到本页面所有样式类中有<code>c1</code>的标签和所有<code>h2</code>标签</li>
        <li>找到本页面所有样式类中有<code>c1</code>的标签和id是<code>p3</code>的标签</li>
        <li>找到本页面所有样式类中有<code>c1</code>的标签和所有样式类中有<code>btn</code>的标签</li>
        <p id="p2" class="divider"></p>
        <li>找到本页面中<code>form</code>标签中的所有<code>input</code>标签</li>
        <li>找到本页面中<code>label</code>标签下的<code>input</code>标签</li>子标签
        <li>找到本页面中紧挨着<code>label</code>标签的<code>input</code>标签</li>
        <li>找到本页面中id为<code>p2</code>的标签后面所有和它同级的<code>li</code>标签</li>
        <p id="p3" class="divider"></p>
        <li>找到id值为<code>f1</code>的标签下面的第一个input标签</li>
        <li>找到id值为<code>my-checkbox</code>的标签下面最后一个input标签</li>
        <li>找到id值为<code>my-checkbox</code>的标签下面没有被选中的那个input标签</li>
        <li>找到所有含有<code>input</code>标签的<code>label</code>标签</li>
      </ol>
    </div>
  </div>

</div>

<script src="jquery3_0_0.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>



jQuery选择器筛选联系


三、属性


 


1. 属性
      
      如果你的选择器选出了多个对象，那么默认只会返回第一个的属性
      
         attr(name|pro|key,val|fn)
            - 一个参数 获取属性的值
            - 两个参数 设置属性的值
            - 点击加载图片
         removeAttr(name)
            - 删除属性的值
         
         prop(n|p|k,v|f)  属性的返回值是布尔类型
         removeProp(name)
            - 删除属性的值
            
         - 例子
            全选、反选、取消的例子


技术分享



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选反选取消</title>

    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                <button id="all" class="btn-btn-default">全选</button>
                <button id="cancel" class="btn-btn-default">取消</button>
                <button id="reverse" class="btn-btn-default">反选</button>
            </div>
            <div class="panel-body">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th scope="row"><input type="checkbox"></th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <th scope="row"><input type="checkbox"></th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <th scope="row"><input type="checkbox"></th>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
// 全选
$("#all").on("click", function () {
    // 统一的操作
$(":checkbox").prop("checked", true);
})

    //取消
    $("#cancel").on("click", function () {
        $(":checkbox").prop("checked", false);
    })


//    // 反选
    $("#reverse").on("click", function () {
        // 取出所有的checkbox
        var checkboxEles = $(":checkbox");
//         翔哥的耻辱
//        checkboxEles.prop("checked", !(checkboxEles.prop("checked")))
//         要循环checkbox
        // 选中的就取消
        // 没选中的就选中
        checkboxEles.each(function () {
            var thisCheckbox = $(this);  // 在教室里走的那个人
            var isChecked = thisCheckbox.prop("checked");  // 是否选中

//            方法一：判断的方式
            if (isChecked){
                // 取消选中
                thisCheckbox.prop("checked", false);
            }else {
                // 选中
                thisCheckbox.prop("checked", true);
            }

//            // 方法二：直接取反的方式
//            thisCheckbox.prop("checked", !isChecked);

        })
    })
//    $("#reverse").on("click", function () {
//        $(":checked").prop("checked", false);
//        $(":not(:checked)").prop("checked", true);
//    })

</script>

</body>
</html>



全选，反选，取消


            - 循环
            each
               - $.each(数组/对象, function(i, v){})
               
               - $("div").each(function(){})
               
   
      CSS 类
         addClass(class|fn)   addClass("has-error")
         removeClass([class|fn])  
         
         toggleClass(class|fn[,sw])  切换，有就去掉，没有就加上
         
         灯泡的例子
         
      
      HTML代码/文本/值
      
       没有参数就是获取对应的值
       有参数就是设置对应的值
       
       
         html([val|fn])
            加 html标签
            .html("<span>老师，我好饿。</span>")
         text([val|fn])
            加文本 
            .text("老师，我好饿。")
            
         val([val|fn|arr])
            - input
               - 获取的是输入的内容
               
            - checkbox
               - 获取的是value值
               
            - select
               - 单选 就是获取值
               - 多选 得到的是一个数组，设置的时候也要是数组
四、事件绑定


//语法:  标签对象.事件(函数)    
eg: $("p").click(function(){})
五、事件委派


$("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。


技术分享



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选反选取消</title>

    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                <button id="all" class="btn-btn-default">全选</button>
                <button id="cancel" class="btn-btn-default">取消</button>
                <button id="reverse" class="btn-btn-default">反选</button>
            </div>
            <div class="panel-body">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th scope="row"><input type="checkbox"></th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <th scope="row"><input type="checkbox"></th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <th scope="row"><input type="checkbox"></th>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
// 全选
$("#all").on("click", function () {
    // 统一的操作
$(":checkbox").prop("checked", true);
})

    //取消
    $("#cancel").on("click", function () {
        $(":checkbox").prop("checked", false);
    })


//    // 反选
    $("#reverse").on("click", function () {
        // 取出所有的checkbox
        var checkboxEles = $(":checkbox");
//         翔哥的耻辱
//        checkboxEles.prop("checked", !(checkboxEles.prop("checked")))
//         要循环checkbox
        // 选中的就取消
        // 没选中的就选中
        checkboxEles.each(function () {
            var thisCheckbox = $(this);  // 在教室里走的那个人
            var isChecked = thisCheckbox.prop("checked");  // 是否选中

//            方法一：判断的方式
            if (isChecked){
                // 取消选中
                thisCheckbox.prop("checked", false);
            }else {
                // 选中
                thisCheckbox.prop("checked", true);
            }

//            // 方法二：直接取反的方式
//            thisCheckbox.prop("checked", !isChecked);

        })
    })
//    $("#reverse").on("click", function () {
//        $(":checked").prop("checked", false);
//        $(":not(:checked)").prop("checked", true);
//    })

</script>

</body>
</html>



登录跳转




技术分享



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选反选取消</title>

    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                <button id="all" class="btn-btn-default">全选</button>
                <button id="cancel" class="btn-btn-default">取消</button>
                <button id="reverse" class="btn-btn-default">反选</button>
            </div>
            <div class="panel-body">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th scope="row"><input type="checkbox"></th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <th scope="row"><input type="checkbox"></th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <th scope="row"><input type="checkbox"></th>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
// 全选
$("#all").on("click", function () {
    // 统一的操作
$(":checkbox").prop("checked", true);
})

    //取消
    $("#cancel").on("click", function () {
        $(":checkbox").prop("checked", false);
    })


//    // 反选
    $("#reverse").on("click", function () {
        // 取出所有的checkbox
        var checkboxEles = $(":checkbox");
//         翔哥的耻辱
//        checkboxEles.prop("checked", !(checkboxEles.prop("checked")))
//         要循环checkbox
        // 选中的就取消
        // 没选中的就选中
        checkboxEles.each(function () {
            var thisCheckbox = $(this);  // 在教室里走的那个人
            var isChecked = thisCheckbox.prop("checked");  // 是否选中

//            方法一：判断的方式
            if (isChecked){
                // 取消选中
                thisCheckbox.prop("checked", false);
            }else {
                // 选中
                thisCheckbox.prop("checked", true);
            }

//            // 方法二：直接取反的方式
//            thisCheckbox.prop("checked", !isChecked);

        })
    })
//    $("#reverse").on("click", function () {
//        $(":checked").prop("checked", false);
//        $(":not(:checked)").prop("checked", true);
//    })

</script>

</body>
</html>



增删改查


技术分享



<html>
<head>
    <meta charset="UTF-8">
    <title>图片加载</title>
    <style>
        img{width: 300px;height:300px}
    </style>
</head>
<body>
<img src="xxx.png" alt="埃菲尔铁塔" title="埃菲尔铁塔" data-src="0.jpg">
<img src="xxx.png" alt="日落"title="日落" data-src="b.jpg">

<script src="jquery3_0_0.js"></script>
<script>
    $("img").on("click",function () {
        $(this).attr("src",$(this).attr("data-src"))
    })

//---给图片加样式
//    $("img").attr({src:"0.jpg",alt:"埃菲尔铁塔",title:"埃菲尔铁塔"})

</script>
</body>
</html>



图片加载


技术分享



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击加载图片</title>
    <style>
        img{
            height: 600px;
            width: 800px;
        }
    </style>
</head>
<body>

<img src="xxx.png" alt="美女" data-src="Bootstrap_i1.png">
<img src="xxx.png" alt="美女" data-src="Bootstrap_i3.png">
<img src="xxx.png" alt="美女" data-src="Bootstrap_i4.png">

<script src="jquery-3.2.1.js"></script>
<script>
    $("img").on("click", function () {
        var imgPath = $(this).attr("data-src");
        $(this).attr("src", imgPath)
    })

</script>
</body>
</html>



点击图片加载


技术分享



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <script src="jquery-3.2.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <style>
        .container {
            margin-top: 100px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-offset-2">
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                添加学生信息
            </button>

            <table class="table table-striped">
                <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                </thead>

                <tbody class="tbody">

                    <div class="row">
                         <tr>
                            <td class="col-md-3">egon</td>
                            <td class="col-md-3">33</td>
                            <td class="col-md-3">男</td>
                            <td>
                                <button class="btn btn-success edit">编辑</button>
                                <button class="btn btn-danger del">删除</button>
                            </td>
                        </tr>
                    </div>

                <tr >
                    <td>alex</td>
                    <td>33</td>
                    <td>男</td>
                    <td>
                        <button class="btn btn-success edit">编辑</button>
                        <button class="btn btn-danger del">删除</button>
                    </td>
                </tr>

                </tbody>
            </table>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="usernaem">姓名</label>
                        <input type="text" class="form-control item" id="usernaem" placeholder="usernaem">
                    </div>

                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input type="text" class="form-control item" id="age" placeholder="age">
                    </div>
                    <div class="form-group">
                        <label for="gender">性别</label>
                        <input type="text" class="form-control item" id="gender" placeholder="gender">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary addKeepBtn">Save changes</button>
            </div>
        </div>
    </div>
</div>



<script>

        var addKeepBtn=document.getElementsByClassName("addKeepBtn")[0];
        var tbody=document.getElementsByClassName("tbody")[0];
        var eles_input=document.getElementsByClassName("item");

        function parseDom(str){
            var ele_table=document.createElement("table");
            ele_table.innerHTML=str;
            return ele_table.firstElementChild.firstElementChild
        }


        // 添加学生的保存操作
        addKeepBtn.onclick=function () {
             var arr=[];
             var ele_tr=document.createElement("tr");// <td></td>
             for(var i=0;i<eles_input.length;i++){
//                 console.log(eles_input[i].value);
                 arr.push(eles_input[i].value);

             }
             console.log(arr);   // ["11", "22", "33"]
             s=‘<tr ><td>‘+arr[0]+‘</td><td>‘+arr[1]+‘</td><td>‘+arr[2]+‘</td> <td class="copy"> <button class="btn btn-success edit">编辑</button> <button class="btn btn-danger del">删除</button> </td> </tr>‘
             console.log(s);


             var tr_dom=parseDom(s);
             console.log(tr_dom);

            tbody.appendChild(tr_dom);
            // 关闭model对话框

            $("#myModal").modal("hide");
            // $("#myModal").modal("show")

       };

        // 删除操作

        tbody.addEventListener("click",function (e) {

            if(e.target.className=="btn btn-danger del"){
                console.log(e.target.parentElement.parentElement)
                tbody.removeChild(e.target.parentElement.parentElement)
            }
        });

       // 编辑操作

       tbody.addEventListener("click",function (e) {
           if(e.target.className=="btn btn-success edit"){
                // $("#myModal").modal("show")

                // 查找所有编辑文本
                eles_td=e.target.parentElement.parentElement.children;
                console.log(eles_td);

                for(var i=0;i<eles_td.length-1;i++){
                    console.log(eles_td[i]); // td标签

                    eles_td[i].innerHTML=‘<input type="text" value=‘+eles_td[i].innerHTML+‘>‘
                }

                e.target.innerHTML="保存";
                e.target.className="btn btn-info saveBtn"

           }

           else if(e.target.className=="btn btn-info saveBtn"){

                eles_td=e.target.parentElement.parentElement.children;


                for(var i=0;i<eles_td.length-1;i++){
                    console.log(eles_td[i]); // td标签

                    eles_td[i].innerHTML=eles_td[i].firstElementChild.value
                }

                e.target.innerHTML="编辑";
                e.target.className="btn btn-success edit"

           }
       })


</script>
</body>



表格操作


技术分享



<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>懒加载示例</title>
</head>
<body>
<div>
  <div><img src="img/0.jpg"  class="lazy" data-original="http://pic.pptbz.com/pptpic/201511/2015110586122945.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="http://img1.bitautoimg.com/bitauto/2012/08/10/3aa9e774-574b-4165-b59a-db4f243bdc5a.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="http://dl.bizhi.sogou.com/images/2014/01/09/485496.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/1.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/2.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/3.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/4.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/5.jpg" width="600px" height="400px"></div>
  <div><img src="img/0.jpg"  class="lazy" data-original="img/6.jpg" width="600px" height="400px"></div>

</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.lazyload.min.js"></script>
<script>
  $("img.lazy").lazyload({
    effect: "fadeIn",
    event: "click"
  })
</script>
</body>



懒加载


五. CSS
   .css()
      - .css("color")  -> 获取color css值
      - .css("color", "#ff0000") -> 设置值
      - .css({"color": "#cccccc", "border": "1px solid #ff0000"})  -> 设置多个值
      - .css(["color", "border"])  -> 获取多个值


技术分享



<head>
    <meta charset="UTF-8">
    <title>CSS示例</title>
    <style>
        #d2 {
            height: 100px;
            width: 100px;
            background-color: red;

            position: relative;
            left: 200px;
            top: 200px;
        }

        #d3 {
            height: 100px;
            width: 100px;
            background-color: green;


            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>

<div id="d1">111</div>


<div id="d2">
    <div>
    <div id="d3"></div>
    </div>
</div>

<script src="jquery-3.2.1.js"></script>


</body>



css示列


   .offset
      - 获取相对位置
      - 比较的对象是 html
   
   .position
      - 获取相对已经定位的父标签的位置
      - 比较的是最近的那个做过定位的祖先标签
      
   
   scrollTop([val])
   
      - 返回顶部
      
   scrollLeft([val])


技术分享



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <style>
        .c1 {
            height: 100px;
        }

        .hide {
            display: none;
        }
        #b1 {
            position: fixed;
            right: 15px;
            bottom: 15px;

        }

    </style>
</head>
<body>

<div class="c1">1</div>
<div class="c1">2</div>
<div class="c1">3</div>
<div class="c1">4</div>
<div class="c1">5</div>
<div class="c1">6</div>
<div class="c1">7</div>
<div class="c1">8</div>
<div class="c1">9</div>
<div class="c1">10</div>
<div class="c1">11</div>
<div class="c1">12</div>
<div class="c1">13</div>
<div class="c1">14</div>
<div class="c1">15</div>
<div class="c1">16</div>
<div class="c1">17</div>
<div class="c1">18</div>
<div class="c1">19</div>
<div class="c1">20</div>
<div class="c1">21</div>
<div class="c1">22</div>
<div class="c1">23</div>
<div class="c1">24</div>
<div class="c1">25</div>
<div class="c1">26</div>
<div class="c1">27</div>
<div class="c1">28</div>
<div class="c1">29</div>
<div class="c1">30</div>
<div class="c1">31</div>
<div class="c1">32</div>
<div class="c1">33</div>
<div class="c1">34</div>
<div class="c1">35</div>
<div class="c1">36</div>
<div class="c1">37</div>
<div class="c1">38</div>
<div class="c1">39</div>
<div class="c1">40</div>
<div class="c1">41</div>
<div class="c1">42</div>
<div class="c1">43</div>
<div class="c1">44</div>
<div class="c1">45</div>
<div class="c1">46</div>
<div class="c1">47</div>
<div class="c1">48</div>
<div class="c1">49</div>
<div class="c1">50</div>
<div class="c1">51</div>
<div class="c1">52</div>
<div class="c1">53</div>
<div class="c1">54</div>
<div class="c1">55</div>
<div class="c1">56</div>
<div class="c1">57</div>
<div class="c1">58</div>
<div class="c1">59</div>
<div class="c1">60</div>
<div class="c1">61</div>
<div class="c1">62</div>
<div class="c1">63</div>
<div class="c1">64</div>
<div class="c1">65</div>
<div class="c1">66</div>
<div class="c1">67</div>
<div class="c1">68</div>
<div class="c1">69</div>
<div class="c1">70</div>
<div class="c1">71</div>
<div class="c1">72</div>
<div class="c1">73</div>
<div class="c1">74</div>
<div class="c1">75</div>
<div class="c1">76</div>
<div class="c1">77</div>
<div class="c1">78</div>
<div class="c1">79</div>
<div class="c1">80</div>
<div class="c1">81</div>
<div class="c1">82</div>
<div class="c1">83</div>
<div class="c1">84</div>
<div class="c1">85</div>
<div class="c1">86</div>
<div class="c1">87</div>
<div class="c1">88</div>
<div class="c1">89</div>
<div class="c1">90</div>
<div class="c1">91</div>
<div class="c1">92</div>
<div class="c1">93</div>
<div class="c1">94</div>
<div class="c1">95</div>
<div class="c1">96</div>
<div class="c1">97</div>
<div class="c1">98</div>
<div class="c1">99</div>
<div class="c1">100</div>

<button id="b1" class="hide">屠龙宝刀，点击就送</button>
<script src="jquery-3.2.1.js"></script>
<script>
    $(window).scroll(function () {
        if ($(window).scrollTop() > 100) {
            $("#b1").removeClass("hide");
        }else {
            $("#b1").addClass("hide");
        }
         $("#b1").on("click", function () {
        $(window).scrollTop(0);
    });
    })


</script>
</body>
</html>



返回顶部


   尺寸：
   
   height([val|fn])
      - 元素的高度
   width([val|fn])
   innerHeight()
      - 带padding的高度
   innerWidth()
   outerHeight([soptions])
      - 在innerHeight的基础上再加border的高度
   outerWidth([options])


技术分享



html lang="en">
<head>
    <meta charset="UTF-8">
    <title>尺寸</title>
    <style>
        .c1 {
            height: 100px;
            width: 80px;
            background-color: red;
        }
    </style>
</head>
<body>

<div id="d1" class="c1"></div>

<script src="jquery-3.2.1.js"></script>
</body>
</html>



尺寸


3. 文档操作

内部插入（加粗）
   append(content|fn) --> 往后加
   appendTo(content)
   
   A.append(B)   -> 把B添加到A的后面
   A.appendTo(B) -> 把A添加到B的后面
   
   prepend(content|fn)  --> 往前加
   prependTo(content)
   
   A.prepend(B)   -> 把B添加到A的前面
   A.prependTo(B) -> 把A添加到B的前面
      
外部插入（加粗）
   after(content|fn)   --> 往后加
   insertAfter(content)
   
   A.after(B)          --> 把B添加到A的后面
   A.insertAfter(B)   --> 把A添加到B的后面


技术分享



html lang="en">
<head>
    <meta charset="UTF-8">
    <title>克隆</title>
</head>
<body>
<button class="c1">一刀999</button>

<script src="jquery-3.2.1.js"></script>
<script>
    $(".c1").on("click", function () {
        $(this).clone(true).insertAfter($(this));
    })
</script>
</body>
</html>



克隆示列


   before(content|fn)   --> 往前加
   insertBefore(content)
   
   A.before(B)          --> 把B添加到A的前面
   A.insertBefore(B)   --> 把A添加到B的前面
   
   
   包裹
   wrap(html|ele|fn)
      A.wrap(B)  --> B包A
      - 找到的每一个都单包
   unwrap()
      - 不要加参数
      
   wrapAll(html|ele)
      - 把所有找到的都包到单个标签中
   wrapInner(html|ele|fn)
   
   
   替换
   replaceWith(content|fn)
      A.replaceWith(B)  --> B替换A
      
   replaceAll(selector)
      A.replaceAll(B)   --> A替换B
   
   
   删除
   empty()
      - 清空 内部清空
   remove([expr])
      - 删除 整体都删除
   detach([expr])
      - 剪切  多保存在变量中，方便再次使用
      var tmp = $("").detach()
      
   复制
   clone([Even[,deepEven]])
      - true参数，加上true，事件都克隆
      
      - 一刀999的例子
      

4. 动画


技术分享



<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>

<button id="c1">Go</button>
<button id="c2">STOP!</button>
<div class="block"></div>



<script src="jquery-3.2.1.js"> </script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
<script>

    // 开始动画
$("#c1").click(function(){
  $(".block").animate({left: ‘+200px‘}, 5000);
});

// 当点击按钮后停止动画
$("#c2").click(function(){
  $(".block").stop();
});

</script>
</body>
</html>



stop停止


基本
   show([s,[e],[fn]])
   hide([s,[e],[fn]])
   toggle([s],[e],[fn])
   
滑动
   实际上改变的是元素的高度
   
   slideDown([s],[e],[fn])
   slideUp([s,[e],[fn]])
   slideToggle([s],[e],[fn])


技术分享



<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
    <!--<style>-->
    <!--#panel,#flip-->
    <!--{-->
    <!--padding:5px;-->
    <!--text-align:center;-->
    <!--background-color:#e5eecc;-->
    <!--border:solid 1px #c3c3c3;-->
    <!--}-->
    <!--#panel-->
    <!--{-->
    <!--padding:50px;-->
    <!--display:none;-->
    <!--}-->
    <!--</style>-->
    <!--</head>-->
    <!--</style>-->
</head>
<body>

<!--<button id="stop">停止滑动</button>-->
<!--<div id="flip">点我向下滑动面板</div>-->
<!--<div id="panel">Hello world!</div>-->


<div>123666
    <p>12255</p>
    <p>12255</p>
    <p>12255</p>
</div>


<script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>

<script>

    //$(document).ready(function(){
    //  $("#flip").click(function(){
    //    $("#panel").slideDown(5000);
    //  });
    //  $("#stop").click(function(){
    //    $("#panel").stop();
    //  });
    //});
</script>


</body>
</html>



滑动


淡入淡出
    实际上改变的是元素的透明度
   fadeIn([s],[e],[fn])
   fadeOut([s],[e],[fn])
   
   fadeTo([[s],o,[e],[fn]])
      - 淡出到0.66透明度
   fadeToggle([s,[e],[fn]])
      - .fadeToggle(3000, function () {
            alert("真没用3");
        });


技术分享



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画示例</title>

    <style>
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<img src="http://www.iyi8.com/uploadfile/2017/0523/20170523114637271.jpg" >

<button id="b1">召唤</button>
<button id="b2">淡出</button>
<button id="b3">淡入</button>
<button id="b4">淡出到0.66</button>
<button id="b5">淡入淡出</button>
<button id="b6">边框变大</button>
<script src="jquery-3.2.1.js"></script>
<script>
    $("#b1").on("click", function () {
//        $("img").show();
        $("img").toggle();

    })
    // 淡出
    $("#b2").on("click", function () {
        $("img").fadeOut("fast");
    })
    // 淡入
  $("#b3").on("click", function () {
      // 掌握了增加时间的方法
        $("img").fadeIn(3000, function () {
            alert("真没用");
        });
    })
    // 淡出到0.66透明度
  $("#b4").on("click", function () {
      // 掌握了新知识
        $("img").fadeTo(3000, 0.66, function () {
            alert("真没用2");
        });
    })
    // 淡入淡出
  $("#b5").on("click", function () {
        $("img").fadeToggle(3000, function () {
            alert("真没用3");
        });
    })
    // 动画-图片变小
  $("#b6").on("click", function () {
        $("img").animate({
            width: "100px",
            height: "60px",
        }, 3000, function () {
            // 这是回调函数
            alert(123);
        });
    })
</script>
</body>
</html>



动画示列


      
自定义
animate(p,[s],[e],[fn])1.8*
   - css属性值都可以设置
   - 女朋友变小（漏气）


技术分享



<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
        #b1{position: fixed;right: 10px;bottom: 10px; background-color: #080808;
            color: white;}
        .c1{height: 100px;background-color: silver}
        .hide{display:none;}
    </style>

</head>
<body>
<div class="c2">
<div class="c1">1</div>
<div class="c1">2</div>
<div class="c1">3</div>
<div class="c1">4</div>
<div class="c1">5</div>
<div class="c1">6</div>
<div class="c1">7</div>
<div class="c1">8</div>
<div class="c1">9</div>
<div class="c1">10</div>
<div class="c1">11</div>
<div class="c1">12</div>
<div class="c1">13</div>
<div class="c1">14</div>
<div class="c1">15</div>
<div class="c1">16</div>
<div class="c1">17</div>
<div class="c1">18</div>
<div class="c1">19</div>
<div class="c1">20</div>
<div class="c1">21</div>
<div class="c1">22</div>
<div class="c1">23</div>
<div class="c1">24</div>
<div class="c1">25</div>
<div class="c1">26</div>
<div class="c1">27</div>
<div class="c1">28</div>
<div class="c1">29</div>
<div class="c1">30</div>
<div class="c1">31</div>
<div class="c1">32</div>
<div class="c1">33</div>
<div class="c1">34</div>
<div class="c1">35</div>
<div class="c1">36</div>
<div class="c1">37</div>
<div class="c1">38</div>
<div class="c1">39</div>
<div class="c1">40</div>
<div class="c1">41</div>
<div class="c1">42</div>
<div class="c1">43</div>
<div class="c1">44</div>
<div class="c1">45</div>
<div class="c1">46</div>
<div class="c1">47</div>
<div class="c1">48</div>
<div class="c1">49</div>
<div class="c1">50</div>
<div class="c1">51</div>
<div class="c1">52</div>
<div class="c1">53</div>
<div class="c1">54</div>
<div class="c1">55</div>
<div class="c1">56</div>
<div class="c1">57</div>
<div class="c1">58</div>
<div class="c1">59</div>
<div class="c1">60</div>
<div class="c1">61</div>
<div class="c1">62</div>
<div class="c1">63</div>
<div class="c1">64</div>
<div class="c1">65</div>
<div class="c1">66</div>
<div class="c1">67</div>
<div class="c1">68</div>
<div class="c1">69</div>
<div class="c1">70</div>
<div class="c1">71</div>
<div class="c1">72</div>
<div class="c1">73</div>
<div class="c1">74</div>
<div class="c1">75</div>
<div class="c1">76</div>
<div class="c1">77</div>
<div class="c1">78</div>
<div class="c1">79</div>
<div class="c1">80</div>
<div class="c1">81</div>
<div class="c1">82</div>
<div class="c1">83</div>
<div class="c1">84</div>
<div class="c1">85</div>
<div class="c1">86</div>
<div class="c1">87</div>
<div class="c1">88</div>
<div class="c1">89</div>
<div class="c1">90</div>
<div class="c1">91</div>
<div class="c1">92</div>
<div class="c1">93</div>
<div class="c1">94</div>
<div class="c1">95</div>
<div class="c1">96</div>
<div class="c1">97</div>
<div class="c1">98</div>
<div class="c1">99</div>
<div class="c1">100</div>
    </div>


<button id="b1" class="hide">返回顶部</button>
<script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>

<script>
    $(window).scroll(function () {
        if($(window).scrollTop()>100){
            $("#b1").removeClass("hide");
        }else{
              $("#b1").addClass("hide");
        }
        $("#b1").on("click",function () {
             $(window).scrollTop(0);
        });
    })
</script>
</body>
</html>



滚动




技术分享



<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录校验</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
    <style>
        .c1 {
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 c1 col-md-offset-4">
            <form class="form-horizontal">
                <div class="form-group">
                    <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" aria-describedby="helpBlock1">
                        <span id="helpBlock1" class="help-block"></span>
                    </div>

                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword3" placeholder="Password" aria-describedby="helpBlock2">
                        <span id="helpBlock2" class="help-block"></span>
                    </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>
        </div>
    </div>
</div>

<script src="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script>

    $("form button").on("click", function () {
       // 先清空状态
        $("form .form-group").removeClass("has-error");
        $("form span").text("");
        // each循环
    $("form input").each(function () {
        // 做判断
        if ($(this).val().length === 0){
            // 给他的爸爸加has-error
            $(this).parent().parent().addClass("has-error");
            // 给span写内容
            // 找到我这是什么input  --> 找到对应的label的文本内容
            var name = $(this).parent().prev().text();
            $(this).next().text(name + "不能为空");
            return false;
        }
    });
        return false;
    });

</script>
</body>
</html>



登录验证


5. 事件处理
   
   之前绑定事件的方式：
      1. 在标签里：onclick="clickMe();";  function clickMe() {}
      2. ele.onclick = func1; function func1(){.....}
      2. ele.onclick = function(){}
      3. ele.addEventListener("click", function(){})
   
   jQuery绑定事件的方式：
      1. $(ele).on("click", function(){})
         $(ele).click(function(){})
         $(ele).focus(function(){})
      
      2. $("tbody").delegate(".btn-warning", "click", function(){})
      
      3. $("tbody").on("click",".btn-warning",function(){})  我们要用的事件委派




六. 常用事件

   blur([[data],fn])
   
   focus([[data],fn])
      - 获取焦点
      - 搜索框例子
      
   change([[data],fn])
      - select
      
   click([[data],fn])
      - 点击
   
   dblclick([[data],fn])
      - 双击

   scroll([[data],fn])
      - 滚动

   submit([[data],fn])
      -提交
      
      


技术分享



<head>
    <meta charset="UTF-8">
    <title>常用事件示例</title>
</head>
<body>

<input type="text" name="search" value="苹果手机" data-show="">
<button>搜索</button>

<select name="" id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

<script src="jquery-3.2.1.js"></script>
<script>
    $(":input").focus(function () {
        var data = $(this).val();
        $(this).val("");
        $(this).attr("data-show", data);

    });
    $(":input").blur(function () {
        $(this).val($(this).attr("data-show"));
    });
    $(":input").data("items", ["苹果手机", "苹果电脑", "烟台红富士"]);
    // change
    $("#s1").change(function () {
        console.log($(this).val());
    });
</script>
</body>



常用事件示列


技术分享



<head>
    <meta charset="UTF-8">
    <title>标签上绑定事件</title>
</head>
<body>

<button>点我</button>
</body>

<script>
    function func1() {
        alert(111);
    }
    var b = document.getElementsByTagName("button")[0];
//    b.onclick = func1;

    b.onclick = function () {
        func1();
    }
</script>
</html>



标签上绑定事件


      文档树加载完之后绑定事件（绝大部分情况下）
      $(document).ready(function(){
         // 绑定事件的代码
         ....
      })
      
      简写：
      $(function($){
         // 绑定事件的代码
         ....
      });


技术分享



<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://v3.bootcss.com/favicon.ico">

    <title>Dashboard Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="./Dashboard_files/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="./Dashboard_files/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="./Dashboard_files/dashboard.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don‘t actually copy these 2 lines! -->
    <!--[if lt IE 9]>
    <script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="Dashboard_files/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


    <style>
        .menu {
            margin: 0 -20px;
            border-bottom: 1px solid #336699;
        }

        .head {
            padding: 15px;
        }

        .my-table-tool {
            margin-bottom: 15px;
        }

        .menu .nav-sidebar > li > a {
            padding-right: 40px;
            padding-left: 40px;
        }
    </style>

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <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="http://v3.bootcss.com/examples/dashboard/#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Dashboard</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Settings</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Profile</a></li>
                <li><a href="http://v3.bootcss.com/examples/dashboard/#">Help</a></li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">

            <div class="menu">
                <div class="head bg-primary">菜单一</div>
                <ul class="nav nav-sidebar">
                    <li class=""><a href="http://v3.bootcss.com/examples/dashboard/#">Overview <span
                            class="sr-only">(current)</span></a>
                    </li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/#">Reports</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/#">Analytics</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/#">Export</a></li>
                </ul>
            </div>

            <div class="menu">
                <div class="head  bg-primary">菜单二</div>
                <ul class="nav nav-sidebar">
                    <li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item again</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/">One more nav</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/">Another nav item</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/">More navigation</a></li>
                </ul>
            </div>

            <div class="menu">
                <div class="head  bg-primary">菜单三</div>
                <ul class="nav nav-sidebar">
                    <li><a href="http://v3.bootcss.com/examples/dashboard/">Nav item again</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/">One more nav</a></li>
                    <li><a href="http://v3.bootcss.com/examples/dashboard/">Another nav item</a></li>
                </ul>
            </div>


        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

            <div class="panel panel-primary">
                <div class="panel-heading">Panel heading without title</div>
                <div class="panel-body">

                    <!-- 表格上面的按钮-->

                    <div class="row my-table-tool">
                        <div class="col-md-12">
                            <button class="btn btn-success" data-toggle="modal" data-target="#myModal">添加</button>
                        </div>
                    </div>

                    <div class="table-responsive table-bordered">
                        <table id="t1" class="table table-striped table-bordered">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>用户名</th>
                                <th>邮箱</th>
                                <th>爱好</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>1</td>
                                <td>Egon</td>
                                <td>[email protected]</td>
                                <td>杠娘</td>
                                <td>
                                    <button class="btn btn-warning">编辑</button>
                                    <button class="btn btn-danger">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Yuan</td>
                                <td>[email protected]</td>
                                <td>日天</td>
                                <td>
                                    <button class="btn btn-warning">编辑</button>
                                    <button class="btn btn-danger">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Alex</td>
                                <td>[email protected]</td>
                                <td>吹牛</td>
                                <td>
                                    <button class="btn btn-warning">编辑</button>
                                    <button class="btn btn-danger">删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>GDP</td>
                                <td>[email protected]</td>
                                <td>戴帽子</td>
                                <td>
                                    <button class="btn btn-warning">编辑</button>
                                    <button class="btn btn-danger">删除</button>
                                </td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>


<!--模态框开始 -->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">xxxx</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="modal-username" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="modal-username" placeholder="用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal-email" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="modal-email" placeholder="邮箱">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="modal-habit" class="col-sm-2 control-label">爱好</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="modal-habit" placeholder="爱好">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--模态框结束 -->

<!-- Bootstrap core javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="Dashboard_files/jquery.min.js"></script>
<script>window.jQuery || document.write(‘<script src="../../assets/js/vendor/jquery.min.js"><\/script>‘)</script>
<script src="Dashboard_files/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don‘t actually copy the next line! -->
<script src="Dashboard_files/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="Dashboard_files/ie10-viewport-bug-workaround.js"></script>

<script>
    $(document).ready(function () {
        $(".head").on("click", function () {
            // 兄弟标签 紧挨着的ul标签 隐藏  addClass("hide")
            $(this).parent().siblings().children("ul").slideUp();
            // 把自己 紧挨着的ul标签显示  removeClass("hide")
//        $(this).next().removeClass("hide");
            $(this).next().slideToggle();
        })

        // 删除
        //    $("td>.btn-danger").click(function () {
        //        $(this).parent().parent().remove();
        //    })

        $("tbody").on("click", "td>.btn-danger", function () {
            $(this).parent().parent().remove();
        })

        // 编辑
        $("tbody").on("click", "td>.btn-warning", function () {
            // 弹出模态框
            $("#myModal").modal("show");
            // 给模态框赋值
            // 1.取值
            var tds = $(this).parent().parent().children();
            var username = tds.eq(1).text();
            var email = tds.eq(2).text();
            var habit = tds.eq(3).text();
            // 给模态框赋值
            $("#modal-username").val(username);
            $("#modal-email").val(email);
            $("#modal-habit").val(habit);

            // 把tds保存到myModal的data
            $("#myModal").data("tds", tds);
        });
        // 点击模态框上的提交按钮
        $(".modal-footer>.btn-primary").click(function () {
            // 1. 隐藏模态框
            $("#myModal").modal("hide");
            // 2. 更新td的值
            // 取值
            var username = $("#modal-username").val();
            var email = $("#modal-email").val();
            var habit = $("#modal-habit").val();
            // 赋值
            var tds = $("#myModal").data("tds");
            if (tds === undefined) {
                // 这是添加
                // 1.取值
                // 2. 在表格添加新的一行tr
                var trTmp = document.createElement("tr");
                // 第一个td是序号
                $(trTmp).append("<td>" + ($("tbody tr").size() + 1) + "</td>");
                // 第二个td是username
                $(trTmp).append("<td>" + username + "</td>");
                $(trTmp).append("<td>" + email + "</td>");
                $(trTmp).append("<td>" + habit + "</td>");
                // 最后加按钮
                $(trTmp).append($("tbody tr:first").find("td").last().clone(true));
                $("tbody").append(trTmp);
            } else {
                tds.eq(1).text(username);
                tds.eq(2).text(email);
                tds.eq(3).text(habit);
                // 清空tds
                $("#myModal").removeData("tds");
            }

        });

        // 添加按钮绑定的事件
        $(".my-table-tool .btn-success").click(function () {
            $("#myModal :input").val("");
        })
    })
</script>
</body>
</html>



增删改查改进




 


 


 


 


 


 


 


 


 


 






























以上是关于jQuery的主要内容，如果未能解决你的问题，请参考以下文章
 

 markdown 在WordPress中使用jQuery代码片段


 使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面


 很实用的JQuery代码片段（转）


 几个有用的JavaScript/jQuery代码片段（转）


 几个非常实用的JQuery代码片段


 高效Web开发的10个jQuery代码片段