选择器,筛选器
用于获取DOM元素
用jQuery(" ")
或者$(" ")
选择器
// 按照 id 获取页面中的元素
const ele = jQuery('#box')
const ele = $('#box')
// 按照类名来选择
const eles = jQuery('.a')
const eles = $('.a')
//按照标签名
const lis = jQuery('li')
const lis = $('li')
//按照选择器
const eles = jQuery('ul > li')
const eles = $('ul > li')
特殊选择器
$("li:first")// 找到所有 li 中的第一个
$('li:last') // 找到所有 li 中的最后一个
$('li:eq(3)') // 找到所有 li 中索引为 3 的那个
$('li:odd') // 找到所有 li 中索引为 奇数 的
$('li:even') // 找到所有 li 中索引为 偶数 的
注意是索引
筛选器
jQuery 的筛选器就是在选择器选择到一组元素以后
对元素进行筛选,也可以对准确的某一个元素进行判断和获取
$('li').first()
//找到所有元素中的第一个
$('li').last()
$('li:eq(3)').next()
//找到某个元素的下一个兄弟元素
$('li:eq(3)').prev()
$('li:eq(3)').nextAll()
//找到某一个元素后面的所有兄弟元素
$('li:eq(3)').prevAll()
$('li:eq(3)').parent()
//找到某一个元素的父元素
$('li:eq(3)').parents()
$('li').parents().find('body')
// 在 li 的所有父级里面找到所有 body 标签
$('div').find('.box')
// 找到 div 标签下所有后代元素中所有类名为 box 的元素
属性操作
prop给元素添加本身已有的属性
// 给 div 元素添加一个 id 属性,值是 box
$('div').prop('id', 'box')
// 获取 div 的 id 属性
console.log($('div').prop('id'))
attr给元素添加自定义的属性
// 给 div 添加一个 index 属性,值是 1
$('div').attr('index', 1)
// 获取 div 的 index 属性
console.log($('div').attr('index'))
removeProp移除元素的某一个属性
// 移除元素自己本身的属性
$('div').removeProp('id')
// 移除元素的自定义属性
$('div').removeAttr('index')
操作元素的类名
判断某一个元素有没有某一个 class
$('div').hasClass('box')
// true 表示该元素有 box 类名,false 表示该元素没有 box 类名
给元素添加一个类名
$('div').addClass('box2')
// 给 div 元素添加一个 box2 类名
移除元素的类名
$('div').removeClass('box') // 移除 div 的 box 类名
切换元素类名
$('div').toggleClass('box3')
// 如果元素本身有这个类名就移除,本身没有就添加
操作元素的内容
给元素的innerHTML赋值
// 获取元素的 innerHTML
$('div').html()
//获取+给元素的 innerHTML 赋值
$(".fang").html("<li>fang</li>")
给元素的innerText赋值
// 给元素的 innerText 赋值
$('div').text('hello world')
// 获取元素的 innerText
$('div').text()
给元素的value赋值
// 给元素的 value 赋值
$('input').val('admin')
// 获取元素的 value 值
$('input').val()
操作样式
jQuery 操作元素的样式就是一个方法 css
// 给元素设置一个 css 样式
$('div').css('width', '100px')
// 获取元素的某一个样式
$('div').css('width')
// 给元素设置一组样式
$('div').css({
width: '100px',
height: '200px'
})
元素的宽高
获取,操作元素的宽和高.height .width
// 获取 div 元素内容位置的高,不包含 padding 和 border
$('div').height()
// 设置 div 内容位置的高为 200px
$('div').height(200)
// 获取 div 元素内容位置的宽,不包含 padding 和 border
$('div').width()
// 设置 div 内容位置的宽为 200px
$('div').width(200)
获取元素的内置宽和高.innerHeight
包含 padding 不包含 border
// 获取 div 元素内容位置的高,包含 padding 不包含 border
$('div').innerHeight()
// 获取 div 元素内容位置的宽,包含 padding 不包含 border
$('div').innerWidth()
获取元素的外置宽和高.overHeight
// 获取 div 元素内容位置的高,包含 padding 和 border
$('div').outerHeight()
// 获取 div 元素内容位置的高,包含 padding 和 border 和 margin
$('div').outerHeight(true)
// 获取 div 元素内容位置的宽,包含 padding 和 border
$('div').outerWidth()
// 获取 div 元素内容位置的高,包含 padding 和 border 和 margin
$('div').outerWidth(true)
元素位置
元素相对页面的位置offset
// 获取 div 相对页面的位置
$('div').offset() // 得到的是以一个对象 { left: 值, top: 值 }
// 给 div 设置相对页面的位置
$('div').offset({ left: 100, top: 100 })
// 获取定位到一个距离页面左上角 100 100 的位置
元素相对于父元素的偏移量.position
// 获取 div 相对于父元素的偏移量(定位的值)
$('div').position()
获取页面卷去的高度和宽度 .scrollTop(Left)
window.onscroll = function () {
//当浏览器滑动时
// 获取浏览器卷去的高度
console.log($(window).scrollTop())
}
window.onscroll = function () {
// 获取浏览器卷去的宽度
console.log($(window).scrollLeft())
}
元素事件
绑定事件的方法.on
根据传递不同的参数做不同的事情
1 直接绑定事件
on(事件类型,事件处理函数)
有隐式迭代。即元素集合内有多少元素,就会给多少元素绑定事件
// 给 button 按钮绑定一个点击事件
$('button').on('click', function () {
console.log('我被点击了')
})
若多个事件执行同一个函数,可以用空格隔开事件
2 事件委托的绑定
on(事件类型,选择器,事件处理函数)
把选择器元素委托给元素集合里面的元素
注意:选择器元素要是 元素集合内的 后代元素
原生js里,this指向事件源
jquery的this就是点击的那一个
$(".fang>ul").on("click","li",function(){
console.log(this)
})
//把li 的事件委托给ul做,只有点击li才反应?
3 事件委托的形式带上传递参数
on(事件类型,选择器,数据,事件处理函数)
4 on(事件类型,复杂数据类型,事件处理函数)
若复杂数据类型的位置上填的简单类型,就相当于把这个东西传给获取的元素??
若加上一个参数e,那么e.data={name:jack}
5 元素集合.on({ })
,隔开
没法传递参数和事件委托l
.one
和on样式一模一样
只能执行一次
- 要注意是一个ul下面的每个元素只能点一次,还是只有其中一个元素点一次,需要看是否是事件委托
off移除事件
$('button').off('click', handler)
trigger
// 当代码执行到这里的时候,会自动触发一下 button 的 click 事件
$('button').trigger('click')
hover
事件函数
如click()
选项卡
动画
基础动画
显示,隐藏,切换
toggle
// 给 div 绑定一个切换的动画
$('div').hide() // 元素本身是显示,那么就隐藏,本身是隐藏那么就显示
// 给 div 绑定一个显示的动画
// 接受三个参数
// $('div').show('毫秒', '速度', '回调函数')
$('div').toggle(1000, 'linear', function () {
console.log('动画执行完毕')
})
- hide,如果元素本身是 display none 的状态可以显示出来
- show,如果元素本身是 display block 的状态可以隐藏起来
后面都一样
自定义动画
在三个参数前,多了个animate
// 定义一个自定义动画
$('.show').click(function () {
$('div').animate({
width: 500,
height: 300
}, 1000, 'linear', function () {
console.log('动画运动完毕')
})
})
停止动画stop
// 立刻停止动画
$('div').stop() // 就停止再当前状态
立刻结束动画finish
不管在什么状态,直接跳到结束状态
$("div").finish()// 停止在动画结束状态
折叠动画(下拉动画)
思考:如何从底部拉出和收起在外面包一个盒子,给里面的盒子绝对定位,让bottom为0
渐隐渐现动画
通过opacity实现
$(".show").click(()=>{
$(".fang").fadeOut(2000)
})
fadeTo
综合动画
元素的节点操作
创建节点
内部插入元素
// 向 div 元素中插入一个 p 元素,放在最后
$('div').append($('<p></p>'))
// 把 p 元素插入到 div 中去,放在最后
$('<p>hello</p>').appendTo($('div'))
// 向 div 元素中插入一个 p 元素,放在最前
$('div').prepend($('<p></p>'))
// 把 p 元素插入到 div 中去,放在最前
$('<p>hello</p>').prependTo($('div'))
外部插入元素
// 在 div 的后面插入一个元素 p
$('div').after($('<p></p>'))
// 在 div 的前面插入一个元素 p
$('div').before($('<p></p>'))
// 把 p 元素插入到 div 元素的后面
$('div').insertAfter($('<p></p>'))
// 把 p 元素插入到 div 元素的前面
$('div').insertBefore($('<p></p>'))
替换元素
// 把 div 元素替换成 p 元素
$('div').replaceWith($('<p></p>'))
// 用 p 元素替换掉 div 元素
$('<p></p>').replaceAll($('div'))
删除元素
// 删除元素下的所有子节点
$('div').empty()
// 把自己从页面中移除
$('div').remove()
克隆
// 克隆一个 li 元素
// 接受两个参数
// 参数1: 自己身上的事件要不要复制,默认是 false
// 参数2: 所有子节点身上的事件要不要复制,默认是 true
$('li').clone()
发送 ajax 请求
发送get请求![在这里插入图片描述](https://img-blog.csdnimg.cn/dc8ac469f7ee4bd987e0859347da03ad.png)
// 直接使用 $.get 方法来发送一个请求
/*
参数一: 请求地址
参数二: 传递给后端的参数(请求时携带的参数)
参数三: 请求成功的回调
参数四: 希望返回的数据类型
*/
$.get('./ajax.php', { id: 10 ,f:20}, function (res) {
//res是后端返回的响应体
console.log(res) }, 'json')
发送post请求
// 直接使用 $.post 方法来发送一个请求
/*
参数一: 请求地址
参数二: 请求时携带的参数
参数三: 请求成功的回调
参数四: 返回的数据类型
*/
$.post('./ajax.php', { id: 10 }, function (res) { console.log(res) },
'json')
综合发送ajax请求
// 使用 $.ajax 方法
// 只接受一个参数,是一个对象,这个对象对当前的请求进行所有的配置
$.ajax({
url: './ajax', // 必填,请求的地址
async:true//是否异步,默认为异步(true)
type/method: 'GET', // 选填,请求方式,默认是 GET(忽略大小写)
data: {}, // 选填,传给后端的参数
dataType: 'json', // 选填,期望返回值的数据类型
success () {}, // 选填,接收一个函数数据类型,成功的回调函数
error (xhr,info,err) {},
// 选填,接收一个函数数据类型,失败(解析失败、或请求失败)的回调函数
//里面参数可以不填,
//xhr是jquery封装的ajax对象
//info是本次失败的错误信息
//err错误的详细信息,但不是很详细(有些错误方式详细,有些不)
cache: true,
// 选填,是否缓存,默认是 true
context: div,
// 选填,指定回调函数中的 this 指向,默认是 ajax 对象
//传谁就指向谁
status: {},
// 选填,根据对应的状态码进行函数执行
timeout: 1000,
// 选填,设置超时事件,从发送请求开始计时,
//大于这个时间还没有接收到响应,会直接取消本次请求
})
缓存
get请求会自主缓存
发送一个json请求
// 使用 $.ajax 方法也可以发送 jsonp 请求
// 只不过 dataType 要写成 jsonp
$.ajax({
url: './jsonp.php',
dataType: 'jsonp',
data: { name: 'Jack', age: 18 },
success (res) {
console.log(res)
},
jsonp: 'cb', // jsonp 请求的时候回调函数的 key
jsonpCallback: 'fn' // jsonp 请求的时候回调函数的名称
})
jquery封装的以promise形式接收结果
全局 ajax 函数(钩子函数)
也就是在一个 ajax 的整个过程中的某一个阶段执行的函数,而且每一个 ajax 请求都会触发。
ajaxStart
任意一个请求在 开始 的时候就会触发这个函数
$(window).ajaxStart(function () {
console.log('有一个请求开始了')
})
ajaxSend
任意一个请求在 准备 send 之前 会触发这个函数
$(window).ajaxSend(function () {
console.log('有一个要发送出去了')
})
ajaxSuccess
任意一个请求在 成功 的时候就会触发这个函数
$(window).ajaxSuccess(function () {
console.log('有一个请求成功了')
})
ajaxError
任意一个请求在 失败 的时候就会触发这个函数
$(window).ajaxError(function () {
console.log('有一个请求失败了')
})
ajaxComplete
任意一个请求在 完成 的时候就会触发这个函数
$(window).ajaxComplete(function () {
console.log('有一个请求完成了')
})
ajaxStop
任意一个请求在 结束 的时候就会触发这个函数
$(window).ajaxStop(function () {
console.log('有一个请求结束了')
})
jQuery 的多库共存
需要引入一个别的插件或者库的时候
人家也向外暴露的是 $ 获取 jQuery
那么,我们的 jQuery 就不能用了
那么这个时候, jQuery 为我们提供了一个多库并存的方法
多库并存
// 这个方法可以交还 jQuery 命名的控制权
jQuery.noConflict()
// 上面代码执行完毕以后 $ 这个变量就不能用了
// 但是 jQuery 可以使用
console.log($) // undefined
console.log(jQuery) // 可以使用
完全交出控制权
// 传递一个 true 的时候,会完全交出控制权
jQuery.noConflict(true)
// 上面代码执行完毕以后 $ 这个变量就不能用了
// jQuery 这个变量也不能用了
console.log($) // undefined
console.log(jQuery) // undefined
更换控制权
// 可以用一个变量来接受返回值,这个变量就是新的控制权
var aa = jQuery.noConflict(true)
// 接下来就可以把 aa 当作 jQuery 向外暴露的接口使用了
aa('div').click(function () { console.log('我被点击了') })
深浅拷贝
- 赋值
- 浅拷贝
- 深拷贝
jquery的插件扩展
扩展给本身jQuery.extend
扩展完后的内容只能用 $ 或者 jQuery 来调用
// jQuery.extend 接受一个参数,是一个对象,对象里面是我们扩展的方法
jQuery.extend({
max: function (...n) { return Math.max.apply(null, n) },
min: function (...n) { return Math.min.apply(null, n) }
})
使用
const max = $.max(4, 5, 3, 2, 6, 1)
console.log(max) // 6
const min = $.min(4, 5, 3, 2, 6, 1)
console.log(min) // 1
扩展给元素集 jQuery.fn.extend()
扩展完毕以后给元素的集合使用
也就是我们用 $(‘li’) 这样的选择器获取到的元素集合来使用
使用 jQuery.fn.extend() 方法来扩展
// jQuery.fn.extend() 接受一个参数,是一个对象,对象里面是我们扩展的方法
jQuery.fn.extend({
checked: function () {
// return 关键字是为了保证链式编程
// 后面的代码才是业务逻辑
return this.each(function() { this.checked = true })
}
})
使用
// 靠元素集合来调用
$('input[type=checkbox]').checked()
// 执行完毕之后,所有的 复选框 就都是选中状态了