一、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>
