---

jQuery(2)

jquery的动画（封装了许多的动画方法）

淡入淡出

fadeIn 淡入（display:none）

// 淡入淡出 只改透明度
// fadeIn 淡入（把隐藏变成显示） fadeOut 淡出（把显示的内容隐藏）
$('img').fadeIn(2000,function(){})

fadeOut 淡出

$('img').fadeOut(2000,function(){console.log('成功');
})

显示隐藏

show(针对隐藏的元素 display:none)

//show 参数1为执行时间 回调函数
$('img').show(2000,'linear',function(){console.log('执行完成');
})

hide （针对显示的元素）

//隐藏
$(img).hide(2000,'swing',function(){console.log('hello world');
})

toggle (切换方法) 如果是显示就隐藏 如果是隐藏就显示

//toggle方法 参数1为执行时间 回调函数 第二个参数为速度 如果是显示就隐藏
$('img').toggle(2000,'linear',function(){console.log('执行完成');setTimeout(()=>{//如果是隐藏就显示$(this).toggle(2000,'swing',function(){console.log('hello world');})},2000)
})

动画方法（相当于我们之前封装animated.js）

animate

所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能

//div从左移到右  宽高变成300 移动完再移动回来
// 第一个参数为object 需要变化的内容 第二个参数为执行的时间  第三个参数为回调的方法
$('div').animate({'width':300,'height':300,'left':300},2000,'swing',function(){console.log('执行成功');$(this).animate({left:0},2000)
})

stop

//停止动画
$('div').stop()

finish

//终止动画 达到动画结束状态
$('div').finish()

jquery的ajax

get

//url地址 params参数 回调方法
//第一个url地址（不能省略） 第二个为参数是对象的形式传输的（可省略） 第三个回调方法 得到数据
$.get('https://jsonplaceholder.typicode.com/todos',{id:1},function(res){console.log(res);
})

post

//url地址 params参数 回调方法
//第一个url地址（不能省略） 第二个为参数是对象的形式传输的（可省略） 第三个回调方法 得到数据
//https://jsonplaceholder.typicode.com/todos 这个接口是一个rest接口 rest规范里面post做的是添加操作
$.post('http://useker.cn/login',{uname:'abc',upwd:'123'},function(res){console.log(res);
})

Ajax

//类似于我们封装的ajax方法 里面需要传入一个对象
$.ajax({url:'https://jsonplaceholder.typicode.com/todos',//请求地址type:'GET',//请求方式data:{id:2},//携带数据dataType:'JSON',//数据类型async:true,//是否异步 默认为truesuccess:function(res){//成功的回调console.log(res);},error:function(err){//失败的回调console.log(err);},complete(){ //这个是请求结束的回调console.log('结束了');}
})

getJson方法

// $.getJSON() //获取JSON格式数据
$.getJSON('https://jsonplaceholder.typicode.com/todos',function(res){console.log(res);
})

Ajax的全局函数

//全局的钩子函数
$(window).ajaxStart(function(){console.log('ajax开始发送');
})
$(window).ajaxSend(function(){console.log('ajax请求发送');
})
$(window).ajaxStop(function(){console.log('ajax请求停止');
})
$(window).ajaxSuccess(function(){console.log('ajax发送成功');
})
$(window).ajaxError(function(){console.log('ajax请求失败');
})
$(window).ajaxComplete(function(){console.log('ajax请求完成');
})

Jquery的jsonp请求

//jquery发送jsonp请求
$.ajax({url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',data:{wd:'游戏'},dataType:'jsonp',//指定为jsonp返回jsonp:'cb',//他要接收的函数的键jsonpCallback:'fn', //回调函数名字success(res){console.log(res);},timeout:1000 //超时时间}
)

Jquery的多库共存

jquery里面是不是我们使用的最多的是$

有一天我们导入了另外一个库（这个库也是使用$来调用）

jquery给我们提供了一个方法 来帮助我们禁用这个$

//利用jquery的方法来禁用$
// $.noConflict()
//当上面的方法调用完 对应$就不能再使用了
// console.log($('div'));
//同时禁用$ 以及 jquery
// $.noConflict(true) //是否全部禁用
// console.log(jQuery('div'));
let sos = $.noConflict(true) //这个sos就替代了jQuery以及$
console.log(sos('div'));

Jquery的扩展

现在我们自己想实现一个功能而jquery没有对应的方法 这个时候我们可以再jquery的上面扩展一个方法

$.extend(obj)

//我想在jquery上面扩展俩个方法 一个叫min 一个叫max
//使用jquery对象来继承一个对象 那么对应的jquery就拥有了这个对象的方法
$.extend({max:function(...arg){let maxIndex = 0arg.forEach((v,index) => {if(arg[maxIndex]<v){maxIndex = index}});return arg[maxIndex]
}})
$.extend({min:function(...arg){let minIndex = 0arg.forEach((v,index) => {if(arg[minIndex]>v){minIndex = index}});return arg[minIndex]
}})
console.log($.max(1,2,3));
console.log($.min(1,2,3));

扩展给对应的原型 $.fn.extend(对象)

//扩展给原型
$.fn.extend({check:function(){console.log('hello');},move:function(left){$(this).css('position',"absolute")// $(this).css('left',left)$(this).animate({'left':left},300)}
})
$('div').check()
$('div').move(150)

jQuery(2) jquery的动画,jquery的ajax,Ajax的全局函数,Jquery的多库共存,Jquery的扩展相关推荐

1. jQuery（三）—— jQuery 事件 / jQuery 拷贝对象 / 多库共存 / jQuery 插件

   本系列笔记大概分为三篇,已完结. 参考:jQuery API 3.5.1 速查表:黑马 pink 老师前端入门 系列笔记: jQuery(一)-- jQuery 概述 / jQuery 选择器 / j ...

2. 一款基jquery超炫的动画导航菜单

   今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览   ...

3. jQuery内置动画和多库共存

   <!-- 淡入淡出: 不断改变元素的透明度来实现的 1. fadeIn(): 带动画的显示 2. fadeOut(): 带动画隐藏 3. fadeToggle(): 带动画切换显示/隐藏 --& ...

4. jQuery图片自动轮转动画特效

   本例的功能是用jQuery图片自动轮转动画特效实现阿里巴巴首页图片动画效果. 所用到的图片截图: 从网上下载一个jQuery文件jquery.js: 具体HTML网页代码如下: <!DOCTYP ...

5. 深入学习jQuery的三种常见动画效果

   前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画是一个大的系列,本文将详细介绍jQuery的三种常见动画效 ...

6. jQuery ajax - ajax()

   jQuery ajax - ajax() 方法 jQuery Ajax 参考手册 实例 通过 AJAX 加载一段文本: jQuery 代码: $(document).ready(function(){ ...

7. 深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

   当我们用javascript写ajax程序写得很"开心"的时候,突然有人告诉你有一种东西叫jquery,它会告诉你不直接和HttpRequest是多么的快乐,同时你再也不需要再烦恼 ...

8. jQuery中的渐变动画效果

   jQuery中的渐变动画效果jQuery中的渐变动画效果 转载于:https://www.cnblogs.com/DreamDrive/p/5780292.html

9. jQuery Ajax - ajax()方法，参数注释

   jQuery Ajax - ajax()方法,参数注释 ajax(参数注释,解答): $.ajax({// type,请求方式type: "get", // url,地址,就是ac ...

最新文章

1. tnsping通oracle连不上,写正确了tnsnames文件却tnsping无法ping通
2. 短信服务模块工期估算
3. 封装JDBC事务操作，执行存储过程测试
4. matplotlib 简单试用
5. Disruptor 创建过程
6. 电脑远程服务_电脑远程维修专家在线服务
7. 阅读笔记-游戏开发中的人工智能-第6章-基本路径寻找及航点应用
8. c语言 倒计时不清屏_c语言 清屏函数
9. 【C++从青铜到王者】第二十七篇:特殊类设计
10. 我对计算机基础的认识,我对计算机的认识
11. Matlab符号运算（符号的创建和简单运算、函数求导、不定积分和定积分、解方程组）代码和解释
12. imToken的创始人何斌：让区块链泛式革命在社区蔓延开来
13. VR/AR 技术学习园地
14. 怎么加载网页背景图随浏览器等比例缩放（css）
15. 自己整理的前端编码规范,各位码友们想到了其它的可以留言补充
16. video视频快进拖动限制
17. 谁说大厂都用 React，微信读书官网用 Vue
18. 【附源码】Python计算机毕业设计软件学院社团管理系统
19. 如何做好SEO优化？
20. SSH远程访问与TCP Wrappers 访问控制（基础概述及配置操作）

热门文章

1. vts传感器采取船舶的_船舶交通服务系统介绍
2. Java转Android：第4天 用Layout布局实现罗盘和三叉戟
3. 【软件测试】按照开发阶段划分：单元测试、集成测试、系统测试
4. 金额格式化，保留金额后两位小数点
5. 算法：将一天24小时按每半小划分成48段
6. 20_微信小程序-BLE低功耗蓝牙开发-发布小程序
7. Android设备信息获取
8. 人生感悟之——因果关系
9. 仿”知乎“网站用到的表
10. 什么是可以文言文字翻译的呢？