标签：变化   分组   for   jquery操作   file   ios   前端入门   表单   窗口   

昨日内容回顾

• js事件

  # js绑定事件的两种方式
  ?
  # 自己独立的敲出来昨天的案例
  """
  1.开关灯
      pEle.classList.add()
      ...
  2.input框获取、失去焦点
      onfocus
      onblur
  3.计时器
      onclick
      js代码逻辑
  4.省市联动
      onchange文本域变化
      就记忆一个select
  """

   

• jQuery简介

  """
  内部封装了并且提供了额外功能的模块、框架
      类库
  ?
  兼容多个浏览器
  ?
  版本更新
      1.X
      2.X
      3.X     目前用的最多,但是不支持IE9之前的版本
  ?
  宗旨
      write less do more
  ?
  
  如何导入jQuery
  1.将文件下载到本地直接导入(压缩、未压缩)
          好处在于没有网也可以正常使用
          不好的地方在于需要重复书写，文件路径还要固定
          (pycharm模块功能 自动添加固定的代码
              配置
                  编辑
                      file and code template
                          html
                          py
          )
          
      2.CDN服务
          CDN的概念:内容分发网络
          参考网站:bootcdn
              前端相关的应用程序都有免费的cdn服务
          
          好处在于无需下载对应的文件，直接走网络请求使用
          不好的地方在于必须要有网
  ?
  基本语法结构
      jQuery().action()       === $().action()
  """

   

• jQuery选择器

  # 基本选择器
  $(‘#d1‘)
  $(‘.c1‘)
  $(‘span‘)
  """
  jQuery选择器拿到的都是jQuery对象(你可以看成是一个数组)
  ?
  
  
  重点
      jQuery对象和标签对象的区分
          jQuery >>> 标签对象
              $(‘#d1‘)[0]
          
          标签对象 >>> jQuery
              $(document.getElementById(‘d1‘))
      不同的对象之间调用的方法是不一样的，不能混用
  """
  ?
  
  
  # 组合、分组、嵌套
  $(‘div,span,p‘)
  $(‘#d1,.c1,div‘)
  $(‘div span‘)  # 后代
  $(‘div>span‘)    # 儿子
  $(‘div+span‘)  # 毗邻
  $(‘div~span‘)  # 弟弟
  ?
  ?
  # 基本筛选器
  """
  针对已经得到的结果进行二次筛选
  :first
  :last
  :eq(index)
  :even
  :odd
  :gt(index)
  :lt(index)
  :not
  :has  从后代元素中筛选
      $(‘div:has(".c1")‘)
  """
  ?
  # 属性选择器
  $(‘[username]‘)
  $(‘[username="jason"]‘)
  $(‘input[username="jason"]‘)
  ?
  # 表单筛选器
  $(‘input[type="text"]‘)
  $(‘:text‘)
  :text
  ...
  :file
  ?
    
  """
  特殊情况
      $(‘:checked‘)  拿到默认选中的checkbox和option
          $(‘input:checked‘)
      在书写表单筛选器的时候 如果前面可以加限制条件最好加一个
  """
  ?
  # 筛选器方法
  .next()
  .nextAll()
  .nextUntil()  # 不包含最后一个
  ?
  .prev()
  .prevAll()
  .prevUntil()  # 不包含最后一个
  ?
  .parent()
  .parents()
  .parentsUntil()  # 不包含最后一个
  ?
  .children()  # 儿子们
  .siblings()  # 兄弟 同级别上下所有
  ?
  $(‘div p‘)   ===   $(‘div‘).find(‘p‘)
  ?
  # 基本筛选器优化封装
  .first()
  .last()
  .not()
  .has()
  .eq()
  """
  选择器无论你用哪个都可以 只要能够实现需求就行
  """
  ?

   

今日内容概要

今天要把jQuery全部结束

• jQuery操作标签

• jQuery绑定事件

• jQuery补充知识点

• jQuery动画效果(了解)

• Bootstrap(前端框架)开头

今日内容详细

• jQuery练习题

  $(‘#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)]

   

• 操作标签

  # 操作类
  """
  js版本                                          jQuery版本
  classList.add()                                 addClass()
  classList.remove()                              removeClass()
  classList.contains()                            hasClass()
  classList.toggle()                              toggleClass()
  """
  ?
  
  # css操作
  111
  222
  """一行代码将第一个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()
  "
      
  
          有些话听听就过去了，不要在意，都是成年人!
      
  "
  $(‘div‘).text(‘你们都是我的大宝贝‘)
  w.fn.init [div, prevObject: w.fn.init(1)]
  $(‘div‘).html(‘你个臭妹妹‘)
  w.fn.init [div, prevObject: w.fn.init(1)]
  $(‘div‘).text(‘
  你们都是我的大宝贝
  ‘)
  w.fn.init [div, prevObject: w.fn.init(1)]
  $(‘div‘).html(‘
  你个臭妹妹
  ‘)
  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:\fakepath\01_测试路由.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‘)    $(‘
  ‘)
  appendChild()    append()
  ?
  """
  let $pEle = $(‘
  ‘)
  $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]

   

事件

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

克隆事件

"d1">屠龙宝刀，点击就送
?

自定义模态框

"""
模态框内部本质就是给标签移除或者添加上hide属性
"""
左侧菜单


返回顶部


自定义登陆校验

# 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
username:
    "text" id="username">
    "color: red">

password:
    "text" id="password">
    "color: red">

"d1">提交
?

input实时监控

"text" id="d1">
?

hover事件


键盘按键按下事件

前端入门08——jQuery标签&事件&动画效果

标签：变化   分组   for   jquery操作   file   ios   前端入门   表单   窗口   

原文地址：https://www.cnblogs.com/lucky-cat233/p/12925223.html