Web前端—04jQuery介绍

最新推荐文章于 2024-03-17 13:40:20 发布

小黑--

最新推荐文章于 2024-03-17 13:40:20 发布

阅读量249

点赞数

分类专栏： Web前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_41645466/article/details/104312318

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

一、jQuery介绍
- 1、简介
- 2、jQuery加载
二、jQuery选择器
- 1、jquery用法思想一
- 2、jquery用法思想二
三、jQuery属性操作
- 1、设置html内容
- 2、设置属性值
四、应用案例
- 1、基于jqurey实现电影排行榜：
- 2、基于jquery实现Tab选项卡
五、Bootstrap简介
- 1、介绍
- 2、Bootstrap引入

一、jQuery介绍

1、简介

jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

在上一篇中我们写到的很多案例代码，他们的js代码和HTML是写在一起的，其实我们可以把js代码独立出来，创建一个js目录，里面用来放单独的js代码，然后在HTML的head里加入

<script type="text/javascript" src="目录名/文件名.js"></script>

jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。
下载地址:
jQuery官方网站: http://jquery.com/

在这里插入图片描述

打开这样一个文件，将该文件的内容复制，粘贴到一个.js文件中即可，文件名称就为 jquery-3.4.1.min
`

2、jQuery加载

将获取元素的语句写到页面头部head,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,它的速度比原生的 window.onload 更快。
在这里插入图片描述
也可以简写：

二、jQuery选择器

选择某个网页元素,然后对它进行某种操作，jquery选择器可以快速地选择元素,
选择规则和css样式相同,使用length属性判断是否选择成功。

1、jquery用法思想一

选择某个网页元素,然后对它进行某种操作

在这里插入图片描述
选择器修饰过滤：

选择器函数过滤:

选择器转移：

2、jquery用法思想二

同一个函数完成取值和赋值
在这里插入图片描述

三、jQuery属性操作

1、设置html内容

在这里插入图片描述

2、设置属性值

在这里插入图片描述

四、应用案例

1、基于jqurey实现电影排行榜：

默认只显示电影名称列表，当鼠标经过电影名称时，显示电影的详细内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        .box{
            width: 300px;
            height: 450px;
            border: 1px solid gray;
            margin: 0 auto;
            margin-top: 50px;
        }
        .box h1{
            color: dodgerblue;
            font-size: 20px;
            line-height: 35px;
            font-weight: bold;
            border: 1px dashed gray;
            padding-left: 10px;
        }
        .box li{
            list-style: none;
            padding: 10px 10px;
            border: 1px dashed gray;
        }
        .box li span{
            background-color: darkgray;
            display: inline-block;
            width: 20px;
            height: 20px;
            text-align: center;
        }
        .box li:nth-child(-n+3) span{
            background-color: dodgerblue;
        }
        .content img{
            width: 80px;
            height: 120px;
            float: left;
        }
        .content p{
            width: 180px;
            height: 120px;
            float: right;
            font-size: 12px;
        }
        .content{
            margin: 5px;
            overflow: hidden;
            display: none;
        }
        .current .content{
            display: block;
        }

    </style>

    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script>
   	 //当页面加载完成时，执行的js内容
        $(function () {
	    //在鼠标移入时，做什么事情，定义一个匿名函数
            $('li').mouseenter(function () {
                $(this).addClass('current');
            });

            $('li').mouseleave(function () {
                $(this).removeClass('current');
            });
            })

    </script>
</head>
<body>

<div class="box">
    <h1>电影排行榜</h1>
    <ul>
        <li>
            <span>1</span> 哪吒之魔童降世
            <div class="content">
                <img src="img/movie.jpg">
                <p>
                    天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人， 而魔丸则会诞出魔王，为祸人间。
                </p>
            </div>
        </li>

        <li>
            <span>2</span> 哪吒之魔童降世
            <div class="content">
                <img src="img/movie.jpg">
                <p>
                    天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人， 而魔丸则会诞出魔王，为祸人间。
                </p>
            </div>
        </li>

        <li>
            <span>3</span> 哪吒之魔童降世
            <div class="content">
                <img src="img/movie.jpg">
                <p>
                    天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人， 而魔丸则会诞出魔王，为祸人间。
                </p>
            </div>
        </li>

        <li>
            <span>4</span> 哪吒之魔童降世
            <div class="content">
                <img src="img/movie.jpg">
                <p>
                    天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人， 而魔丸则会诞出魔王，为祸人间。
                </p>
            </div>
        </li>

        <li><span>5</span> 哪吒之魔童降世
        <div class="content">
            <img src="img/movie.jpg">
            <p>天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人， 而魔丸则会诞出魔王，为祸人间。
            </p>
        </div>
        </li>
    </ul>
</div>
</body>
</html>

当鼠标经过电影名称时，显示详细内容：
在这里插入图片描述

2、基于jquery实现Tab选项卡

点击选项卡，出现不同的图片内容

上一个案例代码是写在一个html文件里了
为了方便清楚，我们最好还是将html文件和js,css文件分开来写，在html文件里的头部加入css和js即可

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/tab.css">
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script src="js/tab.js"></script>

</head>
<body>

<div class="box">
    <ul class="nav">
        <li class="current">主页</li>
        <li>遇见好货</li>
        <li>年终狂欢</li>
        <li>夏日时尚</li>
    </ul>
    <ul class="content">
        <li class="show"><img src="./img/img5.jpg" alt=""></li>
        <li><img src="./img/img1.jpg" alt=""></li>
        <li><img src="./img/img2.jpg" alt=""></li>
        <li><img src="./img/img3.jpg" alt=""></li>
    </ul>
</div>

</body>
</html>

css文件:

*{
    margin: 0;
    padding: 0;
}
.box{
    width: 448px;
    height: 298px;
    border: 1px solid lightgray;
    margin: 50px auto;
}
.nav li{
    list-style: none;
    width: 109px;
    height: 50px;
    background: darkseagreen;
    color: white;
    text-align: center;
    line-height: 50px;
    float: left;
    border: 1px solid white;
}
.nav li:hover{
    background-color: green;
}
.nav .current{
    background-color: green;
}
.content li{
    list-style: none;
    display: none;   /*默认不显示*/
}
.content .show{
    /*显示块级元素*/
    display: block;
}
.content li img{
    width: 448px;
    height: 248px;
}

js文件:

//当页面加载完成时，执行的js内容
$(function () {
    //监听鼠标是否移动到Tab选项卡的事件
    //在鼠标移入时，做什么事情（修改颜色）定义一个匿名函数;修改为当鼠标点击时：直接将mouseenter改为click
    $('.nav li').mouseenter(function () {
        $(this).addClass('current');
        //还原其他兄弟节点的颜色
        $(this).siblings().removeClass('current');
        //获取对应选项卡的索引，为了找到对应索引的图片
        var index = $(this).index();
        //根据索引找到对应的图片
        var content_li = $('.content li').eq(index);
        //隐藏兄弟节点显示的图片
        content_li.siblings().removeClass('show');
        //显示选项卡对应的图片
        content_li.addClass('show')
    })
})

页面展示:
在这里插入图片描述

五、Bootstrap简介

1、介绍

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的

优点：

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。

包含的内容:

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

2、Bootstrap引入

在访问国外的网下载时，太慢了，使用国内CDN加速服务
在这里插入图片描述

使用时复制link标签添加到html中
或者自己下载到本地，下载链接：
bootstrap.min.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 包含头部信息用于适应不同设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 包含 bootstrap 样式表 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
      <h2>表格</h2>
      <p>创建响应式表格 (将在小于768px的小型设备下水平滚动)。另外：添加交替单元格的背景色：</p>
      <div class="table-responsive">
       <table class="table table-striped table-bordered">
         <thead>
           <tr>
             <th>#</th>
             <th>Name</th>
             <th>Street</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td>1</td>
             <td>Anna Awesome</td>
             <td>Broome Street</td>
           </tr>
           <tr>
             <td>2</td>
             <td>Debbie Dallas</td>
             <td>Houston Street</td>
           </tr>
           <tr>
             <td>3</td>
             <td>John Doe</td>
             <td>Madison Street</td>
           </tr>
         </tbody>
       </table>
      </div>

      <h2>图像</h2>
      <p>创建响应式图片(将扩展到父元素)。 另外：图片以椭圆型展示：</p>
      <img src="img/logo.png" class="img-responsive img-circle" alt="Cinque Terre" width="304" height="236">

      <h2>图标</h2>
      <p>插入图标:</p>
      <p>云图标: <span class="glyphicon glyphicon-cloud"></span></p>
      <p>信件图标: <span class="glyphicon glyphicon-envelope"></span></p>
      <p>搜索图标: <span class="glyphicon glyphicon-search"></span></p>
      <p>打印图标: <span class="glyphicon glyphicon-print"></span></p>
      <p>下载图标：<span class="glyphicon glyphicon-download"></span></p>
    </div>

 <!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
    <!-- 可选: 包含 jQuery 库 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
    <script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>
</html>