59、jQuery初识

jQuery是由原生js写的所以说所有jQuery制作出来的效果都可以使用js做出来，jQuery出现的目的是为了优化代码，提高码代码的效率它将很多功能封装。

本篇导航：

jQuery的认识
jQuery对象
选择器和筛选器
属性
CSS
文档操作

一、jQuery的认识

1、何为jquery

1 jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
2 jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
3 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
4 jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
5 jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

2、优势

短小、精悍，写起来简单，省事儿，开发效率高

3、js与jquery关系

jQuery就是JS写的

JS是基础，jQuery是工具

4、jQuery介绍
1）版本
　　1.x　　兼容IE8。。。
　　3.x 　　最新
2）.min.js　　压缩的生产环境用
3）.js　　没有压缩的开发用

5、下载即使用

1）下载：https://jquery.com/

2）导入jquery： <script src="jquery-3.2.1.js"></script>

3）使用：jQuery.xxxxx --> $() .xxx

二、jQuery对象

1、jquery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法

简单说:

用jQuery选择器查出来的就是jQuery对象

2、jquery对象和Dom对象

jQuery对象，它只可以使用jQuery方法，不能使用DOM的方法，DOM对象也不能使用jquery方法

3、jquery对象和DOM对象的转化

1）jquery对象转DOM对象

　　jquery对象[0] --> $(".c1")[0]

2）DOM对象转jquery对象

　　$(DOM对象)

4、基础语法

$(selector).action()

三、选择器和筛选器

1、选择器

1）基本选择器

- ID选择器        $("#id")
- 类选择器        $(".class")
- 标签选择器      $("element")
- 所有标签        $("*")
- 组合选择器      $("#id,.class")

2）层级选择器

- 从一个标签的子子孙孙去找    $("父亲 子子孙孙")                      $("#id a")
- 从一个标签的儿子里面找      $("父亲>儿子标签")                     $("#id>a")
- 找紧挨着的标签            $("标签+下面紧挨着的那个标签")            $("#id+a")
- 找后面所有同级的           $("标签~兄弟标签")                     $("#id~a")

3）属性选择器

通过属性查找        $("input[type='text']")

2、筛选器

1）基础筛选器

$(" :first")    获取第一个元素
$(" :not('')")   去除所有与给定选择器匹配的元素
$(" :even")   匹配所有索引值为偶数的元素
$(" :odd")    匹配所有索引值为奇数的元素
$(" :eq")    匹配一个给定索引值的元素
$(" :gt")    匹配所有大于给定索引值的元素
$(" :last")    获取最后个元素
$(" :focus")    匹配当前获取焦点的元素。

2）内容

$(":contains")    匹配包含给定文本的元素
$(" :empty")    匹配所有不包含子元素或者文本的空元素
$(" :has('')")    匹配含有选择器所匹配的元素的元素
$(" :parent")    匹配含有子元素或者文本的元素

3）可见性

$(" :hidden)    匹配所有不可见元素，或者type为hidden的元素
$(" :visible")    匹配所有的可见元素

4）表单

:input
:text
:password
:checkbox
:radio
:submit
:button
:image
:file

5）表单属性

:enable    匹配所有可用元素
:disable    匹配所有不可用元素
:checked    匹配所有选中的被选中元素
:selected    匹配所有选中的option元素

3、方法形式的筛选

1）过滤

$("").eq()    获取当前链式操作中第N个jQuery对象
$("").first()    获取第一个元素
$("").last()    获取最后一个元素
$("").hasClass()    检查当前的元素是否含有某个特定的类，如果有，则返回true
$("").has()    保留包含特定后代的元素
$("").not()    从匹配元素的集合中删除与指定表达式匹配的元素
$("").slice(start,end)    选取一个匹配的子集

2）查找

$("").children()    所有子元素的元素集合
$("").find()    搜索所有与指定表达式匹配的元素。
$("").next()    取得后一个同辈元素
$("").nextAll()    取得后所有同辈元素。
$("").nextUntil()    查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
$("").offsetParent()    返回第一个匹配元素用于定位的父节点。
$("").parent()    取得一个包含着所有匹配元素的唯一父元素的元素集合。
$("").parents()    取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
$("").parentsUntil()    查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("").prev()    取得前一个同辈元素。
$("").prevall()     取得前所有同辈元素。
$("").prevUntil()    查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
$("").siblings()    取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。

4、示例

<!DOCTYPE html>
<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="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
</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="jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>

四、属性

1、属性

1）如果你的选择器选出了多个对象，那么默认只会返回第一个的属性

attr(name|pro|key,val|fn)
    - 一个参数 获取属性的值
    - 两个参数 设置属性的值
removeAttr(name)
    - 删除属性的值
prop(n|p|k,v|f)
   - 属性的返回值是布尔类型
removeProp(name)
    - 删除属性的值

2）jquery中的循环

each
- $.each(数组/对象, function(i, v){})
 
- $("div").each(function(){})

3）练习

<!DOCTYPE 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>

点击加载图片

<!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>

全选反选取消

2、css

addClass(class|fn)    为每个匹配的元素添加指定的类名。
removeClass([class|fn])    从所有匹配的元素中删除全部或者指定的类。
toggleClass(class|fn[,sw])  切换，有就去掉，没有就加上

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例一</title>
    <style>
        .dp {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            border: 1px solid #cccccc;
            display: inline-block;
        }
 
        .dp2 {
            background-color: yellow;
        }
    </style>
</head>
<body>
 
<div class="dp"></div>
 
<button id="switch" class="btn btn-default">开关</button>
 
<script src="jquery-3.2.1.js"></script>
<script>
 
//jQuery绑定事件
    $("#switch").on("click", function () {
        // 找灯泡
        $(".dp").toggleClass("dp2");
    })
 
</script>
</body>
 
</html>

灯泡

3、HTML代码/文本/值

没有参数就是获取对应的值　　有参数就是设置对应的值

html([val|fn])
    加 html标签
    .html("<span>添加span标签</span>")
text([val|fn])
    加文本
    .text("我是文本")
val([val|fn|arr])
    操作的value
    - input
        - 获取的是输入的内容
    - checkbox
        - 获取的是value值
    - select
        - 单选 就是获取值
        - 多选 得到的是一个数组，设置的时候也要是数组

五、CSS

1、css

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

2、位置

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

示例

<!DOCTYPE html>
<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>

返回顶部

3、尺寸

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

六、文档操作

1、内部插入

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的前面

2、外部插入

after(content|fn)   --> 往后加
insertAfter(content)
 
A.after(B)          --> 把B添加到A的后面
A.insertAfter(B)    --> 把A添加到B的后面
 
before(content|fn)   --> 往前加
insertBefore(content)
 
A.before(B)          --> 把B添加到A的前面
A.insertBefore(B)     --> 把A添加到B的前面

3、包裹

wrap(html|ele|fn)
    A.wrap(B)  --> B包A
unwrap()
    - 不要加参数
 
wrapAll(html|ele)
wrapInner(html|ele|fn)

4、替换

replaceWith(content|fn)
    A.replaceWith(B)  --> B替换A
 
replaceAll(selector)
    A.replaceAll(B)   --> A替换B

5、删除

empty()
    - 清空 内部清空
remove([expr])
    - 删除 整体都删除
detach([expr])
    - 剪切  多保存在变量中，方便再次使用

6、复制

clone([Even[,deepEven]])
    默认只复制标签，参数设置为true也会复制其绑定的事件

<!DOCTYPE html>
<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>

59、jQuery初识的更多相关文章

前端---JQuery初识
---恢复内容开始--- BOM JQuery认识 JQuery基本选择器 JQuery高级选择器 1.javascript基础部分包括三个部分: ECMAScript:JavaScript的语法标准 ...
前端07 /jQuery初识
前端07 /jQuery初识目录前端07 /jQuery初识 1.jquery介绍 1.1 jquery的优势 1.2 jquery是什么? 1.3 jquery的导入 2.jQuery的使用 2 ...
jQuery初识、函数、对象
初识jQuery 官方地址:http://jquery.com/ what:一个优秀的JS函数库(封装了BOM.DOM(主要)) why: HTML元素选取(选择器) HTML元素操作 CSS操作 H ...
10、jQuery初识
jQuery是由原生js写的所以说所有jQuery制作出来的效果都可以使用js做出来,jQuery出现的目的是为了优化代码,提高码代码的效率它将很多功能封装. 本篇导航: jQuery的认识 jQue ...
JQuery初识
一.什么是JQuery JQuery官方网站上是这样解释的:JQuery是一个快速简洁的JavaScript库,它可以简化HTML文档的元素遍历.事件处理.动画及Ajax交互,快速开发We ...
jQuery基础学习(一)—jQuery初识
一.jQuery概述 1.jQuery的优点 jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优 ...
jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)
一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...
jQuery 初识筛选器属性选择器
---------------------------大事使我们惊讶,小事使我们沮丧,久而久之,我们对这二者都会习以为常. 一 jQuery是什么? ［1］ jQuery由美国人John Resi ...
python jquery初识
jQuery的介绍 jQuery是一个快速,小巧,功能丰富的JavaScript库.它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历和操作, 事件处理动画和Ajax更加简单.通过多功能 ...

随机推荐

201521123083 《Java程序设计》第10周学习总结
1. 本周学习总结 2. 书面作业本次PTA作业题集异常,多线程 1.finally题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? 一个tr ...
【Alpha】Daily Scrum Meeting——Day1
站立式会议照片每个人的工作分配成员今日计划完成的任务胡丹丹学习手机app开发的总体流程以及搭建APP开发所需要的安卓环境,加强Java语言的学习掌握曾丽君学习手机app开发的总体流程以 ...
201521123010 《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
201521123089 《Java程序设计》第4周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 总结: (1)类名的首字母一定要大写. (2)制类型转换:类强制转换为子类时只有当引用类型真 ...
MySql各种查询
1.简单查询 select * from info; select Code as '代号',name as '姓名' from info; 2.条件查询 select * from car wher ...
Windows下用Composer安装Laravel步骤(集成php环境用phpStudy2016版本)
描述:到官方网站了解并根据自己所需要的版本号安装,所需要的php版本是多少. 中文网站:http://www.golaravel.com/ 官方网站:https://laravel.com/ 其实各自 ...
利用Struts拦截器限制上传图片的格式和大小
在这之前 Struts的一个核心功能就是大量的拦截器,既然是框架,那么自然也就贴心地为我们准备好了各种常用的功能,比如这里即将讨论的如何限制上传图片的格式和大小.那么既然是使用Struts已经写好的拦 ...
树莓派3 B+ 的摄像头简单使用（video-streamer）
一.首先在某东上购买树莓派摄像头我的买的硬件张这个样子的(CSI接口摄像头): 正视图 ...
java 方法重载overload
一.方法的重载方法名一样,但参数不一样,这就是重载(overload). 所谓的参数不一样,主要有两点:第一是参数的个数不一样,第二是参数的类型不一样.只要这两方面有其中的一方面不一样就可以构成方法 ...
新版本mac 无法打开第三方应用
新版本mac 没有任何应用可以打开的这个选项现在解决方法已经找到特此标记一下 1打开终端 2 输入 sudo spctl --master-disable 3.打开系统设置的中的安全即可出现

59、jQuery初识

59、jQuery初识的更多相关文章

随机推荐

热门专题