jQuery初识 - jQuery案例练习

jQuery事件委托

什么是事件委托

请别人帮忙做事情，然后将做完的结果反馈给我们

在jQuery中，如果通过核心函数找到的元素不止一个，那么在添加事件的时候，jQuery会遍历所有找到的元素，给所有找到的元素添加事件。

jQuery移入移出事件

mouseover/mouseout事件，子元素被移入移出也会触发父元素的事件

mouseenter/mouserleave事件，子元素被移入移出不会触发父元素的事件（推荐使用）

电影排行榜案例

<!--* @Author: 码小余* @Date: 2020-06-17 07:21:47* @LastEditTime: 2020-06-17 08:59:25* @FilePath: \代码\35-电影排行榜下.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>35-电影排行榜下</title><style>* {margin: 0;padding: 0;}.box {width: 300px;height: 450px;margin: 50px auto;border: 1px solid #000;}.box > h1 {font-size: 20px;line-height: 35px;color: deeppink;padding-left: 10px;border-bottom: 1px dashed #ccc;}ul > li {list-style: none;padding: 5px 10px;border: 1px dashed #ccc;}ul > li:nth-child(-n + 3) span {background: deeppink;}ul > li > span {display: inline-block;width: 20px;height: 20px;background: #ccc;text-align: center;line-height: 20px;margin-right: 10px;}.content {overflow: hidden;margin-top: 5px;display: none;}.content > img {width: 80px;height: 120px;float: left;}.content > p {width: 180px;height: 120px;float: right;font-size: 12px;line-height: 20px;}.current .content {display: block;}</style><script src="jquery-1.12.4.js"></script><script>// 编写jQuery代码$(function () {/*// 1. 监听鼠标移入事件$("li").mouseenter(function () {$(this).addClass("current");});// 2. 监听鼠标移出事件$("li").mouseleave(function () {$(this).removeClass("current");});*/$("li").hover(function () {$(this).addClass("current");},function () {$(this).removeClass("current");});});</script></head><body><div class="box"><h1>电影排行榜</h1><ul><li><span>1</span>电影名称<div class="content"><img src="data:images/ysqwl.jpg" alt="" /><p>天圣八年，岁在庚午。是夜，许府中，下人发现员外离奇倒地身亡。前来寻员外的许夫人神情呆滞，居然同一美艳女子在屋内翩翩起舞。曲终，此女在众人眼前瞬间消失。怪事一出，开封府派捕快拾生破案。拾生发现许员外竟是中毒而亡，而后从夫人处得知那女子的身世，她就是二十二年前听雨楼中名噪一时的歌妓谢晓菀，但已故去多年。调查陷入僵局，一切线索都直指谢晓菀，拾生毫无头绪。为安抚民心，他打算快速侦破案件，遂入隐市向白青萝求助。药婆白青萝有一个灵鼻子，它能闻辨百毒，拾生想借此“闻香探案”。避世多时的白青萝会轻易同意吗？许府里又藏着怎样的秘密......</p></div></li><li><span>2</span>电影名称<div class="content"><img src="data:images/ysqwl.jpg" alt="" /><p>天圣八年，岁在庚午。是夜，许府中，下人发现员外离奇倒地身亡。前来寻员外的许夫人神情呆滞，居然同一美艳女子在屋内翩翩起舞。曲终，此女在众人眼前瞬间消失。怪事一出，开封府派捕快拾生破案。拾生发现许员外竟是中毒而亡，而后从夫人处得知那女子的身世，她就是二十二年前听雨楼中名噪一时的歌妓谢晓菀，但已故去多年。调查陷入僵局，一切线索都直指谢晓菀，拾生毫无头绪。为安抚民心，他打算快速侦破案件，遂入隐市向白青萝求助。药婆白青萝有一个灵鼻子，它能闻辨百毒，拾生想借此“闻香探案”。避世多时的白青萝会轻易同意吗？许府里又藏着怎样的秘密......</p></div></li><li><span>3</span>电影名称<div class="content"><img src="data:images/ysqwl.jpg" alt="" /><p>天圣八年，岁在庚午。是夜，许府中，下人发现员外离奇倒地身亡。前来寻员外的许夫人神情呆滞，居然同一美艳女子在屋内翩翩起舞。曲终，此女在众人眼前瞬间消失。怪事一出，开封府派捕快拾生破案。拾生发现许员外竟是中毒而亡，而后从夫人处得知那女子的身世，她就是二十二年前听雨楼中名噪一时的歌妓谢晓菀，但已故去多年。调查陷入僵局，一切线索都直指谢晓菀，拾生毫无头绪。为安抚民心，他打算快速侦破案件，遂入隐市向白青萝求助。药婆白青萝有一个灵鼻子，它能闻辨百毒，拾生想借此“闻香探案”。避世多时的白青萝会轻易同意吗？许府里又藏着怎样的秘密......</p></div></li><li><span>4</span>电影名称<div class="content"><img src="data:images/ysqwl.jpg" alt="" /><p>天圣八年，岁在庚午。是夜，许府中，下人发现员外离奇倒地身亡。前来寻员外的许夫人神情呆滞，居然同一美艳女子在屋内翩翩起舞。曲终，此女在众人眼前瞬间消失。怪事一出，开封府派捕快拾生破案。拾生发现许员外竟是中毒而亡，而后从夫人处得知那女子的身世，她就是二十二年前听雨楼中名噪一时的歌妓谢晓菀，但已故去多年。调查陷入僵局，一切线索都直指谢晓菀，拾生毫无头绪。为安抚民心，他打算快速侦破案件，遂入隐市向白青萝求助。药婆白青萝有一个灵鼻子，它能闻辨百毒，拾生想借此“闻香探案”。避世多时的白青萝会轻易同意吗？许府里又藏着怎样的秘密......</p></div></li><li><span>5</span>电影名称<div class="content"><img src="data:images/ysqwl.jpg" alt="" /><p>天圣八年，岁在庚午。是夜，许府中，下人发现员外离奇倒地身亡。前来寻员外的许夫人神情呆滞，居然同一美艳女子在屋内翩翩起舞。曲终，此女在众人眼前瞬间消失。怪事一出，开封府派捕快拾生破案。拾生发现许员外竟是中毒而亡，而后从夫人处得知那女子的身世，她就是二十二年前听雨楼中名噪一时的歌妓谢晓菀，但已故去多年。调查陷入僵局，一切线索都直指谢晓菀，拾生毫无头绪。为安抚民心，他打算快速侦破案件，遂入隐市向白青萝求助。药婆白青萝有一个灵鼻子，它能闻辨百毒，拾生想借此“闻香探案”。避世多时的白青萝会轻易同意吗？许府里又藏着怎样的秘密......</p></div></li><li><span>6</span>电影名称<div class="content"><img src="data:images/ysqwl.jpg" alt="" /><p>天圣八年，岁在庚午。是夜，许府中，下人发现员外离奇倒地身亡。前来寻员外的许夫人神情呆滞，居然同一美艳女子在屋内翩翩起舞。曲终，此女在众人眼前瞬间消失。怪事一出，开封府派捕快拾生破案。拾生发现许员外竟是中毒而亡，而后从夫人处得知那女子的身世，她就是二十二年前听雨楼中名噪一时的歌妓谢晓菀，但已故去多年。调查陷入僵局，一切线索都直指谢晓菀，拾生毫无头绪。为安抚民心，他打算快速侦破案件，遂入隐市向白青萝求助。药婆白青萝有一个灵鼻子，它能闻辨百毒，拾生想借此“闻香探案”。避世多时的白青萝会轻易同意吗？许府里又藏着怎样的秘密......</p></div></li></ul></div></body>
</html>

TAB选项卡案例

<!--* @Author: 码小余* @Date: 2020-06-17 09:01:22* @LastEditTime: 2020-06-17 10:49:18* @FilePath: \代码\38-TAB选项卡终极.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>38-TAB选项卡终极</title><style>* {margin: 0;padding: 0;}.box {width: 440px;height: 298px;border: 1px solid #000;margin: 50px auto;}.nav {height: 50px;}.nav > li {list-style: none;width: 110px;height: 50px;background: orange;text-align: center;line-height: 50px;float: left;}.nav > .current {background: #ccc;}.content li {list-style: none;width: 440px;height: 250px;display: none;}/* .content li div {width: 440px;height: 250px;display: none;} */.content .show {display: block;}</style><script src="jquery-1.12.4.js"></script><script>// 编写jQuery代码$(function () {// 1. 监听选项卡的移入事件$(".nav>li").mouseenter(function () {// 1.1 修改被移入选项卡的背景颜色$(this).addClass("current");// 1.2 还原其他兄弟选项卡的背景颜色$(this).siblings().removeClass("current");// 1.3 获取当前移入选项卡的索引var $index = $(this).index();// 1.4 根据索引找到对应的图片var $li = $(".content li").eq($index);// 1.5 隐藏非当前的其他图片$li.siblings().removeClass("show");// 1.6 显示找到的图片$li.addClass("show");});});</script></head><body><div class="box"><ul class="nav"><li class="current">H5+C3</li><li>jQuery</li><li>C语言</li><li>Go语言</li></ul><ul class="content"><li class="show" style="background: red;"></li><li style="background: blue;"></li><li style="background: yellow;"></li><li style="background: green;"></li></ul></div></body>
</html>

jQuery显示和隐藏动画

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>39-jQuery显示和隐藏动画</title><style>* {margin: 0;padding: 0;}div {width: 200px;height: 200px;background: red;display: none;}</style><script src="jquery-1.12.4.js"></script><script>// 编写jQuery代码$(function () {$("button").eq(0).click(function () {// $("div").css("display", "block");$("div").show(1000, function () {alert("显示动画执行完毕");});});$("button").eq(1).click(function () {// $("div").css("display", "none");$("div").hide(1000, function () {alert("隐藏动画执行完毕");});});$("button").eq(2).click(function () {$("div").toggle(1000, function () {alert("切换完毕");});});});</script></head><body><button>显示</button><button>隐藏</button><button>切换</button><div></div></body>
</html>

jQuery展开和收起动画

<!--* @Author: 码小余* @Date: 2020-06-17 11:23:57* @LastEditTime: 2020-06-17 11:46:00* @FilePath: \代码\41-jQuery 展开和收起动画.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>41-jQuery 展开和收起动画</title><style>* {margin: 0;padding: 0;}div {width: 100px;height: 300px;background: red;display: none;}</style><script src="jquery-1.12.4.js"></script><script>// 编写jQuery代码$(function () {$("button").eq(0).click(function () {$("div").slideDown(1000, function () {alert("展开完毕");});});$("button").eq(1).click(function () {$("div").slideUp(1000, function () {alert("收起完毕");});});$("button").eq(2).click(function () {$("div").slideToggle(1000, function () {alert("切换完毕");});});});</script></head><body><button>展开</button><button>收起</button><button>切换</button><div></div></body>
</html>

折叠菜单

<!--* @Author: 码小余* @Date: 2020-06-17 12:21:17* @LastEditTime: 2020-06-17 13:19:56* @FilePath: \代码\43-折叠菜单下.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>43-折叠菜单下</title><style>* {margin: 0;padding: 0;}.nav {list-style: none;width: 300px;margin: 100px auto;}.nav > li {border: 1px solid #000;line-height: 35px;border-bottom: none;text-indent: 2rem;position: relative;}.nav > li:last-child {border-bottom: 1px solid #000;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;}.nav > li:first-child {border-top-right-radius: 5px;border-top-left-radius: 5px;}.nav > li > span {display: inline-block;width: 32px;height: 32px;text-align: center;line-height: 32px;position: absolute;right: 20px;top: 5px;}.nav > li > span span {position: absolute;top: 0;left: -20px;}.sub {display: none;}.sub > li {list-style: none;background: mediumpurple;border-bottom: 1px solid #fff;}.sub > li:hover {background: red;}.nav .current > span {transform: rotate(90deg);}</style><script src="jquery-1.12.4.js"></script><script>// 编写jQuery代码$(function () {// 1. 监听一级菜单的点击事件、$(".nav>li").click(function () {// 1.1 拿到二级菜单var $sub = $(this).children(".sub");// 1.2 让二级菜单展开$sub.slideDown(1000);$(this).addClass("current");// 1.3 拿到所有非当前的二级菜单var otherSub = $(this).siblings().children(".sub");// 1.4 让所有非当前的二级菜单收起otherSub.slideUp(1000);$(this).siblings().removeClass("current");});});</script></head><body><ul class="nav"><li>一级菜单<span><span>></span></span><ul class="sub"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li><li>一级菜单<span><span>></span></span><ul class="sub"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li><li>一级菜单<span><span>></span></span><ul class="sub"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li><li>一级菜单<span><span>></span></span><ul class="sub"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li><li>一级菜单<span><span>></span></span><ul class="sub"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li><li>一级菜单<span><span>></span></span><ul class="sub"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li><li>一级菜单<span><span>></span></span><ul class="sub"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li><li>一级菜单<span><span>></span></span><ul class="sub"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li></ul></body>
</html>

下拉菜单

<!--* @Author: 码小余* @Date: 2020-06-17 13:20:40* @LastEditTime: 2020-06-17 13:37:57* @FilePath: \代码\44-下拉菜单.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>44-下拉菜单</title><style>* {margin: 0;padding: 0;}.nav {list-style: none;width: 300px;height: 50px;background: red;margin: 100px auto;}.nav > li {width: 100px;height: 50px;line-height: 50px;text-align: center;float: left;}.sub {list-style: none;background: mediumpurple;display: none;}</style><script src="jquery-1.12.4.js"></script><script>// 编写jQuery代码$(function () {/*在jQuery中如果需要执行动画，建议在执行动画之前先调用stop方法，然后再执行动画*/// 1. 监听一级菜单的移入事件$(".nav>li").mouseenter(function () {// 1.1 拿到二级菜单var $sub = $(this).children(".sub");// 停止当前正在运行的动画$sub.stop();// 1.2 让二级菜单展开$sub.slideDown(1000);});// 2. 监听一级菜单的移出事件$(".nav>li").mouseleave(function () {// 2.1 拿到二级菜单var $sub = $(this).children(".sub");// 停止当前正在运行的动画$sub.stop();// 2.2 让二级菜单收起$sub.slideUp(1000);});});</script></head><body><ul class="nav"><li>一级菜单<ul class="sub"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li><li>一级菜单</li><li>一级菜单</li></ul></body>
</html>

jQuery淡入淡出动画

<!--* @Author: 码小余* @Date: 2020-06-17 13:39:23* @LastEditTime: 2020-06-17 13:47:19* @FilePath: \代码\45-jQuery淡入淡出动画.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>45-jQuery淡入淡出动画</title><style>* {margin: 0;padding: 0;}div {width: 300px;height: 300px;background: red;display: none;}</style><script src="jquery-1.12.4.js"></script><script>// 编写jQuery代码$(function () {$("button").eq(0).click(function () {$("div").fadeIn(1000, function () {alert("淡入完毕");});});$("button").eq(1).click(function () {$("div").fadeOut(1000, function () {alert("淡出完毕");});});$("button").eq(2).click(function () {$("div").fadeToggle(1000, function () {alert("切换完毕");});});$("button").eq(3).click(function () {$("div").fadeTo(1000, 0.5, function () {alert("淡入到完毕");});});});</script></head><body><button>淡入</button><button>淡出</button><button>切换</button><button>淡入到</button><div></div></body>
</html>

弹窗广告

<!--* @Author: 码小余* @Date: 2020-06-17 14:17:36* @LastEditTime: 2020-06-17 14:29:08* @FilePath: \代码\46-弹窗广告.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}.ad {position: fixed;right: 0;bottom: 0;display: none;}.ad > span {display: inline-block;width: 30px;height: 30px;background: red;position: absolute;top: 0;right: 0;}</style><script src="jquery-1.12.4.js"></script><script>// 编写jQuery代码$(function () {// 1. 监听span的点击事件、$("span").click(function () {$(".ad").remove();});// 2. 执行广告动画// $(".ad").slideDown(1000, function () {//   $(".ad").delay(5000);//   $(".ad").fadeOut(3000);// });$(".ad").slideDown(1000).delay(5000).fadeOut(3000);});</script></head><body><div class="ad"><img src="data:images/BB14xSko.jpg" alt="" /><span></span></div></body>
</html>

jQuery自定义动画

<!--* @Author: 码小余* @Date: 2020-06-17 14:30:58* @LastEditTime: 2020-06-17 14:56:58* @FilePath: \代码\47-jQuery自定义动画.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>47-jQuery自定义动画</title><style>* {margin: 0;padding: 0;}div {width: 100px;height: 100px;margin-top: 10px;background: red;}.two {background: blue;}</style><script src="jquery-1.12.4.js"></script><script>// 编写jQuery代码$(function () {$("button").eq(0).click(function () {/*$(".one").animate({width: 500,},1000,function () {alert("自定义动画执行完毕");});*/$(".one").animate({marginLeft: 500,},5000,function () {});/*第一个参数：接收一个对象，可以在对象中修改属性第二个参数：指定动画时长第三个参数：指定动画节奏，默认为swing第四个参数：动画执行完毕之后的回调函数*/$(".two").animate({marginLeft: 500,},5000,"linear",function () {});});$("button").eq(1).click(function () {$(".one").animate({width: "+=100",},1000,function () {});});$("button").eq(2).click(function () {$(".one").animate({// width: "hide",width: "toggle",},1000,function () {});});});</script></head><body><button>操作属性</button><button>累加属性</button><button>关键字</button><div class="one"></div><div class="two"></div></body>
</html>

jQuery的stop和delay方法

<!--* @Author: 码小余* @Date: 2020-06-17 14:58:28* @LastEditTime: 2020-06-17 15:19:02* @FilePath: \代码\48-jQuery的stop和delay方法.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>48-jQuery的stop和delay方法</title><style>* {margin: 0;padding: 0;}.one {width: 100px;height: 100px;background: red;}.two {width: 500px;height: 10px;background: blue;}</style><script src="jquery-1.12.4.js"></script><script>// 编写jQuery代码$(function () {$("button").eq(0).click(function () {/*在jQuery的{}中可以同时修改多个属性，多个属性的动画也会同时执行*//*$(".one").animate({width: 500,// height: 500,},1000);$(".one").animate({height: 500,},1000);*//*$(".one").animate({width: 500,},1000).delay(2000).animate({height: 500,},1000);*/$(".one").animate({width: 500,// height: 500,},1000);$(".one").animate({height: 500,},1000);$(".one").animate({width: 100,// height: 500,},1000);$(".one").animate({height: 100,},1000);});$("button").eq(1).click(function () {// 立即停止当前动画，继续执行后续动画// $("div").stop();// $("div").stop(false);// $("div").stop(false, false);// 立即停止当前和后续所有的动画// $("div").stop(true);// $("div").stop(true, false);// 立即完成当前的，继续执行后续动画// $("div").stop(false, true);// 立即完成当前的，并且停止后续所有的$("div").stop(true, true);});});</script></head><body><button>开始动画</button><button>停止动画</button><div class="one"></div><div class="two"></div></body>
</html>

图标特效

<!--* @Author: 码小余* @Date: 2020-06-17 15:21:54* @LastEditTime: 2020-06-17 17:20:00* @FilePath: \代码\49-图标特效.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>49-图标特效</title><style>* {margin: 0;padding: 0;}ul {list-style: none;width: 400px;height: 250px;border: 1px solid #000;margin: 100px auto;}ul > li {width: 100px;height: 50px;margin-top: 50px;text-align: center;float: left;overflow: hidden;}ul > li > span {display: inline-block;width: 24px;height: 24px;background: red;position: relative;/* top: 50px; */}</style><script src="jquery-1.12.4.js"></script><script>// 编写jQuery代码$(function () {// 2. 监听li移入事件$("li").mouseenter(function () {// 2.1 将图标往上移动$(this).children("span").animate({top: -50,},1000,function () {// 2.2 将图片往下移动$(this).css("top", "50px");// 2.3 将图片复位$(this).animate({top: 0,},1000);});});});</script></head><body><ul><li><span></span><p>百度</p></li><li><span></span><p>百度</p></li><li><span></span><p>百度</p></li><li><span></span><p>百度</p></li><li><span></span><p>百度</p></li><li><span></span><p>百度</p></li><li><span></span><p>百度</p></li><li><span></span><p>百度</p></li></ul></body>
</html>

无限循环滚动案例

<!--* @Author: 码小余* @Date: 2020-06-17 17:23:12* @LastEditTime: 2020-06-17 18:31:49* @FilePath: \代码\51-无限循环滚动下.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>50-无限循环滚动</title><style>* {margin: 0;padding: 0;}div {width: 600px;height: 161px;border: 1px solid #000;margin: 100px auto;overflow: hidden;}ul {list-style: none;width: 1800px;height: 161px;background: #000;}ul > li {width: 300px;height: 161px;background: yellow;font-size: 50px;float: left;text-align: center;line-height: 161px;}</style><script src="jquery-1.12.4.js"></script><script>// 编写jQuery代码$(function () {// 0. 定义变量保存偏移位var offset = 0;// 1. 让图片滚动起来var timer;function autoPlay() {timer = setInterval(function () {offset -= 1;if (offset <= -1200) {offset = 0;}$("ul").css("marginLeft", offset);}, 1);}autoPlay();// 2. 监听li的移入移除事件$("li").hover(function () {// 停止滚动clearInterval(timer);// 给非当前选中添加蒙版$(this).siblings().fadeTo(100, 0.5);// 去除当前选中的蒙版$(this).fadeTo(100, 1);},function () {// 继续滚动autoPlay();// 去除所有的蒙版$("li").fadeTo(100, 1);});});</script></head><body><div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>1</li><li>2</li></ul></div></body>
</html>

jQuery初识 - jQuery案例练习相关推荐

jQuery初识 - jQuery是什么
jQuery jQuery是什么 jQuery是一款优秀的JavaScript库 ,从命名可以看出jQuery最主要的用途是用来做查询(jQuery=js+Query) ,正如jQuery官方Lo ...
jQuery初识 - jQuery关于节点的相关方法
jQuery添加节点的相关方法内部插入 append(content|fn) appendTo(content) 会将元素添加到指定元素内部的最后 prepend(content ...
jQuery初识 - jQuery中的方法
jQuery的attr方法 attr(name|pro|key,val|fn) 作用:获取或者设置属性节点的值可以传递一个参数,也可以传递两个参数如果传递一个参数,代表获取属性节点的值 ...
初识JQuery框架的基本使用
初识JQuery框架的基本使用本文内容大纲 //jquery不是语言是js的框架 (方便简化javaScript开发:选择器.Css.Html.js动画.浏览器兼容.丰富插件) How怎么用? 使 ...
jQuery ajax简单案例-验证用户名是否可用
jQuery ajax简单案例-验证用户名是否可用 HTML <!DOCTYPE html> <html> <head> <meta charset=&quo ...
跟我学jQuery(二) 初识jQuery
跟我学jQuery教程目录: 跟我学jQuery(一) 前言跟我学jQuery(二) 初识jQuery 跟我学jQuery(三) 无所不能的选择器1 跟我学jQuery(四) ...
jQuery选择器经典案例
jQuery选择器经典案例具体讲解内容参照上一篇: 选择器详细讲解基本选择器 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN&qu ...
jQuery源码分析系列（一）初识jQuery
一个工厂 (function(global, factory){"use strict"// operation_1 })(typedef window !== "und ...
JavaScript -- jQuery网页开发案例笔记
视频地址:黑马程序员前端基础必备教程|jQuery网页开发案例精讲_哔哩哔哩_bilibili 视频代码地址:JavaScript_jQuery测试案例: 本仓库是学习jQuery相关知识.视频网址: ...

jQuery初识 - jQuery案例练习

jQuery事件委托

jQuery移入移出事件

电影排行榜案例

TAB选项卡案例

jQuery显示和隐藏动画

jQuery展开和收起动画

折叠菜单

下拉菜单

jQuery淡入淡出动画

弹窗广告

jQuery自定义动画

jQuery的stop和delay方法

图标特效

无限循环滚动案例

jQuery初识 - jQuery案例练习相关推荐

最新文章

热门文章