k# 学习目标
本期继续学习JQuery。
JQuery文件：
链接：https://pan.baidu.com/s/1DKIn2Er8gG9CSyCDVyfA-A
提取码：p6wj
1.jQuery特殊属性操作
1.1 val方法
val方法用于设置和获取表单元素的值，例如input、textarea的值
//设置值
$("#name").val(“张三”);
//获取值
$("#name").val();
例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="点击" id="btn">
<input type="text" value="哈哈" id="txt">
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("#txt").focus(function () {
//如果是默认值，清空内容
if($(this).val()==="哈哈"){
$(this).val("");
}
});
$("#txt").blur(function () {
if ($(this).val()===""){
$(this).val("哈哈");
}
});
});
</script>
</body>
</html>
1.2 html方法与text方法
html方法相当于innerHTML text方法相当于innerText
//设置内容
$(“div”).html(“<span>这是一段内容</span>”);
//获取内容
$(“div”).html()
//设置内容
$(“div”).text(“<span>这是一段内容</span>”);
//获取内容
$(“div”).text()
区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div><h3>我是标题</h3></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//html:innerHTML text:innerText
//console.log($("div").html());//<h3>我是标题</h3>
//console.log($("div").text());//我是标题
//$("div").html("<p>我是文本</p>");
$("div").text("<p>我是文本</p>");
});
</script>
</body>
</html>
1.3 width方法与height方法
设置或者获取高度
//带参数表示设置高度
$(“img”).height(200);
//不带参数获取高度
$(“img”).height();
获取网页的可视区宽高
//获取可视区宽度
$(window).width();
//获取可视区高度
$(window).height();
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
padding: 10px;
border: 10px solid #000;
margin: 10px;
}
</style>
</head>
<body>
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//获取div的宽度
//console.log($("div").css("width"));
//$("div").css("width", "400px");
//直接获取到的是数字
//就是获取的width的值
console.log($("div").width());//width
//console.log($("div").innerWidth());//padding+width
//console.log($("div").outerWidth());//padding+width+border
//console.log($("div").outerWidth(true));//padding+width+border+margin
//$("div").width(400);
//需要获取页面可视区的宽度和高度
// $(window).resize(function () {
// console.log($(window).width());
// console.log($(window).height());
// });
});
</script>
</body>
</html>
1.4 scrollTop与scrollLeft
设置或者获取垂直滚动条的位置
//获取页面被卷曲的高度
$(window).scrollTop();
//获取页面被卷曲的宽度
$(window).scrollLeft();
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
height: 4000px;
width: 4000px;
}
</style>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$(window).scroll(function () {
console.log($(window).scrollTop());
console.log($(window).scrollLeft());
});
});
</script>
</body>
</html>
固定导航栏案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
}
img {
vertical-align: top;
}
.main {
margin: 10px auto 0;
width: 1000px;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
$(window).scroll(function () {
//判断卷去的高度超过topPart的高度
//1. 让navBar有固定定位
//2. 让mainPart有一个marginTop
if($(window).scrollTop() >= $(".top").height() ){
$(".nav").addClass("fixed");
$(".main").css("marginTop", $(".nav").height() + 10);
}else {
$(".nav").removeClass("fixed");
$(".main").css("marginTop", 10);
}
});
});
</script>
</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>
</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 () {
//当页面超出去1000px的时候，让小火箭显示出来,如果小于1000，就让小火箭隐藏
$(window).scroll(function () {
if($(window).scrollTop() >= 1000 ){
$(".actGotop").stop().fadeIn(1000);
}else {
$(".actGotop").stop().fadeOut(1000);
}
});
function getScroll(){
return {
left:window.pageYOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
top:window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
}
}
//在外面注册
$(".actGotop").click(function () {
//$("html,body").stop().animate({scrollTop:0},3000);
//scrollTop为0
//$(window).scrollTop(0);
})
});
</script>
</body>
</html>
1.5 offset方法与position方法
offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。
//获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
//获取相对于其最近的有定位的父元素的位置。
$(selector).position();
2.jQuery事件机制
JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。
2.1 jQuery事件发展历程(了解)
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
简单事件注册
click(handler) 单击事件
mouseenter(handler) 鼠标进入事件
mouseleave(handler) 鼠标离开事件
缺点：不能同时注册多个事件
bind方式注册事件
//第一个参数：事件类型
//第二个参数：事件处理程序
$("p").bind("click mouseenter", function(){
//事件响应方法
});
缺点：不支持动态事件绑定
delegate注册委托事件
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
});
缺点：只能注册委托事件，因此注册时间需要记得方法太多了
例子：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 500px;
height: 500px;
background-color: pink;
}
</style>
</head>
<body>
<!--点击按钮，在div里面创建一个新的p元素-->
<input type="button" value="按钮" id="btn">
<div id="box">
<div>
<span>呵呵</span>
<p>11111</p>
<p>22222</p>
<p>33333</p>
<p>44444</p>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
//$("div").children("p").click(function(){})
$(function () {
//
//bind方式
// $("p").bind({
// click:function () {
// alert("呵呵")
// },
// mouseenter:function () {
// alert("哈哈")
// }
// });
$("#btn").click(function () {
$("<p>我是新增加的p元素</p>").appendTo("div");
});
//简单事件，给自己注册的事件
// $("div").click(function () {
// alert("哈哈");
// });
//delegate:代理，委托
//1. 给父元素注册委托事件，最终还是有子元素来执行。
//要给div注册一个委托事件,但是最终不是由执行，而是有p执行
//第一个参数：selector:事件最终由谁来执行。
//第二个参数：事件的类型
//第三个参数：函数，要做什么
//1. 动态创建的也能有事件 :缺点：只能注册委托事件
$("#box").delegate("p", "click", function () {
//alert("呵呵");
console.log(this);
});
//注册简单事件，缺点：一次只能注册一个事件
// $("p").click(function () {
// alert("呵呵");
// });
});
</script>
</body>
</html>
2.2 on注册事件(重点)
jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。
on注册简单事件
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( "click", function() {});
on注册委托事件
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});
on注册事件的语法：
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);
例子：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="增加" id="btn">
<div>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
// 这个是p自己注册的事件（简单事件）
/*$("p").on("click", function () {
alert("呵呵");
});*/
$("div").on("click", "p", function () {
alert("呵呵")
});
$("#btn").on("click", function () {
$("<p>我是新建的p元素</p>").appendTo("div");
});
});
</script>
</body>
</html>
事件的执行顺序
先执行委托事件，再执行自己的事件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
height: 500px;
width: 500px;
background-color: pink;
}
</style>
</head>
<body>
<input type="button" value="增加" id="btn">
<div>
<p>111111</p>
<p>111111</p>
<p>111111</p>
<p>111111</p>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
// 这个是p自己注册的事件（简单事件）
$("p").on("click", function () {
alert("呵呵哒");
});
//给div自己执行的
$("div").on("click", function () {
alert("呜呜呜");
});
//给div里面的p执行 委托事件
$("div").on("click", "p", function () {
alert("嘿嘿嘿")
});
$("#btn").on("click", function () {
$("<p>我是新建的p元素</p>").appendTo("div");
});
});
</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><input type="checkbox"/></td> -->
<td>庄周</td>
<td>稷下</td>
<td><a href="javascrip:;" class="get">DELETE</a></td>
</tr>
<tr>
<!-- <td><input type="checkbox"/></td> -->
<td>东方曜</td>
<td>稷下</td>
<td><a href="javascrip:;" class="get">DELETE</a></td>
</tr>
<tr>
<!-- <td><input type="checkbox"/></td> -->
<td>嬴政</td>
<td>黑暗</td>
<td><a href="javascrip:;" class="get">DELETE</a></td>
</tr>
<tr>
<td>花木兰</td>
<td>长城</td>
<td><a href="javascrip:;" class="get">DELETE</a></td>
</tr>
</tbody>
</table>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//1.找到清空按钮，注册点击事件，清空tbody
$("#btn").on("click",function () {
$("#j_tb").empty();
});
//2.找到delete，注册点击事件
$("#j_tb").on("click",".get",function () {
$(this).parent().parent().remove();
});
//3.找到添加按钮，注册点击事件
$("#btnAdd").on("click",function () {
$('<tr> <td>hhh</td> <td>sss</td> <td><a href="javascrip:;" class="get">DELETE</a></td> </tr>').appendTo("#j_tb");
});
});
</script>
</body>
</html>
2.3 事件解绑
unbind方式（不用）
$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件
undelegate方式（不用）
$( selector ).undelegate(); //解绑所有的delegate事件
$( selector).undelegate( “click” ); //解绑所有的click事件
off方式（推荐）
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>我是一个P元素</p>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("p").on("click mouseenter",function () {
alert("hahah");
});
//移除p元素的click事件
$("p").off("click");
});
</script>
</body>
</html>
2.5 事件触发
$(selector).click(); //触发 click事件
$(selector).trigger("click");
//toggle：切换 trigger：触发
$("#btn").on("click",function () {
//触发p元素的点击事件
//$("p").click();
//$("p").trigger("click");
});
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="触发" id="btn">
<p>我是一个p元素</p>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("p").on("click", function () {
alert("呵呵");
})
//toggle：切换 trigger：触发
$("#btn").on("click",function () {
//触发p元素的点击事件
//$("p").click();
//$("p").trigger("click");
});
});
</script>
</body>
</html>
2.6 JQuery事件对象
jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。
//screenX和screenY 对应屏幕最左上角的值
//clientX和clientY 距离页面左上角的位置（忽视滚动条）
//pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
//event.keyCode 按下的键盘代码
//event.data 存储绑定事件时传递的附加数据
//event.stopPropagation() 阻止事件冒泡行为
//event.preventDefault() 阻止浏览器默认行为
//return false:既能阻止事件冒泡，又能阻止浏览器默认行为。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>这是一个div</div>
<p>这是一个p元素</p>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//100，注册的时候的时候，把100传到事件里面去。
var money = 100;
//on(types, selector, data, callback)
//使用on方法的时候，可以给data参数传一个值，可以在事件里面通过e.data获取到。
$("div").on("click",100, function (e) {
console.log(e);
console.log("哈哈，我有"+e.data);
});
money = 0;
$("p").on("click", function () {
console.log("呜呜，我有"+0);
})
});
</script>
</body>
</html>
钢琴案例：
之前的学习中我做过这个案例，今天我们来增加一些功能：点击1-9这几个数字键，能触发对应的mouseenter，弹起的时候，触发mouseleave事件。
首先需要音乐包：
链接：音乐包
提取码：f3ve
复制这段内容后打开百度网盘手机App，操作更方便哦！
获取按下的键console.log（e.keyCode）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.nav {
width: 900px;
height: 60px;
background-color: black;
margin: 0 auto;
}
.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>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
//给li注册鼠标进入事件,让li下面的span top：0 播放音乐
$(".nav li").mouseenter(function () {
$(this).children("span").stop().animate({top: 0});
//播放音乐
var idx = $(this).index();
$(".nav audio").get(idx).load();
$(".nav audio").get(idx).play();
}).mouseleave(function () {
$(this).children("span").stop().animate({top: 60});
});
//节流阀 ：按下的时候，触发，如果没弹起，不让触发下一次
//1. 定义一个flag
var flag = true;
//按下1-9这几个数字键，能触发对应的mouseenter事件
$(document).on("keydown", function (e) {
if(flag) {
flag = false;
//获取到按下的键
var code = e.keyCode;
if(code >= 49 && code <= 57){
//触发对应的li的mouseenter事件
$(".nav li").eq(code - 49).mouseenter();
}
}
});
$(document).on("keyup", function (e) {
flag = true;
//获取到按下的键
var code = e.keyCode;
if(code >= 49 && code <= 57){
//触发对应的li的mouseenter事件
$(".nav li").eq(code - 49).mouseleave();
}
});
//弹起的时候，触发mouseleave事件
});
</script>
</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>
<li><a href="javascript:void(0);">导航8</a><span></span></li>
<li><a href="javascript:void(0);">导航9</a><span></span></li>
</ul>
<div>
<audio src="mp3/1.ogg"></audio>
<audio src="mp3/2.ogg"></audio>
<audio src="mp3/3.ogg"></audio>
<audio src="mp3/4.ogg"></audio>
<audio src="mp3/5.ogg"></audio>
<audio src="mp3/6.ogg"></audio>
<audio src="mp3/7.ogg"></audio>
<audio src="mp3/8.ogg"></audio>
<audio src="mp3/9.ogg"></audio>
</div>
</div>
</body>
</html>
delay的用法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 400px;
height: 60px;
background-color: pink;
text-align: center;
line-height: 60px;
font-size: 30px;
margin: 100px auto;
display: none;
}
</style>
</head>
<body>
<div>这个一个提示消息</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("div").fadeIn(1000).delay(2000).fadeOut(1000);//减缓下一个动画的触发，中间停止2000毫秒（2秒）
});
</script>
</body>
</html>
3.jQuery补充知识点
3.1 链式编程
通常情况下，只有设置操作才能把链式编程(一直点下去)延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。
end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。
例子:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//设置性操作：可以链式编程
//获取性操作，不能链式，因为获取性操作，数值，字符串，
//返回值是不是一个jq对象。
console.log($("div").width(200).height(200).css("backgroundColor", "pink").width());
});
</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>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//1. 给li注册鼠标经过事件，让自己和前面所有的兄弟都变成实心
var wjx_k = "☆";
var wjx_s = "★";
$(".comment>li").on("mouseenter", function () {
$(this).text(wjx_s).prevAll().text(wjx_s);//不能再继续链式下去了，因为返回的对象不再是点击的五角星了
$(this).nextAll().text(wjx_k);
});
//2. 给ul注册鼠标离开时间，让所有的li都变成空心
$(".comment").on("mouseleave", function () {
$(this).children().text(wjx_k);
//再做一件事件，找到current，让current和current前面的变成实心就行。
$("li.current").text(wjx_s).prevAll().text(wjx_s);
});
//3. 给li注册点击事件
$(".comment>li").on("click", function () {
$(this).addClass("current").siblings().removeClass("current");
});
});
</script>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
end方法
上面的五角星案例因为返回的对象不再是点击的五角星，所以要重新链式，但是，使用end方法可以返回上一个对象，这样就能接着链式编程了。
将这个[$(this).text(wjx_s).prevAll().text(wjx_s);
$(this).nextAll().text(wjx_k);]改为：
$(this).text(wjx_s).prevAll().text(wjx_s).edn().$(this).nextAll().text(wjx_k);
3.2 each方法
jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复制</title>
<style>
ul {
list-style: none;
}
li {
float: left;
width: 200px;
height: 200px;
background: pink;
text-align: center;
line-height: 200px;
margin: 0 20px 20px 0;
}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
// for(var i = 0; i < $("li").length; i++) {
// $("li").eq(i).css("opacity", (i+1)/10);
// }
//each方法
$("li").each(function (index, element) {
$(element).css("opacity", (index+1)/10);
})
});
</script>
</head>
<body>
<ul id="ulList">
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
<li>什么都看不见</li>
</ul>
</body>
</html>
3.3 多库共存（冲突解决方案）
我们知道JQuery中有一个$符号，其他框架可能也会有，而此时你也要引入别的框架，这就会造成冲突。
我们可以自己在封装的js文件itcast.js：
/**
* Created by HUCC on 2017/4/11.
*/
var $ = {
name:"zs",
age:18
};
在文件中同时引入这个js文件和JQuery的js文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js">
<script src="itcast.js"></script></script>
console.log($);//这个$是itcast的，下面的会覆盖上面的。
</script>
</head>
<body>
</body>
</html>
那么我就想要用itcast的怎么办？可以释放JQuery的$的控制权
//jQuery释放$的控制权
$.noConflict();
那JQuery的入口函数怎么写？可以这样写：
JQuery(function(){
});
还有一种方法：
var x=$.noConflict();把这个权限给x，JQuery入口函数可以用x代替$
x(function(){
});
但记住，两个引入一定要分清顺序，只有在下面的js文件才有控制权，才能释放。
总结
本期学习到此结束。
184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
