JQuery
（一）JQuery介绍
（1）JQ基本概念
- jQuery 是一个 JavaScript 库，也是一个JS文件。JQ中封装实现了很多方法，让使用变得更加简单不再像js那样需要使用大量的方法调用。但JQ也只是实现了一些方法，还有些没有实现，因此能够使用JQ实现的，JS都能做，但是能够用JS做的，JQ不一定能够实现。
- JQ总的来说，体现了：write less， do more。简单来说，就是代码量少，功能强大。
（2）JQ的特性
- 丰富的强大的语法（CSS选择器），来查询文档元素
- 高效的查询方法，用来找到与CSS选择器匹配的文档元素集
- 一套有用的方法，用来操作选中的元素 强大的函数式编程技巧，用来批量操作元素集，而不是每次只操作单个
- 简介的语言用法（链式用法），用来表示一系列顺序操作。
（3）JQ引入方法
官网地址：https://jquery.com/
国内翻译参考：http://jquery.cuishifeng.cn/
前端资源查找：https://www.bootcdn.cn
这里我们可以使用第三个链接
引入方法：
①点击标准版的复制<script>标签，复制到body中即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>
<!-- 引入了jQuery模块 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</body>
</html>
②点击标准版的复制链接，到网页中打开，全选复制里面的代码，在Pycharm中新建一个js文件，然后在HTML文件中引用即可。
（4）JQ与JS的区别和转换
在JQ中，$()是最重要的方法，可以传递CSS选择器、Element、Document或者Window对象、HTML文本字符串、函数、字符串等对象。
①元素获取对比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>
<div class="box">张三</div>
<!-- 引入了jQuery模块 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
alert(111) /*js弹窗*/
$(alert(111)) /*jQ弹窗*/
// js获取元素及修改
box = document.querySelector('.box')
box.innerText = '李四'
//jq获取元素及修改
$box = $('.box')
$box.text('李四') /*括号里没有参数表示获取元素，有参数表示修改*/
</script>
</body>
</html>
注意：JQ的API只对自己开放，JQ不能用JS的API，JS也不能用JQ的API
即不能：
console.log(box.text()) //错误
或者
console.log($box.innerText) //错误
②内容修改对比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>
<div class="box">张三</div>
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>
<!-- 引入了jQuery模块 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
// js实现li内容修改
box1 = document.querySelectorAll('ul li') //selector选择器获取ul下的所有li元素 数组形式
box1[0].innerText = 'python'
box1[1].innerText = 'python'
box1[2].innerText = 'python'
box1[3].innerText = 'python'
box1[4].innerText = 'python'
// jq实现li内容修改
$li = $('ul li')
$li.text('python') // 一次性选中所有元素进行批改
$li.eq(0).text('python') // 单独修改 eq选取索引为0的那个元素进行修改
</script>
</body>
</html>
③js与jq对象的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>
<div class="box">张三</div>
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>
<!-- 引入了jQuery模块 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
//js与jq对象的转换
//js对象
box = document.querySelector('.box')
// 类型转化
a = $(box).text('李四') //通过把box放入$()的括号里转换成jq对象，可以使用jq语法
console.log(a);
//jq对象
$box = $('.box') //一次性获取所有，数组形式
$li = $('ul li')
b = $box.get(0) //通过.get方法转换成js对象
console.log(b.innerText);
c = $li.get(1) //js对象
console.log(c.innerText);
</script>
</body>
</html>
（二）JQuery操作HTML属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQeury操作HTML属性</title>
</head>
<body>
<input type="text">
<button>单击</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
doc = document.querySelector('input')
btn = document.querySelector('button')
btn.onclick = function () {
console.log(doc.value); //js获取value值
// console.log($(doc).val()); //jq获取value值
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQeury操作HTML属性</title>
</head>
<body>
<div id="box">
<span class="sp1"></span>
<span class="sp2"></span>
<span class="sp3"></span>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
//获取属性---attr 设置、获取 标签属性
// console.log($('#box').attr('id')); //输出为box
// console.log($('span').attr('class')); //输出为sp1 在jq中，获取值时，一般只获取第一个
// console.log($('span').eq(1).attr('class')); //输出为sp2 通过eq索引获取指定值
//添加和修改属性
// 有则改，无则增
// $('#box').attr('id','box1') //修改属性值
// $('#box').attr('class','box1') //没有则添加类和属性值
// $('span').attr('class','box1') //有则修改所有
//删除属性
// $('#box').removeAttr('id')
// $('span').removeAttr('class') //删除所有
//class属性操作
// $('#box').addClass('box') // 添加
// $('span').addClass('box') // 如果有class类了，在原有的基础上再添加一个类属性值
//删除class类属性值
// $('span').removeClass('box') //删除所有box属性值
// toggleClass 设置lcass属性 只针对class属性
// $('#box').toggleClass('box') // 没有就添加
// $('#box').toggleClass('box1') // 有class类没有box1就添加
// $('#box').toggleClass('box1') // 有box1就删除
</script>
</body>
</html>
（三）JQuery样式修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq实现样式修改</title>
</head>
<body>
<div id="box">111</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
//修改添加单个样式
$('#box').css('width','400px')
//修改添加多个样式 写在字典中
$('#box').css({
'width':'400px',
'height':'400px',
'backgroundColor':'pink'
})
</script>
</body>
</html>
（四）JQuery事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js操作事件</title>
</head>
<body>
<div id="box1">zs1</div>
<div id="box2">zs2</div>
<div id="box3">zs3</div>
<button id="btn">移除事件</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
// 单击事件 click
// $('#box1').click(function () {
// $('#box1').text('我的名字是张三1')
// })
// 双击事件 dblclick
// $('#box2').dblclick(function () {
// $('#box2').text('我的名字是张三2')
// })
// 移入移出事件
// $('#box3').hover(function () {
// $('#box3').text('我的名字是张三3')
//
// },function () {
// $('#box3').text('我的名字是张三4')
// })
//单独定义原生的移入和移出事件
//移入
// $('#box3').mouseenter(function () {
// $('#box3').text('我的名字是张三3')
//
// })
// 移出
// $('#box3').mouseleave(function () {
// $('#box3').text('我的名字是张三4')
//
// })
// on绑定单个事件
// 格式：jq对象.on(事件,函数)
// $('div').on('click',function () {
// //$(this) 表示当前所点击的元素
// $(this).text('子冧666')
// $(this).css('color','red')
// })
// on绑定多个事件
// jq对象.on({事件:函数，事件:函数，...})
// $('div').on({
// 'click':function () {
// console.log($(this).text())
// },
// 'mouseenter':function () {
// console.log($(this).text())
// },
// 'mouseleave':function () {
// console.log($(this).text())
// }
//
// })
// off移除事件
// $('#btn').click(function () {
// // $('div').off('click')
// $('div').off() // 没有参数移除on所绑定的所有事件
// })
//
</script>
</body>
</html>
（五）JQuery动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq动画的实现</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="btn1">隐藏</button>
<button id="btn2">显示</button>
<button id="btn3">淡入</button>
<button id="btn4">淡出</button>
<button id="btn5">向下</button>
<button id="btn6">向上</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
//jq动画
$('#btn1').click(function () {
$('#box').hide(1000) //毫秒 隐藏
// $('#box').toggle(1000) //隐藏和显示放在一个按钮
})
$('#btn2').click(function () {
$('#box').show(1000) // 显示
})
$('#btn3').click(function () {
// $('#box').fadeIn(1000) //淡入 显示
// $('#box').fadeToggle(1000) //淡入和淡出放在一个按钮
$('#box').fadeTo(1000,0.2) // 设置透明度 块不会消失
})
$('#btn4').click(function () {
// $('#box').fadeOut(1000) //淡出 消失
$('#box').fadeTo(1000,0.8) // 设置透明度
})
$('#btn5').click(function () {
// $('#box').slideDown(1000) //向下
$('#box').slideToggle(1000) //向下和向上放在一个按钮
})
$('#btn6').click(function () {
// $('#box').slideUp(1000) //向上
})
</script>
</body>
</html>
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animate 动画</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
position: absolute; /*绝对定位*/
}
</style>
</head>
<body>
<button id="btn1">展示动画</button>
<button id="btn2">暂停动画</button>
<div id="box"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
$('#btn1').click(function () {
$('#box').animate({
'width':'400px',
'height':'400px',
//块移动
// 'left':'+=50px',
// 'top':'+=50px',
//透明度
// 'opacity':'0.5'
},2000).delay(4000) //秒数 delay延迟是在暂停之后再次点击展示，则会延迟4秒
})
$('#btn2').click(function () {
$('#box').stop() //暂停动画
})
</script>
</body>
</html>
3389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
