Web前端之jQuery库

文章目录

一、jQuery介绍
- 1、什么是jQuery
- 2.jQuery语言特点及优势
- 3.jQuery官方网站
- 4.jQuery加载
二、jQuery选择器
- 1、jquery用法思想一：
- - i、基本选择器
  - ii、选择器修饰过滤
  - iii、选择器函数过滤
  - iv、选择器转移
- 2、jquery用法思想二
三、jQuery属性操作
- 1.设置HTML内容
- 2.设置属性值
- 3.绑定click事件
- 4.jQuery特殊效果
四、应用案例
- 1.案例一：基于jQuery实现电影排行榜
- 2. 案例二：基于jQuery实现Tab选项卡

一、jQuery介绍

1、什么是jQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
jQuery设计的宗旨是**“write Less，Do More”**，即倡导写更少的代码，做更多的事情;
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
运行jQuery所需的条件很简单：一台计算机、一个智能电话或一个可以运行现代浏览器的设备。

2.jQuery语言特点及优势

特点：

快速获取文档元素。 jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
提供漂亮的页面动态效果。 jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。
创建AJAX无刷新网页。 AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。
提供对JavaScript语言的增强。 jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。
增强的事件处理。 jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太多事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。
更改网页内容。 jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。

优势：

jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习

jquery不等于JS！

3.jQuery官方网站

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

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

jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。

下载地址:
jQuery官方网站: http://jquery.com/

4.jQuery加载

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

二、jQuery选择器

选择某个网页元素,然后对它进行某种操作， jquery选择器 jquery选择器可以快速地选择元素, 选择规则和css样式相同,使用length属性判断是否选择成功。
jQuery 中所有选择器都以美元符号开头：$()。

1、jquery用法思想一：

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

i、基本选择器

$(document)  //选择整个文档对象
$('li')      //选择所有的li元素
$('#myid')   //选择id为myid的网页元素
$('.myClass')  //选择class为myClass的元素
$('input[name=first]')  //选择name属性等于first的input元素
$('#ul1 li span')  //选择id为ul1元素下的所有li下的span元素

ii、选择器修饰过滤

$('#ul1 li:first')  //选择id为ul1元素下的第一个l个li
$('#ul1 li:odd')  //选择id为ul1元素下的li的奇数行
$('ul1 li:eq(2)')  //选择id为ul1元素下的第3个lli
$('#ul1 li:gt(2)')  //选择id为ul1元素下的前三个之后的li
$('#myForm:input')  //选择表单中的input元素
$('div:visble')  //选择可见的div元素

iii、选择器函数过滤

$('div').has('p');  //选择包含p元素的div元素
$('div').not('.myClass');  //选择class不等于myClass的div元素
$('div').filter('.myClass');  //选择class等于myClass的div元素
$('div').first();  //选择第一个div元素
$('div').eq(5);  //选择第6个div元素

iv、选择器转移

$('div').prev('p');  //选择div元素前面的第一个p元素
$('div').next('p');  //选择div元素后面的第一个p元素
$('div').closest('form');  //选择离div最近的那个form元素
$('div').parent();  //选择div的父元素
$('div').children();  //选择div的所有子元素
$('div').siblings();  //选择div的同级元素
$('div').find('myClass');  //选择div内的class等于myClass的元素

2、jquery用法思想二

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

//获取div的样式
$('div').css('width');
$('div').css('color');
//设置div的样式
$('div').css('width','30px');
$('div').css('height','30px');
$('div').css(fontSize:'30px',color:'red');

$('#div1').addClass('divClass2')
//为id为div1的对象追加样式divClass2
$('#div1').removeClass('divClass')
//移除id为div1的对象的class名为divClass的样式
$('#div1').removeClass('divClass divClass2')
//移除多个样式
$('#div1').toggleClass('anotherClass')
//重复切换anotherClass样式

三、jQuery属性操作

1.设置HTML内容

//取出HTML内容
var $html=$('#div1').html();
//设置html内容
$('#div1').html('<span>添加文字</span>');
//取出文本内容
var $html=$('#div1').text()
//设置文本内容
$('#div1').text('<span>添加文本</span>')

2.设置属性值

//取出图片的地址
var $src=$('#mg1').attr('src');
//设置图片的地址和属性
$('#mg1').attr({src:'test,jpg',alt:'Test Image'});

3.绑定click事件

$('#btn1').click(function(){//内部的this指的是原生对象//使用jquery对象用$(this)
})

4.jQuery特殊效果

fadeOut()  淡出
fade Toggle()  切换淡入淡出
hide()  隐藏元素
show()  显示元素
toggle()  一次展示或隐藏某个元素
slideDown()  向下展开
slideUp()  向上卷起
slideToggle()  一次展开或卷起某个元素

$btn.click(function(){$('#div1').fadeln(1000,'swing',function(){alert('done!');})
})

四、应用案例

1.案例一：基于jQuery实现电影排行榜

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>实现电影排行榜</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 300px;height: 450px;border: 1px solid black;margin: 0 auto;margin-top: 50px;}.box h1{color: chocolate;font-size: 20px;line-height: 35px;font-weight: bold;border: 1px dashed olivedrab;padding-left: 10px;}.box li{list-style: none;padding: 10px 10px;border: 1px dashed cadetblue;}.box li span{background-color: darksalmon;display: inline-block;width: 20px;height: 20px;text-align: center;color: lightyellow;}.box li:nth-child(-n+3) span{background-color: crimson;}.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.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/哪吒.jpg"><p>天地灵气孕育出一颗能量巨大的混元珠，元始天尊将混元珠提炼成灵珠和魔丸，灵珠投胎为人，助周伐纣时可堪大用；
而魔丸则会诞出魔王，为祸人间。元始天尊启动了天劫咒语，3年后天雷将会降临，摧毁魔丸。
本应是灵珠英雄的哪吒却成了混世大魔王。</p></div></li><li><span>2</span>利刃出鞘<div class="content"><img src="./img/利刃出鞘.jpg"><p>富豪小说家哈兰·斯隆比（克里斯托弗·普卢默 饰）在自己85岁生日第二天，被发现在自家庄园离奇自杀，遗留了亿万遗产。
久负盛名的大侦探布兰克（丹尼尔·克雷格 饰）突然被匿名人士雇佣调查此案真相。
哈兰家族没有表面上那么和睦.</p></div></li><li><span>3</span>少年的你<div class="content"><img src="./img/少年的你.jpg"><p>一场高考前夕的校园意外，改变了两个少年的命运。
陈念（周冬雨 饰）性格内向，是学校里的优等生，努力复习、考上好大学是高三的她唯一的念头。
小北”（易烊千玺 饰）的少年闯入了她的世界……</p></div></li><li><span>4</span>邪不压正<div class="content"><img src="./img/邪不压正.jpg"><p>北洋年间，北京以北。习武少年李天然（彭于晏 饰）目睹师兄朱潜龙（廖凡 饰）勾结日本特务根本一郎，杀害师父全家。
李天然侥幸从枪下逃脱，被美国医生亨德勒救下。李天然伤愈后，赴美学医多年，并同时接受特工训练。
多次为谎言蛊惑、错失时机的李天然，</p></div></li><li><span>5</span>姜子牙<div class="content"><img src="./img/姜子牙.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>基于jquery实现Tab选项卡</title><link rel="stylesheet" href="Tab选项.css"><script type="text/javascript" src="./js/jquery.min.js"></script><script src="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="./3.png" alt=""> </li><li><img src="./3.jpg" alt=""></li><li><img src="./2.jpg" alt=""> </li><li><img src="./1.jpg" alt=""> </li></ul>
</div>
</body>
</html>

css文件

*{margin: 0;padding: 0;
}
.box{width: 448px;height: 298px;border:1px solid lavenderblush;margin: 0 auto;
}
.nav li{list-style: none;width: 109px;height: 50px;background-color: lavender;color: brown;text-align: center;line-height: 50px;float: left;border: 1px solid wheat;
}
.nav li:hover{background-color: mediumpurple;
}
.nav .current{background-color: plum;
}
.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 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的；

在访问国外的网下载时，太慢了，使用国内CDN加速服务；

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

关于前端的学习，可以通过菜鸟教程和W3C网站学习；
一些前端页面设计的模板，可以参考懒人之家：https://www.lanrenzhijia.com/