一、jQuery介绍
1、简介
jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。
之前的js代码和HTML是写在一起的，现在可以把js代码独立出来，创建一个js目录，里面用来放单独的js代码，然后在HTML的head里加入:<script type="text/javascript" src="目录名/文件名.js"></script> pycharm里鼠标把文件移入head中也可以实现此句话。
2、优势
将获取元素的语句写到页面头部head,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,它的速度比原生的 window.onload 更快。
二、jQuery基本语法
选择某个网页元素,然后对它进行某种操作，jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。
- 择某个网页元素,然后对它进行某种操作：
![在这里插入图片描述]()
- 选择器修饰过滤：
![在这里插入图片描述]()
- 选择器函数过滤:
![在这里插入图片描述]()
- 选择器转移：
- 同一个函数完成取值和赋值：
- jQuery属性操作，设置html内容
![在这里插入图片描述]()
![在这里插入图片描述]()
- 设置属性值：
![在这里插入图片描述]()
三、 应用案例
1、基于jquery实现Tab选项卡：
HTML文件：
<!--声明HTML-->
<!DOCTYPE html>
<!--html文档-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>沈楚琪的web浏览器 </title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="css.css">
<script>
$(function () {
$('.nav li').mouseenter(function () {
$(this).addClass('current');
$(this).siblings().removeClass("current");
var index = $(this).index();
var contentli = $('.content li ').eq(index);
contentli.siblings().removeClass('show');
contentli.addClass('show')
})
})
</script>
</head>
<body>
<div class="box">
<ul class="nav">
<li class="current ">主页</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="content">
<li class="show"><img src="1.jpg" alt=""></li>
<li><img src="2.png" alt=""></li>
<li><img src="3.png" alt=""></li>
<li><img src="4.png" alt=""></li>
</ul>
</div>
</body>
</html>
css.css样式文件
*{
margin: 0;
padding: 0;
}
.box{
width: 450px;
height: 300px;
border: 1px solid lightgray;
margin: 50px auto;
}
.nav li {
list-style: none;
width: 110px;
height: 50px;
background-color: lightgray;
color: #2f0099;
text-align: center;
line-height: 50px;
float: left;
border: 1px solid white;
}
.nav li:hover{
background-color: darkgray;
}
.nav .current{
background-color: darkgray;
}
.content li{
list-style: none;
display: none;
}
.content .show{
display: block;
}
.content li img{
width: 450px;
height: 250px;
}
实现效果：
2、基于jqurey实现电影排行榜：
<!--声明HTML-->
<!DOCTYPE html>
<!--html文档-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>沈楚琪的web浏览器 </title>
<script type="text/javascript" src="js.js"></script>
<link rel="stylesheet" href="css.css">
<script>
$(function () {
$(' li ').mouseenter(function () {
$(this).addClass('current');
});
$('li ').mouseleave(function () {
$(this).removeClass('current');
});
})
</script>
</head>
<body>
<div class="box">
<h1>HTML语法</h1>
<ul>
<li>
<span>1</span> HTML
<div class="content">
<img src="5.png">
<p>
这是关于heml语法的介绍。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
</p>
</div>
</li>
<li>
<span>1</span> HTML
<div class="content">
<img src="5.png">
<p>
这是关于heml语法的介绍。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
</p>
</div>
</li>
<li>
<span>1</span> HTML
<div class="content">
<img src="5.png">
<p>
这是关于heml语法的介绍。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
</p>
</div>
</li>
<li>
<span>1</span> HTML
<div class="content">
<img src="5.png">
<p>
这是关于heml语法的介绍。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
</p>
</div>
</li>
<li>
<span>1</span> HTML
<div class="content">
<img src="5.png">
<p>
这是关于heml语法的介绍。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
</p>
</div>
</li>
</ul>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 450px;
border: 1px solid gray;
margin: 50px auto;
}
.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;
}
/*li 标签前三个背景颜色修改*/
.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*/
.current .content {
display: block;
}
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中