文章目录
一、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/
扫一扫
971
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
