文章目录
- 1、jQuery+选择器上
- 2、jQuery的筛选器
- 3、jquery操作文本内容
- 4、jQuery操作类名
- 5、jQuery操作元素样式
- 6、jQuery基础绑定事件
- 7、jQuery事件绑定
- 9、jQuery节点操作
- 10、操作元素属性
- 11、获取元素尺寸
- 12、操作位置关系
- 13、基础动画
- 14、折叠动画
- 15、渐隐渐显动画
- 16、综合动画
- 17、停止动画
- 18、动画插件
- 19、案例-回到顶部
- 20、树状菜单
- 22、鼠标跟随
- 23、jquery发送ajax请求
- 25、ajax发送跨域请求
- 26、ajax全局钩子函数
- 27、jQuery的多库并存
- 28、深浅拷贝
- 29、jQuery里面的深浅拷贝
- 30、jQuery的插件扩展
- 32、表单验证插件
- 33、jQuery的入口函数
- 34、轮播图
添加链接描述
1、jQuery+选择器上
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
<div></div>
<script>
console.log($(('div')))
</script>
2、jQuery的筛选器
first()、last()
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
<div></div>
<div></div>
<div></div>
<script>
console.log($('div').first())
</script>
eq()指定
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
<div></div>
<div></div>
<div></div>
<script>
console.log($('div').eq(2))
</script>
next()下一个、nextAll()后面所有、nextAll(选择器)后面所有指定选择器的元素、nextUntil()后面所有兄弟元素、nextUntil(选择器)到指定选择器为止(不包括)
parent()获取当前元素父元素、parents()获取当前元素所有父元素、parents(选择器)
children()所有子元素、childrens(选择器)
siblings()所有兄弟元素自己除外
3、jquery操作文本内容
4、jQuery操作类名
addclass()、removeclass()、hasclass()、toggleclass()
5、jQuery操作元素样式
元素集合.css(‘width’)
6、jQuery基础绑定事件
on()
元素集合.on(事件类型,事件处理函数)
7、jQuery事件绑定
one()只能执行一次函数
9、jQuery节点操作
包括 创建节点、插入节点、删除节点、替换节点、克隆节点
<script>
const p =$(<p>创建</p>)
</script>
10、操作元素属性
attr()获取
元素集合.attr(属性名)
元素集合.attr(属性名,属性值)
attr()设置
元素集合.attr(属性名,属性值)
removeAttr()删除
元素集合.removeAttr(属性名)
prop()设置自定义属性
removeProp()删除
11、获取元素尺寸
12、操作位置关系
13、基础动画
show()显示
hide()隐藏
toggle()切换
14、折叠动画
slidedown()显示、slideup()隐藏、slidetoggle()
15、渐隐渐显动画
fadeIn()显示、fadeOut()隐藏、fadeToggle()
fadeTo(时间、指定透明度、运动曲线、回调函数)
16、综合动画
17、停止动画
元素集合.stop()
当代码执行到这句时,立刻停止
元素集合.finish()
当代码执行到这句时,直接去到结束位置
18、动画插件
19、案例-回到顶部
<!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>
<style>
.box {
width: 60px;
height: 60px;
position: fixed;
background-color: brown;
right: 40px;
bottom: 40px;
}
.go {
height: 3000px;
}
</style>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
<div class="go"></div>
<div class="box">
</div>
<script>
$('.box').click(() => {
$('html').animate({
scrollTop: 0
}, 4000)
})
</script>
</body>
</html>
20、树状菜单
<!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>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 300px;
border: 3px solid pink;
margin: 30px auto;
padding: 30px;
}
ul li ol{
padding-left: 30px;
display: none;
}
ul li ol li{
height: 20px;
line-height: 20px;
}
ul li::before{
content: '+';
}
ul li.active::before{
content: '-';
}
</style>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
<ul>
<li><span>第一级菜单</span>
<ol>
<li>+ 第二级</li>
<li>+ 第二级</li>
<li>+ 第二级</li>
</ol>
</li>
<li><span>第一级菜单</span>
<ol>
<li>+ 第二级</li>
<li>+ 第二级</li>
<li>+ 第二级</li>
</ol>
</li>
<li><span>第一级菜单</span>
<ol>
<li>+ 第二级</li>
<li>+ 第二级</li>
<li>+ 第二级</li>
</ol>
</li>
</ul>
<script>
$('ul li').click(function () {
$(this).toggleClass('active').siblings().removeClass('active')
$(this).find('ol').slideToggle().parent().siblings().find('ol').slideUp()
})
</script>
</body>
</html>
22、鼠标跟随
<script>
$('li').hover(
function () {
$('div').fadeIn(100)
const src = $(this).find('img').prop('src')
$('div').find('img').prop('src', src)
},
function () {
$('div').fadeOut(100)
}
)
.mouseover(function (e) {
const x = e.pageX + 10
const y = e.pageY + 10
$('div').offset({ left: x, top: y })
})
</script>
23、jquery发送ajax请求
25、ajax发送跨域请求
26、ajax全局钩子函数
ajaxStart()
表示在同一个作用域下多个ajax请求的时候
第一个ajax请求之前
ajaxSend()
表示在每一个请求发送之前触发
只要有一个请求执行send方法了,就会先触发一次
ajaxSuccess()
只要有一个请求成功了,触发一次
ajaxError()
只要有一个请求失败了,就会触发一次
ajaxComplete()
只要有个请求完成了,就会触发一次
ajaxStop()
当你有多个请求时,在最后一个请求后触发,只执行一次
27、jQuery的多库并存
28、深浅拷贝
赋值:把一个对象的地址赋值给另一个对象
浅拷贝:复制一份,两份对象内容一样,只能操作对象里面一层
深拷贝:对象空间里面无论多少层都相对独立,利用递归思想实现
29、jQuery里面的深浅拷贝
$.extend(对象1,对象2···)
把从第二个对象开始里的每一个对象的数据拷贝到第一个里面
浅拷贝
$.extend(true,对象1,对象2···)
深拷贝
30、jQuery的插件扩展
32、表单验证插件
33、jQuery的入口函数
$().ready(function(){})
34、轮播图
<!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>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
<div class="banner">
<ul class="img_box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ol class="point_box"></ol>
<div>
<p class="left"></p>
<p class="right"></p>
</div>
</div>
<script>
let timer = 0
let index = 1
setPoint()
function setPoint() {
const num = $('ul li').length
let str = ""
for (var i = 0; i < num; i++) {
str += `<li class="${i === 0 ? 'active' : ''}"></li>`
}
$('.point_box')
.html(str)
.css('width', num * 35)
.css('marginLeft', $('.point_box').width() / -2)
}
copyEle()
function copyEle() {
const first = $('.img_box').children().first().clone()
const last = $('.img_box').children().last().clone()
$('.img_box')
.append(first)
.prepend(last)
.css({
width: $('.img_box li').length * 100 + '%'
})
}
autoPlay()
function autoPlay() {
timer = setInterval(() => {
index++
$('.img_box').animate({ left: -index * $('.banner').width() }, 500, moveEnd())
}, 1000);
}
function moveEnd() {
if (index >= $('.img_box li').length - 1) {
index = 1
$('.img_box').css('left', -index * $('.banner').width())
}
if (index <= 0) {
index = $('.img_box li').length - 2
$('.img_box').css('left', -index * $('.banner').width())
}
$('.point_box li').removeClass('active').eq(index - 1).addClass('active')
}
</script>
</body>
</html>