jQuery操作标签、绑定事件，补充

* jQuery操作标签
* jQuery绑定事件
* jQuery补充知识点


* ### jQuery练习题

  ```js
  $('#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)]
  ```

* ### 操作标签

  ```python
  # 操作类
  """
  js版本                                        jQuery版本
  classList.add()                             addClass()
  classList.remove()                        removeClass()
  classList.contains()                   hasClass()
  classList.toggle()                        toggleClass()
  """
  
  # css操作
  <p>111</p>
  <p>222</p>
  """一行代码将第一个p标签变成红色第二个p标签变成绿色"""
  $('p').first().css('color','red').next().css('color','green')
  # jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
  # jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法
  class MyClass(object):
      def func1(self):
          print('func1')
          return self
  
      def func2(self):
          print('func2')
          return self
  obj = MyClass()
  obj.func1().func2()
  
  # 位置操作
  offset()  # 相对于浏览器窗口
  position()  # 相对于父标签
  
  scrollTop()     # 需要了解
   $(window).scrollTop()
    0
    $(window).scrollTop()
    969
    $(window).scrollTop()  # 括号内不加参数就是获取
    1733
    $(window).scrollTop(0)  # 加了参数就是设置
    n.fn.init [Window]
    $(window).scrollTop(500)
    n.fn.init [Window]
  scrollLeft()
  
  # 尺寸
  $('p').height()  # 文本
  20
  $('p').width()
  1670
  $('p').innerHeight()  # 文本+padding
  26
  $('p').innerWidth()
  1674
  $('p').outerHeight()  # 文本+padding+border
  26
  $('p').outerWidth()
  1674
  
  
  # 文本操作
  """
  操作标签内部文本
  js                                 jQuery
  innerText                         text()  括号内不加参数就是获取加了就是设置
  innerHTML                         html()
  
  $('div').text()
  "
      
          有些话听听就过去了，不要在意，都是成年人!
      
  "
  $('div').html()
  "
      <p>
          有些话听听就过去了，不要在意，都是成年人!
      </p>
  "
  $('div').text('你们都是我的大宝贝')
  w.fn.init [div, prevObject: w.fn.init(1)]
  $('div').html('你个臭妹妹')
  w.fn.init [div, prevObject: w.fn.init(1)]
  $('div').text('<h1>你们都是我的大宝贝</h1>')
  w.fn.init [div, prevObject: w.fn.init(1)]
  $('div').html('<h1>你个臭妹妹</h1>')
  w.fn.init [div, prevObject: w.fn.init(1)]
  """
  # 获取值操作
  """
  js                                       jQuery
  .value                                 .val()
  """
  $('#d1').val()
  "sasdasdsadsadad"
  $('#d1').val('520快乐')  # 括号内不加参数就是获取加了就是设置
  
  w.fn.init [input#d1]
  $('#d2').val()
  "C:fakepath1_测试路由.png"
  $('#d2')[0].files[0]  # 牢记两个对象之间的转换
  File {name: "01_测试路由.png", lastModified: 1557043083000, lastModifiedDate: Sun May 05 2019 15:58:03 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 28733, …}
             
             
  # 属性操作
  """
  js中                                               jQuery
  setAttribute()                                 attr(name,value)
  getAttribute()                                 attr(name)
  removeAttribute()                               removeAttr(name)
  
  在用变量存储对象的时候 js中推荐使用  
   XXXEle       标签对象
  jQuery中推荐使用
   $XXXEle          jQuery对象
  """
  let $pEle = $('p')
  undefined
  $pEle.attr('id')
  "d1"
  $pEle.attr('class')
  undefined
  $pEle.attr('class','c1')
  w.fn.init [p#d1.c1, prevObject: w.fn.init(1)]
  $pEle.attr('id','id666')
  w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
  $pEle.attr('password','jason123')
  w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
  $pEle.removeAttr('password')
  w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]       
        
             
  """
  对于标签上有的能够看到的属性和自定义属性用attr
  对于返回布尔值比如checkbox radio option是否被选中用prop
  """
             
  $('#d3').attr('checked')
  "checked"
  $('#d2').attr('checked')
  undefined
  $('#d2').attr('checked')
  undefined
  $('#d4').attr('checked')
  undefined
  $('#d3').attr('checked')
  "checked"
  $('#d3').attr('checked','checked')  # 无效
  w.fn.init [input#d3]
             
             
  $('#d2').prop('checked')
  false
  $('#d2').prop('checked')
  true
  $('#d3').prop('checked',true)
  w.fn.init [input#d3]
  $('#d3').prop('checked',false)
  w.fn.init [input#d3]
             
             
  # 文档处理
  """
  js                                                      jQuery
  createElement('p')                              $('<p>')
  appendChild()                                        append()
  
  """
  let $pEle = $('<p>')
  $pEle.text('你好啊 草莓要不要来几个?')
  $pEle.attr('id','d1')          
  $('#d1').append($pEle)  # 内部尾部追加
  $pEle.appendTo($('#d1')) 
             
  $('#d1').prepend($pEle)  # 内部头部追加
  w.fn.init [div#d1]
  $pEle.prependTo($('#d1'))
  w.fn.init [p#d1, prevObject: w.fn.init(1)]
           
  $('#d2').after($pEle)  # 放在某个标签后面
  w.fn.init [p#d2]
  $pEle.insertAfter($('#d1'))
          
  $('#d1').before($pEle)
  w.fn.init [div#d1]
  $pEle.insertBefore($('#d2'))
  
  $('#d1').remove()  # 将标签从DOM树中删除
  w.fn.init [div#d1]
             
  $('#d1').empty()  # 清空标签内部所有的内容
  w.fn.init [div#d1]
  ```

### 事件

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

* 克隆事件

  ```html
  <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>
  ```

* 自定义模态框

  ```python
  """
  模态框内部本质就是给标签移除或者添加上hide属性
  """
  ```

* 左侧菜单

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

* 返回顶部

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

* 自定义登陆校验

  ```python
  # 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
  <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实时监控

  ```python
  <input type="text" id="d1">
  
  <script>
      $('#d1').on('input',function () {
          console.log(this.value)  
      })
  </script>
  ```

* hover事件

  ```python
  <script>
      // $("#d1").hover(function () {  // 鼠标悬浮 + 鼠标移开
      //     alert(123)
      // })
  
      $('#d1').hover(
          function () {
              alert('我来了')  // 悬浮
      },
          function () {
              alert('我溜了')  // 移开
          }
      )
  </script>
  ```

* 键盘按键按下事件

  ```html
  <script>
      $(window).keydown(function (event) {
          console.log(event.keyCode)
          if (event.keyCode === 16){
              alert('你按了shift键')
          }
      })
  </script>
  ```