【1】动画

有 3 种方式显示和隐藏元素！

①、"默认"显示和隐藏方式

1. show([speed,[easing],[fn]])参数：1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"* swing：    动画执行时效果是 先慢，中间快，最后又慢* linear：  动画执行时速度是匀速的3. fn：在动画完成时执行的函数，每个元素执行一次。2. hide([speed,[easing],[fn]])3. toggle([speed],[easing],[fn])4. 例如： 隐藏divfunction hideFn() {//500ms 后 隐藏完毕$("#showDiv").hide(500, "swing", function () {alert("隐藏div");});}

②、"滑动"显示和隐藏方式

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

③、 "淡入淡出"显示和隐藏方式

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

【2】遍历

①、JS 的遍历方式

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

②、JQ 的遍历方式

【1】方式一

1. 语法：
JQuery对象.each(function(index, element){ 代码 });* index:  就是元素在集合中的索引* element：    就是集合中的每一个元素对象* this： 集合中的每一个元素对象var citys = $("#city li");citys.each(function (index, element) {//1. 获取对象：this（代表当前正在遍历的对象）alert(this.innerHTML);//2. 获取对象：传递一个参数占位符//2.1 中断循环if ("上海" == this.innerHTML){//如果function的return为false，那么结束循环//如果return true，continuereturn true;}alert("index:" + index + $(element).html());});2. 回调函数返回值：* true:如果当前function返回为false，== (break)。* false:如果当前function返回为true，== (continue)

【2】方式二

1. 语法：$.each(object, [callback])
2. 示例：$.each(citys, function () {alert($(this).html());});

【3】方式三

1. 语法：for..of: jQuery 3.0 版本之后提供的方式
2. 示例：for(元素对象 of 容器对象)

【3】事件绑定

①、标准的绑定方式

 1. 语法：JQ对象.事件方法(回调函数);//1. 给name 绑定鼠标移动事件（多个事件）$("#name").onmouseover(function () {代码});$("#name").onmousedown(function () {代码});//2. 简化操作：链式编程$("#name").onmousedown(function () {代码}).onmouseover(function () {});2. 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。* 表单对象.submit();//让表单提交

②、on 绑定 / off 解除绑定

1. 语法：* jq对象.on("事件名称", 回调函数)* jq对象.off("事件名称")$(function () {$("#btn").on("click", function () {alert("使用on绑定了click事件");});});//解绑$("#btn2").click(function () {$("#btn").off("click");});2. 注： 如果off方法不传递任何参数，则将组件上的所有事件全部解绑

③、事件切换：toggle

1. 语法：* jq对象.toggle(fn1, fn2...)注：当单击JQ对象对应的组件后，会执行 fn1.第二次点击会执行 fn2.....//点击按钮变成绿色，再次点击红色$(function () {$("#btn").toggle(function () {$("#mydiv").css("backgroundColor", "green");}, function () {$("#mydiv").css("backgroundColor", "pink");})});2. 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

【4】案例

①、广告显示和隐藏

需求：1. 当页面加载完，3秒后。自动显示广告2. 广告显示5秒后，自动消失。分析：1. 使用定时器来完成。setTimeout (执行一次定时器)。2. 分析发现JQuery的显示和隐藏动画效果其实就是控制了元素的display属性3. 使用 show/hide 方法来完成广告的显示。

<script> //入口函数，在页面加载完成之后，定义定时器，调用两个方法$(function() {//定义定时器，调用adShow方法 3秒后执行一次setTimeout(adShow, 3000);//定义定时器，调用adHide方法，5秒后再执行一次setTimeout(adHide, 8000);});//显示广告function adShow() {//获取广告div，调用"显示"方法$("#ad").show("slow");}//隐藏广告function adHide() {//获取广告div，调用"隐藏"方法$("#ad").hide("slow");}
</script>

②、随机图片

分析：1. 给开始按钮绑定单击事件1.1 定义循环定时器1.2 切换小相框的src属性* 定义数组，存放图片资源路径* 生成随机数。数组索引2. 给结束按钮绑定单击事件2.1 停止定时器2.2 给大相框设置src属性3. 优化：3.1 页面加载后第一次点击只能点开始。3.2 图片的出现效果变为缓和。

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;    //开始定时器的id
var 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);});
});

【5】插件

①、作用

增强 JQuery 的功能

②、实现方式：

 $.fn.extend(object) * 增强通过JQuery获取的对象的功能，使其能够调用全局方法$("#id").全局方法();$.extend(object)* 增强JQeury对象自身的功能   $或jQuery.全局方法

③、案例

需求

使用 JQuery 插件给 JQ 对象添加2个增强方法

check() ：选中所有复选框，
uncheck(): 取消选中所有复选框.

代码

需求

对全局方法扩展 sum 方法

代码

【1】JQuery 基础部分

【2】JQuery 高级部分相关推荐

JQuery-学习笔记07【高级——JQuery高级案例】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
java day45【JQuery 高级：动画，遍历，事件绑定，案例，插件】
第一章 JQuery 高级 1. 动画 1. 三种方式显示和隐藏元素 1. 默认显示和隐藏方式 1. show([speed,[easing],[fn]]) 1. 参数: 1. speed:动画的速 ...
jquery高级之妙味云课堂笔记
jquery高级基础方法扩充: get:下标和length属性 outerWidth:针对隐藏元素和参数true text():合体的特例 remove():detach() ():():(docu ...
jQuery高级用法、axios、同源与跨域、JSONP以及防抖与节流
重点: 一.jQuery高级用法 1. jQuery实现文件上传 (1)定义UI结构 (2)验证是否选择了文件 ①将 jQuery 对象转化为 DOM 对象,并获取选中的文件列表 ②判断是否选择了文件 ...
JQuery高级（回调函数 clearInterval 插件）
回调函数: 定义:回调函数被认为是一种高级函数,一种被作为参数传递给另一个函数的高级函数.回调函数的本质是一种模式(一种解决常见问题的模式),因此回调函数也被称为回调模式. 简而言之:一个函数在另一个 ...
06-老马jQuery教程-jQuery高级
1.jQuery原型对象解密 jQuery里面的大部分API都是在jQuery的原型对象上定义的.jQuery源码中对原型对象做了简写的处理.也就是说:jQuery.fn === jQuery.pro ...
Jquery高级编程
1.javascript具有等于(==)和等同(===)等号操作符是危险的,因为它在执行比较之前,强制执行类型转换. 2.非侵扰式编程. 3.3.3Jquery的框架结构,待深入理解. 4.选择器 a ...
jQuery高级部分笔记
jQuery 事件冒泡什么是事件冒泡在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回 ...
前端提高篇（101）：jQuery高级方法：extend使用
$.extend()作用: 1.用于将一个或多个对象的内容合并到目标对象 2.为全局对象jQuery添加新的函数参数: 合并对象的基本使用 //创建两个对象 var people1 = {ccy:{ ...

【2】JQuery 高级部分

【1】动画

①、"默认"显示和隐藏方式

②、"滑动"显示和隐藏方式

③、 "淡入淡出"显示和隐藏方式

【2】遍历

①、JS 的遍历方式

②、JQ 的遍历方式

【1】方式一

【2】方式二

【3】方式三

【3】事件绑定

①、标准的绑定方式

②、on 绑定 / off 解除绑定

③、事件切换：toggle

【4】案例

①、广告显示和隐藏

②、随机图片

【5】插件

①、作用

②、实现方式：

③、案例

需求

代码

需求

代码

下一篇

【2】JQuery 高级部分相关推荐

最新文章

热门文章