第四篇 前端学习之JQuery基础
一 jQuery是什么？
jQuery就是一个JavaScript的库。
<1> jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
<3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器（IE6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+);
<4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
AJAX：实现前端向后端发送数据——非常重要
<5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
参考JQuery文档：http://jquery.cuishifeng.cn/
二 什么是jQuery对象？
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
jQuery 对象是 jQuery 独有的.
如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html()
//意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
// 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
//虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
//约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象 定义jquery对象时，变量前就加个 $符号，明确告诉人家这是jQuery对象
var variable = DOM 对象
$variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
jquery的基础语法：$(selector).action()
幸福生活的开始从导入jQuery库开始
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>hello</div>
<!--要使用JQuery,必选先通过script引入jQueryku才行-->
<script src="jquery-3.3.1.js"></script>
<script>
// $符号：就代表JQuery对象，里面有无穷尽的语法，全在$里
// 找到div标签： $("div")
// 对div标签进行样式设置：$("div").css("color","red");
$("div").css("color","red");
// 当然也可以用jQuery，但是用$符号更简单
jQuery("div").css("color","red");
</script>
</body>
</html>
三 寻找元素(选择器和筛选器)
3.1 选择器
3.1.1 基本选择器
$("*"): 对所有标签进行操作
$("#id"):通过id找标签
$(".class") ：通过class属性找
$("element") ：通过标签名字找
$(".class,p,div")：可以一次找多个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>hello</div>
<p id="p1">ppp</p>
<a href="">click</a>
<div class="outer">
outers
<div class="inner">inner</div>
</div>
<div class="outer">helllllllo</div>
<!--要使用JQuery,必选先通过script引入jQueryku才行-->
<script src="jquery-3.3.1.js"></script>
<script>
// $("*").css("color","red");
// $("#p1").css("color","blue");
// $(".inner").css("color","green");
// $(".outer").css("color","brown"); // jQuery自己做了遍历
// $(".inner,p,div").css("color","red");
$("p").css("color","red"); // 通过element找，即通过标签的名字去找
</script>
</body>
</html>
3.1.2 层级选择器:处理层级嵌套, 后代（儿子）选择器
$(".outer div") ：后代选择器
$(".outer>div") ：子代选择器
$(".outer+div") ：向下找紧挨着的兄弟标签
$(".outer~div") ：向下找兄弟标签，可以不紧挨着outer的，也能找到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>hello</div>
<p id="p1">ppp</p>
<a href="">click</a>
<div class="outer">
outers
<div class="inner">
inner
<p>innerP</p>
</div>
<p>alex</p>
</div>
<div>lalal</div>
<p>隔着一个，向下也能找到兄弟标签</p>
<p>向下紧挨着的兄弟标签</p>
<!--<div class="outer">helllllllo</div>-->
<!--要使用JQuery,必选先通过script引入jQueryku才行-->
<script src="jquery-3.3.1.js"></script>
<script>
// 后代选择器：
// 找到class属性值为outer的下面的所有 p 标签,不管是子代，孙子代，还是重孙子代都找到
$(".outer p").css("color","red");
// 子代选择器：
// 找到找到class属性值为outer的下面的所有 p 标签且找到的p标签都是outer的儿子代
$(".outer > p").css("color","red");
// 向下紧挨着的兄弟标签
// $(".outer + p").css("color","blue");
// 向下找兄弟标签（同级的），可以不紧挨着
$(".outer ~ p").css("color","green");
</script>
</body>
</html>
3.1.3 基本筛选器
选择出后再过滤一遍的意思
$("li:first")
$("li:eq(2)")
$("li:even")
$("li:gt(1)")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
<li>888</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
console.log($("li"));
// 对第一个li标签操作
$("li:first").css("color","red");
// 对最后一个li标签操作
$("li:last").css("color","red");
// 对其他第n个操作
$("li:eq(1)").css("color","blue");
// 控制偶数行，从0开始的
$("li:even").css("color","green");
//控制奇数行
$("li:odd").css("color","brown");
//筛选出的是大于索引为3的标签，不包含索引3
$("li:gt(3)").css("color","brown");
//筛选出的是小于索引为3的标签，不包含索引3
$("li:lt(3)").css("color","red");
</script>
</body>
</html>
3.1.4 属性选择器
通过标签的属性来查找属性。自己也可以添加属性
$('[id="div1"]')
$('[alex="sb"][id]')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>hello</div>
<p id="p1" alex="bbb">ppp属性选择器</p>
<p id="p2" alex="bbb">ppp属性选择器</p>
<p id="p3" alex="bbb">ppp属性选择器</p>
<a href="">click</a>
<!--<div class="outer">helllllllo</div>-->
<!--要使用JQuery,必选先通过script引入jQueryku才行-->
<script src="jquery-3.3.1.js"></script>
<script>
// 通过属性选择器查找
$("[alex='bbb']").css("color","red");
// 如果有多个属性标签属性名相同，可以多层选择
$("[alex='bbb'][id='p2']").css("color","blue");
</script>
</body>
</html>
3.1.5 表单选择器
$("[type='text']")----->$(":text") 注意 ：只适用于input标签
$("input:checked")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text">
<input type="checkbox">
<input type="submit">
<script src="jquery-3.3.1.js"></script>
<script>
// $("[type='text']").css("width","200px");
//只有input表单选择器才可以通过冒号的形式筛选
$(":text").css("width","400px");
</script>
</body>
</html>
实例之左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left_menu</title>
<style>
.menu{
height: 500px;
width: 30%;
background-color: gainsboro;
float: left;
}
.content{
height: 500px;
width: 70%;
background-color: rebeccapurple;
float: left;
}
.title{
line-height: 50px;
background-color: #425a66;
color: forestgreen;}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title">菜单一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
$(".item .title").click(function () {
$(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");
// $(this).next().removeClass("hide");
// $(this).parent().siblings().children(".con").addClass("hide");
})
</script>
</body>
</html>
实例之tab切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<script>
function tab(self){
var index=$(self).attr("xxx");
$("#"+index).removeClass("hide").siblings().addClass("hide");
$(self).addClass("current").siblings().removeClass("current");
}
</script>
<style>
*{
margin: 0px;
padding: 0px;
}
.tab_outer{
margin: 0px auto;
width: 60%;
}
.menu{
background-color: #cccccc;
/*border: 1px solid red;*/
line-height: 40px;
}
.menu li{
display: inline-block;
}
.menu a{
border-right: 1px solid red;
padding: 11px;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px;
}
.hide{
display: none;
}
.current{
background-color: darkgray;
color: yellow;
border-top: solid 2px rebeccapurple;
}
</style>
</head>
<body>
<div class="tab_outer">
<ul class="menu">
<li xxx="c1" class="current" οnclick="tab(this);">菜单一</li>
<li xxx="c2" οnclick="tab(this);">菜单二</li>
<li xxx="c3" οnclick="tab(this);">菜单三</li>
</ul>
<div class="content">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
</body>
</html>
3.2 筛选器
3.2.1 过滤筛选器
与3.1.3基本筛选器实现的功能一样，但是推荐以后都用过滤筛选器这种方式实现。应该筛选条件是写在外面的，更灵活
$("li").eq(2)
$("li").first()
$("ul li").hasclass("test")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
<li>888</li>
</ul>
<input type="text">
<input type="checkbox">
<input type="submit">
<script src="jquery-3.3.1.js"></script>
<script>
$("li").eq(2).css("color","red");
$("li").first().css("color","red");
$("li").last().css("color","red");
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<li class="title">ll</li>
<script src="jquery-3.3.1.js"></script>
<script>
// 查询某标签是否具有某属性
console.log($("li").hasClass("title2"));
</script>
</body>
</html>
3.2.2 查找筛选器（基本四组）
非常重要，没有项目不用到这种筛选方法。
1. 找子代
$("div").children(".test")
$("div").find(".test")
2.找下一个 $(".test").next()
$(".test").nextAll()
$(".test").nextUntil()
3. 找上一个，完全与next组对应的 $("div").prev()
$("div").prevAll()
$("div").prevUntil()
4. $(".test").parent()
$(".test").parents()
$(".test").parentUntil()
$("div").siblings()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p1" alex="sb">pppp</p>
<p id="p2" alex2="sb">pppp2</p>
<div class="outer"> outer
<div class="inner">
inner
<p>孙子p标签</p>
</div>
<p>儿子p标签</p>
</div>
<div class="outer2">Yuan</div>
<p>先走一步</p>
<ul>
<li>111</li>
<li class="begin">222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li id="end">777</li>
<li>888</li>
</ul>
<input type="text">
<input type="checkbox">
<input type="submit">
<script src="jquery-3.3.1.js"></script>
<script>
// 1. 根据一个已知的标签找到它的子代标签
// 只找子标签
$(".outer").children("p").css("color","red");
// 找到.outer下的所有p标签
$(".outer").find("p").css("color","red");
// 2.next组查找
// 找到索引为2的li标签的下一个标签
$("li").eq(2).next().css("color","red");
// 找到索引为2的li标签后面的所有标签
$("li").eq(2).nextAll().css("color","red");
// 从索引为2的li标签开始，一直找到 id=end的li标签，左开右开区间）
$("li").eq(2).nextUntil("#end").css("color","red");
// 3.prev组查找：向上找
// 找到索引为2的li标签的上一个标签
$("li").eq(2).prev().css("color","red");
// 找到索引为2的li标签上面的所有标签
$("li").eq(2).prevAll().css("color","red");
// 从索引为5的li标签开始，一直找到 id=end的li标签，左开右开区间）
$("li").eq(5).prevUntil(".begin").css("color","red");
// 4. parent 组查找
$(".outer .inner p").parent().css("color","red");
$(".outer .inner p").parents().css("color","red");
// 常用
$(".outer .inner p").parentsUntil("body").css("color","red");
// siblings 用的最多的. 找兄弟标签，上下的全部兄弟标签都找出来，除了.outer
$(".outer").siblings().css("color", "red");
</script>
</body>
</html>
示例
四 操作元素(属性，css，文档处理)
4.1 属性操作
--------------------------属性： attr 和 prop的使用方法和作用是完全一样的。区别只在于，attr既能处理固有属性，又能处理自定义属性，而prop只能处理固有属性 $("").attr(); -->常用的属性标签：既可以取到属性值，也可以给属性设置值；既可以处理固有属性，也可以处理自定义属性，推荐attr只用来处理自定义属性 $("").removeAttr(); $("").prop();-->获取属性，如果存在返回true,如果不存在返回false,用于判断使用；只能处理固有的属性，所以推荐对所有固有属性，都用prop处理 $("").removeProp(); --------------------------CSS类 $("").addClass(class|fn) --> 见左侧菜单实例 $("").removeClass([class|fn])-->见左侧菜单实例
--------------------------HTML代码/文本/值
要处理的标签内部如果是html,就得用html()处理；
要处理的标签内部如果是text,就得用text()处理； $("").html([val|fn]) --> 用html,可以区别出里面是文本还是标签，然后进行替换 $("").text([val|fn]) --> text，（）里的内容全部当做纯文本来处理，去替换 $("").val([val|fn|arr])--> val不能随便用，只能处理固有属性：input,option，select，表单类都有value属； 可以获取值也可以替换原来的值
---------------------------
$("").css("color","red")
需求：
常见的web项目左侧有个菜单，点击某个菜单，该菜单下面的子菜单显示，其他菜单隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--2. 再处理布局-->
<style>
.outer{
height: 1000px;
width: 100%;
background-color: gray;
}
.menu{
float: left;
background-color: rebeccapurple;
width: 30%;
height: 500px;
}
.title{
background-color: lightgreen;
}
.hide{
display: none;
}
</style>
</head>
<body>
<!--步骤：1. 先写html-->
<div class="outer">
<div class="menu">
<div class="item">
<div class="title" οnclick="show(this)">菜单一</div>
<!--默认进来菜单一不是折叠的,可以去掉hide属性，如果是折叠的，就像下面那样写上hide-->
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title" οnclick="show(this)">菜单二</div>
<div class="con hide">
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</div>
<div class="item">
<div class="title" οnclick="show(this)">菜单三</div>
<div class="con hide">
<div>333</div>
<div>333</div>
<div>333</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
<!--3.JQuery实现功能-->
// 先引入Jquery
<script src="jquery-3.3.1.js"></script>
<script>
// this表示找到当前点击的元素，function函数里用self接
function show(self) {
// 1）实现点哪个菜单，该菜单下面的子菜单展示出来；
// 用到JQuery的属性操作知识了，找到当前点击的菜单，移除它的hide属性
$(self).next().removeClass("hide");
// 2）同时其他菜单的子菜单全部折叠
// 先找到当前点击菜单的父元素，再通过siblings找到父元素的所有兄弟元素，然后找到所有兄弟元素下面的子元素
// 里的 con属性，为其增加 hide属性
// 如果没有hide属性，就增加，如果已经有hide属性就不增加
$(self).parent().siblings().children(".con").addClass("hide");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1" con="c1"></div>
<input type="checkbox" checked="checked"> 是否可见1
<input type="checkbox" > 是否可见2
<script src="jquery-3.3.1.js"></script>
<script>
// 1. attr()属性
// attr属性，取出con属性的值
console.log($("div").attr("con"));
// attr属性，给con属性设置值；本来没有con1属性，还可以新增这个属性并设置属性值
console.log($("div").attr("con","c2"));
console.log($("div").attr("con1","c3"));
// 2.取input标签的属性，看prop和attr的区别
console.log($(":checkbox:first").attr("checked"));
console.log($(":checkbox:last").attr("checked"));
// prop返回的是属性的值，存在是true,不存在是false，方便用于判断
// prop主要用来处理固有属性，比如上面自定义的con属性找不到的；
// 如果是自己定义的属性，都用attr,更好的区分固有属性和自定义属性
console.log($(":checkbox:first").prop("checked")); // attr和prop括号内都是些的属性名称，而不是具体的属性值
console.log($(":checkbox:last").prop("checked"));
// 自定义属性，找不到的
console.log($(":checkbox:last").prop("con"));
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1" con="c1"></div>
<input type="checkbox" checked="checked"> 是否可见1
<input type="checkbox" > 是否可见2 </br>
<input type="text" value="请输入你的大名">
<div value = "234">测试value是否可以检测到</div>
<div id="id1">
uuuuu
<p>ppppp</p>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
// html()把标签里面的所有内容都取出来了，有其他标签也会取出来
console.log($("#id1").html());
// text()只会把下面的文本内容取出来，带标签的文本，也只会把文本取出来
console.log($("#id1").text());
// html()里面如果加了内容，会把下面原理所有的内容都会用新内容替换，相当于重新设值了
console.log($("#id1").html("<h1>Ma Ge</h1>>"));
console.log($("#id1").html("用文本替换"));
// 如果是text(),就会把text里面的所有内容都当做纯文本来处理的
// console.log($("#id1").text("<h1>Ma Ge</h1>>"));
// val不能随便用，只能处理固有属性：input,option，select，表单类都有value属性
console.log($(":text").val());
// 替换掉原来的值
console.log($(":text").val("把你的大名换掉"));
console.log($(":text").next().val()); // div本身没有value属性，所以取不到
// css 修改样式
// css都是一个个键值对，第一个参数是属性，第二个参数是值
$("div").css("color","red");
// 如果想设置多个样式可以用字典的方式做
$("div").css({"color":"red","background-color":"green"});
</script>
</body>
</html>
jQuery循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>哦哦哦哦哦</p>
<p>哦哦哦哦哦</p>
<p>哦哦哦哦哦</p>
<p>哦哦哦哦哦</p>
<p>哦哦哦哦哦</p>
<script src="jquery-3.3.1.js"></script>
<script>
arr = [11,22,33,44,55];
//jQuery的循环方式1
// $.each(obj:遍历对象； callback：就是函数)
// function(x,y):两个参数，x:表示索引，y:表示索引对应的值
$.each(arr,function (x,y) {
console.log(x);
console.log(y);
});
//jQuery的循环方式二，也是最常用的方式
// 原理：
// 1. 通常都是先拿到一个要遍历的标签对象集合，$("p")：即先找到要遍历的标签集合
// 2. 然后对该集合里的标签进行遍历: .each(function(){})，这个each里就只有一个参数了，直接写function就行
// 因为要遍历的对象是$("p")已经在前面了，each就是对它进行遍历的，所有只有一个参数
//.each其实就已经对拿到的标签集合进行了处理，所以接下来关键的就是如何表示每一个标签，如何对遍历到的每个标签进行处理
// 答案就是强大的this, $(this)就表示遍历到的标签集合里你当前要操作的标签；
$("p").each(function () {
// $(this) 就是用来表示集合$("p")里每一个标签，
console.log($(this)) //$(this) 就代表当前的标签对象
$(this).html("<h1>把哦哦哦哦哦改成嘎嘎嘎嘎嘎</h1>")
})
// JQuery和js可以混搭着用
// for(var i = 0; i<arr.length;i++){
// $("p").eq(i).html(arr[i])
// }
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button οnclick="selectAll()">全选</button>
<button οnclick="reverse()">反选</button>
<button οnclick="cancle()">取消</button>
<table border="1px">
<tr >
<td><input type="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr >
<td><input type="checkbox"></td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr >
<td><input type="checkbox"></td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
</table>
<script src="jquery-3.3.1.js"></script>
<script>
// 还是要先绑定一个函数，这个绑定方式还是按照js的绑定方式走的
// 全选
function selectAll() {
// 在函数内部用jQuery进行遍历，然后把checked属性改为true
$(":checkbox").each(function () {
$(this).prop("checked",true)
})
}
//反选
function reverse() {
$(":checkbox").each(function () {
if ($(this).prop("checked")){
$(this).prop("checked",false)
}else{
$(this).prop("checked",true)
}
})
}
// 取消
function cancle() {
$(":checkbox").each(function () {
$(this).prop("checked",false)
})
}
</script>
</body>
</html>
模态：
就是执行一个操作，弹出一个透明页遮挡，让透明页底部的元素不可操作，透明页上面的元素可以操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
height: 1800px;
background-color: antiquewhite;
}
.shade{
position: fixed;
/*占满屏，设置下面四个参数为0*/
top:0;
left:0;
right: 0;
bottom:0;
background-color: gray;
opacity: 0.7; /*透明度*/
}
.model{
width:200px;
height: 200px;
background-color: bisque;
border: #FF0000;
/*居中*/
position: absolute;
top:50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<!-- 第一层：正常显示的网页内容-->
<div class="content">
<button οnclick="show(this)">show</button>
</div>
<!--第二层：遮挡层：是有透明度的，且固定住不可让content内容再上下滑动了-->
<div class="shade hide"></div>
<!--第三层：点击show后显示在最上面的对话框-->
<div class="model hide">
<button οnclick="cancle(this)">取消</button>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
function show(self) {
$(self).parent().siblings().removeClass("hide")
}
function cancle(self) {
// 方式1：链式寻找法操作
$(self).parent().addClass("hide").prev().addClass("hide");
// 方式2：先找到当前元素的父级，再找到父级的父级，然后父级下面的子级里有shade属性的标签，执行操作
$(self).parent().parent().children(".models,.shade").addClass("hide")
}
</script>
</body>
</html>
4.2 文档处理
用于处理节点的增删改查
//创建一个标签对象 $("<p>") //内部插入 -- 插入的对象变成了儿子
append是加到当前标签下面 $("").append(content|fn) ----->$("p").append("<b>Hello</b>"); 就是把append里的内容添加到前面的对象（$("p")）里面去，= 给前面的对象加了个儿子 $("").appendTo(content) ----->$("p").appendTo("div"); 与append功能完全一样，只是写法不同，按正常顺序往下写的；将$("p")追加到"div"的下面 prepend是加到当前标签的上面
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");将对象添加到$("p")的前面； $("").prependTo(content) ----->$("p").prependTo("#foo"); //外部插入 -- 插入的对象变成了兄弟， 原理类似 上面的内部插入 $("").after(content|fn) ----->$("p").after("<b>Hello</b>"); $("").before(content|fn) ----->$("p").before("<b>Hello</b>"); $("").insertAfter(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore("#foo"); //替换 $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>"); //删除 $("").empty() $("").remove([expr]) //复制 $("").clone([Even[,deepEven]])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
<p>P级父标签</p>
</div>
<button class="b1">add</button>
<script src="jquery-3.3.1.js"></script>
<script>
// append 内部插入 ---插入到下面
// 点击add 按钮，给p标签下面添加一个 h1标签
// 先找到button标签，给绑定一个click事件，然后给click事件一个函数，执行某功能
$("button").click(function () {
var $ele = $("<h1></h1>"); // 定义一个jquery变量，令该变量是一个h1标签；通变量写活了
$ele.html("Hello World").css("color","red"); // 给该标签对象赋值
$(".c1").append($ele); // 将$els对象添加到 p级标签的下面
// appendTo ：将要添加的对象$ele添加到".c1"的下面，按顺序写，更好看懂
// 实现的功能与append是完全一样的，只是写法不同
$ele.appendTo(".c1");
});
// prepend 内部插入--插入到上面
// 点击add 按钮，给p标签下面添加一个 h1标签
// 先找到button标签，给绑定一个click事件，然后给click事件一个函数，执行某功能
$(".b1").click(function () {
var $ele1 = $("<h1></h1>"); // 定义一个jquery变量，令该变量是一个h1标签；通变量写活了
$ele1.html("加到当前标签的上面").css("color","green"); // 给该标签对象赋值
$(".c1").prepend($ele1); // 将$els对象添加到 p级标签的下面
$ele1.prependTo(".c1");
});
// 第二种方式，直接append，只不过写死了
$(".c1").append("<h2>直接添加h2标签</h2>").css("color","green");
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
<p>P级父标签</p>
</div>
<button class="b1">add</button>
<script src="jquery-3.3.1.js"></script>
<script>
// after 外部插入 ---插入到当前对象的下面，变成了二弟
$("button").click(function () {
var $ele = $("<h1></h1>");
$ele.html("插入到当前对象的下面，变成了二弟").css("color","red");
// 插入方式1
$(".c1").after($ele);
// 插入方式2
// $ele.insertAfter(".c1");
});
// before 外部插入--插入到当前对象的上面，变成了大哥
$(".b1").click(function () {
var $ele1 = $("<h1></h1>");
$ele1.html("插入到当前对象的上面，变成了大哥").css("color","green");
// $(".c1").before($ele1);
$ele1.insertBefore(".c1");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
<p>P级父标签</p>
</div>
<button class="b1">add</button>
<script src="jquery-3.3.1.js"></script>
<script>
$(".b1").click(function () {
var $ele1 = $("<h1></h1>");
$ele1.html("替换掉P标签").css("color","green");
$(".c1").replaceWith($ele1);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
<p>P级父标签</p>
<h1>h1能清空吗</h1>
</div>
<button class="b1">删除</button>
<script src="jquery-3.3.1.js"></script>
<script>
$(".b1").click(function () {
// empty：h1这个当前标签还在，只是下面的p标签没了
$(".c1 h1").empty();
// remove：c1这个当前标签也被删除了
$(".c1").remove();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
<p>P级父标签</p>
<h1>h1能清空吗</h1>
</div>
<button class="b1">复制</button>
<script src="jquery-3.3.1.js"></script>
<script>
$(".b1").click(function () {
$(".c1").clone().insertAfter(".c1")
});
</script>
</body>
</html>
但是，这个clone有个问题，执行添加多次，是成倍的复制的，下面的示例来解决这个问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="item">
<button οnclick="clone_obj(this)"> + </button>
<input type="text">
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
function conle_obj(self) {
// 定义个变量，通过this可以找到本标签，然后找到本标签的父级item,复制
var $conle_object = $(self).parent().clone();
// 然后将复制的标签插入到.outer的下面
$conle_object.insertAfter(".outer");
};
</script>
</body>
</html>
新需求:让新复制的变成减号，点击减号可以删除标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="item">
<button οnclick="clone_obj(this)"> + </button>
<input type="text">
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
function clone_obj(self) {
// 1.定义个变量，通过this可以找到本标签，然后找到本标签的父级item,复制
var $conle_object = $(self).parent().clone();
// 2. children("button").html("-")是找到子标签然后改成 -
// attr("onclick","remove_obj(this)") 是添加一个onclick点击属性，属性名remove_obj(this)
$conle_object.children("button").html("-").attr("onclick","remove_obj(this)");
// 3. 然后再把该对象添加到.outer下面
$conle_object.appendTo(".outer");
};
// 4.点击减号的时候可以删除
function remove_obj(self){
$(self).parent().remove()
}
</script>
</body>
</html>
4.3 css操作
CSS $("").css(name|pro|[,val|fn]) 位置 $("").offset([coordinates])：标签相当于视口（当前窗口）的偏移量 $("").position()：相对于已经定位了的父标签的偏移量
$("").scrollTop([val])：scrollTop：表示举例顶部的距离 $("").scrollLeft([val]) 尺寸 $("").height([val|fn])：拿到的就是内容的高度，还可以改值，比如加上参数：height("300px"),高度就变成了300px了 $("").width([val|fn])：拿到的是内容的宽度 $("").innerHeight()：拿到的是包括了padding，没包括boder的 $("").innerWidth() $("").outerHeight([options])：拿到的是包括了padding和boder的；如果再加个options 为 true的参数，就会包括margin了 $("").outerWidth([options])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 将 body的边距设置位0 */
body{
margin: 0px;
padding: 0px;
}
.div1,.div2{
height: 200px;
width: 200px;
}
.div1{
background-color: red;
}
.div2{
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<script src="jquery-3.3.1.js"></script>
<script>
// offset 和 position都只有两个方法：top 和 left
// offset方法的参照对象都是当前视口（能看见的窗口）
console.log($(".div1").offset().top);
console.log($(".div1").offset().left);
// position的参数对象是已经定位了的父级标签
// 该示例中，它的父级标签就是body，body默认就是已经定位了的
console.log($(".div2").position().top);
console.log($(".div2").position().left);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 将 body的边距设置位0 */
body{
margin: 0px;
padding: 0px;
}
.div1,.div2{
height: 200px;
width: 200px;
}
.div1{
background-color: red;
}
.div2{
background-color: rebeccapurple;
}
.outer{
position: relative;
height: 400px;
width: 400px;
background-color: green;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="outer">
<div class="div2"></div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
// offset 和 position都只有两个方法：top 和 left
// offset方法的参照对象都是当前视口（能看见的窗口）
console.log($(".div1").offset().top);
console.log($(".div1").offset().left);
// position的参数对象是已经定位了的父级标签
// 该示例中，它的父级标签就是outer，outer已经定位了
// 所以此时，再看他的位置，就是相对于outer来说的，变成了0,0
console.log($(".div2").position().top);
console.log($(".div2").position().left);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 将 body的边距设置位0 */
body{
margin: 0px;
padding: 0px;
}
.div1,.div2{
height: 200px;
width: 200px;
}
.div1{
background-color: red;
border: 6px solid black;
padding: 20px;
margin: 3px;
}
.div2{
background-color: rebeccapurple;
}
.outer{
position: relative;
height: 400px;
width: 400px;
background-color: green;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="outer">
<div class="div2"></div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
// height: 拿到的就是内容的大小 --- 用的最多
// innerHeight: 取出的是带着padding的大小
// outerHeight: 取出的是带着padding 和 boder的大小
console.log($(".div1").height()); // 200
console.log($(".div1").height("300px")); // 340 可以改值
console.log($(".div1").innerHeight()); // 240
console.log($(".div1").outerHeight()); // 252
console.log($(".div1").outerHeight(true)); // 258 加上参数true,就包括了外边距margin了。
</script>
</body>
</html>
实例：返回顶部
需求：
1. 出现滚动条；2；随着滚动条的下滑，底部出现"返回顶部"，点击页面滚动条返回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1,.div2{
height: 2000px;
width: 100%;
}
.div1{
background-color: red;
}
.div2{
background-color: rebeccapurple;
}
/*让返回顶部固定到右下角*/
.return-to-top{
width: 80px;
height: 50px;
position: fixed;
right: 20px;
bottom: 20px;
background-color: bisque;
line-height: 50px;
text-align: center;
}
/*隐藏某个标签，给它加个hide 属性，然后display =none 这都是套路*/
.hide{
display: none;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="outer">
<div class="div2"></div>
</div>
<div class="return-to-top hide" οnclick="returnTop()">返回顶部</div>
<script src="jquery-3.3.1.js"></script>
<script>
// window.onscroll 通过窗口的onscrool属性来监听滚动事件
window.onscroll = function f() {
// 可以看到滚动条当前的位置与窗口顶部的举例
console.log($(window).scrollTop());
// 滚动条滑动过程中才出现返回顶部，默认不显示返回顶部
// 需要用到判断
// $(window).scrollTop()得到的是距离窗口顶部的距离，是一个具体的值
// 当该值>800时，将hide属性移除，就显示了返回顶部
if ($(window).scrollTop()>800){
$(".return-to-top").removeClass("hide")
}
// 当该值小于800时，就添加hide属性，返回顶部就隐藏了
else {
$(".return-to-top").addClass("hide")
}
};
function returnTop() {
//以window为作为当前窗口，是个参照物；事件监听对象
// scrollTop(0)：表示举例window窗口顶部距离为0
// 这样就实现了点击返回顶部的功能
$(window).scrollTop(0)
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1,.div2{
height: 2000px;
width: 100%;
}
/*overflow: auto表示内容填充满后会自动产生一个滚动条，而不会再溢出内容 */
.div1{
background-color: red;
height: 300px;
width: 300px;
overflow: auto;
}
.div2{
background-color: rebeccapurple;
}
/*让返回顶部固定到右下角*/
.return-to-top{
width: 80px;
height: 50px;
position: fixed;
right: 20px;
bottom: 20px;
background-color: bisque;
line-height: 50px;
text-align: center;
}
/*隐藏某个标签，给它加个hide 属性，然后display =none 这都是套路*/
.hide{
display: none;
}
</style>
</head>
<body>
<div class="div1">
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p>
</div>
<div class="outer">
<div class="div2">
<button class="return-top" οnclick="returnTop()">returntop</button>
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
// 监听局部div1，让一点returntop button，就返回顶部
function returnTop() {
//$(".div1")：要监听哪个，就找哪个，不一定非得是监听Window
$(".div1").scrollTop(0)
}
</script>
</body>
</html>
五 事件页面载入
页面载入
ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 页面载入语法1：
$(document).ready(function(){
函数代码
})
页面载入语法2：是语法一的简写方式：
$(function(){
函数代码
}) 事件委托（.on）---终极版的绑定方法 $("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。 // .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如： // $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定click事件；
// 语法解析：就是给ul标签绑定了click事件，然后ul把这个事件委托给它下面的所有li标签，使所有li标签都具有click的事件
[selector]参数的好处: 好处在于.on方法为动态添加的元素也能绑上指定事件；如： //$('ul li').on('click', function(){console.log('click');})的绑定方式和 //$('ul li').bind('click', function(){console.log('click');})一样；
我通过js给ul添加了一个 //li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的 //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加 //li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件 [data]参数的调用: function myHandler(event) { alert(event.data.foo); } $("li").on("click", {foo: "bar"}, myHandler)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
// 在js里找到li标签，没法直接按照下面的方式用，需要遍历后才能用
// var eles = document.getElementsByTagName("li");
// eles.onclick = function () {
// alert(123)
// }
// 来看看jquery的方便之处
// ul,li标签都没有绑定任何事件
// 1. 下面看Jquer的事件绑定————简写方式
// 用jquery绑定事件，就已经帮你做了内部遍历了
$("ul li").click(function () {
alert("Jquety之事件绑定简写方式")
});
// 2.事件绑定的完整写法
// 上面的简写方式如果写完整了就是下面的样子，把click 和 function作为参数传递进去
// 首先还是得先找到要绑定的标签
$("ul li").bind("click",function () {
alert("Jquety之事件绑定的完整写法")
});
// 3. 有事件绑定，就有事件解绑
$("ul li").unbind("click");
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<button>add</button>
<script src="jquery-3.3.1.js"></script>
<script>
// 事件绑定 --- 平时就用事件绑定就够了
$("ul li").click(function () {
alert("Jquety之事件绑定简写方式")
});
// on:事件委托
// 但是上面新增的标签却没有点击事件，只是把标签加上了而已，如何才能动态给新增的标签也绑定事件呢？
// 用事件委托的方式解决这个问题----用 on方法
// on(第一个参数是事件，此例子是click事件，第二个参数是对谁起作用，本利是li标签，第三个参数是具体的函数)
// 这个事件委托本质就是给ul绑定了一个事件，然后ul把这个事件委托给了ul下面的所有的li，这个时候，其实主语就变成了ul
// 遇到动态绑定，就需要用到事件委托了
$("ul").on("click","li",function () {
alert("Jquety之事件委托方式")
});
// 给button标签绑定事件，一点击就新增衣蛾li标签，并数字也变化
$("button").click(function () {
// 1. 先创建一个li标签
var $eli = $("<li>");
// 2. 获取li标签的长度
var len = $("ul li").length;
// 3. 给新增的li标签加1再*1111，用来作为新增的li标签的文本
$eli.html((len+1)*111);
// 4. 然后将li标签添加到ul里去
$eli.appendTo("ul");
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<script>
// 如果直接把jquery放到head里，这个功能就无法生效，因为上面的加载完了，下面的body的代码还没加载完，找不到 "ul li"
// $("ul li").html(5)
// 所以就引入一个页面载入，等所有页面就加载完成后再执行函数
// 1. 完整写法方式
$(document).ready(function () {
$("ul li").html(5)
});
// 2. 页面加载简写方式
$(function () {
$("ul li").html(5)
})
</script>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
</ul>
<button>add</button>
</body>
</html>
六 动画效果
1. 显示与隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画效果-显示与隐藏</title>
</head>
<body>
<div>hello</div>
<button οnclick="f1()">显示</button>
<button οnclick="f2()">隐藏</button>
<button οnclick="f3()">切换</button>
<script src="jquery-3.3.1.js"></script>
<script>
function f1() {
// $("div").show(); // 点击就可以显示div
$("div").show(1000) // 点击就可以显示div，参数表示的毫秒，慢慢显示
}
function f2() {
// $("div").hide() // 点击就可以隐藏div
$("div").hide(1000) // 点击就可以隐藏div,参数表示的是毫秒，可以实现慢慢隐藏的效果
}
// toggle()方法，一个方法可以实现上面两个功能，会自己判断，
// 如果div是隐藏的，点击就会显示；如果div是显示的，点击就会隐藏
function f3() {
$("div").toggle(1000)
}
</script>
</body>
</html>
2. 滑动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
// 找到div给它绑定一个click事件
$("#slideDown").click(function(){
$("#content").slideDown(1000); // 向上滑动
});
$("#slideUp").click(function(){
$("#content").slideUp(1000); // 向下滑动
});
$("#slideToggle").click(function(){
$("#content").slideToggle(1000); // 自己判断是向上滑还是向下滑；根据需求决定是否加参数，表示时间
})
});
</script>
<style>
#content{
text-align: center;
background-color: lightblue;
border:solid 1px red;
display: none;
padding: 50px;
}
</style>
</head>
<body>
<div id="slideDown">出现</div>
<div id="slideUp">隐藏</div>
<div id="slideToggle">toggle</div>
<div id="content">helloworld</div>
</body>
</html>
3.淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入淡出</title>
<style>
.div1{
width: 80px;
height: 80px;
background-color: #FF0000;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
$("#in").click(function () {
$(".div1").fadeIn(2000)
});
$("#out").click(function () {
$(".div1").fadeOut(2000)
});
$("#switch").click(function () {
$(".div1").fadeToggle(2000)
});
// 淡出到某个设定的透明度为止，只有fadeTo有透明度参数
$("#to").click(function () {
$(".div1").fadeTo(2000, 0.4)
})
})
</script>
</head>
<body>
<button id="in">淡入</button>
<button id="out">淡出</button>
<button id="switch">切换</button>
<button id="to">fadeto</button>
<div class="div1"></div>
</body>
</html>
4.回调函数
python里的回调函数就是callback
所谓回调函数：就是完成了一个动作之后再去执行某个内容
比如上面的淡出动画效果完成后，在执行一个回调函数，弹出alert
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入淡出</title>
<style>
.div1{
width: 80px;
height: 80px;
background-color: #FF0000;
}
</style>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
$("#in").click(function () {
$(".div1").fadeIn(2000)
});
$("#out").click(function () {
// 淡出效果2秒钟完成后，再执行回调函数function，弹出alert
$(".div1").fadeOut(2000,function () {
alert("1234")
})
});
$("#switch").click(function () {
$(".div1").fadeToggle(2000)
});
// 淡出到某个设定的透明度为止，只有fadeTo有透明度参数
$("#to").click(function () {
$(".div1").fadeTo(2000, 0.4)
})
})
</script>
</head>
<body>
<button id="in">淡入</button>
<button id="out">淡出</button>
<button id="switch">切换</button>
<button id="to">fadeto</button>
<div class="div1"></div>
</body>
</html>
七 扩展方法 (插件机制)
一 用JQuery写插件时，最核心的方两个方法
<script> $.extend(object) //为JQuery 添加一个静态方法。 $.fn.extend(object) //为JQuery实例添加一个方法。 // jQuery.extend 也可以写成 $.extend jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, // 三元表达式：如果a<b，返回a,否则返回 b max: function(a, b) { return a > b ? a : b; } }); console.log($.min(3,4)); //----------------------------------------------------------------------- $.fn.extend({ "print":function(){ for (var i=0;i<this.length;i++){ console.log($(this)[i].innerHTML) } } }); $("p").print(); </script>
二 定义作用域
定义一个JQuery插件，首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。
(function(a,b){return a+b})(3,5) (function ($) { })(jQuery); //相当于 var fn = function ($) { }; fn(jQuery);
三 默认参数
定义了jQuery插件之后，如果希望某些参数具有默认值，那么可以以这种方式来指定
/step01 定义JQuery的作用域 (function ($) { //step03-a 插件的默认值属性 var defaults = { prevId: 'prevBtn', prevText: 'Previous', nextId: 'nextBtn', nextText: 'Next' //…… }; //step06-a 在插件里定义方法 var showLink = function (obj) { $(obj).append(function () { return "(" + $(obj).attr("href") + ")" }); } //step02 插件的扩展方法名称 $.fn.easySlider = function (options) { //step03-b 合并用户自定义属性，默认属性 var options = $.extend(defaults, options); //step4 支持JQuery选择器 //step5 支持链式调用 return this.each(function () { //step06-b 在插件里定义方法 showLink(this); }); } })(jQuery);
参考博客：http://www.cnblogs.com/xcj26/p/3345556.html
八 经典实例练习
实例之注册验证
<form class="Form">
<p><input class="v1" type="text" name="username" mark="用户名"></p>
<p><input class="v1" type="text" name="email" mark="邮箱"></p>
<p><input class="v1" type="submit" value="submit" οnclick="return validate()"></p>
</form>
<script src="jquery-3.1.1.js"></script>
<script>
// 注意:
// DOM对象--->jquery对象 $(DOM)
// jquery对象--->DOM对象 $("")[0]
//---------------------------------------------------------
// DOM绑定版本
function validate(){
flag=true;
$("Form .v1").each(function(){
$(this).next("span").remove();// 防止对此点击按钮产生多个span标签
var value=$(this).val();
if (value.trim().length==0){
var mark=$(this).attr("mark");
var ele=document.createElement("span");
ele.innerHTML=mark+"不能为空!";
$(this).after(ele);
$(ele).prop("class","error");// DOM对象转换为jquery对象
flag=false;
// return false-------->引出$.each的return false注意点
}
});
return flag
}
//---------------------------------------------------------
//---------------------------------------------------------
//---------------------------------------------------------
function f(){
for(var i=0;i<4;i++){
if (i==2){
return
}
console.log(i)
}
}
f(); // 这个例子大家应该不会有问题吧!!!
//------------------------------------------
li=[11,22,33,44];
$.each(li,function(i,v){
if (v==33){
return ; // ===试一试 return false会怎样?
}
console.log(v)
});
//------------------------------------------
// $.MyEach(obj,function(i,v){}):
for(var i in obj){
func(i,obj[i]) ; // i就是索引,v就是对应值
// {}:我们写的大括号的内容就是func的执行语句;
}
// 大家再考虑: function里的return只是结束了当前的函数,并不会影响后面函数的执行
//本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了,
//希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步:
for(var i in obj){
ret=func(i,obj[i]) ;
if(ret==false){
return ;
}
}
// 这样就很灵活了:
// <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true
// <2>如果你不想return后下面循环函数继续执行,那么就直接写return false
// ---------------------------------------------------------------------
// 说了这么多,请问大家如果我们的需求是:判断出一个输入有问题后面就不判断了(当然也就不显示了),
// 怎么办呢?
// 对了
if (value.trim().length==0){
//...
//...
//flag=false; // flag=false不要去,它的功能是最后如果有问题,不提交数据!
return false
}
//最后,大家尝试着用jquery的绑定来完成这个功能!
$(".Form :submit").click(function(){});
</script>
轮播图练习
.outer{ width: 520px; height: 280px; margin: 80px auto; position: relative; /*relative相对定位加上后，才会按照父亲本身的盒子居中定位*/ } /*.img其实不需要什么样式，关键是它下面的图片需要样式， 每张图片都按照父亲进行绝对定位，定位的时候都叠加到一起*/ .img li{ position: absolute; list-style: none; /*把li的样式给去掉*/ top: 0; left: 0; } .num{ position: absolute; bottom: 10px; left: 30%; /*居中*/ list-style: none; } .num li { display: inline-block; width: 18px; height: 18px; background-color: white; border-radius: 50%; /*设置成圆球*/ text-align: center; line-height: 18px; margin-left: 14px; /*每个li之间的间距*/ font-size: 0; /*把字体大小设置为0，就不显示1，2，3，4*/ } .btn{ position: absolute; /*加上就能看见了*/ top: 110px; /*举例盒子顶部的一半140px- btn的一半30px， 就能实现居中*/ width: 30px; height: 60px; background-color: lightgray; color: white; text-align: center;/*左右居中*/ line-height: 55px;/*上下居中*/ font-size: 30px; opacity: 0.6; /*透明度*/ display: none; /*默认不显示左右切换箭头*/ } .left{ left: 0; } .right{ right: 0; } /*鼠标悬浮在图片上的时候，左右的切换箭头显示*/ .outer:hover .btn{ display: block; } .num .active{ background-color: #FF0000; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.1.1.js"></script>
<title>Title</title>
<link rel="stylesheet" href="css/lunbo.css">
</head>
<body>
<div class="outer">
<ul class="img">
<li><a href=""><img src="img/1.jpg" alt=""></a></li>
<li><a href=""><img src="img/2.jpg" alt=""></a></li>
<li><a href=""><img src="img/3.jpg" alt=""></a></li>
<li><a href=""><img src="img/4.jpg" alt=""></a></li>
</ul>
<ul class="num">
<li class="active"></li>
<!--空的，下面可以实现动态添加-->
<!--<li>1</li>-->
<!--<li>2</li>-->
<!--<li>3</li>-->
<!--<li>4</li>-->
</ul>
<div class="left btn"> < </div>
<div class="right btn"> > </div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
var i=0;
// 通过jquery自动创建按钮标签
/*
通过jquery 自动创建标签
根据图片数量实现动态添加num 下的li标签
*/
var img_num=$(".img li").length; /*看有多少个图片，size 和 length都可以*/
for(var j=0;j<img_num;j++){
$(".num").append("<li></li>")
}
// 给上面循环加的li标签加上属性active,进来的时候就是默认给第一个加上active的
$(".num li").eq(0).addClass("active");
// 先做手动悬浮的轮播
/*
1. 鼠标放在哪个圆点上，哪个圆点变红
2. 对应的图片也显示出来
*/
// 手动轮播
/*给num下的li绑定事件*/
$(".num li").mouseover(function () {
i=$(this).index();
$(this).addClass("active").siblings().removeClass("active");
// 当鼠标悬浮在小圆点上的时候，对应的图片展示出来
// 方法一：show(), hide()
// $(".img li").eq(index).show()：通过索引找到对应的图片，让他显示出来
// .siblings().hide() 让该索引对应的其他兄弟姐妹图片都隐藏
// $(".img li").eq(index).show().siblings().hide();
// $(".img li").eq(index).show(1000).siblings().hide(); // 有个特殊展开的效果
// 方法二：淡入淡出
// 道理同上
// 但是这个有个小bug,如果快速在小圆点滑动多次停下，然后图片还在那里不停的闪烁
// $(".img li").eq(index).fadeIn(1000).siblings().fadeOut();
// 解决办法:加个stop
// 意思是当鼠标悬浮在哪个小圆点时，其他的效果全部停止，然后执行淡入，或者淡出效果
$(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200)
});
// 自动轮播
// 自动轮播
// 设置一个定时器 c, 每隔1500毫秒，执行一次GO_R函数
var c=setInterval(GO_R,1500);
function GO_R() {
if(i==img_num-1){
i=-1
}
i++;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)
}
function GO_L() {
if(i==0){
i=img_num
}
i--;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)
}
// hover(参数一：表示悬浮是，参数二:表示没有悬浮时)
$(".outer").hover(function () {
clearInterval(c)
},function () {
c=setInterval(GO_R,1500)
});
// button 加定播
// 给btn加手动定播
$(".right").click(GO_R);
$(".left").click(GO_L)
</script>
</body>
</html>
转：https://www.cnblogs.com/yuanchenqi/articles/6070667.html
958
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
