第四篇 前端学习之JQuery基础
2024-05-12 05:22:18
一 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].innerHTMLjquery的基础语法：$(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>View Code
实例之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>View Code
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>左侧菜单显示折叠实例：addClass, removeClass
<!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>attr和prop的区别
<!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>jQuery的两种循环方式
<!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>jQuery之正反选实例
模态：
就是执行一个操作，弹出一个透明页遮挡，让透明页底部的元素不可操作，透明页上面的元素可以操作
<!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>内部插入示例append, prepend
<!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>外部插入before,after
<!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>替换：replaceWith
<!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>删除和清空：empty和remove
<!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
但是，这个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>可以复制，也可以remove
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>位置：offset和position
<!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,0console.log($(".div2").position().top);console.log($(".div2").position().left);</script>
</body>
</html>位置：position相对于已经定位的父级标签标签
<!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()); // 200console.log($(".div1").height("300px")); // 340 可以改值console.log($(".div1").innerHeight()); // 240console.log($(".div1").outerHeight()); // 252console.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>监听div，返回顶部
五 事件页面载入
页面载入
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>on：事件委托
<!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>显示与隐藏 show hide
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>滑动 sliddeUp slideDown slideToggle
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>淡入淡出fadeIn fadeOut fadeToggle fadeTo
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 也可以写成 $.extendjQuery.extend({min: function(a, b) { return a < b ? a : b; }, // 三元表达式：如果a<b，返回a,否则返回 bmax: 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);View Code
参考博客：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>View Code
轮播图练习
.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;
}css样式
<!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
转载于:https://www.cnblogs.com/victorm/p/9614983.html
第四篇 前端学习之JQuery基础相关推荐
- 17前端学习之JQuery基础(一):jQ介绍,jQ基本使用,jQ选择器,jQ样式操作,jQ动画效果
文章目录 一.Jquery介绍: 1. JavaScript 库: 2 jQuery的概念 3. jQuery的优点 二.jQuery 的基本使用: 1. jQuery 的下载 2. 体验jQuery ...
- [前端学习笔记] jQuery基础知识整理
一.jQuery基本概念 1. 什么是jQuery jQuery是一个快速简洁的JS库,封装了JS常用的功能代码,优化了DOM操作.事件处理.动画设计.Ajax交互等.我们可以快速查询使用里面的功能函 ...
- Web前端学习：jQuery基础--3【jquery操作样式类名、添加元素、jQuery-CSS()方法】
目录 1.jquery操作样式类名 代码演示 二.添加元素 1.append()演示 2.prepend()演示 3.after()演示 4.before()演示 三.jQuery-CSS()方法 1 ...
- Web前端学习之 CSS基础二
Web前端学习之 CSS基础二 1. 2. 主体 3. 完整代码如下所示 4. 结束语 1. /* 权重是0 */* {font-size: 35px;text-align: center;color ...
- 前端学习：jQuery学习--Day03
前端学习:jQuery学习–Day03 ps:这几天偷了点懒呜呜外加考试耽误了几天学习 最后自己做了一个给女朋友的惊喜点滴记录note 大纲 自定义事件 自动触发 事件委托 鼠标移入移出事件 电影排行 ...
- Python攻城师————前端学习（jQuery框架、第三方框架bootstrap框架）
今日学习目标 继续学习jQuery框架剩余的内容. 文章目录 今日学习目标 学习内容 一.jQuery操作标签 class操作 样式操作 位置操作 文本值操作 属性操作 文档处理操作 二.jQuery ...
- 2021年3月四篇深度学习论文推荐
这是Machine-Learning-Collage系列,每隔一周作者都会编写一个本周论文的幻灯片摘要.每月底所有的幻灯片画都会被集中到一个总结文章中.作者希望给读者一个直观和直观的一些最酷的趋势.以 ...
- 厚积薄发 前端学习笔记 CSS基础篇-左侧固定，右侧自适应（或右侧固定，左侧自适应）布局方法...
这是我们经常可能会遇到到一种布局方法,或者是右侧固定,左侧自适应,下面列出我归纳总结的几种方法,是实际开发中比较常用和实用的几种方法 GitHub项目链接 写在前面 归纳总结了几种比较ok的方法,左右 ...
- 前端学习路线之基础篇-李南江
基础必学:HTML.CSS.JS 分别以下对应修房子的三个步骤 HTML 结构(毛坯房) CSS 装饰(精装修) JS 交互(智能家居) 一.HTML基础必学 文档学习 ...
最新文章
- 【Sql Server】DateBase-结构化查询特殊对象“游标”
- Xcode SVN配置
- python无限次输入_在Raspberry Pi上的Python用户输入无限循环内部输入时很多输入错过了输入...
- 快速生成解决方案 ctrl + shilf + b
- Java负数的位运算
- 如何在asp.net中如何在线播放视频文件
- python函数定义关键字_Python（2）深入Python函数定义
- Kafka Shell 基本操作
- Android MultiAutoCompleteTextView多文本输入提示
- 【记录】我在浙江省机器人大赛的第一天
- 上手深度学习之前，我们先聊聊“数学”
- jquery中attr和prop的区别分析
- 机器学习代码实战——线性回归(多变量)（Linear Regression）
- leetcode—11.队列题型python解答
- IOS访问webserver接口
- javscript DOM基础知识（常用篇）
- java爱心效果代码来了
- 使用css控制gridview控件的样式,GridView 样式美化及应用.doc
- 微软笔试题《Arithmetic Puzzles》- 题解
- jasper报表格式化bigdecimal(decimal128)数据千分位