文章目录
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"><!-- 包含 bootstrap 样式表 --><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><!--根据需求,在菜鸟教程中直接拷贝类,修改class就可以了--><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><!-- JavaScript 放置在文档最后面可以使页面加载速度更快 --><!-- 可选: 包含 jQuery 库 --><script src="/jquery/2.1.1/jquery.min.js"></script><!-- 可选: 合并了 Bootstrap JavaScript 插件 --><script src="/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script></body></html>
为了让用户体验良好,可以吧js内容放到文末: