jQuery库（1）

VIP文章 THER1881

已于 2022-07-14 11:42:45 修改

阅读量980

点赞数

文章标签： jquery javascript 前端

于 2022-07-14 11:41:21 首次发布

本文链接：https://blog.csdn.net/thwr1881/article/details/125637289

版权

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