Web前端开发----jQuery

文章目录

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

Web前端开发----jQuery

一、jQuery介绍

关于前端的学习，可以通过菜鸟教程和W3C网站学习

一些前端页面设计的模板，可以参考懒人之家：/

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官方网站: /

我们不需要看源代码，可以下载压缩版的：

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

我这里是点击直接下载到js目录中

2、jQuery加载

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

也可以简写：

二、jQuery选择器

选择某个网页元素,然后对它进行某种操作，jquery选择器可以快速地选择元素,

选择规则和css样式相同,使用length属性判断是否选择成功。

1、jquery用法思想一

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

基本选择器

选择器修饰过滤

选择器函数过滤

选择器转移

2、jquery用法思想二

同一个函数完成取值和赋值

操作行间样式

操作样式类名

三、jQuery属性操作

1、设置html内容

设置html内容

2、设置属性值

绑定click事件

jQuary特效效果

四、jQuary事件

五、应用案例

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

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

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}.box{width: 300px;height: 450px;border: 1px solid gray;margin: 0 auto;margin-top: 50px;}.box h1{font-size: 25px;line-height: 35px;color: green;padding-left: 10px;border: 1px dashed gray;}.box li{list-style: none;padding: 10px 10px;border: 1px dashed gray;}.box li span{background-color: gray;/*设置行内元素，才能改变宽高*/display: inline-block;width: 15px;height: 15px;color: white;text-align: center;margin-right: 8px;}/*修改前三个标签背景颜色*/.box li:nth-child(-n+3) span{background-color: green;}.content img{width: 80px;height: 120px;float: left;}.content p{width: 180px;height: 120px;float: right;font-size: 12px;}.content{margin-top: 5px;/**/overflow: hidden;/*content类不显示样式*/display: none;}.current .content{/* .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/bingxueqiyuan.jpg"><p>本片由奥斯卡金牌团队打造——导演珍妮弗·李和克里斯·巴克、制作人彼得·戴尔·维克以及词曲作者克里斯汀·安德森-洛佩兹及罗伯特·洛佩兹悉数回归，原配音班底伊迪娜·门泽尔、克里斯汀·贝尔、乔纳森·格罗夫和乔什·盖德再度加盟。</p></div></li><li><span>2</span>冰雪奇缘<div class="content"><img src="img/bingxueqiyuan.jpg"><p>本片由奥斯卡金牌团队打造——导演珍妮弗·李和克里斯·巴克、制作人彼得·戴尔·维克以及词曲作者克里斯汀·安德森-洛佩兹及罗伯特·洛佩兹悉数回归，原配音班底伊迪娜·门泽尔、克里斯汀·贝尔、乔纳森·格罗夫和乔什·盖德再度加盟。</p></div></li><li><span>3</span>冰雪奇缘<div class="content"><img src="img/bingxueqiyuan.jpg"><p>本片由奥斯卡金牌团队打造——导演珍妮弗·李和克里斯·巴克、制作人彼得·戴尔·维克以及词曲作者克里斯汀·安德森-洛佩兹及罗伯特·洛佩兹悉数回归，原配音班底伊迪娜·门泽尔、克里斯汀·贝尔、乔纳森·格罗夫和乔什·盖德再度加盟。</p></div></li><li><span>4</span>冰雪奇缘<div class="content"><img src="img/bingxueqiyuan.jpg"><p>本片由奥斯卡金牌团队打造——导演珍妮弗·李和克里斯·巴克、制作人彼得·戴尔·维克以及词曲作者克里斯汀·安德森-洛佩兹及罗伯特·洛佩兹悉数回归，原配音班底伊迪娜·门泽尔、克里斯汀·贝尔、乔纳森·格罗夫和乔什·盖德再度加盟。</p></div></li><li><span>5</span>冰雪奇缘<div class="content"><img src="img/bingxueqiyuan.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/img4.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引入

Boostrap是国外的，我们如果要显示样式，就要闲去访问国外的服务器，吧他的css样式闲下载到本地，太慢了，所以，

可以把Bootstrap下载到本地。

也可以复制国内CDN加速服务，如下：

直接复制标签放到html里面就可以了（两个都可以）：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Bootstrap 实例</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/libs/bootstrap/3.2.0/css/bootstrap.min.css"></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/nvhai.jpg" 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><script src="/jquery/2.1.1/jquery.min.js"></script><script src="/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script></body></html>

为了让用户体验良好，可以吧js内容放到文末：