一 jQuery的基本介绍
1, 概念
jQuery是前端的一个类库, 本质上是一个js文件, 其中定义了很多的函数方法, 通过导入jQuery文件可以调用其中封装定义的函数.
实际项目中应用的不多.
2, 网站
官网 https://jquery.com
中文 https://jquery.cuishifeng.cn/
3, 外部js文件
jQuery.min.js
压缩的jQuery文件
jQuery.js
原生的jQuery文件
要导入jQuery必须导入jQuery文件.
二 jQuery_选择器
1, jQuery函数的调用
-----需要导入外部js文件 , 通过关键词$ 或者 jQuery 来调用 jQuery外部文件中的函数方法.
2, jQuery的选择器
是jQuery获取标签对象的语法
$(‘条件’) jQuery(‘条件’)
支持的条件:
和querySelector一样, 支持所有的html,css的语法形式
'标签名称'
'#id'
'.class'
'[属性="属性值"]'
'ul>li'
'ul>li:first-child'
jQuery特有的条件
'ul>li:first()'
获取li中的第一个
'ul>li:last()'
获取li中最后一个
'ul>li:eq(索引下标)'
从0开始按照索引下标获取li标签
'ul>li:odd()'
奇数索引下标 偶数个数
'ul>li:even()'
按照偶数索引下标 获取li标签, 获取的是奇数个数的li标签.
获取结果
是一个jQuery特有的伪数组
只能支持jQuery的函数方法操作, JavaScript数组的操作方法\DOM操作都不支持
jQuery伪数组中存储的是js的标签对象, jQuery伪数组[索引下标] 获取的是 js标签对象, 支持js的DOM操作
js的标签对象使用$() 或者 jQuery() 包裹
就转化为jQuery伪数组, 可以使用jQuery的函数方法操作
总结:
1, 选择器是jQuery获取标签对象的方法
2, 获取的结果是jQuery伪数组
3, jQuery伪数组只支持jQuery的函数操作, 不支持js的操作方法.
4, jQuery伪数组中 存储的是js标签对象, 通过jQuery伪数组[索引下标] 可以获取一个独立的js标签对象, 独立的js标签对象支持js的操作语法.
5, js标签对象通过 $() 或者 jQuery() 包裹就转化为jQuery伪数组,就支持jQuery的操作语法.
6, jQuery选择器的语法:
支持所有的html和css语法形式, 有jQuery特有的选择器语法
$('ul>li:eq(索引下标)')
按照索引下标获取指定的标签对象
$('ul>li:first()')
第一个
$('ul>li:odd()')
奇数索引下标 偶数个数
$('ul>li:even()')
偶数索引下标 奇数个数
三 jQuery的筛选器
在jQuery选择器 获取的结果基础上, 对jQuery选择器的获取结果再次进行筛选.
jQuery筛选器的原理:
在jQuery编程中, 有一种编程方式称为 链式编程, 选择器和筛选器配合可以完成链式编程
jQuery的筛选器语法:
$().first()
获取第一个标签对象
$().last()
获取 最后一个 标签对象
$().eq(索引下标)
按照索引下标查询
$().prev()
获取 上一个 标签对象
$().next()
获取 下一个 标签对象
$().prevAll()
获取 上所有 标签对象
$().nextAll()
获取 下所有 标签对象
$().siblings()
获取 所有 兄弟标签对象
$().parent()
获取 直接 父级标签对象
$().parents()
获取 所有 父级标签对象
$().find(条件)
按照条件查询
$().index()
获取 标签对象的索引下标
$().end()
返回上一个操作对象
四 jQuery标签属性的操作方法
1, 专门操作布尔属性的函数方法:
$().prop(属性, 属性值);
设定属性值
$().prop(属性);
获取属性值
$().removeProp(属性)
删除属性
2, 操作其他属性
$().attr(属性 , 属性值);
设定属性值
$().attr(属性)
获取属性值
$().removeAttr(属性)
删除属性
五 query 标签class选择器操作
jQuery操作语法:
$().addClass()
新增
$().removeClass()
删除
$().hasClass()
判断有没有
有 true
没有 false
$().toggleClass()
切换
附加:
js操作语法:
标签对象.classList.add()
新增
标签对象.classList.remove()
删除
标签对象.classList.toggle()
切换
标签对象.classList.replace(旧的 , 新的)
替换
六 jQuery 标签内容和数据的操作
jQuery
$().html()
$().text()
$().val()
附加:
js操作标签内容和数据
标签对象.innerHTML
标签对象.innerText
标签对象.value
七 标签css样式的操作
语法形式1:
一次只设定一个css属性和属性值
$().css('属性','属性值');
语法形式2:
一次设定多个属性属性值
$().css({属性1:属性值1 , 属性2:属性值2, 属性3:属性值3 ...})
八 jQuery_标签的占位
$().height() $().width()
内容宽高
$().innerHeight() $().innerWidth()
内容+padding
$().outerHeight() $().outerWidth()
内容+padding+border+margin
$().outerHeight(true) $().outerWidth(true)
内容 + padding + border +margin (display:none 的标签仍然可以获取占位数据)
$().offset()
获取标签 和 html页面的间距
执行结果是一个对象
left属性 存储左间距
top属性 存储上间距
display:none 的标签不能获取间距.
九 jQuery的隐式迭代
1, 针对jQuery伪数组的设定操作
自动循环遍历伪数组中的每一个标签对象, 对每一个标签对象执行需要的设定操作.
2, 针对jQuery伪数组的获取操作
只获取第一个标签的数据数值, 不会获取每一个标签的数据数值
十 jQuery的循环遍历
$().each(function(key , item){
参数1 索引下标
参数2 数组的数据数值
参数2 以js标签对象形式 存储的标签对象, 不支持jQuery的操作函数, 支持js的DOM操作
可以$(item) 转化为jQuery伪数组, 再使用jQuery函数执行操作.
})
十一 jQuery的ajax请求
在jQuery中封装好了ajax请求, 只需要我们调用函数执行就可以了
jQuery封装的ajax请求函数
$.get(参数1 , 参数2 , 参数3 , 参数4)
参数1 请求的url地址
参数2 请求携带的参数, 可以是对象形式, 可以是字符串形式
参数3 请求成功执行的函数程序
参数4 设定的响应体格式
只能执行get请求方式
$.post(参数1 , 参数2 , 参数3, 参数4)
参数1 请求的url地址
参数2 请求携带的参数, 可以是对象形式, 也可以是字符串形式
参数3 请求成功执行的函数程序
参数4 设定的响应体格式
只能执行post请求方式
$.ajax({
url : 请求的url地址 ,
type : 请求方式 ,
data : 携带参数数据可以是对象,可以是字符串 ,
dataType : 响应体格式 ,
success : 请求成功执行的函数程序
error : 请求失败执行的函数程序
......
})
十二 jQuery的跨域问题
proxy
服务器代理, 只要你配置好服务器代理 , jQuery直接使用代理名称 , 就可以完成跨域请求.
也就是只要配置好服务器代理, jQuery的proxy 和原生js的proxy是一样的程序过程
jsonp
1, 不用专门的定义一个函数, jQuery使用success定义的函数作为后端程序调用的函数
2, 不用定义script标签 , 设定好相关参数, jQuery来执行定义script标签
3, data设定携带参数 ,
data中设定携带的参数, 必须要删除 cb=函数名称 , 不是在data中定义传参函数名称键值对 , 通过专门的属性来设定传参函数名称 键值对
4, 通过dataType 和jsonp 两个属性来设定传参函数名称 键值对
5, 还会给success定义的匿名函数定义一个函数名称, 也就是传参函数名称键值对的键值
6, jsonp:‘cb’, 告诉jQuery程序, 后端程序定义的 传参函数名称键值对的键名, 也就是告诉jQuery程序 使用cb键名传参jQuery定义的函数名称
十三 jQuery的深浅拷贝
jQuery中的深浅拷贝比较特殊
1, jQuery中没有封装传统意义上的浅拷贝的函数
2, jQuery中封装的 $.extend() 默认执行的是就是传统意义上的深拷贝
3, jQuery中的所谓的浅拷贝
指的是 一维数据深拷贝 多维数据浅拷贝
4, jQuery中 深浅拷贝的语法形式
const 变量 = 数组/对象 ;
$.extend(变量 , 原始数组/对象) ;
浅拷贝
一维数组深拷贝 多维数组 浅拷贝
$.extend(true, 变量 , 原始数组/对象) ;
深拷贝
一维数组,多维数组都是深拷贝
//原始数组
const arr1 = ['北京' , '上海' , '广州' , '重庆' , '天津' , [100,200,300,400] , {name:'张三' , age:18 , sex:'男'}];
//jQuery的浅拷贝
//创建一个arr2
const arr2 = [];
//将arr1中的数据 按照jQuery的浅拷贝语法 复制拷贝到arr2中
//执行的是jQuery浅拷贝 (一维深拷贝, 多维浅拷贝)
$.extend(arr2 , arr1) ;
//创建一个arr3
const arr3 = [];
//将arr1中的数据 按照jQuery的深拷贝语法 复制拷贝到arr3中
//执行的是jQuery的深拷贝
$.extend(true , arr3, arr1);
arr1[0] = '深圳';
arr1[5][0] = 9000;
arr1[6][0] = '王傻子';
console.log(arr1);
console.log(arr2);
console.log(arr3);
十四 jQuery的事件绑定语法
1, jQuery伪数组 支持的语法形式 (只能是jQuery伪数组支持的事件类型)
$().事件类型(事件处理函数)
2,jQuery伪数组 不支持的语法形式(就是jQuery不支持的事件类型 可以用以下方式去绑定), 也就是支持所有事件类型的绑定
$().on(事件类型 , 事件处理函数)
//jQuery伪数组支持的语法形式
$('div').click(function(){
console.log(111);
})
$('div').on('click', function(){
console.log(333);
})
//jQuery伪数组不支持的语法形式
console.log($('input'));
$('input').on('input' , function(){
console.log(555);
})
十五 jQuery的事件委托
$().on(事件类型 , ‘判断条件’ , 事件处理函数)
给标签中包含的后代标签进行判断 , 符合判断条件的标签添加事件处理函数
条件是HTML ,css 支持的所有语法形式
jQuery获取 标签对象(就是符合html, css 支持的所有语法形式的标签对象)
// jQuery的事件委托
//给div标签里面的span标签点击事件
$('div').on('click' , 'span' , function(){
console.log(111);
})
//给div标签里面的类名是h1的标签添加点击事件
$('div').on('click' , '.h1' , function(){
console.log(222);
})
//不能通过事件委托的语法形式 给div标签本身 添加点击事件
$('div').on('click' , 'div' , function(){
console.log(333);
})
十六 jQuery的特殊事件
$().hover(参数1 , 参数2) ;
参数1 鼠标移入的事件处理函数
参数2 鼠标移出的事件处理函数
绑定的事件类型是
mouseenter 和 mouseleave
$().one(事件类型 , 事件处理函数) ;
绑定的事件类型 和事件处理函数 只会触发执行一次
$().trigger(事件类型) ;
事件的发布
标签指定时间类型的事件处理函数
会 直接重复执行一次
$(window).ready(function(){})
$(function(){ })
jQuery的加载事件
当html所有的标签加载完毕, 才会执行定义的函数程序
例如 img标签加载完毕, jQuery加载事件就会触发执行
window.addEventListener('load' , function(){ })
js的加载事件
当html所有的标签 和 标签内容 加载完毕后才会执行定义的函数程序
例如: img标签和图片内容都加载完毕, window加载事件才会触发执行.
十七 jQuery的事件删除
$().off()
删除所有类型的所有事件处理函数
$().off(事件类型)
删除指定事件类型的事件处理函数
$().off(事件类型 , 事件处理函数)
删除指定事件类型的指定的事件处理函数
只能删除绑定函数名称的事件.
十八 jQuery的节点操作
1, 创建节点:
$('新增的标签名称')
可以设定标签内容, 标签属性等
2, 设定节点:
可以使用链式编程 使用jQuery语法
设定标签节点的css样式 , 事件等
3, 写入节点:
因为要满足jQuery的链式编程, 写入的语法形式比较多
(1) 父级标签中写入子级标签
父级的结束位置, 写入新的子级节点
$(父级标签).append(节点标签)
节点标签.appendTo($(父级标签))
父级标签的起始位置 写入新的子级标签
$(父级标签).prepend(节点标签)
节点标签.prependTo($(父级标签))
(2) 同级标签前后写入新节点
同级标签之前写入
$(同级标签).before(节点标签)
节点标签.insertBefore($(同级标签))
同级标签之后写入
$(同级标签).after(节点标签)
节点标签.insertBefore($(同级标签))
4, 删除标签
$().remove()
删除节点本身
$().empty()
删除节点内容
十九 jQuery的钩子函数
所谓的钩子函数就是和异步程序相互挂钩 , 异步程序执行到不同步骤不同状态时触发的函数程序 .
jQuery中 和ajax异步请求相关的钩子函数
$(window).ajaxStart(函数程序)
在所有的ajax程序触发前执行
多个ajax程序只会触发一次
$(window).ajaxSend(函数程序)
在每个ajax程序发送之前执行
多个ajax程序触发执行多次
$(window).ajaxSuccess(函数程序)
在每个ajax程序发送成功之后执行,
多个ajax程序触发执行多次
$(window).ajaxError(函数程序)
在每个ajax程序发送失败之后执行
多个ajax程序触发执行多次
$(window).ajaxComplete(函数程序)
在每个ajax程序发送结束之后执行
多个ajax程序触发执行多次
$(window).ajaxStop(函数程序)
在所有的ajax程序请求之后执行
多个ajax程序 只会触发一次
<button>请求</button>
<script src="../26/jquery.min.js"></script>
<script>
//定义全局函数/钩子函数
//所有的请求之前触发
$(window).ajaxStart(function(){console.log('有ajax请求, 准备要执行了')}) ;
// 每个 ajax请求 正式发送之前 触发
$(window).ajaxSend( function(){ console.log( '有ajax请求 已经发送了' ) } ) ;
// 每个 ajax请求 发送成功之后 触发
$(window).ajaxSuccess( function(){ console.log( '有ajax请求 发送成功了' ) } ) ;
// 每个 ajax请求 发送失败之后 触发
$(window).ajaxError( function(){ console.log( '有ajax请求 发送失败了' ) } ) ;
// 每个 ajax请求 发送结束之后 触发
$(window).ajaxComplete( function(){ console.log( '有ajax请求 发送结束了' ) } ) ;
// 所有 ajax请求 发送结束之后 触发
$(window).ajaxStop( function(){ console.log( '所有ajax请求 发送都结束了' ) } ) ;
$('button').click(function(){
//第一个请求
$.ajax({
url:'http://localhost:8888/test/second',
type:'get' ,
success: function(response){ console.log(response)}
})
// 第二个请求
$.ajax({
url:'http://lohost:8888/test/third',
type:'get',
data:{name:'张三' , age:18} ,
success:function(response){ console.log( response ) }
})
// 第三个请求
$.ajax({
url:'http://localhost:8888/test/fourth',
type:'post',
data:{name:'李四' , age:50} ,
success:function(response){ console.log( response ) }
})
})
</script>
二十 jQuery的动画
jQuery的动画
jQuery动画函数的原理 和 move()运动函数原理相同 , 都是通过定时器将css样式改变 逐步完成 .
jQuery的动画介绍
隐藏显示
$().show() 显示
$().hide() 隐藏
$().toggle() 切换
参数1: 时间 单位毫秒
参数2: 方式 liner线性
参数3: 函数 运动结束执行的回调函数
下拉上卷
$().slideDown() 显示
$().slideUp() 隐藏
$().slideToggle() 切换
参数1: 时间 毫秒
参数2: 方式 linear线性
参数3: 函数 运动结束后执行的回调函数
渐隐渐现
$().fadeIn() 显示
$().fadeOut() 隐藏
$().fadeToggle() 切换
参数1: 时间 单位毫秒
参数2: 方式 linear线性
参数3: 函数 运动结束执行的回调函数
$().fadeTo() 切换到指定透明度
参数1 时间 单位 毫秒
参数2 透明度
参数3 方式 默认linear线性
参数4 函数 运动结束后执行的回调函数
自定义动画
$().animate()
参数1: 运动的属性 {top:100 ,left:100}
参数2: 运动的时间 单位毫秒
参数3: 运动的方式 linear线性
参数4: 运动结束的回调函数
结束动画
$().stop()
在当前运动的当前位置 立即终止没有执行完毕的运动, 在当前位置 触发执行 新的位置
$().finish()
当前位置 立即终止没有执行完毕的运动, 在上一个运动的结束位置 触发执行 新的运动.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 吸顶div -->
<div class="searchTop">我是吸顶的搜索栏</div>
<!-- 右侧侧边栏 -->
<div class="sidebar">
<ul>
<li name="other" class="active">京东秒杀</li>
<li name="other">今日特价</li>
<li name="other">品牌闪购</li>
<li name="other">发现好货</li>
<li name="other">新品首发</li>
</ul>
</div>
<!-- 楼层导航内容 -->
<div class="container">
<!-- 页面顶部内容 -->
<div class="header">页面的顶部导航栏</div>
<!-- 页面顶部的搜索栏 -->
<div class="search">我是头部的搜索栏</div>
<!-- 页面的轮播图 -->
<div class="banner">我是轮播图内容</div>
<!-- 楼层导航内容 -->
<div class="storey">
<ul>
<li>
<h3>京东秒杀区域</h3>
<div>京东秒杀区域内容</div>
</li>
</ul>
</div>
<!-- 页面底部内容 -->
<div class="footer">我是页面底部内容</div>
</div>
<script src="../26/jquery.min.js"></script>
<script>
//页面滚动监听事件
$(window).scroll(function(){
//当页面上卷至指定高度时 , 让吸顶div和侧边栏div显示
if($(window).scrollTop() >500){
//以运动方式显示
$('.searchTop').stop().slideDown(1000) ;
$('.sidebar').stop().fadeIn(1000) ;
}else{
//以运动方式隐藏
$('.searchTop').stop().slideUp(1000);
$('.sidebar').stop().fadeOut(1000);
}
//循环遍历 给所有的楼层li添加判断
$('.storey ul li').each(function(key , item){
//如果上卷高度+预留高度 > 楼层li距离页面顶部间距
if($(window).scrollTop() + 500 > $(item).offset().top){
//给楼层li对应的侧边栏li添加css
//其他侧边栏li清除css
$('.sidebar li').removeClass('active').eq(key).addClass('active');
}
})
})
//侧边栏点击事件
$('.sidebar li').click(function(e){
if($(e.target).attr('name') === 'back'){
//点击标签的那么属性是back , 点击都是返回顶部标签
//页面上卷高度为0
//通过运动完成
$('html').animate({scrollTop:0} , 1000);
}else if($(e.target).attr('name') === 'other'){
//点击的是侧边栏li标签
//页面上卷高度是点击的侧边栏li对应的楼层li距离页面顶部的间距
//按照点击的侧边栏li的索引下标查询楼层导航li获取顶部间距
$('html').animate({scrollTop:$('.storey ul li').eq($(e.target).index()).offset().top -300} , 1000);
}
})
</script>
</body>
</html>