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更加简单.通过多功能 ...

随机推荐

201521123091 《Java程序设计》第8周学习总结
Java 第八周总结第八周的作业. 目录 1.本章学习总结 2.Java Q&A 3.码云上代码提交记录及PTA实验总结 1.本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集 ...
201521123107 《Java程序设计》第4周学习总结
第4周作业-面向对象设计与继承 1.本周学习总结 2.书面作业 1.注释的应用使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 对类的注释: 所得到的效果: ...
Swing-setBounds()用法-入门
先看API: public void setBounds(Rectangle r) 移动组件并调整其大小,使其符合新的有界矩形 r.由 r.x 和 r.y 指定组件的新位置,由 r.width 和 r ...
201521123019 《Java程序设计》第7周学习总结
1. 本章学习总结 2. 书面作业 Q1.ArrayList代码分析 1.1解释ArrayList的contains源代码源代码如下: public boolean contains(Object ...
201521123114 《Java程序设计》第2周学习总结
#1. 本周学习总结 1. 学会了使用码云管理代码,使用eclipse关联jdk源代码: 2. 学习了包管理机制,包的作用:主要是管理java文件,解决同名文件冲突; 3. ArrayList可以处理 ...
201521123038 《Java程序设计》第十二周学习总结
201521123038 <Java程序设计> 第十二周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业将Student ...
201521123003《Java程序设计》第13周学习总结
1. 本周学习总结以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...
201521123119《Java程序设计》第9周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业本次PTA作业题集异常 Q1.常用异常题目5-1 Q1.1 截图你的提交结果(出现学号) Q1.2 ...
sublime text3 好用的插件！！！
1.首先,你要保证sublime有Package Control,所以,如果没有,那么将Ctrl+`打开sublime控制台,将下列代码复制进去! import urllib.request,os; ...
JVM（三）内存回收（一）
最近花了相当长一段时间在看Hotspot JVM的GC和内存分配,本节先总结和回顾一下内存回收的相关知识点,内存的分配放到下节再讨论. 一.什么是JVM的GC GC即Garbage Collectio ...

59、jQuery初识

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

随机推荐

热门专题