jQuery

一、jq简介

jQuery内部封装了原生的js代码(还额外添加了很多的功能)，能够通过书写更少的代码 完成js操作 ，类似于python里面的模块 在前端模块不叫模块 叫 “类库”，兼容多个浏览器的 ，在使用jQuery的时候就不需要考虑浏览器兼容问题

jQuery文件下载，压缩后的容量更小，未压缩的是源码

1 文件下载到了本地 如何解决多个文件反复书写引入语句的代码
可以借助于pycharm自动初始化代码功能完成自动添加 ：配置=>编辑=>file and code template

2、直接引入jQuery提供的CDN服务(基于网络直接请求加载)
CDN:内容分发网络
CDN有免费的也有收费的
前端免费的cdn网站:bootcdn

缺点：计算机要有网络

src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

pycharm自动导入

jq的基本语法

jQuery(属性).action()
 
// 简写  jQuery写成$
$(属性).action()
 
//代码对比
//js
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
 
// jQuery操作标签
$('p').css('color','blue')
 

二、选择器

1、基本选择器

        // id选择器
        $('#d1').css('color','red')
 
        // class选择器
        $('.d1').css('color','red')
 
        // 标签选择器
        $('div').css('color','red')
 
		//注意
        // jQuery对象如何变成标签对象
        $('#d1')[0]
        <div id=​"d1">​…​</div>​
 
        document.getElementById('d1')
        <div id=​"d1">​…​</div>​
 
        // 标签对象如何转jQuery对象
        $(document.getElementById('d1'))
        w.fn.init [div#d1]

2、组合选择器

// 标签
$('div')
 
// 类为c1的div
$('div.c1')
 
//id为d1的div
$('div#d1')
 
// 可以拿到所有的，html head·····，一般不使用
$('*')
 
               
$('#d1,.c1,p')  // 并列+混用
// [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)]

3、基本筛选器

// 获取所有的li
$('ul li')
 
//获取第一个li              
$('ul li:first') 
 
//获取最后一个li                 
$('ul li:last')  
 
// 获取索引为2的li               
$('ul li:eq(2)')		
 
// 获取偶数的li              
$('ul li:even')  
 
// 获取奇数的li              
$('ul li:odd') 
 
// 大于，获取索引大于2的li              
$('ul li:gt(2)')  
 
// 小于索引 获取索引小于2的li             
$('ul li:lt(2)') 
 
//移除满足条件的标签              
$('ul li:not("#d1")')  
 
         
$('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]')
 
$('[username="jason"]')
 
$('p[username="egon"]')
 
 
$('[type]')
 
$('[type="text"]')
 

3、表单选择器

$('input[type="text"]')
 
$('input[type="password"]')
 
 
$(':text')  //简写 等价于上面第一个
 
$(':password')  //简写 等价于上面第二个
 
 
 
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...
 
表单对象属性
:enabled
:disabled
:checked
:selected
 
//注意注意
$(':checked')  // 它会将checked和selected都拿到
 
$(':selected')  // 它不会 只拿selected
 
$('input:checked')  // 自己加一个限制条件
 

4、筛选器方法

//同级别下一个
$('#d1').next()  
 
//拿到所有的
$('#d1').nextAll()
 
 
//不包括最后一个 从id为1到c1
$('#d1').nextUntil('.c1')  
 
              
// 上一个              
$('.c1').prev()  
 
//所有的
$('.c1').prevAll()
 
//不包括最后一个
$('.c1').prevUntil('#d2')
 
// 第一级父标签，可以一直查，直到document就没有了           
$('#d3').parent()  
 
$('#d3').parent().parent()
 
$('#d3').parent().parent().parent()
 
$('#d3').parent().parent().parent().parent()
 
$('#d3').parent().parent().parent().parent().parent()
 
 
// 直接查所有的父亲，只到html
$('#d3').parents()
 
$('#d3').parentsUntil('body')
 
              
// 儿子              
$('#d2').children()  
 
// 同级别上下所有
$('#d2').siblings()  
              
              
// find从某个区域内筛选出想要的标签  这两个相等             
$('div p')         
$('div').find('p')  
              
              
"""下述两两等价"""
$('div span:first')
$('div span').first()
 
                                                                                    
$('div span:last')
$('div span').last()
                                                                                    
 
$('div span:not("#d3")')
$('div span').not('#d3')
 

三、操作标签

​ js操作类 jQuery操作类

classList.add() addClass()
classList.remove() removeClass()
classList.contains() hasClass()
classList.toggle() toggleClass()

1、样式操作

jQuery的链式操作:使用jQuery可以做到一行代码操作很多标签

jQuery对象调用jQuery方法之后返回的还是当前jQuery对象,也就可以继续调用其他方法

<p>111</p>
<p>222</p>
$('p').first().css('color','red').next().css('color','green')

2、位置操作

offset()  // 相对于浏览器窗口
position()  // 相对于父标签
 
scrollTop() //滚动屏幕
 
$(window).scrollTop()  // 括号内不加参数就是获取
 
$(window).scrollTop(0)  // 加了参数就是设置
 
$(window).scrollTop(500)
 
scrollLeft()

尺寸

$('p').height()  // 文本
$('p').width()
 
$('p').innerHeight()  // 文本+padding
$('p').innerWidth()
 
$('p').outerHeight()  // 文本+padding+border
$('p').outerWidth()
 

3、文本操作

innerText text() 括号内不加参数就是获取加了就是设置
innerHTML html()

$('div').text('离离原上草')
 
$('div').html('离离原上草')
 
// 无法识别html标签
$('div').text('<h1>离离原上草</h1>')
 
// 可以识别html标签
$('div').html('<h1>离离原上草</h1>')
 

获取值操作，对应input框

js :.value

jQuery:.val()

$('#d1').val()
$('#d1').val('520快乐')  // 括号内不加参数就是获取加了就是设置
 
$('#d2')[0].files[0] //拿到文件对象需要转换为js

4、属性操作

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

在用变量存储对象的时候 js中推荐使用
XXXEle 标签对象
jQuery中推荐使用
$XXXEle jQuery对象

let $pEle = $('p')
 
$pEle.attr('id') // 获取"d1"
 
$pEle.attr('class')
$pEle.attr('class','c1')
 
$pEle.attr('id','id666') // 添加
 
$pEle.attr('password','jason123') // 添加
 
$pEle.removeAttr('password') //移除
 
//对于标签上有的能够看到的属性和自定义属性用attr,对于返回布尔值比如checkbox radio option是否被选中用prop
 
$('#d2').prop('checked')
 
$('#d2').prop('checked')
 
$('#d3').prop('checked',true) // 设置值，会自动选中
 
$('#d3').prop('checked',false)
 

5、文档处理

js jQuery
createElement('p') $('

')
appendChild() append()

let $pEle = $('<p>')
$pEle.text('你好啊')
$pEle.attr('id','d1')  
 
// 内部尾部追加  添加方式不一样，但是效果是一样的
$('#d1').append($pEle)  
$pEle.appendTo($('#d1')) 
 
//添加方式不一样，但是效果是一样的
$('#d1').prepend($pEle)  // 内部头部追加
$pEle.prependTo($('#d1'))
 
 // 放在某个标签后面         
$('#d2').after($pEle) 
$pEle.insertAfter($('#d1'))
 
//  放在某个标签前面
$('#d1').before($pEle)
$pEle.insertBefore($('#d2'))
 
// 将标签从DOM树中删除
$('#d1').remove()  
 
// 清空标签内部所有的内容           
$('#d1').empty() 
 

四、jQuery事件

1、绑定事件

// 第一种
    $('#d1').click(function () {
            alert('hello')
    });
  
// 第二种(功能更加强大 还支持事件委托)
    $('#d2').on('click',function () {
            alert('hello')
    })

克隆事件

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

2、阻止后续事件执行

<script>
    $('#d2').click(function (e) {
        $('#d1').text('how are you?')
        // 阻止标签后续事件的执行 方式1
        // return false
        // 阻止标签后续事件的执行 方式2
        // e.preventDefault()
    })
</script>

3、阻止事件冒泡

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

4、事件委托

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

5、页面加载

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