jQuery

jQuery介绍

　　jQuery内部封装了原生的js代码(还额外添加了很多的功能)，能够让你通过书写更少的代码，完成js操作，它类似于python里面的模块，叫“类库”。

jQuery优势

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

2、jQuery的宗旨：
　　　write less do more（让你用更少的代码完成更多的事情）
3、jQuery在使用的时候需要导入，但是它的文件非常的小(几十KB) 基本不影响网络速度

jQuery作用：

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

jQuery版本

• 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
• 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
• 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

　　维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。

针对导入问题

# 1 文件下载到了本地 如何解决多个文件反复书写引入语句的代码
	可以借助于pycharm自动初始化代码功能完成自动添加
  	配置
    	编辑
      	file and code template
  """我不想下载jQuery文件 能不能使用呢？"""
  
# 2 直接引入jQuery提供的CDN服务(基于网络直接请求加载)
	CDN:内容分发网络
  	CDN有免费的也有收费的
    前端免费的cdn网站:
      	bootcdn
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  """你的计算机必须要有网络"""
  
  
# jQuery基本语法
	jQuery(选择器).action()
  秉持着jQuery的宗旨 jQuery简写	$
  jQuery()  === $()

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

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

先学如何查找标签

基本选择器

// 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对象如何变成标签对象
$('#d1')[0]
<div id=​"d1">​…​</div>​
document.getElementById('d1')
<div id=​"d1">​…​</div>​
           
// 标签对象如何转jQuery对象
$(document.getElementById('d1'))           
w.fn.init [div#d1]

组合选择器/分组与嵌套

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

基本筛选器

$('ul li')
w.fn.init(10) [li, li, li, li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]
               
$('ul li:first')  # 大儿子 ul的第一个li
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
               
$('ul li:last')  # 小儿子 ul的最后一个li
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
               
$('ul li:eq(2)')		# 放索引 从li的数组里拿到索引是2的
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
               
$('ul li:even')  # 偶数索引 0包含在内
w.fn.init(5) [li, li, li, li.c1, li#d1, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li#d1length: 5prevObject: w.fn.init [document]__proto__: Object(0)
              
$('ul li:odd')  # 奇数索引
w.fn.init(5) [li, li, li, li, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li4: lilength: 5prevObject: w.fn.init [document]__proto__: Object(0)
              
$('ul li:gt(2)')  # 大于索引
w.fn.init(7) [li, li, li, li.c1, li, li#d1, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li5: li#d16: lilength: 7prevObject: w.fn.init [document]__proto__: Object(0)
              
$('ul li:lt(2)')  # 小于索引
w.fn.init(2) [li, li, prevObject: w.fn.init(1)]0: li1: lilength: 2prevObject: w.fn.init [document]__proto__: Object(0)
              
$('ul li:not("#d1")')  # 移除满足条件的标签
w.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: w.fn.init(1)]
         
$('div')
w.fn.init(2) [div, div, prevObject: w.fn.init(1)]
$('div:has("p")')  # 选取出包含一个或多个标签在内的标签
w.fn.init [div, prevObject: w.fn.init(1)]

属性选择器

$('[username]')
w.fn.init(3) [input, input, p, prevObject: w.fn.init(1)]

$('[username="jason"]')
w.fn.init [input, prevObject: w.fn.init(1)]

$('p[username="egon"]')
w.fn.init [p, prevObject: w.fn.init(1)]

$('[type]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]

$('[type="text"]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]

表单筛选器

$('input[type="text"]')
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
                
$('input[type="password"]')
w.fn.init [input, prevObject: w.fn.init(1)]

$(':text')  # 等价于上面第一个
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
                
$(':password')  # 等价于上面第二个
w.fn.init [input, prevObject: w.fn.init(1)]


:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...

表单对象属性
:enabled
:disabled
:checked
:selected
"""特殊情况"""
$(':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')  # 它不会 只拿selected
w.fn.init [option, prevObject: w.fn.init(1)]
$('input:checked')  # 自己加一个限制条件
w.fn.init [input, prevObject: w.fn.init(1)]

筛选器方法

$('#d1').next()  # 同级别下一个
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span#d1]__proto__: Object(0)
$('#d1').nextAll()
w.fn.init(5) [span, div#d2, span, span, span.c1, prevObject: w.fn.init(1)]0: span1: div#d22: span3: span4: span.c1length: 5prevObject: w.fn.init [span#d1]__proto__: Object(0)
$('#d1').nextUntil('.c1')  # 同级别下面的所有，直到指定对象之前的（不包括指定的对象）
w.fn.init(4) [span, div#d2, span, span, prevObject: w.fn.init(1)]0: span1: div#d22: span3: spanlength: 4prevObject: w.fn.init [span#d1]__proto__: Object(0)
              
              
$('.c1').prev()  # 类似，同层级上面一个
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span.c1, prevObject: w.fn.init(1)]__proto__: Object(0)
$('.c1').prevAll()
w.fn.init(5) [span, span, div#d2, span, span#d1, prevObject: w.fn.init(1)]
$('.c1').prevUntil('#d2')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
 
$('#d2').siblings()  # 同级别上下所有              
              
$('#d3').parent()  # 第一级父标签
w.fn.init [p, prevObject: w.fn.init(1)]0: plength: 1prevObject: w.fn.init [span#d3]__proto__: Object(0)
$('#d3').parent().parent()
w.fn.init [div#d2, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent()
w.fn.init [body, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent()
w.fn.init [html, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent()
w.fn.init [document, prevObject: w.fn.init(1)]
$('#d3').parent().parent().parent().parent().parent().parent()
w.fn.init [prevObject: w.fn.init(1)]
$('#d3').parents() # 所有的父级标签，直到html
w.fn.init(4) [p, div#d2, body, html, prevObject: w.fn.init(1)]
$('#d3').parentsUntil('body') # body标签以下的父级标签
w.fn.init(2) [p, div#d2, prevObject: w.fn.init(1)]
              
              
$('#d2').children()  # 所有的子标签
                                                    
$('div p')
# 等价           
$('div').find('p')  # find从某个区域内筛选出想要的标签 
              
              
"""下述两两等价"""
$('div span:first')
w.fn.init [span, prevObject: w.fn.init(1)]
$('div span').first()
w.fn.init [span, prevObject: w.fn.init(3)]0: spanlength: 1prevObject: w.fn.init(3) [span, span#d3, span, prevObject: w.fn.init(1)]__proto__: Object(0)
                                                                                    
$('div span:last')
w.fn.init [span, prevObject: w.fn.init(1)]
$('div span').last()
                                                                                    
w.fn.init [span, prevObject: w.fn.init(3)]
$('div span:not("#d3")')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div span').not('#d3')
w.fn.init(2) [span, span, prevObject: w.fn.init(3)]

操作标签

# 操作类
"""
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]

事件

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

• 克隆事件

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

• 自定义模态框

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

• 左侧菜单

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

• 返回顶部

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

• 自定义登陆校验

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

• hover事件

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

• 键盘按键按下事件

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