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