JS-jQuery
宋腾
JS-jQuery
初体验
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--JS的代码不能独立执行，需要在静态页面中运行-->
<script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
position: relative;
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<ul>
<li>12306</li>
<li>12306</li>
<li>12306</li>
<li>12306</li>
<li>12306</li>
<li>12306</li>
<li>12306</li>
<li>12306</li>
<li>12306</li>
<li>12306</li>
</ul>
<div id="box">
佩奇
</div>
</body>
</html>
<script type="text/javascript">
//源码地址：https://www.jq22.com/jquery-info122
//中文手册地址：https://jquery.cuishifeng.cn/
//(注！jquery-2.0以上版本不再支持IE 6/7/8) 并不是最新的版本就最好的，
//而是根据您项目需求所适合的版本
</script>
<script type="text/javascript">
//JQ函数库在使用的时候要引包
//因为JS文件不能独立运行
$("li").click(function(){
$(this).css({"background":"red"});
});
$("div").animate({"left":1000},1000);
</script>
JQ函数库的基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ol>
<li class="cur">吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
<li>喝酒</li>
<li id="study">学习</li>
<li>蹦迪</li>
<li>游戏</li>
<li>
<ul>
<li>123</li>
<li>12356</li>
</ul>
</li>
</ol>
<p class="cur">哈哈</p>
</body>
</html>
<script type="text/javascript">
//jQuery函数库：对外暴露的是$函数
//$函数是整个框架中最为重要的一个函数，可以获取节点
//JQ函数库支持我们学过的全部选择器，用来获取相应节点
//JQ支持链式语法。永远是$函数开头
//JQ对象是类数组，JQ对象才可以使用JQ函数库里面的函数
//CSS函数也是JQ提供的，用来设置匹配节点的行内样式
//标签选择器
$("li").css("color","red");
//类选择器
$(".cur").css("background","#00FFFF");
//id选择器
$("#study").css("font-size",20);
console.log($("li"));
</script>
JQ独有的选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
width: 100%;
height: 60px;
background: green;
list-style: none;
}
ul li{
float: left;
padding: 20px;
}
</style>
<script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<li>游戏</li>
<li>人生</li>
<li>军事</li>
<li>直播</li>
<li>汽车</li>
<li>游戏</li>
<li>人生</li>
<li>军事</li>
<li>直播</li>
<li>汽车</li>
</ul>
</body>
</html>
<script type="text/javascript">
//selector:first:匹配节点的第一个元素
// $("li:first").css("color","red");
//selector:last:匹配节点的最后一个元素
// $("li:last").css("color","pink");
//偶数的li文字颜色为青色
//selector:odd 奇数选择器
//selector:even 偶数选择器
// $("li:odd").css("color","cyan");
// $("li:even").css("color","orange");
//:gt(index):大于选择器
// $("ul li:gt(3)").css("color","white");
//:lt(index):小于选择器
// $("ul li:lt(3)").css("color","blue");
//:eq(index):获取某一个准确的索引值节点
$("li:eq(3)").css("color","brown");
</script>
练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
table,td,tr{
border: 1px solid black;
/*解决缝隙问题*/
border-collapse: collapse;
}
td{
width: 20px;
height: 20px;
}
</style>
<script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<table border="" cellspacing="" cellpadding="">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
//表格隔行变颜色
$("tr:even").css("background","skyblue");
$("tr:odd").css("background","red");
</script>
JQ常用的方法
CSS（）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
今天感觉不错
</div>
</body>
</html>
<script type="text/javascript">
//css方法是JQ框架提供的，给匹配节点添加行内样式
//JQ支持链式语法：从左到右
//第一个参数：匹配节点添加样式名字
//第二个参数：匹配节点样式的属性值
//注意：这种样式不常用,因为只能设置一个样式
//所以给匹配节点设置样式的时候，统一传JSON格式
//属性值可以省略px，中间有-的需要用驼峰写法
$("div").css({
coler:"red",
background:"cyan",
fontSize:30,
});
</script>
attr()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<input type="text" name="" id="" value="" />
<input type="radio" name="" id="" value="" />
<input type="checkbox" name="" id="" value="" />
<img src="../img/4.jpg"/>
</body>
</html>
<script type="text/javascript">
//attr是JQ框架提供，用来获取||设置节点属性值
//获取节点属性值
console.log($("input:eq(1)").attr("type"));
//动态的设置节点属性值
$("input:eq(2)").attr("type","text");
//获取节点属性值
console.log($("img").attr("src"));
//修改节点属性值
$("img").attr("src","../img/2.jpg");
</script>
操作文本的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<input type="text" name="" id="" value="请输入密码" />
<div id="box">
今天感觉不错
</div>
</body>
</html>
<script type="text/javascript">
//JQ对外暴露的都是函数，要加()
//JQ提供的val方法，可以用来获取||设置表单元素文本
//获取表单元素文本
console.log($("input").val());
//修改表单元素文本
$("input").val("输入错误");
//JQ提供的html方法，可以用来获取|设置非表单元素文本
console.log($("div").html());
//修改非表单元素文本
$("div").html("输入错误hah");
</script>
类名操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background: orange;
}
.cls{
background: blue;
}
</style>
<script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button>添加类名</button>
<div id="box" class="box">
</div>
<button>移除类名</button>
<button>链式语法</button>
</body>
</html>
<script type="text/javascript">
$("button:eq(0)").click(function(){
//给div添加类名
$("div").addClass("cls");
});
$("button:eq(1)").click(function(){
//给div移除类名
$("div").removeClass("cls");
});
//链式语法：连续打点【从左到右】
$("button:eq(2)").click(function(){
$("div").css({"width":500}).addClass("chain").html("链式语法");
})
</script>
其他常用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
<li class="cur">喝酒</li>
<li>烫头</li>
</ul>
</body>
</html>
<script type="text/javascript">
//index():获取匹配节点的索引值
//获取喝酒的索引值
// console.log($(".cur").index());
//each:遍历全部匹配的节点
//回调函数中有两个形参，第一个是索引值，第二个是匹配的节点
$("li").each(function(index,element){
//遍历每一个节点：添加样式
$(element).css({"color":"red","border":"1px solid black","width":index*100+50})
})
</script>
节点关系方法
获取父元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
width: 100%;
height: 60px;
list-style: none;
border: 1px solid black;
}
ul li{
float: left;
width: 100px;
height: 60px;
text-align: center;
border-right: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
<li>烫头</li>
</ul>
</body>
</html>
<script type="text/javascript">
//parent:可以获取到匹配节点的父元素
// $("li").parent().css({"background":"red"});
//this:函数上下文，如果在函数中出现（只能在函数体中使用）
//事件处理函数中的上下文this，就是当前这个触发事件元素
$("li").click(function(){
$(this).css({"background":"red"});
});
</script>
其余节点关系方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="">
<button>button</button>
<p>p</p>
<span id="">
span
</span>
</div>
<div id="">
<h1>一级标题</h1>
<h1>一级标题</h1>
<h1>一级标题</h1>
<h1>一级标题</h1>
<p>段落</p>
</div>
</body>
</html>
<script type="text/javascript">
//siblings:获取兄弟姐妹节点
//如果不传选择器，匹配的是某一个节点的全部兄弟元素
//如果传选择器，匹配的是某一个节点的某个类型的兄弟元素
console.log($("body").siblings());//n.fn.init [head, prevObject: n.fn.init(1), context: document]
console.log($("span").siblings("p"));//n.fn.init [p, prevObject: n.fn.init(1), context: document]
//children：获取某一个节点的子节点
console.log($("div:eq(1)").children());//n.fn.init(5) [h1, h1, h1, h1, p, prevObject: n.fn.init(1), context: document]
console.log($("div:eq(1)").children("p"));//n.fn.init [p, prevObject: n.fn.init(1), context: document]
</script>
JQ常用的特效函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background: skyblue;
}
</style>
<script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button>slideDown</button>
<button>slideUp</button>
<button>fadeOut</button>
<button>fadeIn</button>
<div id="">
</div>
</body>
</html>
<script type="text/javascript">
//slideDown:元素向下滑动，可以有两个参数，都是可有可无(time,callback)
//slideUp:元素向上卷起，可以有两个参数，都是可有可无(time,callback)
//动态的改变标签的高度
//匹配第一个按钮，绑定单击事件
$("button:eq(0)").click(function(){
alert(123);
//匹配div：将div进行下滑操作
$("div").slideDown(2000,function(){
//当前这个函数，动画结束之后执行
console.log("动画结束1");
});
});
$("button:eq(1)").click(function(){
//匹配div：将div进行上卷操作
$("div").slideUp(2000,function(){
//当前这个函数，动画结束之后执行
console.log("动画结束2");
});
});
// fadeOut:淡出：第一个参数：动画每次需要的时间；第二个参数：回调函数，动画结束后hi立即执行一次
// 动态的改变标签的透明度
$("button:eq(2)").click(function(){
//匹配div：将div进行淡出操作
$("div").fadeOut(2000,function(){
//当前这个函数，动画结束之后执行
console.log("动画结束3");
});
});
//fadeIn:淡入
$("button:eq(3)").click(function(){
//匹配div：将div进行淡入操作
$("div").fadeIn(2000,function(){
//当前这个函数，动画结束之后执行
$("div").css({
"background":"red",
"width":100
});
});
});
</script>
动画函数animate
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
width: 100px;
height: 100px;
background: red;
}
</style>
<script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="">
</div>
</body>
</html>
<script type="text/javascript">
//animate(json,time,callback):(必填，可有可无，可有可无),
//json数据格式用来动画完成的样式
//time：时间
//callback: 回到函数
$("div").animate({
"left":1000,
"width":200,
// "opacity":0,
"top":600
//跟颜色有关的属性不能参与动画
},5000,function(){
//动画结束后立即执行一次
console.log("动画结束执行");
});
</script>
animate()注意事项
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
width: 100px;
height: 100px;
background: pink;
}
</style>
<script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div></div>
</body>
</html>
<script type="text/javascript">
//探讨一个节点同时绑定多个动画:可以，会按照动画书写顺序完成
$("div").animate({"left":300},2000);
$("div").animate({"top":300},2000);
$("div").animate({"left":0},2000);
$("div").animate({"top":0},2000);
</script>
动画积累问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
width: 200px;
height: 200px;
background: pink;
border-radius: 50%;
}
</style>
<script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button>去北京</button>
<button>去南京</button>
<div></div>
</body>
</html>
<script type="text/javascript">
//第一个按钮：绑定单击事件
//stop(true):终止当前元素所有积累的动画，放在animate之前
$("button:eq(0)").click(function(){
//添加一个动画
$("div").stop(true).animate({"left":600},2000);
});
//第二个按钮：绑定单击事件
$("button:eq(1)").click(function(){
//添加一个动画
$("div").stop(true).animate({"left":0},2000);
});
</script>
JQ给节点绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background: pink;
margin: 10px;
}
</style>
<script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="">
</div>
<div id="">
</div>
</body>
</html>
<script type="text/javascript">
//绑定单击事件
$("div:eq(0)").click(function(){
//事件处理函数
$("div:eq(0)").css({
"background":"green",
});
});
//鼠标移上
$("div:eq(1)").mouseenter(function(){
$("div:eq(1)").css({
"width":100,
"height":100,
"background":"yellow"
});
});
//鼠标移除
$("div:eq(1)").mouseleave(function(){
$("div:eq(1)").css({
"width":200,
"height":200,
"background":"pink"
});
});
</script>
siblings练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
width: 600px;
height: 40px;
list-style: none;
margin: 50px auto;
border: 1px solid black;
}
ul li{
float: left;
width: 40px;
height: 40px;
background: orange;
border-radius: 40%;
margin-right: 30px;
}
</style>
<script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<script type="text/javascript">
//绑定单击事件
$("li").click(function(){
$(this).css({"background":"black"}).siblings().css({"background":"skyblue"});
});
</script>
折叠卡片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: #eee;
}
#container{
width: 600px;
margin: 30px auto;
border: 1px solid black;
}
#container ul{
list-style: none;
}
#container ul li{
border: 1px solid orange;
}
#container ul li h3{
text-align: center;
font-size: 18px;
}
#container ul li p{
display: none;
}
#container ul li p.cur{
display: block;
}
</style>
<script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="container">
<ul>
<li>
<h3>当前如何通过互联网来创造个人价值</h3>
<p class="cur">在当前的互联网时代，懂得如何利用互联网来实现个人的价值提升，
对于未来的发展还是非常重要的。</p>
</li>
<li>
<h3>升级传统营销：从传统营销的4P到互联网的五大解决方案</h3>
<p>因为每个英文单词开头都是P，合起来就变成了4P。
4P的创举是杰罗姆·麦卡锡（E.Jerome Mccarthy）总结而成的，
因为非常简洁、形象，所以成为所有营销人入门的分析框架，
成为最经典的营销组合分析工具。</p>
</li>
<li>
<h3>当前如何通过互联网来创造个人价值</h3>
<p>在当前的互联网时代，懂得如何利用互联网来实现个人的价值提升，
对于未来的发展还是非常重要的。</p>
</li>
<li>
<h3>升级传统营销：从传统营销的4P到互联网的五大解决方案</h3>
<p>因为每个英文单词开头都是P，合起来就变成了4P。
4P的创举是杰罗姆·麦卡锡（E.Jerome Mccarthy）总结而成的，
因为非常简洁、形象，所以成为所有营销人入门的分析框架，
成为最经典的营销组合分析工具。</p>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
//给新闻标题绑定单击事件
$("h3").click(function(){
//写的少，做的多--->链式语法
$(this).siblings().slideDown(1000).parent().siblings().children("p").slideUp(1000);
});
</script>
轮播图
淡入淡出轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: #eee;
}
.container{
position: relative;
width: 600px;
height: 400px;
margin: 30px auto;
border: 1px solid black;
/*移除隐藏*/
overflow: hidden;
}
ul{
position: absolute;
width: 100%;
height: 100%;
list-style: none;
background-size: ;
}
img{
width: 600px;
height: 400px;
}
.lbtn{
position: absolute;
width: 40px;
height: 20px;
left: 0px;
top: 40%;
/*小手*/
cursor: pointer;
}
.rbtn{
position: absolute;
width: 40px;
height: 20px;
right: 0px;
top: 40%;
cursor: pointer;
}
</style>
<script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<ul>
<li><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>
</div>
</body>
</html>
<script type="text/javascript">
var step = 0;
//左侧按钮的单击事件
$(".lbtn").click(function(){
//当前显示图片淡出
$("li:eq("+step+")").fadeOut(1000,function(){
//动画结束
step--;
if(step < 0){
step = 4;
}
$("li:eq("+step+")").fadeIn(1000);
});
});
//右侧按钮的单击事件
$(".rbtn").click(function(){
$("li:eq("+step+")").fadeOut(1000,function(){
step++;
step = step > 4? 0:step;
$("li:eq("+step+")").fadeIn(2000);
});
});
</script>
传统轮播图
*{
margin: 0;
padding: 0;
}
body{
background: #eee;
}
.container{
position: relative;
width: 600px;
height: 400px;
margin: 30px auto;
border: 1px solid black;
overflow: hidden;
}
ul{
width: 100%;
height: 100%;
list-style: none;
}
ul li{
position: absolute;
left: 600px;
}
ul li.cur{
left: 0px;
}
img{
width: 600px;
height: 400px;
}
.lbtn{
position: absolute;
width: 25px;
height: 25px;
left: 0px;
top: 40%;
cursor: pointer;
}
.rbtn{
position: absolute;
width: 25px;
height: 25px;
right: 0px;
top: 40%;
cursor: pointer;
}
ol{
position: absolute;
width: 150px;
height: 20px;
left: 40%;
bottom: 10px;
list-style: none;
}
ol li{
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
background: #EEEEEE;
text-align: center;
margin-right: 10px;
}
ol li.show{
background: #2bc;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/default1.css"/>
<script src="../js/jQuery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<ul>
<li class="cur"><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>
<li><img src="../img/6.jpg" alt="" /></li>
</ul>
<button class="lbtn"><</button>
<button class="rbtn">></button>
<ol>
<li class="show">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
<script type="text/javascript">
var idx = 0;
//左侧按钮的单击事件
$(".lbtn").click(function(){
//当前显示的这张图
$("ul li:eq("+idx+")").css({"left":0}).stop(true).animate({"left":-600},1000);
idx--;
idx = idx<0?5:idx;
//下张图的显示
$("ul li:eq("+idx+")").css({"left":600}).stop(true).animate({"left":0},1000);
//小球的类名的切换
$("ol li:eq("+idx+")").addClass("show").siblings().removeClass("show");
});
//右侧按钮的单击事件
$(".rbtn").click(function(){
//当前显示的这张图
$("ul li:eq("+idx+")").css({"left":0}).stop(true).animate({"left":600},1000);
idx++;
idx = idx > 5?0:idx;
//下张图的显示
$("ul li:eq("+idx+")").css({"left":-600}).stop(true).animate({"left":0},1000);
//小球的显示
$("ol li:eq("+idx+")").addClass("show").siblings().removeClass("show");
});
</script>
类似资料：