10、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>

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

前端07 /jQuery初识
前端07 /jQuery初识目录前端07 /jQuery初识 1.jquery介绍 1.1 jquery的优势 1.2 jquery是什么? 1.3 jquery的导入 2.jQuery的使用 2 ...
前端---JQuery初识
---恢复内容开始--- BOM JQuery认识 JQuery基本选择器 JQuery高级选择器 1.javascript基础部分包括三个部分: ECMAScript:JavaScript的语法标准 ...
js进阶 13-9/10 jquery如何实现三级列表
js进阶 13-9/10 jquery如何实现三级列表一.总结一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
高效Web开发的10个jQuery代码片段（10 JQUERY SNIPPETS FOR EFFICIENT WEB DEVELOPMENT）
在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库.今天我们将为各位Web开发者提供10个最实用的jQuery代码片段,有需要的开发者可以保存起来. 1.检测Internet ...
59、jQuery初识
jQuery是由原生js写的所以说所有jQuery制作出来的效果都可以使用js做出来,jQuery出现的目的是为了优化代码,提高码代码的效率它将很多功能封装. 一.jQuery的认识 1.何为jque ...
jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)
一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...
jQuery初识、函数、对象
初识jQuery 官方地址:http://jquery.com/ what:一个优秀的JS函数库(封装了BOM.DOM(主要)) why: HTML元素选取(选择器) HTML元素操作 CSS操作 H ...
jQuery 初识筛选器属性选择器
---------------------------大事使我们惊讶,小事使我们沮丧,久而久之,我们对这二者都会习以为常. 一 jQuery是什么? ［1］ jQuery由美国人John Resi ...
jQuery 初识
现在的项目中,用纯js的已经很少了,基本都是找这些好用的库,毕竟功能强大,学习简单,而且插件多. 今天就来学习下. 学习一个东西,就要先用安装入手. 这里我就直接从别的地方引入jquery库了, 引入 ...

随机推荐

bat批处理文件批量修改文件名
需要将一系列文件如out-M0.png, out-M1.png, out-M2.png, ... 重新命名为 color-0.png, color-1.png, color-2.png, ... 方法 ...
ReactNative调试技术-真机调试
在我开始用ReactNative开始开发APP时,为了能够获取程序运行中的信息,就需要搭建调试环境. 手机调试方式有两类,一类是模拟器方式,另一类是真机模式. 我测试了一下相应的模拟器: 如果用谷歌管 ...
伪分布式hbase数据迁移汇总
https://www.jianshu.com/p/990bb550be3b hbase0.94.11(hadoop为1.1.2,此电脑ip为172.19.32.128)向hbase1.1.2 (ha ...
sql 跨服务器查询
创建链接服务器 exec sp_addlinkedserver 'ITSV ', ' ', 'SQLOLEDB ', '远程服务器名或ip地址 ' exec sp_addlinkedsrvlogin ...
Hive| ETL清洗& 查询练习
ETL清洗数据导Jar包 <dependencies> <dependency> <groupId>log4j</groupId> <artif ...
js實現彈窗
strSucc += "<br/><font color=\"red\">提醒您!在預設狀態下,Google Chrome 會阻止彈出式視窗自動在 ...
SEED-DVS6467_SDK的交叉编译环境搭建问题
今天在ubuntu16.04上安装arm的交叉编译器arm_v5t_le-gcc,环境变量配置好以后,运行arm_v5t_le-gcc命令,总提示No such file or directory.然 ...
Java常用API——String字符串运算
一.字符串运算 String类 1.概述 String是特殊的引用数据类型,它是final类. 2.构造方法 String str = "abc"; 相当于: char date ...
大数据小白系列——HDFS(2)
这里是大数据小白系列,这是本系列的第二篇,介绍一下HDFS中SecondaryNameNode.单点失败(SPOF).以及高可用(HA)等概念. 上一篇我们说到了大数据.分布式存储,以及HDFS中的一 ...
mysql 数据库（二）数据库的基本操作
mysql 数据库(二)数据库的基本操作用户管理,添加权限,创建,显示,使用数据库 1 显示数据库:show databases; 默认数据库: mysql - 用户权限相关数据 test - 用于 ...

10、jQuery初识

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

随机推荐

热门专题