2021年信息学部物联网工程学院学生科协第二次前端大培训

最新推荐文章于 2023-01-01 16:49:10 发布

原创最新推荐文章于 2023-01-01 16:49:10 发布 · 908 阅读

1 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用jQuery进行基础操作，如隐藏和显示元素，以及Bootstrap的响应式设计和常用组件应用。通过实例演示了如何利用Bootstrap创建美观的标签页和动画效果，适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2021科协前端培训

jQuery
Bootstrap

jQuery

jQuery简介

jQuery是一个 javascript 库。什么，你不知道什么是 javascript 库？好吧，那我先介绍一下：

什么是 javascript 库？

同学们都知道 C语言有自己的库文件，里面定义了诸如 printf、scanf、strlen 这些被人们常用的函数，当我们需要使用它们的时候，只需要在自己的程序里引入相应的头文件，再看一下函数使用规范就可以了，这大大提高了我们的开发速度。

javascript 库和 C 语言的库文件类似，本质上都是对一些函数等的打包，利用这些别人帮我们封装好的函数，我们可以很方便地实现不同的功能！

jQuery 这个名字是啥意思？

jQuery = j + Query。j 指的是 javascript，Query 是英文单词 “查询” 的意思。意思就是 jQuery 可以帮助我们快速地查询并使用 js（javascript的简称）中的一些功能。

jQuery有什么优点？

除了 jQuery，其实还有别的 javascript 库，比如protoptype、YUI、Dojo、Ext JS等，那为什么更多人喜欢 jQuery 呢？这是因为它：

免费、开源
轻量级
支持插件开发
跨浏览器兼容

jQuery 的核心文件只有几十KB，因此它不会拖慢页面的加载速度；

当我们有更高需求的时候，可以下载jQuery的插件实现更丰富的功能，如树形菜单、轮播图；

jQuery 基本兼容了现在所有主流浏览器。

jQuery的使用

进入 jQuery官网点击 “下载未压缩的开发jQuery” (Download the uncompressed,development jQuery），可以看到一大片代码
可以把这些代码全部复制下来，粘贴到自己新建的一个js文件中。也可以直接按键盘上的ctrl+s键，把文件保存到自己的电脑上
如果你用的是 Vscode 编辑器，将上述含有 jQuery 代码的文件和自己的 .html 等文件放到一个文件夹中；如果你用的是 HbuilderX 编辑器，就把 jQuery 文件放到 js 文件夹中
在你的 .html 文件中引入 jQuery，并写上入口函数，做好真正敲代码的准备：

<head>
<!--找到head标签，用script标签引入jQuery，注意“jquery-3.6.0.js”你自己的文件名 -->
	<script src = "jquery-3.6.0.js"></script>
	<script>
	$(function(){
		//这里用来写你的jQuery代码
	})
	</script>
</head>

也可以把入口函数和 jQuery 代码放在 body 标签中（但引入还是要放在 head 标签中）

<body>
	<script>
	$(function(){
		//这里用来写你的jQuery代码
	})
	</script>
</body>

jQuery 的入口函数是干嘛的？

这个相当于写jQuery的一种格式规范，它的作用是等待网页页面中的一些元素（元素的概念还记得吗？）加载完成后再调用jQuery代码。

那 $ 表示什么意思？

$ 是 jQuery 的别称，所以把入口函数的 $ 换成 jQuery 也可以的（不过 $ 显然更方便~）
通过$，可以把一个元素包装成 jQuery 对象，这样就可以调用 jQuery 的方法了（经过接下来的小试牛刀你就清楚了~）

隐藏盒子1：小试牛刀

在这里插入图片描述

<head>
	<style>
	div{
		width: 200px;
		height:200px;
		background-color: pink;
	}
	</style>
	<script src="jquery-3.6.0.js"></script>
    <script>
        $(function(){
            $('div').hide();
            //通过$把div包装成一个jQuery对象，便可调用hide()函数；$('xxx')也叫做选择器，可以选择一个或多个特定的元素
        })
        // 本来页面中是有一个粉色盒子的，加上上面三行代码就看不到了
        // 不过把代码注释掉之后就又可以看到div盒子了
    </script>
</head>
<body>
    <div>我是一个盒子</div>
</body>

jQuery 的选择器

格式：$ (‘选择器’)
注意：

引号可以是双引号或单引号，但一定要是英文的引号
选择器的写法与css选择器相同，如
$(‘div’)是标签选择器，
$(‘#big’)是id选择器，
$(‘.nav’)是class选择器，等等

隐藏盒子2：进阶版

2.1 试试三种方式隐藏盒子：

点击盒子，盒子消失

<script>
	$(function(){
		$('div').click(function(){
			$(this).hide();
		//这是在给 div 绑定点击事件，点击事件会调用 hide()
		//this 指代当前的元素，也就是 div
		})
	})
</script>

鼠标经过盒子，盒子消失

把上面的 hide 换成 mouseover 即可
鼠标移出盒子，盒子消失

把上面的 hide 换成 mouseout 即可

2.2 括号内可以跟参数

不同函数里面可以跟不同的参数，用 jQuery 设计网页的时候可以多去查看一下 jQuery的官方中文文档哦

<script>
	$(function(){
		$('div').click(function(){
			$(this).hide(1000);
		//表示hide持续1000ms
		})
	})
</script>

2.3 加个按钮试试

<head>
	<script src="jquery-3.6.0.js"></script>
	<script>
        $(function(){
            $('button').eq(0).click(function(){
                $('div').show(1000);
            });
            // eq(0)表示是第一个button，eq(1)表示第二个button，以此类推哦
            $('button').eq(1).click(function(){
                $('div').hide();
            });
            $('button').eq(2).click(function(){
                $('div').toggle();
               	//toggle函数可以实现切换，点一下消失，再点一下就出现，再再点一下又消失……
            });
        })
    </script>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div>我是一个盒子</div>
</body>

在这里插入图片描述

隐藏盒子3：专业版

一般实际开发中比较喜欢用的是淡入淡出效果，或者其他自定义的动画效果，而不会单纯地用hide() 哈哈，因为这样才美观嘛

<head>
	<script src="jquery-3.6.0.js"></script>
	<script>
        $(function(){
            $('button').eq(0).click(function(){
                $('div').fadeIn(1000);
            });
            $('button').eq(1).click(function(){
                $('div').fadeOut(1000);
            });
            $('button').eq(2).click(function(){
                $('div').fadeToggle(1000);
            });
            $('button').eq(3).click(function(){
                $('div').fadeTo(1000,0.5);
      			//这是修改透明度的函数，1是完全不透明，0是完全透明
            });
        })
    </script>
</head>
<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div>我是一个盒子</div>
</body>

最后唠唠嗑

前几年 jQuery 仍然处于大火的时代，而近来却已呈现出了没落的趋势，程序员们似乎更加喜欢vue这类轻巧的模块化框架了。不过，对于初学者来说，jQuery 仍然是一个很好用的库，很多公司之前的项目也是用 jQuery 搭建的~

Bootstrap

Bootstrap简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
Bootstrap 是基于HTML、CSS、JS的。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。

什么是响应式？

响应式 Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。
例如，你先在计算机显示器上浏览一个网站，然后在智能手机上浏览，智能手机的屏幕尺寸远小于计算机显示器，但是你却没有感觉到任何差别，两者的用户体验几乎一样，这说明这个网站在响应式设计方面做得很好。

Bootstrap使用

Bootstrap中文网：https://www.bootcss.com/
Bootstrap3中文文档：https://v3.bootcss.com/getting-started/

引入css、js

<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" 
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

基本模板

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

</head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Bootstrap 网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

什么是网格?

简单地说，网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。
在这里插入图片描述

基本的网格结构

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

第一个bootstrap项目

引入bootstrap

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
   <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

标签页

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

巨幕

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

缩略图

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a>
	 <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>