jQuery全解析
一、jQuery基本介绍
1.为什么要学jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
height: 100px;
background-color: #f99;
margin: 10px;
display: none;
}
</style>
</head>
<body>
<button>展示</button>
<button>设置内容</button>
<button>设置内容</button>
<div></div>
<div></div>
<div></div>
<script>
// 不爽的地方：
// 1. 获取元素名字太长，不好写，不好记
// 2. 代码冗余（for）
// 3. onclick 注册事件存在覆盖问题
// addEventListener() 不存在覆盖问题，但是兼容性问题
// 4. 没有动画效果，如果需要，就必须自己手动封装
var btn1 = document.querySelectorAll("button")[0];
var btn2 = document.querySelectorAll("button")[1];
var divs = document.querySelectorAll("div");
// 展示
btn1.onclick = function () {
for (var i = 0; i < divs.length; i++) {
divs[i].style.display = "block";
}
}
/*btn1.onclick = function () {
console.log(1);
}*/
// 设置内容
btn2.onclick = function () {
for (var i = 0; i < divs.length; i++) {
divs[i].innerText = "今天jQuery了"
}
}
</script>
</body>
</html>
2. jQuery初体验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
height: 100px;
background-color: #f99;
margin: 10px;
display: none;
}
</style>
</head>
<body>
<button id="btn1">展示</button>
<button id="btn2">设置内容</button>
<button>设置内容</button>
<div></div>
<div></div>
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
// 不爽的地方：
// 1. 获取元素名字太长，不好写，不好记
// 2. 代码冗余（for）
// 3. onclick 注册事件存在覆盖问题
// addEventListener() 不存在覆盖问题，但是兼容性问题
// 4. 没有动画效果，如果需要，就必须自己手动封装
// 展示的功能
$("#btn1").click(function(){
// show() 用来展示元素的
$("div").show(1000);
})
$("#btn1").click(function () {
console.log(123);
})
// 设置内容
$("#btn2").click(function () {
// text() 用来设置文本的
$("div").text("jQuery好像很爽");
})
</script>
</body>
</html>
3.什么是jQuery?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// jQuery jQuery是一个快速的、轻量的、功能丰富的js库。
// js库 : 是一个js文件，里面存放了很多常用的功能，需要使用功能的时候，直接引入这个js文件即可。这个js文件就叫做js库。 类似animate.js
// 压缩 && 未压缩
// 未压缩：源码，用于本地开发，学习源码
// 压缩： 把换行、注释、空格去掉，采用代码混淆，代码体积变小，页面加载速度更快，用于线上项目。
// 版本问题：
// 1.x： 能够兼容IE678，功能是丰富的，完善的，最终的版本是 1.12.4
// 2.x: 不在兼容IE678了。
// 3.x： 在2.x的版本上开发，新增了一些api。
</script>
</body>
</html>
4.版本介绍
5.入口函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
height: 100px;
background-color: #f99;
margin: 10px;
display: none;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
// 入口函数 window.onload = function(){}
// 执行：
// jq 提供了入口函数
// document 文档
// ready 准备
/*$(document).ready(function () {
})*/
// 提供简洁的入口函数写法
$(function(){
var btn1 = document.querySelectorAll("button")[0];
var btn2 = document.querySelectorAll("button")[1];
var divs = document.querySelectorAll("div");
// 展示
btn1.onclick = function () {
for (var i = 0; i < divs.length; i++) {
divs[i].style.display = "block";
}
}
// 设置内容
btn2.onclick = function () {
for (var i = 0; i < divs.length; i++) {
divs[i].innerText = "今天jQuery了"
}
}
})
/*window.onload = function(){
}*/
// 使用jq的步骤：
// 1. 先引入jQuery到页面
// 2. 写上jq的入口函数
// 3. 在入口函数里面实现功能
// 小结：
// jq的入口函数
// 1. $(document).ready(function(){})
// 2. $(function(){})
</script>
</head>
<body>
<button>展示</button>
<button>设置内容</button>
<button>设置内容</button>
<div></div>
<div></div>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script>
// window.onload 存在覆盖
// jq的入口函数不存在覆盖问题
// 执行时机的对比：
// jq的入口函数先于 window.onload 执行
// window.onload： 要等页面加载完，还要等待外部资源加载好。
// jq的入口函数， 只需要等待页面加载完成就会执行。 推荐使用jq的入口函数
/*window.onload = function () {
console.log(1);
}
window.onload = function () {
console.log(2);
}*/
window.onload = function () {
console.log(1);
}
$(function () {
console.log(2);
})
/*$(function () {
console.log(3);
})
$(function () {
console.log(4);
})*/
</script>
</body>
</html>
6.jQuery使用步骤
7.jQuery对象与DOM对象(重点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<div>123</div>
<script src="jquery-1.12.4.js"></script>
<script>
// jQuery对象与DOM对象
// DOM对象: 通过原生js方法获取到的元素返回对象
// document.getElementById(id);
// document.querySelector()
// var box = document.querySelector("#box");
var box = document.querySelectorAll("div");
console.dir(box);
// error：
// box.text("修改div的内容");
// box.style.backgroundColor = "red";
// 注意： dom对象不能使用jq提供的方法。只能使用dom对象自身的成员。
// 如果想dom对象使用jq的方法，把dom对象转换jq对象。
// 怎么转：花钱就行
// $(dom对象) 把dom对象作为参数传递到$(), 那么$(dom对象) 整体就是个jq对象
/*console.log($(box));
$(box).text("修改了");*/
// jq对象： 通过$() 获取到的元素返回的对象就是jq对象
// jq对象是一个伪数组，用下标的形式存储了获取到的每一个dom对象
// console.log($("div"));
// error
// $("div").style.backgroundColor = "yellow";
// jq对象不能使用dom对象的成员，只能使用jq提供的方法。
// jq对象转dom对象：
// $("div")[0] ==> 下标为0的那一项，需要拿到所有的dom对象，只需要遍历即可。
// console.log($("div")[0]);
// $("div")[0].style.backgroundColor = "blue";
// 小结：
// 1. dom对象
// 2. jq对象
//
// dom对象和jq对象不能混用，转换
// dom对象转成jq对象 $(dom对象)
// jq对象转成dom对象 通过下标取出dom对象即可
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>这是第1个li元素</li>
<li>这是第2个li元素</li>
<li>这是第3个li元素</li>
<li>这是第4个li元素</li>
<li>这是第5个li元素</li>
<li>这是第6个li元素</li>
<li>这是第7个li元素</li>
<li>这是第8个li元素</li>
<li>这是第9个li元素</li>
<li>这是第10个li元素</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
/*var lis = document.querySelectorAll("li");
for (var i = 0; i < lis.length; i++) {
if(i % 2 == 0){
lis[i].style.backgroundColor = "blue";
}else{
lis[i].style.backgroundColor = "green";
}
}*/
var lis = $("li"); // jq对象 伪数组 length属性
for (var i = 0; i < lis.length; i++) {
if(i % 2 == 0){
lis[i].style.backgroundColor = "blue";
}else{
lis[i].style.backgroundColor = "green";
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script>
// $的来源： jquery
// 是个啥： 函数
// 作用： 很强大， 可以根据参数的不同，作用不同
// console.log($);
// 参数为 选择器， 作用为可以获取元素 $("div")
// 参数为 函数， 作用为入口函数 $(function(){})
// 参数为 dom对象，作用为将dom对象转成jq对象 $(document)
//在jq中，除了使用$符号来使用jq的功能，还可以使用jQuery 来使用功能
// 是同一个函数
console.log($ == jQuery); // true
// 小结：
// $ 来源 jquery
</script>
</body>
</html>
二、选择器
1.什么是jQuery选择器
2.css选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li id="tangtang" class="handsome">堂哥</li>
<li class="congcong handsome">
大葱哥
<ol>
<li>大蒜</li>
<li>小米</li>
</ol>
</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
// css选择器
// id
// 标签
// 类名
// 子代
// 后代
// 交集
// 并集
// css(name, value) 设置样式
// name: 样式名
// value： 样式值
// id
// $("#tangtang").css("color", "lime");
// 标签
// $("li").css("fontSize", "50px");
// 类名
// $(".congcong").text("匆匆， 好久不见");
// 子代
// $(".congcong>ol>li").css("color", "pink");
// 后代
// $(".congcong li").text("匆匆的孩子本姓王");
// 交集 s1s2
// $(".congcong.handsome").css("color", "lime");
// 并集 ，
// $(".congcong, #tangtang").css("height", "190px")
</script>
</body>
</html>
3.过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
<li>这是第10个li</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
// 过滤选择器
// :odd 从获取到元素中过滤出下标为奇数的元素
// :even 从获取到元素中过滤出下标为偶数的元素
// :first 从获取到元素中过滤出第一个元素
// :last 从获取到元素中过滤出最后一个元素
// :eq(下标) 从获取到元素中过滤出指定下标的元素
$("li:odd").css("backgroundColor", "lime");
$("li:even").css("backgroundColor", "#f99");
$("li:first").css("fontSize", "50px");
$("li:last").css("fontSize", "50px");
$("li:eq(4)").css("height", "100px");
// 小结：
// 过滤选择器都是以冒号开头，写在$()里面
</script>
</body>
</html>
4.筛选选择器(方法)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-image: url(imgs/bg.jpg);
}
.wrap li {
background-image: url(imgs/libg.jpg);
}
.wrap>ul>li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul class="ul">
<li><a href="javascript:void(0);">二级菜单11</a></li>
<li><a href="javascript:void(0);">二级菜单12</a></li>
<li><a href="javascript:void(0);">二级菜单13</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单2</a>
<ul>
<li><a href="javascript:void(0);">二级菜单21</a></li>
<li><a href="javascript:void(0);">二级菜单22</a></li>
<li><a href="javascript:void(0);">二级菜单23</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单3</a>
<ul>
<li><a href="javascript:void(0);">二级菜单31</a></li>
<li><a href="javascript:void(0);">二级菜单32</a></li>
<li><a href="javascript:void(0);">二级菜单33</a></li>
</ul>
</li>
</ul>
</div>
<script src="../jquery-1.12.4.js"></script>
<script>
// 思路；
// 1. 找对象 一级菜单li
// 2. 给li 注册 onmouseover
// 3. 让当前li下的ul展示出来
// 4. 给li 注册 onmouseout
// 5. 让当前li下的ul隐藏出来
// 1.
// 建议：把需要经常需要使用的元素被保存起来，变量名前面加上$,表示获取到的是个jq对象
var $lis = $(".wrap>ul>li");
// 2.
$lis.mouseenter(function(){
console.log("mouseenter");
// 3.
// this ==> 是个dom对象
// console.log(this);
// this 要使用jq的方法，一定要转jq对象 $(this)
// jq提供的 children() 方法，用来获取元素内的所有子元素的
// 支持传参，参数为选择器，可以根据选择器筛选出指定的子元素
/*console.log($(this).children());
console.log($(this).children("ul"));*/
$(this).children("ul").show();
})
// 4.
$lis.mouseleave(function(){
console.log("mouseleave");
// 5.
// hide() ==> 隐藏元素
$(this).children("ul").hide();
})
</script>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="../jquery-1.12.4.js"></script>
<script type="text/javascript">
x = 0;
y = 0;
$(document).ready(function() {
$("div.over").mouseover(function() {
$(".over span").text(x += 1);
});
$("div.enter").mouseenter(function() {
$(".enter span").text(y += 1);
});
// mouseenter 鼠标移入事件
// mouseleave 鼠标离开事件
// 注册的事件只会在当前元素上触发，原理就是不会事件冒泡
// mouseover mouseout 注册的事件，不仅会在当前元素自身上触发，而且也会在其子元素上触发，原理： 事件冒泡
// 以后注册 鼠标移出和移出事件，推荐使用 mouseenter && mouseleave
});
</script>
</head>
<body>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 630px;
height: 394px;
padding: 10px 0 0 10px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
}
.wrap li {
float: left;
margin: 0 10px 10px 0;
}
.wrap img {
display: block;
border: 0;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li><a href="#"><img src="images/01.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/02.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/03.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/04.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/05.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/06.jpg" alt="" /></a></li>
</ul>
</div>
<script src="../jquery-1.12.4.js"></script>
<script>
// 思路：
// 1. 找对象 li
// 2. 给li mouseenter
// 3. 把其他兄弟li元素变暗 opacity = 0.5
// 4. 给 wrap 注册 mouseleave
// 5. 把所有的li变白
// 1.
var $lis = $(".wrap li");
// 2.
$lis.mouseenter(function () {
// 3.
// jq 提供了 siblings() 获取当前元素的所有兄弟元素，不包含自己
// 先把当前的li变白
/*$(this).css("opacity", 1);
// 在把兄弟变黑
$(this).siblings().css("opacity", .5);*/
// 简化上面两行代码 链式编程 : 通过. 可以一直调用下去
$(this).css("opacity", 1).siblings().css("opacity", .5);
})
// 4.
$(".wrap").mouseleave(function () {
// 5.
// $lis.css("opacity", 1);
// $(this) ==> wrap
// find() ==> 找后代元素
// children() ==> 找子代元素
$(this).find("li").css("opacity", 1);
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
}
.parentWrap {
width: 200px;
text-align: center;
}
.menuGroup {
border: 1px solid #999;
background-color: #e0ecff;
}
.groupTitle {
display: block;
height: 20px;
line-height: 20px;
font-size: 16px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.menuGroup>div {
height: 200px;
background-color: #fff;
display: none;
}
</style>
</head>
<body>
<ul class="parentWrap">
<li class="menuGroup">
<span class="groupTitle">标题1</span>
<div>我是弹出来的div1</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题2</span>
<div>我是弹出来的div2</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题3</span>
<div>我是弹出来的div3</div>
</li>
<li class="menuGroup">
<span class="groupTitle">标题4</span>
<div>我是弹出来的div4</div>
</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
// 思路；
// 1. 找对象 groupTitle 的span元素
// 2. 给span 注册click
// 3. 把当前span的兄弟div展示出来
// 4. 找到当前span父元素，父元素去找到兄弟li元素，找到li元素下的div，隐藏
// 1.
var $spans = $(".groupTitle");
// .2
$spans.click(function () {
// 3.
// $(this).siblings().slideDown(200);
$(this).next().slideDown(200);
// 4.
// parent() ==> 找父元素
$(this).parent().siblings().children("div").slideUp(200);
})
// 小结：
// jq的方法
// 1. children()
// 2. find()
// 3. siblings()
// 4. parent()
// 5. next() :下一个兄弟
// 6. prev() :上一个兄弟
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
width: 298px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
overflow: hidden;
}
#left,
#center,
#right {
float: left;
}
#left li,
#right li {
background: url(images/lili.jpg) repeat-x;
}
#left li a,
#right li a {
display: block;
width: 48px;
height: 27px;
border-bottom: 1px solid pink;
line-height: 27px;
text-align: center;
color: black;
}
#left li a:hover,
#right li a:hover {
background-image: url(images/abg.gif);
}
#center {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>
</head>
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
<li><a href="#">冬裙</a></li>
<li><a href="#">呢大衣</a></li>
<li><a href="#">毛衣</a></li>
<li><a href="#">棉服</a></li>
<li><a href="#">女裤</a></li>
<li><a href="#">羽绒服</a></li>
<li><a href="#">牛仔裤</a></li>
</ul>
<ul id="center">
<li><a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a></li>
<li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a></li>
<li><a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a></li>
<li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a></li>
<li><a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a></li>
<li><a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a></li>
<li><a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a></li>
<li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a></li>
<li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a></li>
<li><a href="#"><img src="images/女包.jpg" width="200" height="250" /></a></li>
<li><a href="#"><img src="images/男靴.jpg" width="200" height="250" /></a></li>
<li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250" /></a></li>
<li><a href="#"><img src="images/皮带.jpg" width="200" height="250" /></a></li>
<li><a href="#"><img src="images/围巾.jpg" width="200" height="250" /></a></li>
<li><a href="#"><img src="images/皮衣.jpg" width="200" height="250" /></a></li>
<li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250" /></a></li>
<li><a href="#"><img src="images/男棉服.jpg" width="200" height="250" /></a></li>
<li><a href="#"><img src="images/男包.jpg" width="200" height="250" /></a></li>
</ul>
<ul id="right">
<li><a href="#">女包</a></li>
<li><a href="#">男靴</a></li>
<li><a href="#">登山鞋</a></li>
<li><a href="#">皮带</a></li>
<li><a href="#">围巾</a></li>
<li><a href="#">皮衣</a></li>
<li><a href="#">男毛衣</a></li>
<li><a href="#">男棉服</a></li>
<li><a href="#">男包</a></li>
</ul>
<script src="../jquery-1.12.4.js"></script>
<script>
// 1. 找对象 左边的li $leftLis
// 2. 给 $leftLis 注册 mouseenter
// 3. 获取当前元素的下标
// 4. 通过下标去找到center中对应的li显示
// 还需要把其他的兄弟li隐藏
// 1.
var $leftLis = $("#left li");
// 2.
$leftLis.mouseenter(function() {
// 3.
// index() 获取元素的下标
var idx = $(this).index();
// 4.
// idx 需要拼接字符串
$("#center li:eq(" + idx + ")").show().siblings().hide();
})
var $rightLis = $("#right li");
$rightLis.mouseenter(function() {
var idx = $(this).index() + 9; // 拿到后9张图片
// console.log(idx);
// $("#center li:eq(" + idx + ")").show().siblings().hide();
// 作用一样，通过下标来获取元素
// :eq()
// eq() 方法
// 推荐使用eq() 方法
$("#center li").eq(idx).show().siblings().hide();
})
// 小结：
// index() 下标
// eq() :eq()
</script>
</div>
</body>
</html>
三、其他补充
1.mouseover 与 mouseenter
2.index方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li><a href="#">这是a的内容</a></li>
<li><a href="#">这是a的内容</a></li>
<li><a href="#">这是a的内容</a></li>
<li><a href="#">这是a的内容</a></li>
<li><a href="#">这是a的内容</a></li>
<li><a href="#">这是a的内容</a></li>
<li><a href="#">这是a的内容</a></li>
<li><a href="#">这是a的内容</a></li>
<li><a href="#">这是a的内容</a></li>
<li><a href="#">这是a的内容</a></li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
// 点击li，打印出当前li的下标
// index() 获取当前元素在所有兄弟中的索引（下标）
/*$("li").click(function () {
console.log($(this).index());
})*/
// 把事件注册给a
$("a").click(function () {
console.log($(this).parent().index());
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>abc1</li>
<li>abc2</li>
<li>abc3</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
var $lis = $("li");
console.log($lis.eq(0)); // jq对象
console.log($lis.get(0)); // dom对象
// jq对象转成dom对象, 有两种写法：
// 1. 通过中括号[]
// 2. get()
console.log($lis[0]);
</script>
</body>
</html>
3.区分jQuery与Javascript
四、jQuery操作样式
1.css操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>这是li的内容</li>
<li>这是li的内容</li>
<li>这是li的内容</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
// css操作
// 获取 && 设置样式
// css(name, value); // 设置单个样式
// css(obj) // 设置多个样式 obj 是个对象
// 设置的时候，会吧获取到的所有元素都设置上相同的样式
// css(name) // 获取样式 name 是个字符串形式的样式名
// 只获取第一个元素的对应的样式值
// 设置单个样式
$("li").css("color", "red");
// $("li").css("fontSize", "30px");
// $("li").css("backgroundColor", "lime");
// 设置多个样式
/*$("li").css({
color: "red",
fontSize: 50,
backgroundColor: "lime"
})*/
$("li").eq(0).css("fontSize", 28);
$("li").eq(1).css("fontSize", 22);
$("li").eq(2).css("fontSize", 24);
console.log($("li").css("fontSize"));
// 小结：
// css()
// css(name, value);
// css(obj)
// css(name)
</script>
</body>
</html>
2.class操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 400px;
height: 400px;
background-color: #f99;
}
.basic{
background-color: #ccc;
font-size: 50px;
}
</style>
</head>
<body>
<button>添加basic类名</button>
<button>移出basic类名</button>
<button>判断是否有basic类名</button>
<button>切换basic类名</button>
<div id="box" class="aa bb">
jquery好好用
</div>
<!-- <div class="dd"></div>
<div class="dd ff"></div>
<div class="dd"></div> -->
<script src="jquery-1.12.4.js"></script>
<script>
// 添加类名 只负责添加, 不会覆盖标签原有的类名
// addClass(name)
$("button").eq(0).click(function(){
$("#box").addClass("basic");
})
// 移出 removeClass(name)
$("button").eq(1).click(function(){
$("#box").removeClass("basic");
})
// 判断元素是否有指定的类名,如果有，就返回true， 没有就返回false
// 判断标准： 只要有元素有指定的类名，返回true
// 只有所有的元素都没有指定的类名，就返回false
// hasClass
$("button").eq(2).click(function(){
console.log($("#box").hasClass("basic"));
})
console.log($("div").hasClass("gg"));
// 切换类名 如果有，就移出掉，如果没有，就添加
// toggleClass(name)
//
$("button").eq(3).click(function () {
/*if ($("#box").hasClass("basic")) {
// 成立，有basic， 移出
$("#box").removeClass("basic");
}else{
// 没有， 添加
$("#box").addClass("basic");
}*/
$("#box").toggleClass("basic");
})
// 小结：
// addClass()
// removeClass()
// hasClass()
// toggleClass()
</script>
</body>
</html>
五、jQuery操作属性
1.attr操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img id="pic" src="06.jpg" alt="这是将要展示的图片" title="不知道是个啥">
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// attr操作属性
// attr(name, value); // 设置单个属性
// name: 属性名
// value： 属性值
// attr(obj) // 设置多个属性
// attr(name) // 获取属性
// removeAttr(name) // 移出属性
/*$("img").attr("alt", "程序员的世界");
$("img").attr("title", "年纪轻轻，别挠头");
// 这是操作图片的width属性
$("img").attr("width", "300");*/
/*$("img").attr({
alt: "程序员的世界002",
title: "年纪轻轻，别挠头, 容易着凉",
})*/
// console.log($("img").attr("src"));
// $("img").removeAttr("title");
// $("img").removeAttr("alt");
// 图片既有width 属性，也有width 样式
// css() 样式
// attr() 属性
// $("img").css("width", 600); // style 设置了width样式
// $("img").attr("width", 800); // width属性
// 小结 ：
// attr(name,value)
// attr(obj)
// attr(name)
// removeAttr(name)
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery li a img {
border: 0;
}
</style>
</head>
<body>
<h2>美女画廊</h2>
<ul id="imagegallery">
<li><a href="images/1.jpg" title="美女A">
<img src="images/1-small.jpg" width="100" alt="美女1" />
</a></li>
<li><a href="images/2.jpg" title="美女B">
<img src="images/2-small.jpg" width="100" alt="美女2" />
</a></li>
<li><a href="images/3.jpg" title="美女C">
<img src="images/3-small.jpg" width="100" alt="美女3" />
</a></li>
<li><a href="images/4.jpg" title="美女D">
<img src="images/4-small.jpg" width="100" alt="美女4" />
</a></li>
</ul>
<div style="clear:both"></div>
<img id="image" src="images/placeholder.png" alt="" width="450px" />
<p id="des">选择一个图片</p>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
// 思路：
// 1. 找对象 a
// 2. 给a注册click
// 3. 阻止a跳转
// 4. 获取当前点击的a的href属性值，设置给大图的src
// 5. 获取当前点击的a的title属性值，设置给说明信息的文字
// 1.
var $as = $("#imagegallery a");
var $img = $("#image");
var $des = $("#des");
// 2.
$as.click(function () {
// 4.
var href = $(this).attr("href"); // 获取操作
var txt = $(this).attr("title");
// 大图
$img.attr("src", href); // 设置属性
// 文字
$des.text(txt);
// 3.
return false;
})
});
</script>
</body>
</html>
2.prop操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<label>
<input type="checkbox" checked="checked">点击我切换
</label>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// 需求： 点击了input之后，获取input的选中状态（获取checked 属性）
$("input").click(function () {
// 获取的是checked属性属性值，不是checked属性最终选中效果
console.log($(this).attr("checked"));
console.log($(this).prop("checked"));
// 对于表单元素的checked、 selected、disabled 属性，使用prop操作
// prop方法和attr方法使用方法一样。
// 除了表单元素的三个属性使用prop方法外，其他的都可以使用attr方法。
// 对于自定义属性，使用attr方法 （abc、index）
// 对于固有属性，使用prop方法（title、id、style、checked、 selected、disabled）
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
text-align: center;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>红烧肉</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>西红柿鸡蛋</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>红烧狮子头</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>日式肥牛</td>
<td>田老师</td>
</tr>
</tbody>
</table>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
// 功能：
// 1. 全选控制下面四个input的选中状态
// 2. 下面四个input控制全选的选中状态
// 全选控制下面四个input的选中状态
// 思路：
// 1. 找对象
// 2. 给全选注册click
// 3. 获取到全选的选中状态
// 4. 把下面四个的选中状态同步成 全选的
//
// 1.
var $all = $("#j_cbAll");
var $inps = $("#j_tb input");
// 2.
$all.click(function () {
// 3.
// var ret = $(this).prop("checked");
// 、4
$inps.prop("checked", $(this).prop("checked"));
})
// 下面四个input控制全选的选中状态
// 思路：
// 1. 注册click
// 2. 获取被选中的input的个数 == 4
// 如果被选中的input的个数 == 4 说明全被选中了， 全选就要选中
// 否则，全选就不被选中
$inps.click(function () {
// :checked 过滤出被选中的表单元素
// $("#j_tb input:checked"); ==> jq对象 伪数组， length
/*if($("#j_tb input:checked").length == $inps.length){
$all.prop("checked", true);
}else{
$all.prop("checked", false);
}*/
$all.prop("checked", $("#j_tb input:checked").length == $inps.length);
})
});
</script>
</body>
</html>
六、jQuery动画
jquery提供了三组基本动画，这些动画都是标准的、有规律的效果，jquery还提供了自定义动画的功能。【演示动画例子】
1.三组基本动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: #f99;
display: none;
}
</style>
</head>
<body>
<button>展示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// 三组基本动画
// show 系列动画
// show hide toggle
// 展示 隐藏 切换
// show(speed, easing ,callback)
// speed : 动画时长， 单位是ms
// 提供了默认的字符串
// "fast": 200
// "normal": 400
// "slow": 600
// 如果写的字符串不是上面三者之一，默认取normal
// easing： 动画效果， swing（秋千，钟摆）慢-块-慢 默认值swing
// 提供了linear 匀速
// callback： 当动画结束后执行的回调函数， 可选的
//
// 这三个参数都是可选的。
// show 系列动画，没有参数，就没有动画效果
$("button").eq(0).click(function () {
$("div").show(2000, function () {
$("div").css("backgroundColor", "yellow")
});
})
$("button").eq(1).click(function () {
$("div").hide(2000, function () {
console.log("div 隐藏了");
});
})
$("button").eq(2).click(function () {
$("div").toggle(1000, function () {
console.log("toggle");
})
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: #f99;
display: none;
}
</style>
</head>
<body>
<button>展示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// 三组基本动画
// show 系列动画
// show hide toggle
// 展示 隐藏 切换
// show(speed, easing ,callback)
// speed : 动画时长， 单位是ms
// 提供了默认的字符串
// "fast": 200
// "normal": 400
// "slow": 600
// 如果写的字符串不是上面三者之一，默认取normal
// easing： 动画效果， swing（秋千，钟摆）慢-块-慢 默认值swing
// 提供了linear 匀速
// callback： 当动画结束后执行的回调函数， 可选的
//
// 这三个参数都是可选的。
// show 系列动画，没有参数，就没有动画效果
$("button").eq(0).click(function () {
$("div").show(2000, function () {
$("div").css("backgroundColor", "yellow")
});
})
$("button").eq(1).click(function () {
$("div").hide(2000, function () {
console.log("div 隐藏了");
});
})
$("button").eq(2).click(function () {
$("div").toggle(1000, function () {
console.log("toggle");
})
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: #f99;
display: none;
}
</style>
</head>
<body>
<button>展示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// 三组基本动画
// fade系列动画
// fadeIn fadeOut fadeToggle
// 展示 隐藏 切换
// fade系列没有参数，是有动画效果
// fade系列动画使用和show系列完全一样
$("button").eq(0).click(function () {
$("div").fadeIn(1000)
})
$("button").eq(1).click(function () {
$("div").fadeOut()
})
$("button").eq(2).click(function () {
$("div").fadeToggle()
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-image: url(imgs/bg.jpg);
}
.wrap li {
background-image: url(imgs/libg.jpg);
}
.wrap>ul>li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul class="ul">
<li><a href="javascript:void(0);">二级菜单11</a></li>
<li><a href="javascript:void(0);">二级菜单12</a></li>
<li><a href="javascript:void(0);">二级菜单13</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单2</a>
<ul>
<li><a href="javascript:void(0);">二级菜单21</a></li>
<li><a href="javascript:void(0);">二级菜单22</a></li>
<li><a href="javascript:void(0);">二级菜单23</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单3</a>
<ul>
<li><a href="javascript:void(0);">二级菜单31</a></li>
<li><a href="javascript:void(0);">二级菜单32</a></li>
<li><a href="javascript:void(0);">二级菜单33</a></li>
</ul>
</li>
</ul>
</div>
<script src="../jquery-1.12.4.js"></script>
<script>
// 思路；
// 1. 找对象 一级菜单li
// 2. 给li 注册 onmouseover
// 3. 让当前li下的ul展示出来
// 4. 给li 注册 onmouseout
// 5. 让当前li下的ul隐藏出来
// 1.
// 建议：把需要经常需要使用的元素被保存起来，变量名前面加上$,表示获取到的是个jq对象
var $lis = $(".wrap>ul>li");
// 2.
$lis.mouseenter(function(){
console.log("mouseenter");
// 3.
// this ==> 是个dom对象
// console.log(this);
// this 要使用jq的方法，一定要转jq对象 $(this)
// jq提供的 children() 方法，用来获取元素内的所有子元素的
// 支持传参，参数为选择器，可以根据选择器筛选出指定的子元素
/*console.log($(this).children());
console.log($(this).children("ul"));*/
$(this).children("ul").stop().slideDown();
})
// 4.
$lis.mouseleave(function(){
console.log("mouseleave");
// 5.
// hide() ==> 隐藏元素
$(this).children("ul").stop().slideUp();
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>京东商城</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.slider {
height: 340px;
width: 790px;
margin: 100px auto;
position: relative;
}
.slider li {
position: absolute;
display: none;
}
.slider li:first-child {
display: block;
}
.arrow {
display: none;
}
.slider:hover .arrow {
display: block;
}
.arrow-left,
.arrow-right {
font-family: "SimSun", "宋体";
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
margin-top: -30px;
cursor: pointer;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: 700;
font-size: 30px;
}
.arrow-left:hover,
.arrow-right:hover {
background-color: rgba(0, 0, 0, .5);
}
.arrow-left {
left: 0;
}
.arrow-right {
right: 0;
}
</style>
</head>
<body>
<div class="slider">
<ul>
<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="images/6.jpg" alt=""></a></li>
<li><a href="#"><img src="images/7.jpg" alt=""></a></li>
<li><a href="#"><img src="images/8.jpg" alt=""></a></li>
</ul>
<!--箭头-->
<div class="arrow">
<span class="arrow-left"><</span>
<span class="arrow-right">></span>
</div>
</div>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
// 思路：
// 1. 声明一个变量 index = 0； // 当前展示的图片的下标， 0：第一张图片的下标
// 2. 给右箭头注册click
// 3. index++
// 4. 根据下标index找到对应的li让其淡入 fadeIn，其他的兄弟li fadeOut
// 1.
index = 0;
$btnRight = $(".arrow-right");
$btnLeft = $(".arrow-left");
$lis = $(".slider li");
// 2.
$btnRight.click(function () {
// 3..
index++;
if (index > $lis.length - 1) {
// 此时展示的就是最后一张
// 需要让其展示第一张
index = 0;
}
// 4.
$lis.eq(index).fadeIn().siblings().fadeOut();
})
$btnLeft.click(function () {
// 3..
index--;
if (index < 0) {
// 让其展示最后一张
index = $lis.length - 1;
}
// 4.
$lis.eq(index).fadeIn().siblings().fadeOut();
})
});
</script>
</body>
</html>
2.自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: #f99;
position: relative;
margin: 20px;
}
</style>
</head>
<body>
<div>swing</div>
<!-- <div>linear</div> -->
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// 自定义动画
// animate(obj, speed, easing , callback)
// obj 是个对象， 对象里面写需要做动画的样式和样式值, 必须要写的参数
// speed, easing , callback 都是可选的
// easing : swing linear
// 对象里面的键值对是同时做动画效果的
$("div").animate({
left: 800,
top: 300
}, 1000, function(){
console.log("到达了终点");
})
// 对比 swing && linear
/*$("div").eq(0).animate({
left: 800
}, 8000, "swing")
$("div").eq(1).animate({
left: 800
}, 8000, "linear")*/
})
</script>
</body>
</html>
3.动画队列与停止动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #f99;
position: relative;
margin: 20px;
}
</style>
</head>
<body>
<div>swing</div>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// 动画队列： 像链式编程一样，通过.一直往下调用动画即可
// 按照书写的顺序会把这些动画依次添加到元素的动画队列中，按照队列的形式依次执行动画效果。
// 先left = 800 ， 在top=300，在变圆角
// 回调地狱
/*$("div").animate({
left: 800
}, 1000, function () {
$("div").animate({
top: 300
}, 1000, function () {
$("div").animate({
borderRadius: "50%"
}, 1000)
})
})*/
$("div")
.animate({
left: 800
}, 1000)
.animate({
top: 300
}, 1000)
.animate({
borderRadius: "50%"
}, 1000)
.slideUp(2000)
.slideDown(2000)
// 好处： 先后顺序的动画
// 坏处： bug
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 400px;
height: 400px;
display: none;
background-color: #f99;
}
</style>
</head>
<body>
<button>开始</button>
<button>停止</button>
<div></div>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// 先slideDown 在 slideUp
$("button").eq(0).click(function () {
$("div").slideDown(2000).slideUp(2000);
})
$("button").eq(1).click(function () {
// stop 停止当前正在运动的动画,如果动画队列中还有后续动画，执行后续动画去了
$("div").stop(true, true);
})
// stop的两个参数
stop(clearQueue, jumpToEnd);
// clearQueue 是否清除元素的动画队列，true，表示清除
// jumpToEnd 是否跳转得到当前正在执行的动画的最终效果，true，表示跳转
// 都是可选的，默认值，false
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 1300px;
}
#box {
width: 1200px;
height: 400px;
border: 2px solid red;
margin: 100px auto;
}
#box li {
width: 240px;
height: 400px;
/*border: 1px solid #000;*/
float: left;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
// 功能1： 给每个li设置背景图片
var $lis = $("#box li");
for (var i = 0; i < $lis.length; i++) {
// $lis[i] ==> DOM对象
$lis.eq(i).css("backgroundImage", "url(images/"+ (i + 1) +".jpg)");
}
// 每个li都一样了
// $lis.css("backgroundImage", "url(images/"+ ??? +".jpg)");
// 功能2： 给鼠标移入事件，当前的li的width变800，其他的变100
$lis.mouseenter(function () {
$(this).stop().animate({width: 800}).siblings().stop().animate({width: 100})
})
// 功能3： 鼠标移出box ，让所有的li 恢复成原来的240
$("#box").mouseleave(function () {
$lis.stop().animate({width: 240});
})
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.nav {
width: 700px;
height: 60px;
background-color: black;
margin: 0 auto;
}
.maps {
width: 700px;
text-align: center;
}
.maps button {
display: block;
padding: 5px 10px;
margin: 10px auto;
}
.maps img {
width: 80%;
}
.nav li {
width: 100px;
height: 60px;
/*border: 1px solid yellow;*/
float: left;
position: relative;
overflow: hidden;
}
.nav a {
position: absolute;
width: 100%;
height: 100%;
font-size: 24px;
color: blue;
text-align: center;
line-height: 60px;
text-decoration: none;
z-index: 2;
}
.nav span {
position: absolute;
width: 100%;
height: 100%;
background-color: yellow;
top: 60px;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="javascript:void(0);">导航1</a>
<span></span>
</li>
<li><a href="javascript:void(0);">导航2</a><span></span></li>
<li><a href="javascript:void(0);">导航3</a><span></span></li>
<li><a href="javascript:void(0);">导航4</a><span></span></li>
<li><a href="javascript:void(0);">导航5</a><span></span></li>
<li><a href="javascript:void(0);">导航6</a><span></span></li>
<li><a href="javascript:void(0);">导航7</a><span></span></li>
</ul>
<div class="maps">
<button class="change">切换图片</button>
<img src="1.jpg" alt="">
</div>
<div class="mp3">
<audio src="mp3/1.mp3"></audio>
<audio src="mp3/2.mp3"></audio>
<audio src="mp3/3.mp3"></audio>
<audio src="mp3/4.mp3"></audio>
<audio src="mp3/5.mp3"></audio>
<audio src="mp3/6.mp3"></audio>
<audio src="mp3/7.mp3"></audio>
</div>
</div>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
// 按钮切换图片
var index = 0;
var arrs = ["1.jpg", "2.jpg", "3.jpg"];
$(".change").click(function () {
index++;
if (index === arrs.length) {
index = 0;
}
$(".maps img").attr("src", arrs[index])
})
// 功能： 鼠标移入，黄色块升上，播放对应的音乐
// 思路：
// 1. 找对象 导航li
// 2. 给li 注册 mouseenter
// 3. 找当前li下的span做 animate动画效果 top=0
// 4. 获取当前li的下标，找到对应的音乐播放
// 1.
var $lis = $(".nav li");
var $audios = $(".mp3 audio");
// 2.
$lis.mouseenter(function () {
// 3.
$(this).children("span").stop().animate({
top: 0
})
// 4.
var idx = $(this).index();
// load() 加载资源，，是H5提供的，jq并没有封装这个方法，只能通过DOM对象进行调用
// play() 播放音频或者是视频,是H5提供的，jq并没有封装这个方法，只能通过DOM对象进行调用
// console.log($audios.eq(idx));
// 不能把load 和play 连写。
$audios.get(idx).load();
$audios.get(idx).play();
})
$lis.mouseleave(function () {
$(this).children("span").stop().animate({
top: 60
})
})
})
</script>
</body>
</html>
七、jQuery节点操作
1.创建节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <a href="http://www.baidu.com" target="_blank">百度一下</a> -->
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// 创建节点
// 原生js
/*var a = document.createElement("a");
a.href = "http://www.baidu.com";
a.target = "_blank";
a.innerText = "百度一下";
document.body.appendChild(a);*/
// jq创建节点
// 语法： $(html字符串)
// 注意点： 引号的问题
var $a = $('<a href="http://www.baidu.com" target="_blank">百度一下,啦啦</a>');
$("body").append($a);
// $符号作用：
// 1. 参数为 选择器， 获取元素
// 2. 参数为 函数， 入口函数
// 3. 参数为 DOM对象， 转成jq对象
// 4. 参数为 HTML字符串 ， 创建元素
})
</script>
</body>
</html>
2.添加节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: #f99;
padding: 10px;
}
p{
padding: 20px;
background-color: #ccc;
}
</style>
</head>
<body>
<div>
<p>这是div内的p元素</p>
</div>
<p class="outerP">这是div外的p元素</p>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// append() 其实内部就是把appendChild给封装起来了
// 语法： parent.append(child);
// 作用： 把child添加到 parent里面，在最后面
// $("div").append( $(".outerP") )
// child.appendTo(parent);
// $(".outerP").appendTo( $("div") );
// 上面代码简写： parent参数可以直接选择器
// $(".outerP").appendTo("div");
// prepend()
// 语法： parent.prepend(child);
// 作用： 把child添加到parent里面，在最前面
// $("div").prepend( $(".outerP") );
// prependTo() 和prepend 作用一样，写法反过来了
// $(".outerP").prependTo( "div" );
// after && before()
// A.after(B); // 把B放在A的后面
// A.before(B); // 把B放在A的前面
// $("div").after( $("div p") );
$("div").before( $("div p") );
// 添加节点
// 往里面添加 4个
// append() appendTo() 在最后面
// prepend() prependTo() 在最前面
// 做兄弟
// after() before()
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
select {
width: 200px;
background-color: teal;
height: 200px;
font-size: 20px;
}
.btn-box {
width: 30px;
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<h1>城市选择：</h1>
<select id="src-city" name="src-city" multiple>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">广州</option>
<option value="5">西红柿</option>
</select>
<div class="btn-box">
<!--实体字符-->
<button id="btn1"> >> </button>
<button id="btn2"> << </button>
<button id="btn3"> ></button>
<button id="btn4"> < </button>
</div>
<select id="tar-city" name="tar-city" multiple>
</select>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
// btn1 把左边的所有的option 都移到右边的下拉框中
$("#btn1").click(function () {
// append
$("#tar-city").append( $("#src-city option") );
})
// btn2 把右边的所有的option 都移到左边的下拉框中
$("#btn2").click(function () {
// appendTo
$("#tar-city option").appendTo( $("#src-city") );
})
// btn3 把左边的所有选中的option 都移到右边的下拉框中
$("#btn3").click(function () {
// :checked ==> 单选 多选
// :selected ==> 下拉框
$("#tar-city").append( $("#src-city option:selected") );
})
// btn4 把右边的所有选中的option 都移到左边的下拉框中
$("#btn4").click(function () {
$("#tar-city option:selected").appendTo( $("#src-city") );
})
});
</script>
</body>
</html>
3.清空节点与删除节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color: #f99;
padding: 10px;
}
p{
padding: 20px;
background-color: #ccc;
}
</style>
</head>
<body>
<div>
<p>这是div内的p元素</p>
</div>
<p class="outerP">这是div外的p元素</p>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// 清空节点： empty() 清理门户
// 删除节点: remove() 自杀
// 克隆节点: clone()
// $("div").empty();
// $("div").remove();
// clone(参数) 默认就是深拷贝
// 参数表示是否克隆元素的事件,默认不拷贝事件， 参数为布尔类型的值
$(".outerP").click(function () {
console.log(123);
})
var $p = $(".outerP").clone(true);
$("div").append($p);
})
</script>
</body>
</html>
4.克隆节点
八、jQuery特殊属性操作
1.val方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" value="37期平均就业薪资15k">
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// val 方法 专门用来操作表单元素的value属性
// 获取 -- 不传参
console.log($("input").val());
// 设置 -- 传参
$("input").val("37期10个工作日就业100%");
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" value="蚕丝被">
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// 聚焦 onfocus
$("input").focus(function () {
if($(this).val() == "蚕丝被"){
$(this).val("");
}
})
// 失去焦点
$("input").blur(function () {
if ($(this).val().trim() == "") {
// 没有输入内容，才设置成默认值
$(this).val("蚕丝被");
}
})
})
</script>
</body>
</html>
2.html方法与text方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<p>这是p元素</p>
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// 02-html方法与text方法
// html() ==> innerHTML
// text() ==> innerText
// html() 相对于 text() 可以识别标签的
// 获取 -- 不传参
// console.log($("#box").html());
// console.log($("#box").text());
// 设置
// $("#box").html("<h1>这是新的内容</h1>");
// $("#box").text("<h1>这是新的内容</h1>"); // 不识别标签，会被标签进行转义
})
</script>
</body>
</html>
3.width方法与height方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
padding: 10px;
border: 10px solid #ccc;
margin: 10px;
background-color: #f99;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// width方法与height方法
// css方法获取宽高会返回px单位，参与运算不方便
// console.log($("#box").css("width"));
// 获取
// console.log($("#box").width()); // width
// console.log($("#box").height());
// 设置大小 传参
// $("#box").width(500);
// innerWidth() ==> width + padding
// console.log($("#box").innerWidth());
// outerWidth() ==> width + padding + border
// 该方法参数用于来决定 是否获取margin部分的值
// 默认值是false， 不获取margin
// console.log($("#box").outerWidth());
// outerWidth(true) ==> width + padding + border + margin
// console.log($("#box").outerWidth(true));
// 获取页面可视区的大小
console.log($(window).width());
console.log($(window).height());
// 小结：
// width height ==> 设置和获取元素的width
// width + padding ==> innerWidth
// width + padding+border ==> outerWidth
// width + padding+border+margin ==> outerWidth(true)
// 获取可视区的大小
})
</script>
</body>
</html>
4.scrollTop与scrollLeft
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
height: 4000px;
}
button{
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<button>返回顶部</button>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// 原生js
// scrollTop
// html或者是body的scrollTop
// window.pageYOffset
// window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
// scrollTop与scrollLeft: 用于获取页面卷曲距离
// 获取垂直方向的卷曲距离
// $(window).scrollTop()
// 设置卷曲距离 -- 传参
$("button").click(function () {
$(window).scrollTop(0);
})
// 实时的获取页面卷曲距离
// 滚动事件 onscroll
$(window).scroll(function () {
console.log($(window).scrollTop());
})
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
img {
vertical-align: top;
width: 100%;
}
.main {
margin: 10px auto 0;
width: 1000px;
}
.fixed {
width: 100%;
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="top" id="topPart">
<img src="images/top.png" alt="" />
</div>
<div class="nav" id="navBar">
<img src="images/nav.png" alt="" />
</div>
<div class="main" id="mainPart">
<img src="images/main.png" alt="" />
</div>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function() {
// 思路：
// 1. 给window注册 scroll 滚动事件
// 2. 获取页面的垂直方向的卷曲距离
// 3. 卷曲距离 topPart 的高度做比较
// 4. 卷曲距离 >= topPart 的高度 让 navBar 固定定位
// 卷曲距离 < topPart 的高度 让 navBar 取消固定定位
var $topPart = $("#topPart");
var $navBar = $("#navBar");
var $mainPart = $("#mainPart");
// 1.
$(window).scroll(function () {
// 2.
var scrollTop = $(window).scrollTop();
// 3.
if(scrollTop >= $topPart.height()){
$navBar.addClass("fixed");
// 导航会固定定位，不占位置
$mainPart.css("marginTop", 10 + $navBar.height());
}else{
$navBar.removeClass("fixed");
$mainPart.css("marginTop", 10);
}
})
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
height: 8000px;
}
a {
color: #FFF;
}
.actGotop {
position: fixed;
bottom: 50px;
right: 50px;
width: 150px;
height: 195px;
display: none;
z-index: 100;
}
.actGotop a,
.actGotop a:link {
width: 150px;
height: 195px;
display: inline-block;
background: url(images/gotop.png) no-repeat;
outline: none;
}
.actGotop a:hover {
width: 150px;
height: 195px;
background: url(images/gotop.gif) no-repeat;
outline: none;
}
</style>
</head>
<body>
<!-- 返回顶部小火箭 -->
<div class="actGotop"><a href="javascript:;" title="Top"></a></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
// 功能1： 控制小火箭的显示和隐藏
// 功能2： 点击小火箭返回顶部 （动画效果）
// 功能1： 控制小火箭的显示和隐藏
// 思路:
// 1.1 给window注册滚动事件
// 1.2 获取到页面的卷曲距离
// 1.3 卷曲距离 >= 1800 就显示 小火箭
// 否则，就隐藏小火箭
var $actGotop = $(".actGotop");
// 1.1
$(window).scroll(function() {
// 1.2
var scrollTop = $(window).scrollTop();
// 1.3
if (scrollTop >= 1800) {
$actGotop.fadeIn(1000);
} else {
$actGotop.fadeOut(1000);
}
})
$actGotop.click(function() {
// 缓慢的返回顶部
// 没有动画效果
// $(window).scrollTop(0);
// 没有反应
/*$(window).animate({
scrollTop: 0
}, 1000)*/
// $(window).scrollTop(0); ==> 内部封装了什么
// window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
// window.pageYOffset 只读属性， 修改无效
// document.documentElement ==> html
// document.body ==> body
/*$(document.documentElement, document.body).animate({
scrollTop: 0
}, 1000)*/
// 简洁的写法 为了兼容更多的浏览器
$("html,body").animate({
scrollTop: 0
}, 1000)
})
});
</script>
</body>
</html>
5.offset方法与position方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 400px;
height: 400px;
background-color: #f99;
position: relative;
margin: 50px;
}
.son{
width: 100px;
height: 100px;
position: relative;
left: 80px;
top: 50px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// offset方法与position方法
// offset方法 : 获取元素到页面之间的距离
// 返回的是个对象 {top: xx, left: yy}
// console.log($(".son").offset());
// position方法： 获取元素到有定位的父元素之间的距离
// offsetLeft offsetTop offsetParent
// 返回的是个对象 {top: xx, left: yy}
console.log($('.son').position());
})
// 小结：
// 不传参就是获取 传参就是设置
// 1. val()
// 2. html() text()
// 3. width() height()
// 4. scrollTop() scrollLeft()
// 5. offset() position()
</script>
</body>
</html>
九、jQuery事件机制
JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。
1.jQuery事件发展历程(了解)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
padding: 20px;
background-color: #f99;
}
div p{
padding: 10px;
background-color: #ccc;
}
</style>
</head>
<body>
<button id="btn">点击解绑div的事件</button>
<button id="create">点击创建p元素添加到div内</button>
<br>
<br>
<br>
<div>
<p>这是div内的p元素</p>
<p>这是div内的p元素</p>
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// jQuery事件发展历程
// 1. 注册事件 -- 简单事件
/*$("div").click(function () {
console.log(1);
})
// jq给元素注册同一个事件多次，不存在覆盖问题
$("div").click(function () {
console.log(2);
})*/
// 同时注册多个事件
/*$("div").click(function () {
console.log(2);
}).mouseenter(function () {
console.log(3);
})*/
// 2. bind 绑定事件
// bind(type, fn)
// 事件类型参数 用空格隔开多个事件名，表示给元素同时注册上多个事件
/*$("div").bind("click mouseenter", function () {
alert(1)
})*/
// unbind() 来解绑事件
// unbind() ==> 把元素的所有事件都给解绑了
// unbind(type) ==> 把元素的指定事件给解绑了
/*$("#btn").click(function () {
$("div").unbind("mouseenter");
})*/
// bind局限性： 不支持动态绑定（对于新创建出来的元素没有注册上事件）
// 创建p元素
/*$("#create").click(function () {
var $newP = $("<p>新的p元素</p>");
$("div").append($newP);
})
$("div p").bind("click", function () {
alert(2)
})*/
// 让创建的p元素也有点击事件
// 注册事件委托（代理） --- 支持动态绑定
// delegate(selector, type, fn);
$("div").delegate("p", "click", function () {
// 把点击事件注册给了 div
// 让子元素p元素去触发
alert(3);
})
$("#create").click(function () {
var $newP = $("<p>新的p元素</p>");
$("div").append($newP);
})
// 解绑事件： undelegate
// undelegate() ==> 解绑元素的所有的委托事件
// undelegate(selector, type) ==> 解绑元素的指定的委托事件
$("#btn").click(function () {
$("div").undelegate("p", "click");
})
// 小结：
// 1. 注册简单事件 click(function)
// 2. bind() bind(type, fn) unbind() 局限性： 不支持动态绑定
// 3. delegate() delegate(selector, type, fn) undelegate()
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul,li{
list-style: none;
}
ul{
padding: 20px;
background-color: #f99;
}
li{
padding: 10px;
background-color: #ccc;
margin: 10px;
}
</style>
</head>
<body>
<button>创建li元素</button>
<br>
<br>
<ul>
<li>这是第1个li元素</li>
<li>这是第2个li元素</li>
<li>这是第3个li元素</li>
<li>这是第4个li元素</li>
<li>这是第5个li元素</li>
<li>这是第6个li元素</li>
<li>这是第7个li元素</li>
<li>这是第8个li元素</li>
<li>这是第9个li元素</li>
<li>这是第10个li元素</li>
</ul>
<script>
// 事件委托（代理）
// 原理： 事件冒泡
// 好处：
// 1. 能够减少内存浪费
// 2. 支持动态绑定
// 做法：
// 把事件注册给父辈，让其子元素去触发
var ul = document.querySelector("ul");
ul.onclick = function (e) {
// 只能让子元素li去触发alert(1)
// console.log(e);
if(e.target.nodeName == "LI"){
// 说明点击了li元素
alert(1)
}
}
var btn = document.querySelector("button");
btn.onclick = function () {
var li = document.createElement("li");
li.innerText = "创建的p元素"
ul.appendChild(li)
}
</script>
</body>
</html>
2.on注册事件(重点)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
padding: 20px;
background-color: #f99;
}
div p{
padding: 10px;
background-color: #ccc;
}
</style>
</head>
<body>
<button id="btn">点击解绑div的事件</button>
<button id="create">点击创建p元素添加到div内</button>
<br>
<br>
<br>
<div id="box">
<p>这是div内的p元素</p>
<p>这是div内的p元素</p>
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// on 来注册事件
// on(type, selector, data, fn)
// type ==> 事件类名
// selector ==> 选择器， 由指定的子元素去触发，参数可选
// 如果存在，表示on注册的事件是事件委托
// 如果不存在，就是 bind
// data ==> 携带的数据，用于在事件处理函数内部使用， 可选的
// fn
/*$("#box").on("click", function () {
alert(1)
})*/
// 使用on注册了事件委托
$('#box').on("click", "p", function () {
alert(2)
})
})
</script>
</body>
</html>
3.事件解绑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
padding: 20px;
background-color: #f99;
}
div p{
padding: 10px;
background-color: #ccc;
}
</style>
</head>
<body>
<button id="btn">点击解绑div的事件</button>
<br>
<br>
<br>
<div id="box">
<p>这是div内的p元素</p>
<p>这是div内的p元素</p>
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
$("#box").on("click", function () {
alert(1)
})
// off()
// off() ==> 解绑元素的所有事件(包含了事件委托)
// off(type) ==> 解绑元素指定的事件
// off(type, selector) ==> 解绑元素事件委托
$("#btn").on("click", function(){
$("#box").off("click", "p");
})
// 使用on注册了事件委托
$('#box').on("click", "p", function () {
alert(2)
})
})
</script>
</body>
</html>
4.触发事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
float: left;
margin: 20px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
$("#box1").on("click", function () {
alert(1)
})
// 触发事件： 点击box2，就把box1点击了
// 1. type()
// 2. trigger(type)
$("#box2").on("click", function () {
// 把box1的点击事件给调用了
// $("#box1").click();
$("#box1").trigger("click");
})
})
</script>
</body>
</html>
5.jQuery事件对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 200px;
height: 200px;
background-color: #ff9;
}
</style>
</head>
<body>
<div>
<a href="http://web.itcast.cn">世界名网</a>
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
var obj = {name: "lw", age: 19, sex: "male"};
// data 携带的数据，用于在事件处理函数中使用
$("div").on("click", function (e) {
// e jq事件对象
// console.log(e.data);
// console.log(obj);
alert(1)
})
$("div a").on("click", function (e) {
alert(2);
// e.preventDefault(); // 阻止浏览器的默认行为
e.stopPropagation(); //
return false; // 在jq中，return false有阻止事件传播&&阻止浏览器的默认行为
// 在原生js中， return false阻止浏览器的默认行为
})
})
</script>
</body>
</html>
十、jQuery补充知识点
1.隐式迭代
基本概念
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// 特点：
// 1. 隐式迭代
// 隐式： 偷偷地
// 迭代： 遍历
// 对于设置性操作，会把获取到的所有元素都设置上相同 的操作
// css()
// click
// $("li").css("color", "red");
// 对于获取性操作，只会返回第一个元素对应的值
// console.log($("li").css("color"));
// 如果需要给每一个元素设置上不同的操作，就需要遍历
var arr = ["red", "yellow", "blue"];
for (var i = 0; i < $("li").length; i++) {
// $("li")[i] ==> dom对象
$("li").eq(i).css("backgroundColor", arr[i]);
}
// jq的隐式迭代
// 1. 设置性操作
// 2. 获取性操作
// 3. 每一个元素都需要不同的操作
})
</script>
</body>
</html>
each方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// each 遍历jq对象
// 语法： jq对象.each(function(index, ele){
// index ==> 遍历的当前元素的下标
// ele ==> 当前遍历的元素， 是个dom对象
// 在这个函数中，this指向了ele
// })
// 如果需要给每一个元素设置上不同的操作，就需要遍历
var arr = ["red", "yellow", "blue"];
/*for (var i = 0; i < $("li").length; i++) {
$("li").eq(i).css("backgroundColor", arr[i]);
}*/
$("li").each(function(index, ele){
// console.log(index, ele);
// $(ele).css("backgroundColor", arr[index]);
$(this).css("backgroundColor", arr[index]);
// console.log(this);
})
})
</script>
</body>
</html>
2.链式编程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
随便写的文字
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// 通过.可以一直往下写
// 链式编程有条件：
// 对于设置性操作，会把当前的jq对象给返回出来, 所以后面可以在继续链式编程
// 对于获取性操作，会把具体的值给返回出来，由于值不是jq对象，所有后面就不可以在链式编程了。
// console.log( $("body").css("backgroundColor", "#f99") ); // $("body")
// console.log( $("body").css("backgroundColor", "#f99").css("fontSize")); // 16px
var ret = $("body").css("backgroundColor", "#f99").text("我修改了内容").css("fontSize");
console.log(ret);
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星评分案例</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: #ff16cf;
}
.comment li {
float: left;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
// 功能1. 鼠标移入事件
// 让当前的五角星和前面所有的五角星变成实心效果
//
// 功能2： 鼠标离开事件
// 让所有的五角星恢复成空心效果
// 功能3： 点击事件
//
var wjx_k = "☆";
var wjx_s = "★";
// 功能1. 鼠标移入事件
// 1. 找对象 li
// 2. 给li 注册 mouseenter
// 3. 当前的li 实心， 前面的所有的实心
// 后面所有的变成空心
// 1.
var $lis = $(".comment li");
// 2.
$lis.on("mouseenter", function () {
// 3.
// next() ==> 下一个兄弟元素
// prev() ==> 上一个兄弟元素
// prevAll() ==> 当前元素前面所有的元素
// nextAll() ==> 当前元素后面所有的元素
// 当前的 && 前面所有的
$(this).text(wjx_s).prevAll().text(wjx_s);
// 后面所有的
$(this).nextAll().text(wjx_k);
})
// 功能2： 鼠标离开事件
// 1. 找对象 comment
// 2. comment 注册 mouseleave
// 3. 把所有的五角星变成 空心
$(".comment").on("mouseleave", function(){
$lis.text(wjx_k);
// 找到刚才点击的那个li
$(".comment li.current").text(wjx_s).prevAll().text(wjx_s);
})
// 功能3： 点击事件
// 加标记 -- 也可以使用下标做标记
// 1. 点击的时候，给当前点击的li元素添加一个 current 类名（不是用来做样式的，就是用来做标记的）
// 2. 当鼠标离开ul的时候，找到刚才点击的那个li元素（通过带有啊current类名的那个li）
// 3. 找到的li 和前面所有的li 设置成实心效果
$lis.on("click", function(){
$(this).addClass("current").siblings().removeClass("current");
})
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星评分案例</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: #ff16cf;
}
.comment li {
float: left;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
// 功能1. 鼠标移入事件
// 让当前的五角星和前面所有的五角星变成实心效果
//
// 功能2： 鼠标离开事件
// 让所有的五角星恢复成空心效果
// 功能3： 点击事件
//
var wjx_k = "☆";
var wjx_s = "★";
// 功能1. 鼠标移入事件
// 1. 找对象 li
// 2. 给li 注册 mouseenter
// 3. 当前的li 实心， 前面的所有的实心
// 后面所有的变成空心
// 1.
var $lis = $(".comment li");
// 2.
$lis.on("mouseenter", function () {
// 3.
// 当前的 && 前面所有的
$(this).text(wjx_s).prevAll().text(wjx_s);
// // 后面所有的
$(this).nextAll().text(wjx_k);
// console.log($(this).text(wjx_s)); // $(this)
// console.log($(this).text(wjx_s).prevAll().text(wjx_s)); // $(this).prevAll()
// console.log($(this).text(wjx_s).prevAll().text(wjx_s).nextAll()); // $(this).prevAll().nextAll()
// prevObject ==> 找到上一次返回的jq对象, 是个属性
// end() ==> 把 prevObject 属性给封装成方法
// 不好的点： 属性和方法混写
// $(this).text(wjx_s).prevAll().text(wjx_s).prevObject.nextAll().text(wjx_k);
// 建议： 链式编程不要太长
// $(this).text(wjx_s).prevAll().text(wjx_s).end().nextAll().text(wjx_k);
})
// 功能2： 鼠标离开事件
// 1. 找对象 comment
// 2. comment 注册 mouseleave
// 3. 把所有的五角星变成 空心
$(".comment").on("mouseleave", function(){
$lis.text(wjx_k);
// 找到刚才点击的那个li
$(".comment li.current").text(wjx_s).prevAll().text(wjx_s);
})
// 功能3： 点击事件
// 加标记 -- 也可以使用下标做标记
// 1. 点击的时候，给当前点击的li元素添加一个 current 类名（不是用来做样式的，就是用来做标记的）
// 2. 当鼠标离开ul的时候，找到刚才点击的那个li元素（通过带有啊current类名的那个li）
// 3. 找到的li 和前面所有的li 设置成实心效果
$lis.on("click", function(){
$(this).addClass("current").siblings().removeClass("current");
})
});
</script>
</body>
</html>
3.多库共存
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="./jquery-1.12.4.js"></script>
<script src="dacongge.js"></script>
<script>
// console.log($);
// $ 符号是dacongge 的功能，不能使用jq的功能
/*jQuery(function () {
jQuery("body").css("backgroundColor", "#ccc");
})*/
// jq 提供了方法 noConflict(), 让jq释放对$符号的功能, 该方法有返回值，返回了jq中的$符号的作用。
var cc = jQuery.noConflict();
// console.log($);
console.log(cc);
cc(function () {
cc("body").css("backgroundColor", "#ccc");
})
$.liaomei()
// jq 就是个js文件
// jq 中使用$符号去表示jq的功能
// jq考虑了$符号冲突的问题了，咋解决、 noConflict()
</script>
</body>
</html>
十一、jQuery插件
1.使用插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #ccc;
}
</style>
</head>
<body>
<div></div>
<script src="./jquery-1.12.4.js"></script>
<script src="jquery.color.js"></script>
<script>
$(function(){
// jQuery插件
// jq插件，其实还就是个js文件。js文件依赖了jquery，必须要先引用jq，才能使用jq插件
// 注意点： 一定要先引用jq，在引用jq插件
// jquery.color.js 的插件的作用： 让animate 支持色值型动画
// 该插件很简单，只需要引用到页面即可。
// animate 仅仅支持数字型动画， 不支持色值型动画
$("div").animate({
width: 800,
backgroundColor: "#ffc0cb" // 色值写rgb， 16进制， 不要纯写颜色单词
}, 1000)
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
height: 400px;
background-color: #f99;
margin: 20px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<img class="lazyload" data-original="http://m.360buyimg.com/babel/jfs/t1/10621/38/11196/40478/5c6e3ca0E15c81075/248a2a8eeee7f12b.jpg" alt="">
<img class="lazyload" data-original="./lazyloadimgs/01.gif" alt="">
<div></div>
<div></div>
<img class="lazyload" data-original="./lazyloadimgs/02.gif" alt="">
<div></div>
<div></div>
<img class="lazyload" data-original="./lazyloadimgs/03.gif" alt="">
<div></div>
<div></div>
<img class="lazyload" data-original="./lazyloadimgs/04.gif" alt="">
<div></div>
<div></div>
<script src="./jquery-1.12.4.js"></script>
<script src="./jquery.lazyload.js"></script>
<script>
$(function(){
// 该插件不是引用就可以实现懒加载效果，还需要配置
$("img.lazyload").lazyload({
// 插件的参数： http://www.jq22.com/jquery-info390
placeholder: "./lazyloadimgs/lazyload.gif"
});
// 使用该插件的步骤：
// 1. 引用jq 、 jq插件
// 2. 修改了图片标签
// src ==> data-original
// 添加了类名 ==> 方便找到需要懒加载的图片
// 最好加上width、height。不是必备
// 3. $("img.lazyload").lazyload();
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div></div>
<div></div>
<img class="lazyload" data-original="http://m.360buyimg.com/babel/jfs/t1/10621/38/11196/40478/5c6e3ca0E15c81075/248a2a8eeee7f12b.jpg" alt="">
<img class="lazyload" data-original="./lazyloadimgs/01.gif" alt="">
<div></div>
<div></div>
<img class="lazyload" data-original="./lazyloadimgs/02.gif" alt="">
<div></div>
<div></div>
<img class="lazyload" data-original="./lazyloadimgs/03.gif" alt="">
<div></div>
<div></div>
<img class="lazyload" data-original="./lazyloadimgs/04.gif" alt="">
<div></div>
<div></div>
<script src="./jquery-1.12.4.js"></script>
<script>
$(function(){
// 插件的原理：
// lazyload 插件做了啥， 让jq对象可以去调用 lazyload()
// jq对象 ==> jq的实例对象
// jq插件的核心思想： 把插件提供的方法放在了jq的原型中
// jq的实例对象都可以访问到原型中的方法
// jq的原型：
// 1. jQuery.prototype
// 2. jQuery.fn ==> 上面原型的简写形式
// 3. $.prototype
// 4. $.fn ==> 最简单
// 给jq的原型添加了alt方法
$.fn.alt = function (msg) {
alert(msg)
}
$("body").alt("哈哈");
// $("img.lazyload").lazyload();
// 小结：
// jq插件的原理：
// jq原型：$.fn
})
</script>
</body>
</html>
2.制作jQuery插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
这是文字效果
<script src="./jquery-1.12.4.js"></script>
<script src="jquery.bgc.js"></script>
<script>
$(function(){
// $("body").css("backgroundColor", "#f99");
// 把设置背景颜色封装成插件 jquery.bgc.js
$("body").bgc("#f99").css("color", "yellow");
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 410px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "΢ÈíÑźÚ";
color: #fff;
}
td {
font: 14px "΢ÈíÑźÚ";
}
td a.get {
text-decoration: none;
}
a.del:hover {
text-decoration: underline;
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
.btnAdd {
width: 110px;
height: 30px;
font-size: 20px;
font-weight: bold;
}
.form-item {
height: 100%;
position: relative;
padding-left: 100px;
padding-right: 20px;
margin-bottom: 34px;
line-height: 36px;
}
.form-item > .lb {
position: absolute;
left: 0;
top: 0;
display: block;
width: 100px;
text-align: right;
}
.form-item > .txt {
width: 300px;
height: 32px;
}
.mask {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.15;
display: none;
}
.form-add {
position: fixed;
top: 30%;
left: 50%;
margin-left: -197px;
padding-bottom: 20px;
background: #fff;
display: none;
}
.form-add-title {
background-color: #f7f7f7;
border-width: 1px 1px 0 1px;
border-bottom: 0;
margin-bottom: 15px;
position: relative;
}
.form-add-title span {
width: auto;
height: 18px;
font-size: 16px;
font-family: ËÎÌå;
font-weight: bold;
color: rgb(102, 102, 102);
text-indent: 12px;
padding: 8px 0px 10px;
margin-right: 10px;
display: block;
overflow: hidden;
text-align: left;
}
.form-add-title div {
width: 16px;
height: 20px;
position: absolute;
right: 10px;
top: 6px;
font-size: 30px;
line-height: 16px;
cursor: pointer;
}
.form-submit {
text-align: center;
}
.form-submit input {
width: 170px;
height: 32px;
}
</style>
</head>
<body>
<div class="wrap">
<input type="button" value="清空内容" id="btn">
<input type="button" value="添加" id="btnAdd">
<table>
<thead>
<tr>
<th>课程名称</th>
<th>所属学院</th>
<th>操作</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>JavaScript</td>
<td>传智播客-前端与移动开发学院</td>
<td><a href="javascript:;" class="get">DELETE</a></td>
</tr>
<tr>
<td>css</td>
<td>传智播客-前端与移动开发学院</td>
<td><a href="javascript:;" class="get">DELETE</a></td>
</tr>
<tr>
<td>html</td>
<td>传智播客-前端与移动开发学院</td>
<td><a href="javascript:;" class="get">DELETE</a></td>
</tr>
<tr>
<td>jQuery</td>
<td>传智播客-前端与移动开发学院</td>
<td>
<span>
<a href="javascript:;" class="get">DELETE</a>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
// 功能1： 清空内容
// 1. 找对象 btn j_tb
// 2. btn 注册click
// 3. 清空 j_tb 里面的内容
$("#btn").on("click", function () {
$("#j_tb").empty();
})
// 添加
$("#btnAdd").on("click", function () {
var str = '<tr> <td>jQuery is so easy</td> <td>传智播客-前端与移动开发学院-very good</td> <td><a href="javascript:;" class="get">DELETE</a></td> </tr>';
$(str).appendTo( "#j_tb" );
})
// 删除 tr
// $(".get").on("click", function(){
// $(this).parent().parent().remove();
// })
// 上面的代码采取事件委托
// 注意点： 注册事件委托，把事件注册给父辈（必须是页面中本来就存在，不能是动态创建的）
$("#j_tb").on("click", ".get", function () {
// this ==>
// console.log(this); // .get
// $(this).parent().parent().remove();
// parent() ==> 找父元素
// parents() ==> 找爹爹们 可以传参来筛选出指定的父辈
// console.log($(this).parents());
// console.log($(this).parents("tr"));
$(this).parents("tr").remove();
})
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 1300px;
}
#box,#box2 {
width: 1200px;
height: 400px;
border: 2px solid red;
margin: 100px auto;
}
#box li,#box2 li {
width: 240px;
height: 400px;
/*border: 1px solid #000;*/
float: left;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="box2">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="../jquery-1.12.4.js"></script>
<script src="jquery.accordion.js"></script>
<script>
$(function() {
$("#box").accordion({
maxW: 900,
imgsList: ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg"]
});
$("#box2").accordion({
imgsList: ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg"]
});
});
</script>
</body>
</html>
十二、jQuery框架封装
1.jq的基本架构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// jq 是一个沙箱模式
// 好处： 减少全局污染
// 参数的目的：
// window:
// 1. 可以减少对window的搜索过程
// 2. 有利于代码压缩
// undefined：
// 防止undefined数据类型在IE678中被修改了，然后沙箱内访问的undefined是修改后的值
/*(function (w) {
function fn(){
console.log(1);
}
//
w.fn = fn;
})(window)*/
(function (window, undefined) {
// jQuery 暂且理解成构造函数
var jQuery = function () {
console.log("jq");
}
// 将jQuery 函数给暴露到window上的jQuery属性、$属性
window.jQuery = window.$ = jQuery;
})(window)
// 想要得到一个jq的实例对象
var j = new $()
console.log(j);
</script>
</body>
</html>
2.undefined的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// undefined 数据类型
// undefined 数据类型的值， 是自己本身
// undefined 这个数据类型的值，在IE678中是可以被修改的
/*undefined = 13;
console.log(undefined); // 13
(function (undefined) {
// var undefined = undefined;
console.log(undefined); // 13
})()*/
</script>
</body>
</html>
3.封装jq-获取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<p>这是p</p>
<p>这是p</p>
<p>这是p</p>
<p>这是p</p>
<p>这是p</p>
<p>这是p</p>
<script>
// 目的：封装jq，实现能够获取页面中的元素
(function (window, undefined) {
// jQuery 构造函数
var jQuery = function (selector) {
// 1. 已经可以根据selector 参数获取到页面中的元素
var eles = document.querySelectorAll(selector);
// console.log(eles);
// 把获取到的元素添加到jq的实例对象中
// this ==> 实例对象
/*this[0] = eles[0];
this[1] = eles[1];
this[2] = eles[2];*/
// for 循环遍历eles中的每一项，添加到this上
for (var i = 0; i < eles.length; i++) {
this[i] = eles[i];
}
this.length = eles.length;
}
window.jQuery = window.$ = jQuery;
})(window)
// 获取页面中所有的div元素
var $divs = new $("div");
console.log($divs);
var $ps = new $("p")
console.log($ps);
</script>
</body>
</html>
4.获取元素-优化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<p>这是p</p>
<p>这是p</p>
<p>这是p</p>
<p>这是p</p>
<p>这是p</p>
<p>这是p</p>
<script>
// 目的：封装jq，实现能够获取页面中的元素
(function(window, undefined) {
// jQuery 构造函数
var jQuery = function(selector) {
// 1. 已经可以根据selector 参数获取到页面中的元素
var eles = document.querySelectorAll(selector);
// for 循环遍历eles中的每一项，添加到this上
/*for (var i = 0; i < eles.length; i++) {
this[i] = eles[i];
}
this.length = eles.length;*/
// push 方法进行添加 this 不能使用push 方法
// 借用 call apply
// call apply区别：第二个参数， apply，第二个参数是个数组或者伪数组
// apply的平铺性
[].push.apply(this, eles);
// 相当于：
// this.push(eles中的每一项)
}
window.jQuery = window.$ = jQuery;
})(window)
// 获取页面中所有的div元素
var $divs = new $("div");
console.log($divs);
var $ps = new $("p")
console.log($ps);
</script>
</body>
</html>
5.往jq的原型中添加方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
// 目的：让jq的实例对象可以有方法访问
(function(window, undefined) {
// jQuery 构造函数
var jQuery = function(selector) {
var eles = document.querySelectorAll(selector);
[].push.apply(this, eles);
}
/*jQuery.prototype.css = function () {
console.log("css is ok");
}
jQuery.prototype.html = function () {
console.log("html is ok");
}
jQuery.prototype.width = function () {
console.log("width is ok");
}
jQuery.prototype.height = function () {
console.log("width is ok");
}*/
// 以上写法很重复，采取原型替换的方式给原型添加方法
// jQuery.fn 是jq的原型的简写形式
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
css: function () {
console.log("css is finished");
}
}
window.jQuery = window.$ = jQuery;
})(window)
// 获取页面中所有的div元素
var $divs = new $("div");
console.log($divs);
// 把css方法添加到jq的原型中，jq的实例对象就可以访问
$divs.css();
// $divs.html();
</script>
</body>
</html>
6.省去new操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
// 目的：在得到jq的实例对象的时候，不需要带上new
(function(window, undefined) {
// jQuery 不是构造函数，而是工厂函数
// 做啥：return new 构造函数
var jQuery = function(selector) {
// 在jq中，真正的构造函数是init
// init构造函数放在了jq原型中
return new jQuery.fn.init(selector); // 构造函数模式
}
// 以上写法很重复，采取原型替换的方式给原型添加方法
// jQuery.fn 是jq的原型的简写形式
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function (selector) {
// 这个init才是真正的构造函数
// 获取元素
var eles = document.querySelectorAll(selector);
// this ==> init的实例对象
[].push.apply(this, eles);
},
css: function () {
console.log("css is finished");
}
}
window.jQuery = window.$ = jQuery;
})(window)
// 获取页面中所有的div元素
var $divs = $("div"); // init的实例对象
console.log($divs);
$divs.css();
</script>
</body>
</html>
7.工厂函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// 工厂函数
function Person(name, age){
this.name = name;
this.age = age;
}
/*var xm = new Person("xm", 20);
console.log(xm);
var xh = new Person("xh", 18);
console.log(xh);*/
// 省去new得到Perosn的实例对象
// new Person这个操作给封装起来
// 工厂模式： 批量创建对象
// $叫做工厂函数： 内部创建对象并且返回出去
// return new 构造函数();
function $(name, age){
return new Person(name, age);
}
var xm = $("xm", 21);
console.log(xm);
var xh = $("xh", 19);
console.log(xh);
</script>
</body>
</html>
8.解决init实例对象访问jq原型中方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
// 目的：在得到jq的实例对象的时候，不需要带上new
(function(window, undefined) {
// jQuery 不是构造函数，而是工厂函数
// 做啥：return new 构造函数
var jQuery = function(selector) {
// 在jq中，真正的构造函数是init
// init构造函数放在了jq原型中
return new jQuery.fn.init(selector); // 构造函数模式
}
// 以上写法很重复，采取原型替换的方式给原型添加方法
// jQuery.fn 是jq的原型的简写形式
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function (selector) {
// 这个init才是真正的构造函数
// 获取元素
var eles = document.querySelectorAll(selector);
// this ==> init的实例对象
[].push.apply(this, eles);
},
css: function () {
console.log("css is finished");
}
}
// 把init构造函数的原型修改成jq的原型
// 目的： 让init的实例对象可以访问到jq原型中的方法
jQuery.fn.init.prototype = jQuery.fn;
window.jQuery = window.$ = jQuery;
})(window)
// 获取页面中所有的div元素
var $divs = $("div"); // init的实例对象
console.log($divs);
$divs.css();
</script>
</body>
</html>
9.测试封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<script src="封装/02-init构造函数.js"></script>
<script>
console.log($("div"));
$("div").css()
</script>
</body>
</html>
10.封装css方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
// 目的：封装css方法
// css(name,value); // 设置单个样式
// css(obj); // 设置多个样式
// css(name); // 获取样式
(function(window, undefined) {
var jQuery = function(selector) {
return new jQuery.fn.init(selector); // 构造函数模式
}
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function (selector) {
// 这个init才是真正的构造函数
// 获取元素
var eles = document.querySelectorAll(selector);
// this ==> init的实例对象
[].push.apply(this, eles);
},
css: function (name, value) {
// 需要根据参数的个数以及参数的类型来确定css方法的到底是何种作用
// css(name,value); // 设置单个样式
if (arguments.length === 2) {
// 设置单个样式
// this ==> $divs, 需要给每一个元素设置上样式
for (var i = 0; i < this.length; i++) {
// this[i] ==> 对应的就是每一个元素
// name 是形参 "color" 坑：[name]
// this[i].style.name = value;
this[i].style[name] = value;
}
}
}
}
jQuery.fn.init.prototype = jQuery.fn;
window.jQuery = window.$ = jQuery;
})(window)
var $divs = $("div"); // init的实例对象
$divs.css("color", "lime");
</script>
</body>
</html>
11.封装css方法-设置多个样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
// 目的：封装css方法
// css(name,value); // 设置单个样式
// css(obj); // 设置多个样式
// css(name); // 获取样式
(function(window, undefined) {
var jQuery = function(selector) {
return new jQuery.fn.init(selector); // 构造函数模式
}
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function (selector) {
// 这个init才是真正的构造函数
// 获取元素
var eles = document.querySelectorAll(selector);
// this ==> init的实例对象
[].push.apply(this, eles);
},
css: function (name, value) {
// 需要根据参数的个数以及参数的类型来确定css方法的到底是何种作用
// css(name,value); // 设置单个样式
if (arguments.length === 2) {
// 设置单个样式
// this ==> $divs, 需要给每一个元素设置上样式
for (var i = 0; i < this.length; i++) {
// this[i] ==> 对应的就是每一个元素
// name 是形参 "color" 坑：[name]
// this[i].style.name = value;
this[i].style[name] = value;
}
}else if(arguments.length === 1){
// 设置多个样式 || 获取样式
// 判断实参的类型
// 类型为对象 ==> 设置多个样式
// 类型为字符串 ==> 获取样式
if(typeof name === "object"){
// 设置多个样式
// this ==> $divs, 需要给每一个元素都设置上多个样式 - for遍历每一个元素
// 遍历的是每一个元素
for (var i = 0; i < this.length; i++) {
// 遍历的是对象，把对象中的样式设置给每一个元素
for(var k in name){
// k ==> color fontSize
// name[k] ==> 对应的值
this[i].style[k] = name[k];
}
}
}
}
}
}
jQuery.fn.init.prototype = jQuery.fn;
window.jQuery = window.$ = jQuery;
})(window)
var $divs = $("div"); // init的实例对象
$divs.css({
color: "red",
fontSize: "30px"
});
</script>
</body>
</html>
12.封装css方法-获取样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
// 目的：封装css方法
// css(name,value); // 设置单个样式
// css(obj); // 设置多个样式
// css(name); // 获取样式nn
(function(window, undefined) {
var jQuery = function(selector) {
return new jQuery.fn.init(selector); // 构造函数模式
}
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function (selector) {
// 这个init才是真正的构造函数
// 获取元素
var eles = document.querySelectorAll(selector);
// this ==> init的实例对象
[].push.apply(this, eles);
},
css: function (name, value) {
// 需要根据参数的个数以及参数的类型来确定css方法的到底是何种作用
// css(name,value); // 设置单个样式
if (arguments.length === 2) {
// 设置单个样式
// this ==> $divs, 需要给每一个元素设置上样式
for (var i = 0; i < this.length; i++) {
// this[i] ==> 对应的就是每一个元素
// name 是形参 "color" 坑：[name]
// this[i].style.name = value;
this[i].style[name] = value;
}
}else if(arguments.length === 1){
// 设置多个样式 || 获取样式
// 判断实参的类型
// 类型为对象 ==> 设置多个样式
// 类型为字符串 ==> 获取样式
if(typeof name === "object"){
// 设置多个样式
// this ==> $divs, 需要给每一个元素都设置上多个样式 - for遍历每一个元素
// 遍历的是每一个元素
for (var i = 0; i < this.length; i++) {
// 遍历的是对象，把对象中的样式设置给每一个元素
for(var k in name){
// k ==> color fontSize
// name[k] ==> 对应的值
this[i].style[k] = name[k];
}
}
}else if(typeof name === "string"){
// 获取样式 --- 只会获取到第一个元素的值
// this ==> $divs
// this[0] ==> 第一个元素
// style ==> 行内样式
// return this[0].style[name];
// window.getComputedStyle(元素, null); // 该方法用于获取元素计算后的样式，真正在元素上其效果的样式
// 返回值： 对象
return window.getComputedStyle(this[0], null)[name];
}
}
}
}
jQuery.fn.init.prototype = jQuery.fn;
window.jQuery = window.$ = jQuery;
})(window)
var $divs = $("div"); // init的实例对象
console.log($divs.css("fontSize"));
</script>
</body>
</html>
13.自调用函数的其他写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// 第一个() 的作用： () 的作用不是用来提升优先级，() 是让函数在js中被解析的时候，解析成了函数表达式
// 常用01
/*(function () {
alert(1)
})()*/
// 自调用函数的其他写法
// // 常用02
/*(function () {
alert(123)
}())*/
// // 常用03 -- 常用在压缩版本中
/*!function () {
alert(456)
}()*/
/*+function(){
alert(234)
}()*/
/*-function(){
alert(789)
}()*/
// error ： 匿名函数，缺了函数名
/*function () {
alert(1)
}()*/
// function 关键字是用来声明函数的， 后面没有()
/*function fn() {
alert(1)
}()*/
// 函数表达式后面是可以直接跟括号调用的
/*var f = function () {
alert(2)
}()*/
</script>
</body>
</html>
14.js的运行机制（event loop）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// 事件循环机制（event loop）
// 打印顺序
/*console.log(1);
setTimeout(function () {
console.log(2);
}, 0)
console.log(3);*/
// 同步和异步问题 js是一门单线程语言
// 单线程 ：同一时间只能做一件事情
// 多线程 ：同一时间可以做多件事情
// 涉及到了和js相关的浏览器线程
// 1. 主线程： 负责：执行所有的js代码
// 2. ui渲染线程： 负责：渲染页面
// 3. 事件循环线程： 负责： 查看，事件队列有没有需要执行的回调函数，如果有，把回调函数从事件队列取出来，交给主线程去执行
// 异步代码 ：
// 延时器 定时器
// 注册事件中的事件处理函数
/*console.log(1); // 同步
// 异步代码
setTimeout(function () {
console.log(2);
}, 1000)
console.log(3); // 同步*/
/*var num = 10;
setTimeout(function () {
num = 100
}, 0);
console.log(num); // 10*/
// 同步代码
for (var i = 0; i < 4; i++) {
setTimeout(function () {
console.log(i)
}, 0)
}
// i ==> 4
// 打印几次，分别打印什么
// 4次 4个4 4个5 0 1 2 3
</script>
</body>
</html>
15.setTimeout的时间说明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// setTimeout 中的第二个参数用来指定延时时间
// 这个时间不是准确的时间， 最少需要这么长的时间
setTimeout(function () {
console.log(1)
}, 10)
var start = new Date();
var num = 0;
for (var i = 0; i < 15000; i++) {
var li = document.createElement("li");
li.innerText = i;
document.body.appendChild(li);
}
var end = new Date();
console.log(end - start); // 80ms
</script>
</body>
</html>
16.深拷贝&&浅拷贝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var cc = {
money: 10000,
handsome: "just so so",
car: {
name: "保时捷",
color: "green"
}
}
// 得到一个完全一模一样的对象（两个完全独立），cc2
// 把cc的地址赋值给cc2, 不行
/*var cc2 = cc;
cc2.money = 1;
console.log(cc2);
console.log(cc);*/
// 浅拷贝： 只拷贝对象的一层属性，拷贝对象的简单属性还是没有问题，如果对象里面有复杂数据类型，复杂数据类型就没有完全独立，之间的修改还是会互相影响。
// 思路： 新创建一个对象给cc2
var cc2 = {};
// 遍历cc，把cc的成员添加cc2
for(var k in cc){
cc2[k] = cc[k]
}
console.log(cc2);
</script>
</body>
</html>
17.深拷贝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// 深拷贝： 拷贝对象的所有层级的属性
var cc = {
money: 10000,
handsome: "just so so",
car: {
name: "保时捷",
color: "green"
}
}
// 把浅拷贝的代码封装成copy函数，在浅拷贝的基础上实现深拷贝
function copy(o){
// 新建一个空对象
var obj = {};
// 遍历o，把oc的成员添加obj
for(var k in o){
// 不管属性值是复杂数据类型还是简单数据类型，直接添加obj对象
// obj[k] = o[k];
// 需要做判断，判断如果是复杂数据类型，把复杂数据类型再次拷贝
if(typeof o[k] == "object"){
obj[k] = copy(o[k]);
}else{
obj[k] = o[k];
}
}
// 将创建的对象给返回出去
return obj;
}
var cc2 = copy(cc);
console.log(cc2);
</script>
</body>
</html>
3088
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
