jQuery函数库简介
jQuery函数库学习手册http://jquery.cuishifeng.cn/
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
jQuery它是前端当中比较优秀的一个JavaScript函数库【前端人经常简称JQ】，它核心里理念写的少、做的事情多。JQ可以进行DOM操作、节点事件处理、简单2D动画等等。
jQuery函数库支持链式语法（连续打点），JQ有一些插件，使用JQ时候一般不用考虑兼容问题
jQuery函数库基本使用
(注！jquery-2.0以上版本不再支持IE 6/7/8) 并不是最新的版本就最好的，而是根据您项目需求所适合的版本！
需要在网上下载人家源码：http://www.jq22.com/jquery-info122
注意1：如果你想在程序当中使用JQ，需要在程序当中通过script标签引入JQ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入JQ函数库：前端人也称之为引包 -->
<script src="./js/jQuery.min.js"></script>
</head>
<body>
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
<div id="box">
我爱你
</div>
<p class="cur">
我是花骨朵
</p>
</body>
</html>
<script>
//Q函数经常用来操作节点数上标签
//支持我们曾经学习过选择器：标签选择器、ID选择器、class选择器
//注意1:当程序当中引入JQ，这个函数库对外暴露了一个$函数,
//它是JQ函数库一个核心函数,经常用来匹配标签
//标签选择器
console.log($("li"));
//id选择器
console.log($("#box"));
//类选择器
console.log($(".cur"));
//如果想设置匹配标签的行内样式可以连续打点css函数
$("p").css({
"color": "red",
"fontSize": 30,
"background": "cyan",
"textAlign": "center"
})
</script>
- 一般情况下单位px可以省略
- 中间带有横杠的样式【font-size、padding-left】可以变为驼峰写法
- jQuery函数库支持我们曾经学习过标签选择器、ID选择器、class选择器等等；
jQuery函数库中独有选择器
概述：一会学习的选择器只能在JQ种使用，因为它是JQ函数库中独有的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引包 -->
<script src="./js/jQuery.min.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
<script>
//下面这些都是JQ函数库独有选择器
/*:first,可以获取某一个匹配标签的第一个元素
$("div:first").css({
"background": "red"
});
//:last,可以获取到某一个匹配标签最后一个元素
$("div:last").css({
'background': "cyan"
});
*/
/*:even,代表的是偶数选择器
$("div:even").css({
'background': "skyblue"
});
//:odd，代表的是奇数选择器
$("div:odd").css({
'background': "pink"
})
*/
//:gt(index)，大于选择器
$("div:gt(6)").css({
'background': "red"
});
//:lt(index)小于选择器
$("div:lt(6)").css({
'color': "yellow"
})
</script>
- jQuery函数库支持我们曾经学习过的选择器，除此之外还支持一些独有选择器
操作匹配标签文本
- 表单元素【input标签】利用JQ中val方法操作表单元素文本
- 非表单元素利用JQ中html方法操作文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引包 -->
<script src="./js/jQuery.min.js"></script>
</head>
<body>
<p>
<input type="text" value="我是一个输入文本地方">
</p>
<div>我是一个粉霜将，粉霜本领强</div>
</body>
</html>
<script>
//操作表单元素文本：利用的val方法
//获取表单元素文本
console.log($("input").val());
//重新设置表单元素文本
$("input").val("我修改了表单元素文本");
/**************************************************************************/
//操作非表单元素文本：利用的html方法
//获取非表单元素文本
console.log($("div").html());
$("div").html("修改非表单元素文本啦么么打~~~~")
</script>
- 表单元素操作文本：利用val函数
- 非表单元素操作文本：利用html函数
给元素绑定事件
概述：jQuery函数库对于元素事件也进行封装，都封装成函数形式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引包 -->
<script src="./js/jQuery.min.js"></script>
</head>
<body>
<div>我是中国人我很自豪</div>
</body>
</html>
<script>
var f = 16;
//JQ对于元素绑定事件都封装成函数
$("div").click(function () {
f++;
//修改div的字号大小
$(this).css({
"fontSize": f
})
});
</script>
- 前端当中事件很多【只是学习单击事件】，如果想学习其他事件参考网站进行学习
特效函数
概述：JQ函数库提供一些特效函数，可以给匹配元素添加一些动画效果；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width= , initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引包 -->
<script src="./js/jQuery.min.js"></script>
<style>
div {
width: 400px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button id="box1">slideUp</button>
<button id="box2">slideDown</button>
<button id="box3">fadeOut</button>
<button id="box4">fadeIn</button>
<div></div>
</body>
</html>
<script>
///第一个按钮单击事件
$("#box1").click(function () {
//slideUp:可以让元素向上卷起，它传递参数2000代表动画时间（MS）
$("div").slideUp(2000);
});
//第二个按钮的单击事件
$("#box2").click(function () {
//slideDown:可以让元素向下展开，它传递参数2000代表动画时间（MS）
$("div").slideDown(2000);
});
//第三个按钮绑定单击事件
$("#box3").click(function () {
//fadeOut:可以让元素淡出，它传递参数2000代表动画时间（MS）
$("div").fadeOut(2000);
});
//第四个按钮绑定单击事件
$("#box4").click(function () {
//fadeIn:可以让元素淡入，它传递参数2000代表动画时间（MS）
$("div").fadeIn(2000);
});
</script>
jQueryUI插件使用
概述：jQueryUI是JQ函数库一个插件。
插件：就是在JQ已有的功能基础之上，再添加一个其他功能。
注意：jQueryUI是JQ插件【也是一个JS函数库】，需要注意这个函数库依赖JQ
在使用jQueryUI的时候，务必要引入JQ才可以使用。
//拖拽的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入JQ -->
<script src="./js/jQuery.min.js"></script>
<!-- 引入插件 -->
<script src="./js/jquery-ui.min.js"></script>
</head>
<body>
<div>
<p>我是你的孩子~~~要拖拽</p>
</div>
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
<li>么么打</li>
</ul>
</body>
</html>
<script>
//拖拽
$("div").draggable();
//排序拖拽
$("ul").sortable();
</script>
//日历案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引包 -->
<script src="./js/jQuery.min.js"></script>
<script src="./js/jquery-ui.min.js"></script>
<!-- 引入人家的样式 -->
<link rel="stylesheet" href="./js/jquery-ui.min.css">
</head>
<body>
<p>
<input type="text">
</p>
</body>
</html>
<script>
$("input").datepicker();
</script>
节点关系函数
概述：jQuery函数库中拥有一些节点（标签:element）关系一些方法提供给我们使用。
比如：可以获取某一个标签的父元素、兄弟元素、儿子元素等等。
parent
概述：它是jQuery函数库提供一个节点关系方法，主要的作用是可以获取到某一个标签的父元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--利用JQ时候切记需要通过script标签进行引包 -->
<script src="./js/jQuery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 100px;
border: 1px solid black;
margin: 100px auto;
}
p {
float: left;
width: 100px;
height: 100px;
background-color: pink;
margin-right: 10px;
}
</style>
</head>
<body>
<div>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
<script>
//给P标签绑定单击事件，要他们的父元素div背景颜色为青色
$("p").click(function () {
$("p").parent().css({
"background": "cyan"
})
})
</script>
- parent方法可以获取到某一个标签父元素
this【函数的上下文】
概述：this不是jQuery函数库提供的，因为系统当中函数就有上下文this。
函数的上下文this也可以在JQ当中使用。
总结规律：函数作为事件处理函数执行，上下文是当前这个触发事件的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--利用JQ时候切记需要通过script标签进行引包 -->
<script src="./js/jQuery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 100px;
border: 1px solid black;
margin: 100px auto;
}
p {
float: left;
width: 100px;
height: 100px;
background-color: pink;
margin-right: 10px;
}
</style>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
</body>
</html>
<script>
//单击某一个p标签，当前被单击的这个p标签背景颜色为天蓝色
//给全部P标签绑定单击事件
$("p").click(function () {
//单击某一个p，当前被单击的这个p标签背景颜色为天蓝色
$(this).css({
"background": "skyblue"
})
});
</script>
siblings
概述：它是jQuery函数库提供一个关系方法，主要的作用是可以获取到某一个标签其他的姊妹元素们。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--利用JQ时候切记需要通过script标签进行引包 -->
<script src="./js/jQuery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 100px;
border: 1px solid black;
margin: 100px auto;
}
p {
float: left;
width: 100px;
height: 100px;
background-color: pink;
margin-right: 10px;
}
</style>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
</body>
</html>
<script>
//siblings:获取姊妹元素
//单击某一个P让他的背景颜色为黄色，他的其余兄弟元素们为绿色
//给P标签绑定单击事件
$("p").click(function () {
$(this).css({"background": "yellow"}).siblings().css({"background": "green"})
});
//链式语法【来源于OC语言:搞iOS苹果开发语言】
//为了方便(书写语句的时候)可以从左到右连续打点
//看着比较整洁
//链式语法执行顺序：从左到右依次执行
</script>
children
概述：它也是jQuery函数库提供的一个节点关系函数，主要的作用是可以获取到某一个节点儿子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--利用JQ时候切记需要通过script标签进行引包 -->
<script src="./js/jQuery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 500px;
height: 100px;
border: 1px solid black;
margin: 100px auto;
}
p {
float: left;
width: 100px;
height: 100px;
background-color: pink;
margin-right: 10px;
}
</style>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<span>5</span>
</div>
</body>
</html>
<script>
//将四个P标签背景颜色为黑色
/*第一种写法：
$("p").css({
"background": "black"
});
*/
$("div").children().css({
"background": "black"
});
</script>
折叠卡片特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引包 -->
<script src="./js/jQuery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 600px;
border: 1px solid black;
margin: 0px auto;
list-style: none;
}
li {
border-bottom: 1px dashed red;
text-align: center;
cursor: pointer;
}
p {
background-color: black;
color: white;
display: none;
}
.open {
display: block;
}
</style>
</head>
<body>
<ul>
<li>
<h4>微服务风格的特性</h4>
<p class="open">
微服务风格并没有一个正式的定义，但我们可以尝试描述一下微服务风格所具有的共同特点。并不是所有的微服务风格都要具有所有的特性，但我们期望常见的微服务都应该有这些特性。
</p>
</li>
<li>
<h4>微服务风格的特性</h4>
<p class="open">
微服务风格并没有一个正式的定义，但我们可以尝试描述一下微服务风格所具有的共同特点。并不是所有的微服务风格都要具有所有的特性，但我们期望常见的微服务都应该有这些特性。
</p>
</li>
<li>
<h4>微服务风格的特性</h4>
<p class="open">
微服务风格并没有一个正式的定义，但我们可以尝试描述一下微服务风格所具有的共同特点。并不是所有的微服务风格都要具有所有的特性，但我们期望常见的微服务都应该有这些特性。
</p>
</li>
<li>
<h4>微服务风格的特性</h4>
<p class="open">
微服务风格并没有一个正式的定义，但我们可以尝试描述一下微服务风格所具有的共同特点。并不是所有的微服务风格都要具有所有的特性，但我们期望常见的微服务都应该有这些特性。
</p>
</li>
</ul>
</body>
</html>
<script>
//jQuery函数库核心理念 写的少但是做的多
$("h4").click(function () {
//链式语法执行顺序:从左到右
$(this).siblings().slideDown(2000).parent().siblings().children("p").slideUp(2000);
})
</script>
animate函数
概述：它也是jQuery函数库提供一个动画函数，主要的作用是可以让元素添加一些2D动画效果。
使用格式如下：
$(selector).animate(JSON,TIME,CALLBACK);
- JSON：动画属性设置【left、width、top等等】
- TIME:动画时间设置（单位是MS）
- CALLBACK：函数，这个函数会在动画结束的时候执行一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引包 -->
<script src="./js/jQuery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
div {
/* 定位元素才有left|top|bottom|right */
position: relative;
width: 100px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
</style>
</head>
<body>
<div>中国</div>
</body>
</html>
<script>
$("div").animate({
"left": 1000,
"top": 100,
"width": 150,
"height": 50,
"background": "cyan",
"color": "white",
"border": "20px solid red"
}, 5000, function () {
//让div变椭圆
$(this).css({
"borderRadius": "50%",
"textAlign": "center"
})
});
</script>
- stop(true):将匹配元素全部动画清除
三位轮播图
概述：轮播图英文（carousel）,类似于淘宝、京东首页轮播图，前端工程师经常叫做‘三位轮播|传统轮播’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入外部样式 -->
<link rel="stylesheet" href="./css/default.css">
<!-- 引包，引入JQ -->
<script src="./js/jQuery.min.js"></script>
</head>
<body>
<div>
<ul>
<li class="current"><img src="./img/1.jpg" alt=""></li>
<li><img src="./img/2.jpg" alt=""></li>
<li><img src="./img/3.jpg" alt=""></li>
<li><img src="./img/4.jpg" alt=""></li>
<li><img src="./img/5.jpg" alt=""></li>
</ul>
<button class="lbtn"><</button>
<button class="rbtn">></button>
<ol>
<li class="cur">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
<script>
//右侧按钮单击事件
//信号量：全局变量（控制某一个li运动）
var idx = 0;
//右侧按钮的代码进行封装
function rhandle() {
//当前显示这张图片从left为0位置运动到-600
$("ul li").eq(idx).css({ //eq是选择第几个
"left": 0
}).stop(true).animate({
"left": -600
}, 500);
//全局变量累加1【下一张图要进入容器里面】
idx++;
idx = idx > 4 ? 0 : idx;
//下一张图进入
$("ul li").eq(idx).css({
"left": 600
}).stop(true).animate({
"left": 0
}, 500);
//底下分页器也跟着变化
$("ol li").eq(idx).addClass("cur").siblings().removeClass();
//addClass代表给标签添加类名、removeClass代表给标签移出类名
}
$(".rbtn").click(rhandle);
//开启定时器让轮播图自动轮播
var timer = setInterval(rhandle, 1500);
//鼠标移上事件
$("div").mouseenter(function () {
//清除定时器
clearInterval(timer);
});
//鼠标离开事件
$("div").mouseleave(function () {
timer = setInterval(rhandle, 1500);
});
//左侧按钮的单击事件
$(".lbtn").click(function () {
//当前显示图片运动的动画
$("ul li").eq(idx).css({
"left": 0
}).stop(true).animate({
"left": 600
}, 500);
//全局变量需要累减
idx--;
idx = idx < 0 ? 4 : idx;
//下一张图片动画
$("ul li").eq(idx).css({
"left": -600
}).animate({
"left": 0
}, 500);
//底下分页器也跟着变化
$("ol li").eq(idx).addClass("cur").siblings().removeClass();
});
/*****************************************************************************************/
//底下的分页器业务
$("ol li").click(function () {
//获取单击的那个分页器li索引值
var index = $(this).index();
//分两种情况讨论
if (index > idx) {
//当前显示这张图片动画
$("ul li").eq(idx).css({
"left": 0
}).stop(true).animate({
"left": -600
}, 500);
//单击那个分页器对应的图片动画
$("ul li").eq(index).css({
"left": 600
}).stop(true).animate({
"left": 0
}, 500);
//全局变量idx从新赋值
idx = index;
//底下分页器也跟着变化
$("ol li").eq(idx).addClass("cur").siblings().removeClass();
//addClass代表给标签添加类名、removeClass代表给标签移出类名
} else {
//当前显示这张图片动画
$("ul li").eq(idx).css({
"left": 0
}).stop(true).animate({
"left": -600
}, 500);
//单击那个分页器对应的图片动画
$("ul li").eq(index).css({
"left": 600
}).stop(true).animate({
"left": 0
}, 500);
//全局变量idx从新赋值
idx = index;
//底下分页器也跟着变化
$("ol li").eq(idx).addClass("cur").siblings().removeClass();
//addClass代表给标签添加类名、removeClass代表给标签移出类名
}
})
</script>
- addClass||removeClass:分别是给标签添加类名+移动类名
- eq方法：可以获取到某一个索引值标签
- index:可以获取到某一个标签索引值
百度新闻导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 引入JQ -->
<script src="./js/jQuery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 100%;
height: 40px;
background-color: #01204f;
}
ul {
position: absolute;
width: 100%;
height: 40px;
list-style: none;
}
ul li {
float: left;
padding: 10px;
color: white;
}
div.slider {
position: absolute;
width: 52px;
height: 41px;
background: red;
opacity: .8;
}
</style>
</head>
<body>
<div>
<div class="slider"></div>
<ul>
<li>首页</li>
<li>国内</li>
<li>国际</li>
<li>军事</li>
<li>财经</li>
<li>娱乐</li>
<li>体遇</li>
<li>互联网</li>
<li>科技</li>
<li>科技</li>
<li>游戏</li>
<li>女人</li>
<li>汽车</li>
</ul>
</div>
</body>
</html>
<script>
//全部li添加鼠标移上事件
$("li").mouseenter(function () {
//红色滑块算法(要获取到鼠标进入的这个li,前面全部姊妹元素之和)
//prevAll:代表的是获取某一个元素前面全部姊妹元素
//累加器
var sum = 0;
$(this).prevAll().each(function () {
//获取每一个姊妹元素宽度
sum += $(this).innerWidth();
});
//让红色滑块运动起来
$(".slider").stop(true).animate({
"left": sum,
"width": $(this).innerWidth()
}, 500);
});
//鼠标移出，红色滑块归还原始位置
$("div").mouseleave(function () {
$(".slider").stop(true).animate({
"left": 0,
"width": $("ul li").eq(0).innerWidth()
}, 500);
})
</script>
- prevAll：可以获取到某一个节点前面全部姊妹元素
- each：可以遍历到每一个匹配节点
- innerWidth:可以获取某一个标签宽度(也算上内边距数据)
4617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
