一、jQuery库
1、什么是jQuery库
是JavaScript中的库。
2、设计理念
“写得少，做的多”
3、使用方法
3.1、在页面中导入jQuery.js文件
<script type="text/javascript" src="./jquery-3.4.1.js"></script>
3.2、在script标签当中编写jquery程序
‘$’:是jQuery的全局对象，代表的是jQuery
//简写写法：
'$(function(){
//jquery的入口函数
jquery
})'
//完整写法：
$(documen).ready(function(){
jquery
})
4、jQuery的基本选择器
4.1、id选择器：#id
<!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>
<script src="./jquery-3.4.1.js"></script>
</head>
<body>
<button id="hide">隐藏</button>
<br>
<p id="p1">西安</p>
<script>
$(function(){
$('#hide').bind('click',function(){
alert('你单击了按钮')
})
//修改p1的颜色
$('#p1').css('backgroundColor','red')
})
</script>
</body>
</html>
4.2、类选择器：.class
<!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>
<script src="./jquery-3.4.1.js"></script>
</head>
<body>
<p class="pt">陕西</p>
<p class="pt">陕西示范</p>
<script>
$(function(){
//修改class为pt的元素的文本颜色
$('.pt').css('color','blue')
})
</script>
</body>
</html>
4.3、标签名选择器：标签名
<p id="p1">西安</p> -
<p class="pt">陕西</p>
<p class="pt">陕西示范</p>
<!-- <hr>
<div>水浒</div>
<div>三国</div>
<div>西游</div>
<div>红楼</div> -->
<script>
$(function(){
//将所有p标签的文本的字号设置为25
$('p').css('fontSize','25px')
})
</script>
5、jQuery的基本过滤选择器
5.1、first：选择第一个元素
<!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>
<script src="./jquery-3.4.1.js"></script>
</head>
<body>
<!-- <button id="hide">隐藏</button>
<br> -->
<p>西安</p> -
<p >陕西</p>
<p >陕西示范</p>
<script>
$(function(){
//将第一个p标签的背景色改为蓝色
$('p:first').css('backgroundColor','blue')
})
</script>
</body>
</html>
5.2、last ；选择最后一个元素
<!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>
<script src="./jquery-3.4.1.js"></script>
</head>
<body>
<p>西安</p>
<p >陕西</p>
<p>陕西示范</p>
<script>
$(function(){
//将最后一个p标签字体颜色改为红色
$('p:last').css('color','red')
})
</script>
</body>
</html>
5.3、not(selector):不是指定的某个元素
<!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>
<script src="./jquery-3.4.1.js"></script>
</head>
<body>
<p>西安</p>
<p class="pt">陕西</p>
<p class="pt">陕西示范</p>
<script>
$(function(){
//将class属性不是pt属性的元素的字号变小
$('p:not(.pt)').css('fontSize','12px')
})
</script>
</body>
</html>
5.4、even：索引为偶数的元素
<!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>
<script src="./jquery-3.4.1.js"></script>
</head>
<body>
<div>水浒</div>
<div>三国</div>
<div>西游</div>
<div>红楼</div>
<script>
$(function(){
//让索引为偶数的div的字体颜色为hong色
$('div:even').css('color','red')
})
</script>
</body>
</html>
<