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内部最下方"""

标签：jQuery,span,标签,pEle,div,d1
来源： https://www.cnblogs.com/xionghuan01/p/16589159.html