赞
踩
网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。
一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
注意:
1、事件名开头不需要写on
2、回调函数中的this就是触发时间的dom元素
链式编程就是通过"."把多个操作(方法)连续的写下去,形成和链子一样的结构。
$('.text').focus(function () {
console.log('获取焦点')
})
$('.text').blur(function () {
console.log('失去焦点')
})
也可以这样写哦
$('.text')
.focus(function () {
console.log('获取焦点')
})
.blur(function () {
console.log('失去焦点')
})
更简单的写法是这样的:
$('.text').focus(回调函数).blur(回调函数).change(回调函数)
jQuery中封装了设置和读取网页元素文本内容的方法。
//设置
$('选择器').html('内容')
$('选择器').text('内容')
//读取
$('选择器').html()
$('选择器').text()
设置时:html方法解析标签,text不解析标签。
取值时:html方法获取标签,text只获取文本。
提问:设置和读取哪一个支持链式编程?
答:设置
jQuery中封装了过滤方法,它可以对jQuery对象中的DOM元素再次筛选
//匹配的第一个元素 相当于 first-child
.first()
//匹配的最后一个元素 相当于 last-child
.last()
//根据索引匹配元素
.eq(索引号)
注意:
1.eq方法的索引是从0开始的
2.他们三个方法返回的都是jQuery对象
$('li')
.first()
.css('backgroundColor','red')
$('li')
.last()
.css('backgroundColor','blue')
$('li')
.eq(1)
.css('backgroundColor','red')
jQuery 中对样式的操纵进行封装,可以设置或者获取样式
以下展示了两种表达方式,具体使用哪一种要根据公司的要求咯
// 1.键值对设置
.css('样式名','值')
.css('color','red')
.css('width','200px')
.css('height','200')
// 2.对象方式设置
.css(对象)
.css({
backgroundColor:'red',
color:'pink',
width:'200px',
height:'200',
})
注意:数值类的样式省略单位,默认会使用px。
$('li').css('backgroundColor','pink')
$('li')
.css({
backgroundColor:'pink',
border:'10px solid yellowgreen',
width:'200px',
height: 200,
})
jQuery 中对属性的操作进行封装,可以设置、获取和删除属性
大家可能忘记了属性是什么呢?我来给大家回顾一下吧!
<a href="http://www.baidu.com/">百度</a>
<img src="111.jpg" info="你是最帅的(最美的),给个三连不过分吧哈哈哈哈"/>
其中 href、src、info都是属性,不管是原生的,还是自定义的都可以哦!
// 1.赋值
.attr('属性名','值')
// 2.取值
.attr('属性名')
// 3.删除属性
.removeAttr('属性名')
$('a').attr('href','http://www.baidu.com/')
jQuery中封装了操纵表单元素value属性的方法,可以取值和赋值。
// 1.赋值
.val('参数')
// 2.取值
.val()
// 1.赋值
$('.text').val('来个三连加关注!')
// 2.取值
$('.text').blur(function () {
let value = $(this).val()
console.log(value)
}
jQuery中封装了查找元素的方法,可以基于元素的结构关系查找新的元素。
// 1.父元素
.parent()
// 2.子元素
.children()
// 3.兄弟元素
.siblings()
// 4.后代元素
.find('选择器')
注意:
1.find方法需要传入选择器
2.children、siblings 方法支持传入选择器
// 1.父元素 $('li').parent().css('backgroundColor','pink') // 2.子元素 $('li').children().css('backgroundColor','pink') $('li').children('.jbc').css('backgroundColor','pink') // 3. 兄弟元素 $('li').siblings().css('backgroundColor','pink') $('li').siblings('.jbc').css('backgroundColor','pink') // 4.后代选择器 $('li').find('jbc').css('backgroundColor','pink')
jQuery中封装了为网页元素添加、移除、检测、切换类名的方法。
// 1.添加类名
.addClass('类名')
// 2.移除类名
.removeClass('类名')
// 3.判断类名 返回布尔值
.hasClass('类名')
// 4.切换类名
.toggleClass('类名')
$('.add').click(function() {
$('.text').addClass('active')
})
$('.add').click(function() {
$('.text').removeClass('active')
})
$('.add').click(function() {
let res = $('.text').hasClass('active')
})
$('.add').click(function() {
$('.text').toggleClass('active')
})
jQuery中封装了更为灵活的 on/off 、one方法处理DOM事件
// 1.注册事件
.on('事件名', function() {
})
// 2.移除指定事件
.off('事件名')
// 3.移除所有事件
.off()
// 4.注册一次性事件
.one('事件名', function(){
})
注意:
on, one方法回调函数中的this是触发事件的DOM元素
$('.text').on('click',function(){
console.log(1)
})
$('.text').off('click')
$('.text').off()
$('.text').one('click',function(){
console.log(1)
})
jQuery中如何通过代码的方式触发绑定的事件呢?
// 1.直接触发
.事件名()
// 2.trigger触发
.trigger('事件名')
// 3.触发自定义事件
.trigger('自定义事件')
// 4.注册自定义事件
.on('自定义事件', function() {
})
注:自定义事件是一种进阶用法,目前了解使用方法即可
使用jQuery为window对象绑定事件
// 滚动
$(window).scroll(function(){
})
// 点击
$(window).click(function(){
})
通过jQuery直接获取元素的位置
4.4.1 语法
// 取值
$('选择器').offset()
// 取值
$('选择器').position()
// 返回值
{top: 126, left: 58}
注意:
1.他们之间参照物不同
1)offset参照html标签
2)position参照离他最近有定位的祖先元素
2.margin
1)offset会把外边距margin计算进去
2)position以外边距margin为边界,不计算margin
通过jQuery获取元素的滚动距离
// 取值
$('选择器').scrollLeft()
$('选择器').scrollTop()
// 赋值
$('选择器').scrollLeft(值)
$('选择器').scrollTop(值)
通过jQuery以动画的方式切换元素的显示和隐藏
// 显示
$('选择器').show()
//隐藏
$('选择器').hide()
//显示&隐藏
$('选择器').toggle() //如果显示,调用toggle就会隐藏;如果隐藏,调用toggle就会显示
其中show、hide、toggle可以加一个持续多长时间的参数,例如:
$('.text').show(1000) //毫秒为单位
通过jQuery以淡入&淡出的方式切换元素的显示隐藏
// 淡入
$('选择器').fadeIn()
// 淡出
$('选择器').fadeOut()
// 淡入&淡出
$('选择器').fadeToggle()
基本用法与上述5.1的用法基本一致,也可以加参数哦!
通过jQuery以展开(高度增大-显示)&收起(高度减小-隐藏)的方式切换元素的显示隐藏
//展开
$('选择器').slideDown()
//收起
$('选择器').slideUp()
//展开或收起
$('选择器').slideToggle()
用法与上面的动画方法一样哦。可加参数。
通过jQuery为元素设置的多个动画会依次添加到动画队列中,并根据添加的顺序依次播放。
// 停止当前动画
$('选择器').stop()
// 清空队列 在动画当前状态停止
$('选择器').stop(true)
// 清空队列 直接到当前动画的结束状态
$('选择器').stop(true, true)
动画方法和stop方法返回的是同一个jQuery对象
jQuery提供了animate方法来实现更复杂的动画效果
$('选择器').animate(动画属性)
数值类样式支持动画,支持多个
默认单位是px
支持非样式的特殊属性
持续时间的单位是毫秒
举个例子:
$('选择器').animate({
width: 100,
height: '100%'
margin: '100px'
...
})
$('选择器').animate({
scrollTop: 100,
scrollLeft: 100
})
jQuery中封装了指定位置动态插入元素节点的方法,可以插入节点或者改变节点位置。
//4个方法参数一样 位置不同
$('父元素选择器').append(参数) //插入到父元素结尾
$('父元素选择器').prepend(参数) //插入到父元素开头
$('兄弟元素选择器').before(参数) //插入到兄弟元素前面
$('兄弟元素选择器').after(参数) //插入到兄弟元素后面
插入节点:传入创建的DOM元素或者html结构
改变位置:传入现有的DOM元素或者jQuery对象
所有的jQuery动画方法都支持传入回调函数
$('选择器').基础动画方法(回调函数)
$('选择器').基础动画方法(持续时间, 回调函数)
$('选择器').animate(属性, 回调函数)
$('选择器').animate(属性, 持续时间,回调函数)
回调函数会在动画执行完毕时立刻执行。
回调函数中的this是执行动画的DOM元素
jQuery不仅可以设置动画执行的速度,还能在动画执行前设置一定的延时
$('选择器').delay(延迟时间).动画方法()
$('选择器').delay(延迟时间).动画方法().delay(延迟时间).动画方法()
注意:延迟时间的单位是毫秒。
$().width() //获取内容宽度
$().height() //获取内容高度
$().innnerWidth() //获取内容宽度+内边距
$().innnerHeight() //获取内容高度+内边距
$().outerWidth() //获取内容宽度+内边距+边框
$().outerHeight() //获取内容高度+内边距+边框
$().outerWidth(true) //获取内容宽度+内边距+边框+外边距
$().outerHeight(true) //获取内容高度+内边距+边框+外边距
jQuery绑定的事件中可以获取时间参数(事件对象),用法和原生js完全一致
$('选择器').事件(function(event){
event.stopPropagation() //阻止冒泡
})
注意:不需要考虑兼容性,因为jQuery已经处理好时间参数的兼容性。
jQuery中封装了动态删除元素节点的方法remove()。
jQuery对象.remove()
remove方法删除的是调用方法的元素节点。
// 删除自己
$('.remove').click(function() {
$(this).remove()
})
//删除父元素
$('.remove').click(function() {
$(this).parent().remove()
})
直接通过on方法即可使用
//直接绑定
$('选择器').on('事件名',function(){})
//事件委托
$('祖先选择器').on('事件名','后代选择器',function(){})
作用:
1.可以减少事件注册。
2.可以解决动态增加后代元素的事件绑定问题。
window.onload = function(){}
$(window).on('load',function(){})
//完整写法
$(document).ready(dunction(){})
//简化写法
$(function(){})
DOM载入完毕就会执行。
jQuery的懒加载插件lazyload
比如:图片用到了再去加载,常见于有大量图片的网页,比如电商网页。
下载地址:
Lazy Load 中文网 | Javascript延迟加载(LazyLoad.js)图像插件 (lazyloadjs.cn)")
先导入jQuery,再导入插件,导入CSS(具体看需求)
<!--先导入jQuery-->
<script src="./jQuery/jQuery-3.6.1.js"></script>
<!--再导入lazyload插件-->
<script src="./assets/jQuery.lazyload.min.js"></script>
根据文档使用
举例:
<!--图片懒加载-->
<img class="lazyload" data-original="./images/1.jpg" alt="" />
//找到希望懒加载的图片并调用lazyload方法
$('.lazyload').lazyload()
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新
jQuery的懒加载插件lazyload
比如:图片用到了再去加载,常见于有大量图片的网页,比如电商网页。
下载地址:
Lazy Load 中文网 | Javascript延迟加载(LazyLoad.js)图像插件 (lazyloadjs.cn)")
先导入jQuery,再导入插件,导入CSS(具体看需求)
<!--先导入jQuery-->
<script src="./jQuery/jQuery-3.6.1.js"></script>
<!--再导入lazyload插件-->
<script src="./assets/jQuery.lazyload.min.js"></script>
根据文档使用
举例:
<!--图片懒加载-->
<img class="lazyload" data-original="./images/1.jpg" alt="" />
//找到希望懒加载的图片并调用lazyload方法
$('.lazyload').lazyload()
[外链图片转存中…(img-2KKbsmB6-1715642487251)]
[外链图片转存中…(img-RRqULzu8-1715642487251)]
[外链图片转存中…(img-p69vWM9L-1715642487252)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!
由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。