Java后端学习路线笔记汇总表【黑马程序员】

JQuery-学习笔记01【基础——JQuery基础】——【day01】

JQuery-学习笔记02【基础——JQuery选择器】

JQuery-学习笔记03【基础——DOM操作】

JQuery-学习笔记04【基础——JQuery基础案例】

JQuery-学习笔记05【高级——JQuery动画和遍历】——【day02】

JQuery-学习笔记06【高级——JQuery事件绑定和切换】

JQuery-学习笔记07【高级——JQuery高级案例】

第6节 JQuery高级案例

JQuery_案例1_广告显示和隐藏

JQuery_案例2_抽奖_演示

JQuery_案例2_抽奖_实现

JQuery_插件机制

1、$.fn.extend(object) // 对象级别插件

2、$.extend(object) // 全局级别插件

第6节 JQuery高级案例

JQuery_案例1_广告显示和隐藏

JQuery 高级
1. 动画
2. 遍历
3. 事件绑定
4. 案例
1. 广告显示和隐藏
2. 抽奖
5. 插件

需求：
   1. 当页面加载完，3秒后。自动显示广告
   2. 广告显示5秒后，自动消失。

分析：
   1. 使用定时器来完成。setTimeout (执行一次定时器)
   2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display
   3. 使用 show/hide方法来完成广告的显示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>案例之广告的自动显示与隐藏</title><style>#content {width: 100%;height: 500px;background: #999}</style><!--引入jquery--><script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script><script>$(function() { // 入口函数，在页面加载完成之后，定义定时器，调用这两个方法//定义定时器，调用adShow方法 3秒后执行一次setTimeout(adShow, 3000);//定义定时器，调用adHide方法，8秒后执行一次setTimeout(adHide, 8000);});function adShow() { // 显示广告//获取广告div，调用显示方法// $("#ad").show("slow");$("#ad").slideDown("slow");}function adHide() { // 隐藏广告//获取广告div，调用隐藏方法// $("#ad").hide("slow");$("#ad").slideUp("slow");}</script></head><body><!-- 整体的DIV --><div><!-- 广告DIV --><div id="ad" style="display: none;"><img style="width:100%" src="../img/adv.jpg" /></div><!-- 下方正文部分 --><div id="content">正文部分</div></div></body>
</html>

JQuery_案例2_抽奖_演示

JQuery_案例2_抽奖_实现

分析：
   1. 给开始按钮绑定单击事件
       1.1 定义循环定时器
       1.2 切换小相框的src属性
           * 定义数组，存放图片资源路径
           * 生成随机数。数组索引
   2. 给结束按钮绑定单击事件
       1.1 停止定时器
       1.2 给大相框设置src属性

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>jquery案例之抽奖</title><script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script><script language='javascript' type='text/javascript'>var imgs = ["../img/man00.jpg", "../img/man01.jpg","../img/man02.jpg", "../img/man03.jpg","../img/man04.jpg", "../img/man05.jpg", "../img/man06.jpg",];var startId; //开始定时器的idvar index; //随机角标$(function() {//处理按钮是否可以使用的效果$("#startID").prop("disabled", false);$("#stopID").prop("disabled", true);//1. 给开始按钮绑定单击事件$("#startID").click(function() {// 1.1 定义循环定时器 20毫秒执行一次startId = setInterval(function() {//处理按钮是否可以使用的效果$("#startID").prop("disabled", true);$("#stopID").prop("disabled", false);//1.2 生成随机角标 0-6index = Math.floor(Math.random() * 7); //0.000--0.999 --> * 7 --> 0.0-----6.9999//1.3 设置小相框的src属性$("#img1ID").prop("src", imgs[index]);}, 20);});//2. 给结束按钮绑定单击事件$("#stopID").click(function() {//处理按钮是否可以使用的效果$("#startID").prop("disabled", false);$("#stopID").prop("disabled", true);// 1.1 停止定时器clearInterval(startId);// 1.2 给大相框设置src属性$("#img2ID").prop("src", imgs[index]).hide();//1秒之后显示$("#img2ID").show(1000);});});</script></head><body><!-- 小像框 --><div style="border-style:dotted;width:160px;height:100px"><img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px" /></div><!-- 大像框 --><div style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px"><img id="img2ID" src="../img/man00.jpg" width="800px" height="500px" /></div><!-- 开始按钮 --><input id="startID" type="button" value="点击开始" style="width:150px;height:150px;font-size:22px"><!-- 停止按钮 --><input id="stopID" type="button" value="点击停止" style="width:150px;height:150px;font-size:22px"></body>
</html>

JQuery_插件机制

JQuery 高级
1. 动画
2. 遍历
3. 事件绑定
4. 案例
5. 插件：增强JQuery的功能
   1. 实现方式：
       1、$.fn.extend(object) // 对象级别插件
           * 增强“通过JQuery获取的对象”的功能，例：$("#id")
       2、$.extend(object) // 全局级别插件
           * 增强“JQeury对象自身”的功能，例：$/jQuery

1、$.fn.extend(object) // 对象级别插件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>01-对jQuery对象进行方法扩展.html</title><script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//使用jquery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框//1.定义jqeury的对象插件$.fn.extend({//定义了一个check()方法。所有的jq对象都可以调用该方法check: function() {//让复选框选中//this:调用该方法的jq对象this.prop("checked", true);},uncheck: function() {//让复选框不选中this.prop("checked", false);}});$(function() {//获取按钮//$("#btn-check").check();//复选框对象.check();$("#btn-check").click(function() {//获取复选框对象$("input[type='checkbox']").check();});$("#btn-uncheck").click(function() {//获取复选框对象$("input[type='checkbox']").uncheck();});});</script></head><body><input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()"><input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()"><br /><input type="checkbox" value="football">足球<input type="checkbox" value="basketball">篮球<input type="checkbox" value="volleyball">排球</body>
</html>

2、$.extend(object) // 全局级别插件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>02-对jQuery全局进行方法扩展.html</title><script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值$.extend({max: function(a, b) {//返回两数中的较大值return a >= b ? a : b;},min: function(a, b) {//返回两数中的较小值return a <= b ? a : b;}});//调用全局方法var max = $.max(4, 3);alert(max);var min = $.min(1, 2);alert(min);</script></head><body></body>
</html>

老实、听话、肯干！

JQuery-学习笔记07【高级——JQuery高级案例】相关推荐

JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作，和其他js库冲突处理
今天我继续更新jQuery学习笔记,最近考试比较忙,也就更新的比较慢了,这里向大家说一声抱歉,嘻嘻. 让那不愉快的情绪过去吧,继续进行我们的jQuery之旅吧. 一:jQuery对象和DOM对象 1. ...
jQuery 学习笔记之二 (jQuery代码风格)
jquery 学习之代码风格对于同一个对象的较多操作,建议每行写一个操作,代码如下: $(this).removeClass() .addClass() .stop() .fadeTo(" ...
jQuery 学习笔记之二 (jQuery代码风格)
jquery 学习之代码风格对于同一个对象的较多操作,建议每行写一个操作,代码如下: $(this).removeClass() .addClass() .stop() .fadeTo("f ...
Jquery学习笔记：获取jquery对象的基本方法
jquery最大的好处是将js对html页面的操作(读写)进行了封装,隔离了浏览器的差异性,并简化了操作,和提供了强大的功能. 在web页面中,所有的js操作都是围绕操作dom对象来的.而jquery ...
jQuery 学习笔记之九 (jQuery 图片提示 )
案例研究网站的超链接和图片提示1.超级链接提示效果浏览器已经自带了超级链接提示,只需要在超链接中加入title属性就可以了.HTML 代码如下:<a href="#" ti ...
jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
jquery学习笔记（-）
Jquery学习笔记(-) Jquery的简介 Jquery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k),兼容各种浏览器(IE6.0+,FF1 ...
jquery学习笔记及常用函数封装
二.JQuery 学习笔记及常用函数封装 https://download.csdn.net/download/weixin_42530002/13087988 1.JQuery入门 (1).css选 ...
JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端学习路线笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
jQuery学习笔记02：核心部分
jQuery学习笔记:核心部分一.$(expr) 1.说明 $(expr) 该函数通过CSS选择器.XPath或html代码来匹配目标元素参数:expr(字符串,一个查询表达式或一段html字符串 ...

JQuery-学习笔记07【高级——JQuery高级案例】

第6节 JQuery高级案例

JQuery_案例1_广告显示和隐藏

JQuery_案例2_抽奖_演示

JQuery_案例2_抽奖_实现

JQuery_插件机制

1、$.fn.extend(object) // 对象级别插件

2、$.extend(object) // 全局级别插件

JQuery-学习笔记07【高级——JQuery高级案例】相关推荐

最新文章

热门文章