Python（四十二）jQuery选择器、样式操作、事件和动画
这篇文章内容涉及的主要是JavaScript中的一个库，也是一个JavaScript文件，名叫jQuery。
1. jQuery介绍
1.1. jQuery介绍
jQuery是一个JavaScript库,也是一个JS文件。jQuery虽然封装实现了很多的方法，让使用变得更加简单不再像JavaScript那样需要使用大量的方法调用。但jQuery也只是实现了一些方法，还有些不能实现，所以能够使用jQuery是实现的，JavaScript都能做，但是能够用JavaScript做的，jQuery不一定能够实现。
1.2. jQuery理念
代码量少，功能却强大。
1.3. jQuery特性
①丰富而又强大的语法(CSS选择器)，来查询文档元素；
②高效的查询方法，用来找到与CSS选择器匹配的文档元素集；
③有一套有用的方法，用来操作选中的元素；
④强大的函数式编程技巧，用来批量操作元素集，而不是每次只操作单个；
⑤简介的语言用法（链式用法)，用来表示一系列的顺序操作。
1.4. jQuery的学习
jQuery的国内翻译学习网站链接：https://jquery.cuishifeng.cn/;
前端资源查找：https://www.bootcdn.cn/;
jQuery的标准版本：https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js;
需要在代码文件里加入这句话<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>才可以使用jQuery方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>introduction to jQuery</title>
</head>
<body>
<p id="p1">111</p>
<p class="p2">222</p>
<p>333</p>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
$(
function (){
alert('666')
}
)
// JS写法
var ap=document.getElementsByTagName('p')[0]
console.log(ap);
// // ap.innerText="666" //JS中修改元素的方法
// ap.text('666') //JS不能用jQ的方法，会报错
$(ap).text('666') // 这样写就可以用jQ的方法
// jQ写法
$('p').text('777') // 标签
$('#p1').text('444') // id
$('.p2').text('666') // class
$('#p1').innerText="666" // jQ不能用JS的方法，无反应
$('#p1')[0].innerText='777' // 通过中括号下标，jQ就可以使用JS的方法
$('p').get(1).innerText='888'
</script>
</body>
</html>
2. jQuery操作HTML属性
$('p')：一般都是通过美元符来获取标签或者标签对应的属性，这里是p标签。
$("p").eq(2).attr("class","p2")：jQuery添加属性的方法，通过eq()获取下标值，单独添加。
attr：后跟两个参数，有则改无则增；后跟一个参数，则是获取对应的属性。
removeAttr：删除属性，不留下class。
this是javascript自身的语法关键字，它指向一个javascript对象，所以可以使用所指向的目标javascript对象所拥有的方法, 但他自己不是一个普通的变量，所以无法自己定义一个变量叫this。
欲了解更多请看下方代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery operation HTML attribute</title>
<style>
.p2{
color: thistle;
}
.p3{
background-color: cornflowerblue;
}
</style>
</head>
<body>
<p id="p1">111</p>
<p class="p2">222</p>
<p>333</p>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
$("p").eq(2).attr("class","p2") // 添加属性，eq()获取下标值，单独添加
$("p").attr('class',"p1") // class属性有则改，无则增
console.log($("p").attr("class")); // 获取属性
$("p").removeAttr('class') // 删除属性————不留class
$("p").addClass('p2') // 所有的都添上p2，可以添加多个Class属性
$("p").addClass('p3') // 所有的都添上p3，可以添加多个Class属性
$("p").removeClass('p3') // 传class值，只移除传的class值，不传class值，则移除全部————留下class
$("p").toggleClass('p3') // 有就删，没有就加。
$("p").toggleClass('p3') // 有就删，没有就加。
// 在jQ中，设置某个值的时候，一般自带遍历
$('p').html('我是段落标签') // 直接改变标签内容
// each方法，在jQ中，设置某个值的时候，一般自带遍历
$('p').each(function (i){
// this.innerText='6666'
$(this).text('我是第'+(i+1)+'个列表')
})
$('p').click(function (){
alert($(this).index())
})
</script>
</body>
</html>
3. jQuery操作CSS样式
可以与事件结合，来改变css样式。不加{}则修改单个样式，反之则修改多个样式。
欲了解更多请看下方代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery operation CSS style</title>
</head>
<body>
<p id="p1">111</p>
<p class="p2">222</p>
<p>333</p>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
// 修改单个CSS样式
$('#btn1').click(function (){
$('#p1').css('color','blue')
})
// 修改多个CSS样式
$('#btn2').click(function (){
$('#p1').css({
"color":"red","font-size":"22px","background-color":"blue",'padding':'20px'
})
// 只能拿到P标签的宽度高度，不能设置值
alert($('p').innerWidth()) // 获得宽，包括内边距
alert($('p').innerHeight()) // 获得高，包括内边距
})
// 括号里未写值，则为拿到p的宽度/高度；写了值，则为设置宽度/高度
$('p').width('400px')
$('p').height('30px')
// 只能拿到P标签的宽度高度，不能设置值
$('p').innerWidth() // 获得宽，包括内边距
$('p').innerHeight() // 获得高，包括内边距
// 获得盒子模型的宽度高度
$('p').outerWidth() // 拿到盒子模型的宽度
$('p').outerHeight() // 拿到盒子模型的高度
</script>
</body>
</html>
4. jQuery事件
click()：单击事件；
dblclick()：双击事件；
hover()：鼠标移入移出事件；
mouseenter()：鼠标移入事件；
mouseleave()：鼠标移出事件；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery event</title>
</head>
<body>
<p id="p1">111</p>
<p class="p2">222</p>
<p>333</p>
<button>清除事件</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
// 单击事件
$('p').click(function (){
$('p').text('猜猜我是谁')
})
// 双击事件
$('p').dblclick(function (){
$('p').text("我是jQuery呀")
})
// 鼠标移入移出
$('p').hover(function (){ // 移入
$('p').text('我又变了')
},function() { // 移出
$('p').text('我变回来啦')
})
// 鼠标移入移出
$('p').mouseenter(function (){ // 鼠标移入
$('p').text('他走了，我不是你要找的')
})
$('p').mouseleave(function (){ // 鼠标移出
$('p').text('他走了，我也不是你要找的')
})
// 绑定单击事件
$('p').on('click',function (){
$(this).css('color','red')
})
// 清除单击事件
$('button').click(function (){
$('p').off('click')
})
</script>
</body>
</html>
5. jQuery动画
hide：隐藏；
show：显示；
slideUp：向上隐藏；
slideToggle：取反，向上隐藏的反操作，向下显示；
slideDown：向下显示；
fadeOut：淡出；
fadeToggle：取反，淡出的反操作，隐现；
fadeIn：隐现；
fadeTo：这里有两个参数，一个是速度（毫秒、slow、normal、fast），一个是透明度，速度参数不能省略；
animate()：animate函数的内容：只有数字值才可创建动画（比如 "margin:30px"），字符串值无法创建动画（比如 "background-color:red"）；
stop：动画停止。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery animation</title>
<style>
#p1{
width: 100px;
height: 100px;
background-color: thistle;
position: relative;
}
</style>
</head>
<body>
<p id="p1"></p>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
// 用2秒时间隐藏
$('#btn1').click(function (){
$('p').hide(2000)
})
// 用3秒时间显示
$('#btn2').click(function (){
$('p').show(3000)
})
// 向上隐藏
$('#btn1').click(function (){
$('p').slideUp(2000)
$('p').slideToggle(2000) // 取反，向上隐藏的反操作：向下显示
})
// 向下显示
$('#btn2').click(function (){
$('p').slideDown(2000)
})
// 淡出，慢慢消失
$('#btn1').click(function (){
$('p').fadeOut(2000) // 淡出，慢慢消失
$('p').fadeToggle(2000) // 取反，淡出的反操作：隐现
})
// 隐现—lomming
$('#btn2').click(function (){
$('p').fadeIn(2000)
})
// 淡出到透明度为0.2的时候，就不淡出了
$('#btn1').click(function (){
$('p').fadeTo(2000,0.2)
})
// 动画耗时2s，期间若有暂停，再按下按钮1，需延迟3秒后才可以继续展示动画
$('#btn1').click(function (){
// animate的内容：只有数字值才可创建动画（比如 "margin:30px"），字符串值无法创建动画（比如 "background-color:red"）。
$('p').animate({
"width":'200px','height':'200px','left':'100px' // 使用left前，需要先将定位属性调为相对定位
},2000).delay(3000)
})
// 按下按钮2，动画停止
$('#btn2').click(function (){
$('p').stop()
})
</script>
</body>
</html>
文章到这里就结束了！希望大家能多多支持Python（系列）！六个月带大家学会Python，私聊我，可以问关于本文章的问题！以后每天都会发布新的文章，喜欢的点点关注！一个陪伴你学习Python的新青年！不管多忙都会更新下去，一起加油！
Editor：Lonelyroots
网友评论