文章目录
- 1. 初识JQ-元素操作
- 2. 设置动画效果
- 3. 设置轮播效果
- 4. 事件参数与事件委托
- 5. jq常用的插件(工作常用)
- 5.1 轮播图插件
- 5.2 懒加载插件
- 5.3 全屏滚动插件
- 5.4 选择日期插件
- 5.5 表单验证插件
- 6. jq补充小结
1. 初识JQ-元素操作
- JQuery是JavaScript类库,使用它封装的方法可以极大的提升开发效率
- 首先下载jq的文件包:然后导入即可
<script src="./jquery/jquery-3.5.1.min.js"></script>
- 引入jq后会多一个 $ 全局函数,可以用来进行选择元素,返回选中的所有元素,使用为 $ (‘选择器’),通常声明的jq对象前最好带上一个$ 符号。
- 调用 $ 方法传入选择器或dom元素获取到jQuery对象,注意我们之前使用document获取元素的是DOM对象和jq对象不能混着使用,但是可以,将dom对象传入$ 中将其转为jq对象进行使用。
- 调用事件的方法:里面调用this获得的就是触发事件的 dom 元素,因此后续可以使用$(this)给该元素添加特定的事件
$('选择器').事件名(function () { // 逻辑.... })
- 链式编程 通过点(.) 把多个操作(方法)连续的写下去, 形成和 链子 一样的结构,因为大部分 jQ对象 方法的返回值还是同一个 jQ对象如下述的代码:
$('.text').focus(回调函数).blur(回调函数)
- jQuery 中封装了设置和读取网页元素文本内容的方法,设置时(可以使用链式编程): html 方法解析标签 , text 不解析标签 取值时(不可以使用链式编程,返回的是字符串): html 方法获取标签 , text 只获取文本
- 注意伪类选择器first,last要精确的匹配到所需的元素,不是指的后代的意思,jq中提供了便捷的选择方式如下,eq的索引是从0开始,下面三个返回的都是jq对象:
// 匹配的第一个元素
.first()
// 匹配的最后一个元素
.last()
// 根据索引匹配元素
.eq(索引)
- jq操纵样式的方式,数值类如果省略单位默认时px:
// 1. 键值对设置 .css('样式名','值')
.css('backgroundColor','pink')
.css('color','red')
.css('width','200px')
.css('height',200)
// 2. 对象方式设置 .css(对象)
.css({
backgroundColor:'pink',
color:'red',
width:'200px',
height:200 })
// 3. 样式获取 .css('样式名')
.css('width')
- jq操纵属性如:href,src,也可以操纵自定义的属性,属性不是样式,不要搞混了:
// 1.赋值 .attr('属性名','值')
// 2.取值 .attr('属性名')
// 3.删除属性 .removeAttr('属性名')
- 输入框value值的操作为$(‘选择器’).val(),里面传入参数表示赋值,不传入参数表示取值
- jq的其它常用的查找方法如下,find方法方法需要传入选择器 children 、sibings 方法支持传入选择器:
// 1. 父元素(只招亲爹)
.parent()
// 2. 子元素
.children()
// 3. 兄弟元素(不包含自己)
.siblings()
// 4. 后代元素
.find('选择器')
- jq对类名的操作常用的如下:
// 1. 添加类名 .addClass('类名')
// 2. 移除类名 .removeClass('类名')
// 3. 判断类名 返回布尔值 .hasClass('类名')
// 4. 切换类名 .toggleClass('类名')
- 因为jq中并没有对所有的事件都有对应的函数,如input,因此jq提供一个通用的绑定事件的方法:
// 1. 注册事件 .on('事件名', function(){})
// 2. 移除指定事件 .off('事件名')
// 3. 移除所有事件 .off()
// 4. 注册一次性事件 .one('事件名', function(){})
- 获取焦点和失去焦点只能给输入框或者文本域添加,不能给div盒子添加。
- jq触发事件的方式,自定义的事件只能用trigger触发,trigger也可以触发原生的事件:
// 1. 直接触发 .事件名()
// 2. trigger触发 .trigger('事件名')
// 3. 触发自定义事件 .trigger('自定义事件')
// 4. 注册自定义事件 .on('自定义事件',function(){}),类似上述14条的用法
- jq给window绑定事件如下所示,注意括号里面不能加引号,不然就变成了选择器:
// 滚动
$(window).scroll(function () {})
// 点击
$(window).click(function () {})
- jq获取元素的位置,offset参照html标签 position参照离他最近有定位的祖先元素,offset以内容开始,如果元素有内边距,计算距离的时候会包阔内边距,position是不计算元素内边距,直接看整个元素的距离。
// 取值 $('选择器').offset()
// 取值 $('选择器').position()
- jq获取页面滚动的距离,获取页面的滚动距离里面是html,如果添加滚动事件,注意是给window添加的!!:
// 取值 $('选择器').scrollLeft() $('选择器').scrollTop()
// 赋值 $('选择器').scrollLeft(值) $('选择器').scrollTop(值)
2. 设置动画效果
- 通过jQuery以动画的方式切换元素的显示&隐藏,其本质是控制display属性,括号里面的时间单位是毫秒,可以不加单位:
// 显示 $('选择器').show(持续时间)
// 隐藏 $('选择器').hide(持续时间) /
// 显示&隐藏 $('选择器').toggle(持续时间)
- 通过jQuery以淡入&淡出的方式切换元素的显示隐藏,持续时间单位是毫秒,淡入淡出效果是通过修改元素的opactity,最终还是实现display改变的效果。元素本身的尺寸不会变化
// 淡入 $('选择器').fadeIn(持续时间)
// 淡出 $('选择器').fadeOut(持续时间)
// 淡入&淡出 $('选择器').fadeToggle(持续时间)
- 通过jQuery以展开(高度增大-显示)&收起(高度减小-隐藏)的方式切换元素的显示隐藏,单位也是毫秒,最终实现的也是修改的display属性**!!!若想实现动画从无到有的动画效果,记得给初始的值设置display:none!!!**:
// 展开 $('选择器').slideDown(持续时间)
// 收起 $('选择器').slideUp(持续时间)
// 展开&收起 $('选择器').slideToggle(持续时间)
- 上述的三个基本动画都会改变使得元素隐藏起来,并且不占位置,并且返回的都是当前的jq对象,因为最后display的属性会发生变化,因此,无需特地再设置display属性
- 通过jQuery为元素设置的多个动画会依次添加到动画队列中,并根据添加的顺序依次播放,停止动画的方式如下【当同时依次添加多个动画时候才会有队列才有效】:
// 停止当前动画(后面队列里的动画依然会执行) $('选择器').stop()
// 清空队列 在动画当前状态代码停止 $('选择器').stop(true)
// 清空队列 直接到当前动画的结束状态后代码停止 $('选择器').stop(true,true)
- 自定义动画,注意仅仅支持非数值的样式动画,对于背景颜色等就不支持,注意如果样式里面有-,要用驼峰。
$('选择器').animate({
width: 100,
height: '100%',
margin: '100px',
...
},持续毫秒数)
3. 设置轮播效果
- jq插入节点的方式,可以新增节点或者改变节点位置,新增插入,参数通常是引号包含的html代码或者dom元素,移动节点的位置,参数是要移动的节点的jq对象或者dom对象:
// 4个方法参数一样 位置不同 ,里面的参数可以是
$('父元素选择器').append(参数) // 父元素结尾
$('父元素选择器').prepend(参数) // 父元素开头 (注意选择的是父元素)
$('兄弟元素选择器').before(参数) // 兄弟元素前面
$('兄弟元素选择器').after(参数) // 兄弟元素后面
- 动画的回调函数,回调函数会在动画执行完毕时立刻执行,回调函数中的this是执行动画的dom元素,animate里面属性是多个的时候注意加上{}:
$('选择器').基础动画方法(回调函数)
$('选择器').基础动画方法(持续时间, 回调函数)
$('选择器').animate(属性, 回调函数)
$('选择器').animate(属性, 持续时间, 回调函数)
- jQuery 不仅可以设置动画执行的速度,还能在动画执行前设置一定的延时,时间单位是毫秒,每个延时作用于其后面跟着的动画:
$('选择器').delay(延迟时间).动画方法()
$('选择器').delay(延迟时间).动画方法().delay(延迟时间).动画方法()
- 获取尺寸:
$('选择器').width() // 内容宽度
$('选择器').height() // 内容高度
$('选择器').innerWidth() // 内容宽度 + 内边距
$('选择器').innerHeight() // 内容高度 + 内边距
$('选择器').outerWidth() // 内容宽度 + 内边距 + 边框
$('选择器').outerHeight() // 内容高度 + 内边距 + 边框
$('选择器').outerWidth(true) // 内容宽度 + 内边距 + 边框 + 外边距(即整个盒子)
$('选择器').outerHeight(true) // 内容高度 + 内边距 + 边框 + 外边距
- 轮播向下滚动实现,依次把子元素中的最后一个添加到第一个盒子的前面,然后修改定位,可以使用动画效果。下面是一个上下滚动的代码的示例:
<div class="outer">
<div class="wbdesc">
<div class="wblist"> </div>
<div class="wblist"></div>
<div class="wblist"></div>
</div>
</div>
<script>
function auto() {
let $last = $('.wblist').last()
$('.wbdesc').prepend($last)
let height = $last.outerHeight(true)
$('.wbdesc').css('top', -height)
$('.wbdesc').delay(2000).animate({ 'top': 0 }, function () {
auto()//动画执行完成后执行该函数
})
}
auto()
</script>
4. 事件参数与事件委托
- jQuery已经处理好了事件参数的兼容性,用法和原生js一样(如事件冒泡,阻止事件默认参数等)
// 定义了事件参数
$('选择器').事件(function (event) {})
- 上述删除元素结点的方法是需要找到父元素,还有更简便的是谁调用就删除谁,这个方法只有jq中才有:
jQuery对象.remove()
- 事件委托,使用方法,可以用来解决动态增加后代元素的事件绑定问题,jq钟的this注意要用$包含:
// 直接绑定
$('选择器').on('事件名',function(){})
// 事件委托(委托给祖先即可)
$('祖先选择器').on('事件名', '后代选择器', function () {})
- onload资源加载完后执行(包括图片、css等等),ready只需要dom元素加载完毕即可,因此ready函数会先执行
// 原生写法
window.onload = function () {}
// jQ写法
$(window).on('load', function () {})
// 完整写法
$(document).ready(function () {})
// 简化写法
$(function () {})
- 阻止表单提交的时候默认刷新的行为:
$('form').submit(function (event) {
// 第一种:阻止默认行为
event.preventDefault()
// 第二种:阻止默认行为(常用)
return false
})
- jq中克隆的方式,方法返回的还是 jQuery 对象,假如原来克隆的样式被设置了display:none,在克隆的后面记得加上 .show(),让其显示出来:
// 不带事件
.clone()
// 带着事件一起克隆
.clone(true)
- jQuery 封装了获取内部 dom 对象的方法,索引从 0 开始 ,获取到的是 dom 对象,获取到之后就可以直接去使用dom对象相关的属性
// get方法获取
.get(索引)
// 中括号获取,直接在jq后加中括号
[索引]
5. jq常用的插件(工作常用)
相关插件的文件见阶段三-jq-第三天的课程
5.1 轮播图插件
下包:把插件下载到本地
导包:先导入 jQuery , 再导入插件 , 导入css(需要的话)
用包:根据文档(说明书)使用:https://github.com/kenwheeler/slick
<!-- 引入插件所需要的样式表 -->
<link rel="stylesheet" href="./slick/slick.css">
<link rel="stylesheet" href="./slick/slick-theme.css">
<!-- 先导入 jQuery -->
<script src="./jquery/jquery-3.5.1.js"></script>
<!-- 在 jQuery 之后引入插件 -->
<script src="./slic k/slick.min.js"></script>
语法:
<div class="your-class">
<div>轮播元素一</div>
<div>轮播元素二</div>
<div>轮播元素三</div>
</div>
$('.your-class').slick({
属性名:属性值
})
常用的轮播图属性如下,默认样式不符合需求直接添加 CSS 覆盖即可,prevArrow的值可以是引号加上选择器来指代:
5.2 懒加载插件
懒加载:图片用到了再去加载,常见于有大量图片的网页,比如电商
<!-- 先导入jQueery -->
<script src="./jquery/jquery-3.5.1.js"></script>
<!-- 再导入lazyload插件 -->
<script src="./jquery.lazyload.min.js"></script>
使用方式,图片地址设置给 data-original:
<img class="lazyload" data-original="./images/1.png" alt="" />
// 找到希望懒加载的图片并调用lazyload方法
$('.lazyload').lazyload()
官方文档:https://github.com/tuupola/lazyload/tree/1.x
5.3 全屏滚动插件
<!-- 导入 fullpage 配套样式 -->
<link rel="stylesheet" href="./jquery.fullpage.css" />
<!-- 导入 jQuery -->
<script src="./jquery/jquery-3.5.1.js"></script>
<!-- 在 jQuery 之后导入 fullpage 插件 -->
<script src="./fullpage/jquery.fullpage.js"></script>
每个区域必须有 section 这个类名
<div id="fullpage">
<div class="section">第一屏</div>
<div class="section">第二屏</div>
<div class="section">第三屏</div>
</div>
$('#fullpage').fullpage({
....
})
常用的属性如下,索引可以使用e:
官方文档:https://github.com/alvarotrigo/fullPage.js/tree/2.9.7
5.4 选择日期插件
<!-- 导入日期选择器的样式 -->
<link rel="stylesheet" href="./datepicker/datepicker.css" />
<!-- 导入jQuery -->
<script src="./jquery/jquery-3.5.1.js"></script>
<!-- 导入日期选择器插件 -->
<script src="./datepicker/datepicker.js"></script>
<!-- 导入语言包,默认显示的是英文,需要导入中文语言包
-->
<script src="./datepicker/i18n/datepicker.zh-CN.js"></script>
<!-- 准备html结构 -->
<input type="text" class="datapicker" />
// 调用插件方法
$('.datapicker').datepicker({
…
})
调用的时候常用的配置如下,导入中文包后记得还要加上language: ‘zh-CN’,不然还是没用:
官方文档:https://github.com/fengyuanchen/datepicker/blob/master/README.md
5.5 表单验证插件
<!-- 导入jQuery -->
<script src="./jquery/jquery-3.5.1.js"></script>
<!-- 导入validate插件 -->
<script src="./jquery-validate/jquery-validate.js"></script>
$('form').validate({
// 配置
})
配置中常用的属性如下,注意函数要想使用的时候记得加上小括号
除了js中写相应的代码,还要在对应的html表单中设置自己的属性:
用法举例:
<input
type="password"
name="password"
data-required
data-describedby="password-error"
data-description="password"
data-pattern=".{6,}"
/>
<span class="error" id="password-error"></span>
$('form').validate({
description: {
password: {
required: '密码不能为空!',
pattern: '密码不能少于6位!',
},
},
})
6. jq补充小结
- 解决新增的时候删除了第一个导致没办法按照样式新增的问题,可以再代码中多写一个放在第一行,样式写为display:none。如果克隆记得把其show出来。
- 表单序列化: $(‘form’).serialize(),表单元素要有 name 属性才可以获取到 value 值,获取到的数据格式是 name1=value1&name2=value2 的 字符串,后面前后端交互的时候能够用到
('form').submit(function () {
let data = $(this).serialize()
console.log('data:', data)
return false//阻止默认刷新事件
})
- 自定义插件,加在jq对象的原型上面,jQuery 是 $ 的别名,写哪个都行
jQuery.fn.extend({
插件名 (参数) {
// 逻辑
}
})
jq对象.插件名(参数)可以进行调用
- jq的工具,常用的两个如下,还有其他的了解即可,同时如果原生的js可以用,尽量可以使用原生的js,因为原生的js其实也有这种方法的(参考js语法进阶):
// 遍历数组
$.each(数组, function (下标, 值) {})
// 遍历并返回新数组
$.map(数组,function(值){
操作运算
// 返回新的值,返回的是数组的形式
})
- jq的版本兼容性问题,一般没啥特别需求,使用最新的版本即可:
兼容信息查看:https://jquery.com/browser-support/ 历史版本下载:https://code.jquery.com/