JQuery进阶学习的内容
       1. 动画
       2. 遍历
       3. 事件绑定
       4. 案例
       5. 插

一. 动画

三种方式显示和隐藏元素

1. 1. 默认显示和隐藏方式

1. show([speed,[easing],[fn]])
                   1. 参数：
                       1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
                       2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
                           * swing：动画执行时效果是先慢，中间快，最后又慢
                           * linear：动画执行时速度是匀速的
                       3. fn：在动画完成时执行的函数，每个元素执行一次。

               2. hide([speed,[easing],[fn]])
               3. toggle([speed],[easing],[fn])

代码示例：

<html>
<head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script><script type="text/javascript">//隐藏divfunction hideFn() {$("#showDiv").hide("slow","swing",function(){alert("隐藏了。。。。")});}//展示divfunction showFn() {$("#showDiv").show("slow","swing",function(){alert("显示了。。。。");});}//显示和隐藏切换function toggleFn() { $("#showDiv").toggle("slow");  //第二个参数默认swing}</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()"><div id="showDiv" style="width:300px;height:300px;background:pink">div显示和隐藏
</div>
</body>
</html>

1.2. 滑动显示和隐藏方式

1. slideDown([speed],[easing],[fn])
2. slideUp([speed,[easing],[fn]])
3. slideToggle([speed],[easing],[fn])

<script type="text/javascript">//隐藏divfunction hideFn() {$("#showDiv").slideUp("slow","swing");}//展示divfunction showFn() {$("#showDiv").slideDown("slow","swing");}//显示和隐藏切换function toggleFn() { $("#showDiv").slideToggle("slow");  //第二个参数默认swing}</script>

1.3. 淡入淡出显示和隐藏方式

1. fadeIn([speed],[easing],[fn])
2. fadeOut([speed],[easing],[fn])
3. fadeToggle([speed,[easing],[fn]])

<script type="text/javascript">//隐藏divfunction hideFn() {//$("#showDiv").hide("slow","swing",function(){//    alert("隐藏了。。。。")//});//$("#showDiv").slideUp("slow","swing");$("#showDiv").fadeOut("slow","swing");}//展示divfunction showFn() {//$("#showDiv").show("slow","swing",function(){// alert("显示了。。。。");//});// $("#showDiv").slideDown("slow","swing");$("#showDiv").fadeIn("slow","swing");}//显示和隐藏切换function toggleFn() { //$("#showDiv").slideToggle("slow");  //第二个参数默认swing$("#showDiv").fadeToggle("slow");  //第二个参数默认swing}</script>

二. 遍历

2.1 js的遍历方式

* for(初始化值;循环结束条件;步长)

<html>
<head><meta charset="UTF-8"><title></title><script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">//第一种js遍历方式$(function () {var citys=$("#city li");  //jquery对象//遍历内容for(var i=0;i<citys.length;i++){//alert(i+":"+citys[i].innerHTML);  //jquery对象转化为js进行循环alert(i+":"+$(citys[i]).html());  //jquery对象进行循环}});</script>
</head>
<body>
<ul id="city"><li>北京</li><li>上海</li><li>天津</li><li>重庆</li>
</ul>
</body>
</html>

2.2 jq的遍历方式

    1. jq对象.each(callback)
               1. 语法：
                   jquery对象.each(function(index,element){});
                       * index:就是元素在集合中的索引
                       * element：就是集合中的每一个元素对象
  jquery对象.each(function(){

});
* this：集合中的每一个元素对象

var citys=$("#city li");  //jquery对象li
citys.each(function(index,element) {  //citys就是 jQuery对象//alert(this.innerHTML);  //js对象使用方法//alert($(this).html());    //jquery对象使用方法alert(index+":"+element.innerHTML);});

2. 回调函数返回值：
* true:如果当前function返回为false，则结束循环(break)。
* false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)

//使用js的方式for(var i=0;i<citys.length;i++){if("上海"==citys[i].innerHTML){//break;//直接结束循环continue;  //结束本次循环}alert(i+":"+$(citys[i]).html());  //jquery对象进行循环}*///使用jQuery的方式citys.each(function(index,element) {if ("上海"==element.innerHTML) {//return false;  //结束循环return true;   //结束本次循环}//alert(index+":"+element.innerHTML);alert(index+":"+$(element).html());})});

2. $.each(object, [callback])

var citys=$("#city li");  //jquery对象li
$.each(citys,function(){alert(this.innerHTML);});

3. for..of: jquery 3.0 版本之后提供的方式
for(元素对象 of 容器对象)

var citys=$("#city li");  //jquery对象li
for(li of citys){//alert(li.innerHTML);alert($(li).html());}

三. 事件绑定

1. jquery标准的绑定方式
           * jq对象.事件方法(回调函数)；
           * 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
               * 表单对象.submit();//让表单提交
       2. on绑定事件/off解除绑定
           * jq对象.on("事件名称",回调函数)
           * jq对象.off("事件名称")
               * 如果off方法不传递任何参数，则将组件上的所有事件全部解绑

<html>
<head><meta charset="UTF-8"><title></title><script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function() {$("#btn").on("click",function(){  //on绑定点击事件alert("btn被点击了")});$("#btn2").click(function() {//$("#btn").off("click");  //off解绑click点击事件$("#btn").off();   //off解除btn所有的事件});});</script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
</html>

3. 事件切换：toggle
           * jq对象.toggle(fn1,fn2...)
               * 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....

           * 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
               <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

<html>
<head><meta charset="UTF-8"><title></title><script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" src="../js/jquery-migrate-1.0.0.js"></script><script type="text/javascript">$(function() {$("#btn").toggle(function() {$("#myDiv").css("backgroundColor","red")},function(){$("#myDiv").css("backgroundColor","blue")});});</script>
</head>
<body><input id="btn" type="button" value="事件切换"><div id="myDiv" style="width:300px;height:300px;background:pink">点击按钮变成绿色，再次点击红色</div>
</body>
</html>

四. 案例（广告显示和隐藏）

  1. 广告显示和隐藏<!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>/*需求：1. 当页面加载完，3秒后。自动显示广告2. 广告显示5秒后，自动消失。分析：1. 使用定时器来完成。setTimeout (执行一次定时器)2. 分析发现JQuery的显示和隐藏动画效果其实就是控制display3. 使用  show/hide方法来完成广告的显示*///入口函数，在页面加载完成之后，定义定时器，调用这两个方法$(function () {//定义定时器，调用adShow方法 3秒后执行一次setTimeout(adShow,3000);//定义定时器，调用adHide方法，8秒后执行一次setTimeout(adHide,8000);});//显示广告function adShow() {//获取广告div，调用显示方法$("#ad").show("slow");}//隐藏广告function adHide() {//获取广告div，调用隐藏方法$("#ad").hide("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>

五. 抽奖案例

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>jquery案例之抽奖</title><script type="text/javascript" src="../js/jquery-3.3.1.min.js"></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><!-- 大像框 -->
<divstyle="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><!-- 开始按钮 -->
<inputid="startID"type="button"value="点击开始"style="width:150px;height:150px;font-size:22px"onclick="imgStart()"><!-- 停止按钮 -->
<inputid="stopID"type="button"value="点击停止"style="width:150px;height:150px;font-size:22px"onclick="imgStop()"><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);  //设置结束按钮不可用//给开始绑定单击事件$("#startID").click(function () {//当开始循环时，开始按钮不可用，结束按钮可用$("#startID").prop("disabled",true);  //设置按钮不可用$("#stopID").prop("disabled",false);  //设置结束按钮不可用//设置定时器：20毫秒时间，执行随机函数startId=setInterval(function() {//随机生成角标index=Math.floor(Math.random()*7);  //0.000-0.9999999  --->0.00-6.99999-->0-6$("#img1ID").prop("src",imgs[index]);  //修改src}, 20);});//给结束绑定单击事件$("#stopID").click(function() {$("#startID").prop("disabled",false);  //设置按钮可用$("#stopID").prop("disabled",true);  //设置结束按钮不可用//停止计时器clearInterval(startId);//给大相框的src更换值//$("#img2ID").prop("src",imgs[index]);$("#img2ID").prop("src",imgs[index]).hide();  //先添加隐藏//1秒后显示//$("#img2ID").slideDown(1000);  //添加动画出现//$("#img2ID").fadeIn(1000);$("#img2ID").show(1000);});});</script>
</body>
</html>

六. 插件：增强JQuery的功能

1. 实现方式：
           1. $.fn.extend(object)
               * 增强通过Jquery获取的对象的功能 $("#id")
           2. $.extend(object)
               * 增强JQeury对象自身的功能 $/jQuery

JQuery进阶学习相关推荐

3D视觉从入门到进阶学习路线
01 什么是知识星球? 知识星球是一个高度活跃的社区平台,在这里你可以和相同研究方向的小伙伴一起探讨科研工作难题.交流最新领域进展.分享paper资料.发布高质量的求职就业信息,当然还可以侃侃而谈,吐 ...
jQuery框架学习第二天：jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
javascript与jQuery对照学习总结(一)(一些常规操作)
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>javascrip ...
jQuery框架学习第一天：开始认识jQuery
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
android java服务,Android进阶学习必会：Java Binder中的系统服务
前言这个知识点是Android进阶学习必须掌握的知识点之一,也是高阶Android架构师经常问到的点.在这里分想给大家,希望对大家的工作和学习有所帮助.喜欢本文的记得点赞关注哦~ 在前面的Andro ...
jQuery快速学习
jQuery快速学习 1.$(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们 ...
leetcode与python进阶学习总结
转自:leetcode与python进阶学习总结 l1是一个链表型,val是其属性,以下句子意义为如果l1不为空则取l1.val否则取0,节省代码空间,干净利落 x= l1.val if l1 els ...
ajax请求返回json实例,Jquery Ajax 学习实例2 向页面发出请求返回JSon格式数据
一.AjaxJson.aspx 处理业务数据,产生JSon数据,供JqueryRequest.aspx调用,代码如下: protected void Page_Load(object sender, ...
opencv进阶学习笔记3：像素运算和图像亮度对比度调节
基础版传送门: python3+opencv学习笔记汇总目录(适合基础入门学习) 进阶版目录: python+opencv进阶版学习笔记目录(适合有一定基础) 像素运算要求两张图大小,以及格式(np ...

JQuery进阶学习