jQuery入门与使用

jQuery介绍

jQuery是一个快速，小巧，功能丰富的JavaScript库。它带有大量的易于使用的API，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。

另外，它只是封装了js的DOM的操作和ajax，其它的未封装，所以js是包含jQuery的。使用jQuery，可以更加方便的操作DOM。

jQuery兼容多个浏览器的，你在使用jQuery的时候就不需要考虑浏览器兼容问题。

jQuery的宗旨是：write less, do more

使用jQuery可以做很多事情，比如：

选择器、筛选器、样式操作、文本操作、属性操作、文档处理、事件、动画、插件
each、data、Ajax(重点 django部分学)

jQuery是js的一个库，这类似Python中的模块，使用jQuery之前需要先导入jQuery。

jQuery导入方式

目前jQuery的主要使用版本是：3.4、3.5

第一种方式：本地文件导入

其实，jQuery本质上就是一个js文件，我们从官网https://jquery.com/download/下载该文件后，在我们的HTML代码中，通过script标签的src属性引入即可

补充：jQuery文件我们一般使用两种：压缩版（.min.js结尾）和不压缩版（.js结尾）。压缩版主要用在线上生产环境；不要主要在实际项目开发中。

第二种方式：jquery的CDN服务

CDN（Content Delivery Network）直接翻译：内容分发网络。其实就是将一个地方的网络资源分布在不同的网络位置，这样当用户请求资源时，就可以就近获取资源，节省时间。

CDN有免费的也有付费的服务。使用CND引入的方式必须保证当前计算机有网络。

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>     // 前端免费的cdn网站:bootcdn

 jQuery基本语法

jQuery(选择器).action()  # 可以简写如下

$(选择器).action()

jQuery与原生js对比

// eg:将p标签内部的文本颜色改为红色
// 原生js代码操作标签
let pEle = document.getElementById('d1')
pEle.style.color = 'red'


// jQuery操作标签
$('p').css('color','blue')

补充：

　　jQuery对象在保存名字时，规范命名方式：$pEle

标签对象和jQuery对象

掌握两点：（区别标签对象和jQuery对象；两者之间的转换）

• jQuery对象通过索引值为0的值就是标签对象
• 标签对象套一个$就是jQuery对象

$('#d1')[0]                  // jQuery对象 ----> 标签对象
<div id="d1"> … </div>
document.getElementById('d1')
<div id="d1"> … </div>

$(document.getElementById('d1'))  // 标签对象 ----> jQuery对象
w.fn.init [div#d1]

查找标签

基本选择器

类似CSS的基本选择器：id选择器、class选择器、标签选择器

$('#d1')    // id选择器， w.fn.init [div#d1]0: div#d1length: 1__proto__: Object(0)
$('.c1')    // class选择器
$('span')    // 标签选择器
$('*')        // 所有的  

// id选择器
$('#d1')
w.fn.init [div#d1]0: div#d1length: 1__proto__: Object(0)
// class选择器
$('.c1')
w.fn.init [p.c1, prevObject: w.fn.init(1)]0: p.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
// 标签选择器
$('span')
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]

"""一定要区分开(重点)"""
// jQuery对象如何变成标签对象
undefined
$('#d1')[0]
<div id=​"d1">​…​</div>​
document.getElementById('d1')
<div id=​"d1">​…​</div>​
// 标签对象如何转jQuery对象
undefined
$(document.getElementById('d1'))
w.fn.init [div#d1]

层级选择器/分组嵌套

层级选择器，或者说是组合选择器。个人感觉层级选择器的叫法更加见名知其意。

类似CSS的层级选择器和分组选择器

$('div span')           // 后代 空格
$('div>span')           // 儿子，>
$('div+span')           // 毗邻, +
$('div~span')           // 弟弟, ~
$('#d1, .c1,p')     // 选择多个,逗号分割
$('div#d1')        // w.fn.init [div#d1, prevObject: w.fn.init(1)]，同时满足条件的
$('div.c1')

$('div')
w.fn.init(2) [div#d1, div.c1, prevObject: w.fn.init(1)]
$('div.c1')
w.fn.init [div.c1, prevObject: w.fn.init(1)]0: div.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('div#d1')
w.fn.init [div#d1, prevObject: w.fn.init(1)]
$('*')
w.fn.init(19) [html, head, meta, title, meta, link, script, script, body, span, span, div#d1, span, p#d2, span, span, div.c1, span, span, prevObject: w.fn.init(1)]
               
$('#d1,.c1,p')  # 并列+混用
w.fn.init(3) [div#d1, p#d2, div.c1, prevObject: w.fn.init(1)]
              
$('div span')  # 后代
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
$('div>span')  # 儿子
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div+span')  # 毗邻
w.fn.init [span, prevObject: w.fn.init(1)]
$('div~span')  # 弟弟
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]

属性选择器

类似CSS的属性选择器，[]

$('[username]')
$('[username="the3times"]')
$('input[username="the3times"]')

$('[type]')
$('input[type="text"]')

基本筛选器

$('ul li')            // 后代选择器， ul下面所有的li
          
$('ul li:first')        // 大儿子, ul的第一个li  
$('ul li:last')         // 小儿子, ul的最后一个li

       
$('ul li:eq(2)')    // 索引值等于，某个值的li
$('ul li:gt(2)')      // 索引值大于，某个值的li         
$('ul li:lt(2)')      // 索引值小于，某个值的li


$('ul li:even')      // 偶数索引的li(包含0)              
$('ul li:odd')       // 奇数索引的li

              
$('ul li:not("#d1")')      // 获取排除id是d1的所有li
$('div:has("p")')      // 获取有子标签，且子标签中有是p标签的div

表单筛选器

仅用在form表单标签内的那些标签上，如：input、select、textarea标签

$('input[type="text"]')
$('input[type="password"]')        // 完整的选择器写法

$(':text')                          //简化的写法
$(':password') 

// 下面这些都是简化后的方式
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...

除了input的type属性可以简化，其他的表单属性也可以有类似的简化写法。

:enabled
:disabled
:checked                // $(':checked')
:selected

特殊情况：

• checked的简化写法不仅获取input还获取option
• selected的简化写法只获取option
• 如果使用checked获取input时，手动添加限制条件：$('input:checked')

$(':checked')  # 将checked和selected都拿到
w.fn.init(2) [input, option, prevObject: w.fn.init(1)]0: input1: optionlength: 2prevObject: w.fn.init [document]__proto__: Object(0)


$(':selected')  
w.fn.init [option, prevObject: w.fn.init(1)]

$('input:checked') # 自己加一个限制条件 
w.fn.init [input, prevObject: w.fn.init(1)]

筛选器方法

筛选器方法，其实和上述选择器的目的一样，区别在于它是通过某一个基准jQuery象的内置方法，来定位其他的jQuery对象。

定位同层级的jQuery对象

$('#d1').next()           // 同层级下面一个
$('#d1').nextAll()         // 同层级下面所有的
$('#d1').nextUntil('.c1')        // 同级别下面的所有，直到指定对象之前的（不包括指定的对象）
      
$('.c1').prev()             // 类似，同层级上面一个
$('.c1').prevAll()
$('.c1').prevUntil('#d2')

$('#d2').siblings()               // 同级别上下所有

定位不同层级的jQuery对象

$('#d3').parent()           // 第一级父标签，可以链式找到document
$('#d3').parent().parent()     // 链式
$('#d3').parents()         // 所有的父级标签，直到html
$('#d3').parentsUntil('body')     // body标签以下的父级标签
    
$('#d2').children()               // 所有的子标签

其他

$('div').find('p')              // 等价于 $('div p'), 找div里面的p标签

$('div span').first()             // 等价于 $('div span:first')，找第一个span
$('div span').last()             // 找最后一个span

$('div span').not('#d3')         // 等价于 $('div span:not("#d3")'), 排除id是d3的所有div中的span标签
$('div span').hasClass('C1')     // 返回布尔值 true/false

jQuery练习题

题目

<!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="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <style>

    .my-padding {
      padding: 10px 0;
    }

    .my-dark {
      background-color: #f5f5f5;
    }

    .footer {
      background: #111;
      font-size: 0.9em;
      position: relative;
      clear: both;
    }
    .my-white {
      color: #ffffff;
    }

    body {
      margin: 0;
    }
    #progress {
      height: 2px;
      background-color: #b91f1f;
      transition: opacity 500ms linear;
    }
    #progress.done{
      opacity: 0;
    }
  </style>
</head>
<body>
<div id="progress"></div>
<!--导航栏开始-->
<nav class="navbar navbar-inverse my-nav">
  <div class="container">
    <!-- 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="http://www.oldboyedu.com/"><strong>OldBoy Edu</strong></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><a href="#">Python学院<span class="sr-only">(current)</span></a></li>
        <li><a href="#">Linux学院</a></li>
        <li><a href="http://luffy.oldboyedu.com">路飞学城</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">好好学习</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
             aria-expanded="false">联系我们<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Jason</a></li>
            <li><a href="#">Sean</a></li>
            <li><a href="#">Oscar</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Jason</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<!--导航栏结束-->


<div class="container">

  <div class="jumbotron">
    <div id="i1" class="container">
      <h1 class="c1">Jason</h1>
      <h1 class="c1">带你学习jQuery</h1>
      <p id="p1"><a class="btn btn-primary btn-lg" href="https://q1mi.github.io/Blog/2017/07/10/about_jQuery/"
                    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>Jason</td>
          <td>学习</td>
          <td>
            <button class="btn btn-warning">编辑</button>
            <button class="btn btn-danger">删除</button>
          </td>
        </tr>
        <tr>
          <th>2</th>
          <td>Oscar</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>Egon</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">
                学习真的太TM有意思了
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <hr>

  <div>
    <i class="fa fa-hand-pointer-o fa-lg fa-rotate-90" aria-hidden="true"></i>
    <a class="btn btn-success" href="http://jquery.cuishifeng.cn/">jQuery中文API指南</a>
  </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>

<div class="my-dark my-padding">
  <div class="container">
    <div class="col-sm-8 my-center">
      <p>写很少的代码，做很多的事。</p>
      <h4>所以说</h4>
      <p>学好jQuery真的很重要，学好jQuery真的很重要，学好jQuery真的很重要。</p>
    </div>
  </div>
</div>

<div class="footer">
  <div class="row">
    <div class="col-md-12 text-center">
      <span class="my-white">&copy;2020 Jason</span>
    </div>
  </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

答案

$('#i1')
r.fn.init [div#i1.container]
           
$('h2')
r.fn.init [h2, prevObject: r.fn.init(1)]

$('input')
r.fn.init(9) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]
              
$('.c1')
r.fn.init(2) [h1.c1, h1.c1, prevObject: r.fn.init(1)]

$('.btn-default')
r.fn.init [button#btnSubmit.btn.btn-default, prevObject: r.fn.init(1)]
           
$('.c1,h2')
r.fn.init(3) [h1.c1, h1.c1, h2, prevObject: r.fn.init(1)]

$('.c1,#p3')
r.fn.init(3) [h1.c1, h1.c1, p#p3.divider, prevObject: r.fn.init(1)]
              
$('.c1,.btn')
r.fn.init(11) [h1.c1, h1.c1, a.btn.btn-primary.btn-lg, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button#btnSubmit.btn.btn-default, a.btn.btn-success, prevObject: r.fn.init(1)]
               
$('form').find('input')
r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]
              
$('label input')
r.fn.init(6) [input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]
              
$('label+input')
r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]
              
$('#p2~li')
r.fn.init(8) [li, li, li, li, li, li, li, li, prevObject: r.fn.init(1)]

$('#f1 input:first')
r.fn.init [input#exampleInputEmail1.form-control, prevObject: r.fn.init(1)]
           
$('#my-checkbox input:last')
r.fn.init [input, prevObject: r.fn.init(1)]

$('#my-checkbox input[checked!="checked"]')
r.fn.init(3) [input, input, input, prevObject: r.fn.init(1)]0: input1: input2: inputlength: 3prevObject: r.fn.init [document]__proto__: Object(0)

$('label:has("input")')
r.fn.init(6) [label, label, label, label, label, label, prevObject: r.fn.init(1)]

标签操作

标签操作的范围包括：标签CSS样式、类属性的增删改查、窗口位置、标签尺寸相关、标签本文内容的增删改查、input数据值、属性相关、标签节点的增删改查等。

类的操作

addClass(name)
removeClass(name)
hasClass(name)             // 判断是否有class，返回不布尔值
toggleClass(name)

CSS操作

jQuery具有非常强大的链式操作，即每次调用jquery对象的方法后，依然会返回当前jQuery对象，可以继续调用对象的方法。

$('p#d1').css('color', 'red')

位置操作

位置操作的内容主要是获取浏览器窗口页面的滚动位置、标签相对位置等。

offset()                    // 相对浏览器窗口，x,y方向偏移量
position()                    // 相对父级标签，x,y方向偏移量

$(window).scrollTop()            // 获取当前浏览器窗口顶部位置
$(window).scrollTop(300)        // 设置当前浏览器窗口顶部位置
scrollLeft()                // 浏览器窗口左右位置

尺寸操作

尺寸操作，主要包括标签的三个尺寸参数：文本的宽高、文本+内填充的宽高、文本+内填充+边框的宽高。

$('p').height()               // 文本宽高
$('p').weight()

$('p').innerHeight()                 // 文本+padding
$('p').innerWidth()

$('p').outerHeight()                 // 文本+padding+border
$('p').outerWidth()

文本操作

文本操作，获取标签内的文本内容，设置修改标签内文本内容。括号内传参是设置，不传参是获取文本。

$('p').text()                   // 类似js的innerText
$('p').html()                   // 类似js的innerHTML

input值

$(':text').val()          // 获取input输入框内用户输入的value值,当存在多个输入框时获取第一个的value值

$(':file')[0].files[0]              // 获取第一个文件输入框内的第一个文件对象

属性操作

js中                                 jQuery
setAttribute()                      attr(name,value)
getAttribute()                      attr(name)
removeAttribute()                   removeAttr(name)

标签属性的增删改查操作

attr(name)               // 获取jquery对象的标签属性值
attr(name, value)           // 修改，增加对象属性及属性值
removeAttr(name)           // 移除对象的某个属性
// 为对象设置属性
$pEle.attr('class','c1');
/

使用prop()查看是否被选中，针对用户选择的标签，checkbox、radio、option，返回布尔值。

$('#d2').prop('checked')           // 查看
false

$('#d3').prop('checked', true)       // 设置
w.fn.init [input#d3]

标签节点操作

在标签节点中，手动增加新节点、或删除老节点。

标签$('<p>')            // 创建p

$('#d1').append($pEle)      // $('#d1')尾部追加节点pEle
$pEle.appendTo($('#d1'))     // pEle追加到节点$('#d1')的尾部
           
prepend()                  // 头部添加
prependTo()
  
after()                  // 标签后面插入
insertAfter()    
        
before()                // 标签前面插入
insertBefore()

$('#d1').remove()               // 将标签从DOM树中删除           
$('#d1').empty()                // 清空标签内部所有的内容

事件

jQuery绑定事件的两种方式：

// 第一种
    $('#d1').click(function () {
            alert('别说话 吻我')
    });
  
// 第二种(功能更加强大 还支持事件委托)
    $('#d2').on('click',function () {
            alert('借我钱买草莓 后面还你')
    })

this对象

jquery中的this对象：当前被操作的标签对象，通过$(this)转成jquery对象。

clone事件（克隆事件）

clone()方法默认情况下只克隆html和css不克隆事件，括号内使用true可以克隆事件。

<button id="d1">屠龙宝刀，点击就送</button>

<script>
    $('#d1').on('click',function () {
        // console.log(this)  // this指代是当前被操作的标签对象
        // $(this).clone().insertAfter($('body'))  // clone默认情况下只克隆html和css 不克隆事件
        $(this).clone(true).insertAfter($('body'))  // 括号内加true即可克隆事件

    })
</script>

左侧菜单

<script>
    $('.title').click(function () {
        // 先给所有的items加hide
        $('.items').addClass('hide')
        // 然后将被点击标签内部的hide移除
        $(this).children().removeClass('hide')
    })
</script>
<!--尝试用一行代码搞定上面的操作-->

回到顶部：scroll

<script>
    $(window).scroll(function () {
        if($(window).scrollTop() > 300){
            $('#d1').removeClass('hide')
        }else{
            $('#d1').addClass('hide')
        }
    })
</script>

自定义登录校验focus事件

# 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
<p>username:
    <input type="text" id="username">
    <span style="color: red"></span>
</p>
<p>password:
    <input type="text" id="password">
    <span style="color: red"></span>
</p>
<button id="d1">提交</button>

<script>
    let $userName = $('#username')
    let $passWord = $('#password')
    $('#d1').click(function () {
        // 获取用户输入的用户名和密码 做校验
        let userName = $userName.val()
        let passWord = $passWord.val()
        if (!userName){
            $userName.next().text("用户名不能为空")
        }
        if (!passWord){
            $passWord.next().text('密码不能为空')
        }
    })
    $('input').focus(function () {
        $(this).next().text('')
    })
</script>

input事件：实时监控

<input type="text" id="d1">

<script>
    $('#d1').on('input',function () {
        console.log(this.value)  
    })
</script>

<!DOCTYPE html>
<html lang="en">
<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>实时监听input输入值变化</title>
</head>
<body>
<input type="text" id="i1">

<script src="jquery-3.2.1.min.js"></script>
<script>
  /*
  * oninput是HTML5的标准事件
  * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化，
  * 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发
  * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代
  * 使用jQuery库的话直接使用on同时绑定这两个事件即可。
  * */
  $("#i1").on("input propertychange", function () {
    alert($(this).val());
  })
</script>
</body>
</html>

input值变化事件

hover事件：鼠标悬浮

hover包含两个事件：进入悬浮和离开；当hover内只有只有一个函数时，两次事件都执行该函数，有两个函数时分别执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>苍茫的天涯是我的哎，绵绵的青山脚下一片海！</p>

<script src="jQuery-3.3.1.js">
</script>
<script>
    $('p').hover(
        function () {
            alert('来啦，老弟')
        },
        function () {
            alert('慢走哦～')
        }
    )
</script>
</body>
</html>

键盘按键按下事件

keydown和keyup事件组合示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>


<table border="1">
  <thead>
  <tr>
    <th>#</th>
    <th>姓名</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td><input type="checkbox"></td>
    <td>Egon</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Alex</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Yuan</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>EvaJ</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><input type="checkbox"></td>
    <td>Gold</td>
    <td>
      <select>
        <option value="1">上线</option>
        <option value="2">下线</option>
        <option value="3">停职</option>
      </select>
    </td>
  </tr>
  </tbody>
</table>

<input type="button" id="b1" value="全选">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反选">


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

    var flag = false;
    // shift按键被按下的时候
    $(window).keydown(function (event) {
        console.log(event.keyCode);
        if (event.keyCode === 16){
            flag = true;
        }
    });
    // shift按键被抬起的时候
    $(window).keyup(function (event) {
        console.log(event.keyCode);
        if (event.keyCode === 16){
            flag = false;
        }
    });
    // select标签的值发生变化的时候
    $("select").change(function (event) {
        // 如果shift按键被按下，就进入批量编辑模式
        // shift按键对应的code是16
        // 判断当前select这一行是否被选中
        console.log($(this).parent().siblings().first().find(":checkbox"));
        var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked");
        console.log(isChecked);
        if (flag && isChecked) {
            // 进入批量编辑模式
            // 1. 取到当前select选中的值
            var value = $(this).val();
            // 2. 给其他被选中行的select设置成和我一样的值
            // 2.1 找到那些被选中行的select
            var $select = $("input:checked").parent().parent().find("select")
            // 2.2 给选中的select赋值
            $select.val(value);
        }
    });
</script>
</body>
</html>

 

阻止后续事件

一个事件源绑定多个事件时，可以通过手动终止的方式，阻止后续默认的其他事件触发。

<script>
    $('#d2').click(function (e) {
        $('#d1').text('宝贝 你能看到我吗?')  
        // return false;          // 阻止标签后续事件的执行 方式1
        e.preventDefault()       // 阻止标签后续事件的执行 方式2
    })
</script>

阻止事件冒泡（冒泡事件）

子标签和父标签绑定了一个相同的事件，子标签的事件触发后会进而触发父标签的事件，有两种方式阻止这种事件冒泡行为。

<script>
        $('#d1').click(function () {
            alert('div')
        })
        $('#d2').click(function () {
            alert('p')
        })
        $('#d3').click(function (e) {
            alert('span')
            // 阻止事件冒泡的方式1  （常用方式）
            // return false
            // 阻止事件冒泡的方式2
            // e.stopPropagation()
        })
</script>

事件委托

需求：普通情况下，给页面上已经存在的标签绑定的事件无法作用在，后来新增的同类标签。也就是说，给页面上所有的button标签绑定一个click事件，只有当前页面上已经存在的button标签才有click事件，后来再通过js动态添加的button标签无法获得这个click事件。

解决办法：事件委托。可以这样理解：将事件交给一个角色来处理，而不是具体的人。换句话说，将指定的任务交给这个岗位上的员工处理，而不是具体的员工A或者员工B。

<button>是兄弟，就来砍我!!!</button>

<script>
    // 给页面上所有的button标签绑定点击事件
    // $('button').click(function () {  // 无法影响到动态创建的标签
    //     alert(123)
    // })

    // 事件委托     
    $('body').on('click','button',function () {
        alert(123)  // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
    })
</script>

页面加载

# 等待页面加载完毕再执行代码
window.onload = function(){
  // js代码
}

"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
  // js代码
})
# 第二种
$(function(){
  // js代码
})
# 第三种
"""直接写在body内部最下方"""

动画效果

$('#d1').hide(5000)              // 5s内隐藏
$('#d1').show(5000)              // 显示
$('#d1').slideUp(5000)           // 上翻
$('#d1').slideDown(5000)         // 下翻
$('#d1').fadeOut(5000)           // 淡出
$('#d1').fadeIn(5000)            // 淡入
$('#d1').fadeTo(5000,0.4)        // 淡出到...     

补充：

each（）

each(),封装了for循环的功能

# each()， 循环处理每个子元素
// 方式1，类似对象调用自己的绑定方法，可以接收两个参数，
$('div').each(function(index, obj){console.log(index,obj)})


# 方式2， 类似类调用对象的绑定方法，需要传一个对象
$.each([111,222,333], function(index, obj){console.log(index,obj)})

# 第一种方式
$('div')
w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$('div').each(function(index){console.log(index)})
VM181:1 0
VM181:1 1
VM181:1 2
VM181:1 3
VM181:1 4
VM181:1 5
VM181:1 6
VM181:1 7
VM181:1 8
VM181:1 9

$('div').each(function(index,obj){console.log(index,obj)})
VM243:1 0 <div>​1​</div>​
VM243:1 1 <div>​2​</div>​
VM243:1 2 <div>​3​</div>​
VM243:1 3 <div>​4​</div>​
VM243:1 4 <div>​5​</div>​
VM243:1 5 <div>​6​</div>​
VM243:1 6 <div>​7​</div>​
VM243:1 7 <div>​8​</div>​
VM243:1 8 <div>​9​</div>​
VM243:1 9 <div>​10​</div>​

# 第二种方式
$.each([111,222,333],function(index,obj){console.log(index,obj)})
VM484:1 0 111
VM484:1 1 222
VM484:1 2 333
(3) [111, 222, 333]
"""
有了each之后 就无需自己写for循环了 用它更加的方便
"""

data（）

data(),能够让标签帮我们存储数据，并且用户肉眼看不见（不会加到html上）

# data， 给每个子元素添加属性（对用户隐藏的）

$('div').data(attr_name, attr_value)        // 添加

$('div').first().removeData(attr_name)        // 移除

"""
能够让标签帮我们存储数据 并且用户肉眼看不见
"""
$('div').data('info','回来吧，我原谅你了!')
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
               
$('div').first().data('info')
"回来吧，我原谅你了!"
$('div').last().data('info')
"回来吧，我原谅你了!"
               
$('div').first().data('xxx')
undefined
$('div').first().removeData('info')
w.fn.init [div#d1, prevObject: w.fn.init(10)]
           
$('div').first().data('info')
undefined
$('div').last().data('info')
"回来吧，我原谅你了!"

jQuery选择器转换JavaScript对象（补充）

获取jQuery选择器对象，并绑定点击事件

$('#btn').click(function () {    
        console.log(this.value);
});

用jQuery方式获取JavaScript对象，并绑定点击事件（两种方式）

$('#btn') 对象转换为js对象：
   1. $('#btn')[0]   
   2.$('#btn').get(0)

如：

// 方式一
$('#btn')[0].onclick=function () {      
            console.log(this.value);
 };

// 方式二
$('#btn').get(0).onclick=function () {
        console.log(this.value);
}

jQuery对象转成DOM对象：

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

如：

var $v =$("#v") ; //jQuery对象
var v=$v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

如：

var $v=$("#v"); //jQuery对象
 
var v=$v.get(0); //DOM对象
 
alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象:

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)

如：

var v=document.getElementById("v"); //DOM对象
 
var $v=$(v); //jQuery对象