![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
jQuery+Ajax
jwz934738949
这个作者很懒,什么都没留下…
展开
-
使用Promise封装ajax方法
const ajax = function (obj) { return new Promise((resolve, reject) => { let method = obj.method || "GET"; let xhr; // 创建xhr if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ..原创 2021-07-03 08:57:02 · 174 阅读 · 0 评论 -
jQuery封装Cookie
封装jQuery的cookie文件,需要使用js文件,名称为jquery.cookie.js;(function ($, window) { $.extend({ // 添加cookie addCookie: function (key, value, day, path, domain) { // 处理默认保存的路径 // 获取文件所在路径,该路径为path let index = window.location.pathname.lastIn.原创 2020-09-09 10:38:46 · 237 阅读 · 0 评论 -
Cookie的使用
Cookie定义当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:当用户访问 web 页面时,他的名字可以记录在 cookie 中。在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。Cookie以键值对形式存储,键=值。使用document.cookie来设置以及获取网页中的cookie window.onload = function (ev) { docum原创 2020-09-09 09:46:05 · 144 阅读 · 0 评论 -
Ajax——JSON
在Ajax中,可以对JSON文件进行相对应的处理,使得JSON文件中的数据能够被引用到网页中来在js中可以使用JSON.parse方法,将JSON转为对象类型的数据;而JSON.stringify方法可以将js数据转为JSON格式的数据JSON格式为{ "name": "admin", "password": "1234", "userroles": "超级管理员"}-php文件导入JSON文件并且输出<?phpecho file_get_contents.原创 2020-09-08 14:30:26 · 108 阅读 · 0 评论 -
Ajax——jQuery封装
function obj2str(data) { data.t = new Date().getTime() var res = [] for (var key in data) { // 在传送数据时,有可能会出现中文,但是中文不被识别 // 使用encodeURIComponent实现对中文的转码 res.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key])) } return原创 2020-09-07 16:04:10 · 123 阅读 · 0 评论 -
Ajax——get与post封装
function obj2str(obj) { obj.t = new Date().getTime() var res = [] for (var key in obj) { // 在传送数据时,有可能会出现中文,但是中文不被识别 // 使用encodeURIComponent实现对中文的转码 res.push(encodeURIComponent(key) + "=" + encodeURIComponent(obj[key])) } return res.原创 2020-09-07 15:43:30 · 124 阅读 · 0 评论 -
Ajax——get封装
function obj2str(obj) { obj.t = new Date().getTime() var res = [] for (var key in obj) { // 在传送数据时,有可能会出现中文,但是中文不被识别 // 使用encodeURIComponent实现对中文的转码 res.push(encodeURIComponent(key) + "=" + encodeURIComponent(obj[key])) } return res.原创 2020-09-07 15:16:05 · 180 阅读 · 0 评论 -
Ajax——get方法
Ajax适用于页面与服务器相互传递数据,并且可以在页面不重新加载的情况下与服务器交换数据Ajax的实现需要以下5个步骤:创建异步对象;设置请求的方式和请求地址;发送请求;监听状态的变化;处理返回结果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax-get</title></head>.原创 2020-09-07 14:06:44 · 1016 阅读 · 0 评论 -
get请求与post请求
get请求与post请求都是对数据进行处理,然后提交到远程服务器的方法请求数据存储的位置不同。get请求会将数据拼接到URL地址的后面(?name1=value1&name2=value2),而post请求会将提交的数据放到请求头当中提交数据大小限制不同。get请求对数据有大小限制,而post请求对数据没有大小限制请求应用场景不同。get请求用于提交非敏感数据与一些小数据,post请求用于提交敏感数据与一些大数据...原创 2020-09-07 08:00:46 · 92 阅读 · 0 评论 -
Ajax基础——PHP基本语法
PHP中定义变量不需要输入关键字,只需要使用$ 符号。例如:$num = 10;代表定义一个名为num的变量,值为10;打印变量使用关键字echo。例如:echo $num;定义数组,使用array方法,例如:$arr = array(1,2,3,4)。但是在打印数组时,不能使用echo,而是使用方法print_r,并且打印的结果为索引与值获取数组中的值直接在数组后加[],输入索引就可以获取到数组中的值条件分支语法if与三目运算? :,switch语句,for循环,while循环与js语法基本一致.原创 2020-09-07 06:43:10 · 165 阅读 · 0 评论 -
jQuery实例——新浪微博
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>新浪微博</title> <link rel="stylesheet" href="css/index.css"> <script src="js/jquery-3.5.1.js"></script> <script原创 2020-09-04 18:18:26 · 155 阅读 · 0 评论 -
jQuery节点操作
添加节点append与appendTo为向元素的最后添加节点的方法。区别是,append方法由添加的元素所调用,参数为添加的内容;而appendTo方法由添加的内容所调用,参数为要添加的元素 const $li = $("<li>新增li节点</li>") $("ul").append($li) $li.appendTo("ul")prepend与prependTo也为添加节点的方法, 但是这两个方法是想元素的首部添加节点,原创 2020-09-04 15:10:25 · 154 阅读 · 0 评论 -
jQuery实例——无限循环滚动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>无限循环滚动</title> <style> * { margin: 0; padding: 0; } div { width: 600px; height: 161px; border:原创 2020-09-04 11:47:30 · 405 阅读 · 0 评论 -
jQuery实例——图标特效
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图标特效</title> <style> * { margin: 0; padding: 0; } ul { width: 400px; height: 300px; border: 1px原创 2020-09-04 10:13:33 · 167 阅读 · 0 评论 -
jQuery的delay和stop方法
delay方法代表延迟,在动画执行完毕之后,执行延迟函数,在延迟之后再执行之后的动作。delay传入一个参数,该参数为延迟的时间 $(".one").animate({ width: 300 }, 2000).delay(2000) $(".one").animate({ height: 300 }, 2000)stop方法为停止动画的执行 //停止当前动画,继续执行后续的动画.原创 2020-09-04 09:37:30 · 422 阅读 · 0 评论 -
jQuery自定义动画
操作属性在使用自定义动画时,可以使用方法animate。其中animate可以有三个参数,也可以有四个参数当animate使用三个参数时,第一个参数为对象类型,代表要元素要进行的变化,第二个参数为动画执行的时间,第三个参数为回调函数,动画执行完毕之后进行的操作当使用四个参数时,其余三个参数都没有变化,第四个参数需要添加在动画执行时间的参数后面。该参数的作用是控制动画执行的速度,有两个值——linear和swing。linear代表匀速,而swing代表先加速后减速。默认为swing $原创 2020-09-04 09:00:12 · 656 阅读 · 0 评论 -
jQuery实例——弹窗广告
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>弹窗广告</title> <style> * { margin: 0; padding: 0; } .ad { position: fixed; right: 0; bottom: 0;原创 2020-09-03 20:57:22 · 148 阅读 · 0 评论 -
jQuery淡入淡出动画
淡入淡出动画,使用fadeIn与fadeOut方法,fadeIn方法来实现淡入动画,而fadeOut方法来实现淡出动画fadeIn与fadeOut的第一个参数为动画显示的事件,第二个参数为回调函数,在动画显示完毕之后执行回调函数可以使用fadeTo方法可以选择淡入的程度,第一个参数为动画效果出现的事件,第二个参数为淡入的程度,第三个参数为回调函数 $("button").eq(0).click(function () { $("div").fadeIn(1400, fun.原创 2020-09-03 20:33:12 · 273 阅读 · 0 评论 -
jQuery实例——下拉菜单
当鼠标移入一级菜单,显示二级菜单,当鼠标移出时,不显示二级菜单在使用动画效果时,可以在动画执行之前,执行stop方法,停止之前执行的动画,避免上次执行的动画对当前执行动画的影响<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>下拉菜单</title> <style> * { margin: 0;.原创 2020-09-02 16:00:18 · 549 阅读 · 0 评论 -
jQuery实例——折叠菜单
点击一级菜单,会弹出二级菜单,并且其他一级菜单会收缩。同时,点击的一级菜单箭头方向会向下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>折叠菜单</title> <style> * { margin: 0; padding: 0; } .nav { lis.原创 2020-09-02 15:40:40 · 1537 阅读 · 0 评论 -
jQuery展开和收起动画
在jQuery中使用展开和收起动画来为菜单添加动画。点击下拉菜单,点击收起菜单。使用slideDown与slideUp方法来实现slideDown代表展开动画,slideUp代表收起动画,与show、hide用法一致。第一个参数为动画显示时间,第二个参数为动画显示完毕执行的操作当执行切换时,可以使用slideToggle方法,与toggle方法一致 $("button").eq(0).click(function () { $("div").slideDown(1500,.原创 2020-09-02 11:19:48 · 1573 阅读 · 0 评论 -
jQuery实例——对联广告
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>对联广告</title> <style> * { margin: 0; padding: 0; } .left { float: left; position: fixed; top: 15原创 2020-09-02 10:19:57 · 155 阅读 · 0 评论 -
jQuery显示与隐藏动画
在jQuery中显示与隐藏动画有特定的方法。show与hide方法,show方法为显示动画,而hide方法为隐藏动画show与hide有两个参数,第一个参数为动画显示与隐藏的时间,第二个参数为回调函数,当动画效果执行完毕之后,再执行。使用toggle函数为切换动画,可以传入切换动画的时间,单位为毫秒 $("button").eq(0).click(function () { $("div").show(1400, function () { alert.原创 2020-09-02 08:20:05 · 929 阅读 · 0 评论 -
jQuery实例——Tab选项卡
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Tab选项卡</title> <style> * { margin: 0; padding: 0; } .box { width: 440px; height: 298px; margin:原创 2020-09-02 07:55:26 · 173 阅读 · 0 评论 -
jQuery实例——电影排行榜
当移入时,显示电影封面与电影简介,移出时,不显示电影细节<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>电影排行榜</title> <style> * { margin: 0; padding: 0; } .box { width: 300px; .原创 2020-09-01 18:08:16 · 299 阅读 · 0 评论 -
jQuery移入移出事件
mouseover与mouseoutmouseover与mouseout可以监听鼠标的移入与移出。mouseover监听移入,mouseout可以监听移出事件但是mouseover与mouseout如果监听父元素的话,当移入父元素的子元素时,子元素也会监听父元素的移入与移出当移入子元素时,会调用父元素的移出事件与子元素的移入事件;移出子元素时会调用子元素的移出事件与父元素的移入事件 $(".father").mouseover(function () { console原创 2020-09-01 17:38:52 · 4552 阅读 · 0 评论 -
jQuery事件委托
事件委托事件委托的作用是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。这种方式能够节约代码量,提高开发效率使用方法delegate来对元素进行事件委托。有三个参数,第一个参数为向那个标签进行事件委托,第二个参数是事件委托的具体类型,第三个参数为具体的事件 $("ul").delegate("li", "click", function () { console.log($(this).html()); })事件委托练习点击链接打开原创 2020-09-01 10:55:43 · 119 阅读 · 0 评论 -
jQuery自定义事件与事件命名空间
自定义事件当不想对原生事件进行监听,而是想自定义一个监听事件时,需要使用on方法来对事件进行监听,输入自定义事件的名称与具体的操作如果只执行on方法的话,事件不会执行,而用户也无法通过操作来执行,需要用到自动触发,使用trigger方法来进行自动触发 $(function () { $(".son").on("myClick", function () { alert("自定义事件执行") }) $(".son").trigger("myC原创 2020-09-01 10:00:16 · 369 阅读 · 0 评论 -
事件冒泡、默认行为与事件自动触发
事件冒泡事件冒泡指的是同时为子元素与父元素添加事件,当触发子元素事件的同时,会触发父元素的事件,这就是事件冒泡为了避免该种情况的发生,可以有两种方式解决。第一种情况可以在子元素的回调函数中添加返回值,返回false;第二种情况是使用一个特殊的方法event.stopPropagation()当使用第二种方式时,需要向回调函数传入event参数 // 第一种方式 $(".son").click(function () { alert("子元素被点击")原创 2020-08-31 18:16:39 · 711 阅读 · 0 评论 -
jQuery事件的绑定与解绑
事件绑定在jQuery中对事件的绑定有两种方式,一种方式是使用eventName,另一种方式是使用oneventName方式只传入一个参数,该参数为一个函数,在函数内部进行具体的操作;而on方式要传入两个参数,第一个参数为字符串类型,输入要绑定的事件名称,第二个参数为函数,进行具体的操作使用jQuery的事件绑定时,可以使用上述两种方式,这两种方式能够对多个事件进行绑定,也可以对同一个事件进行多次绑定。并且后绑定的事件不会覆盖之前绑定的事件,而是会同时绑定,同时生效对于jQuery中给出的事件,可原创 2020-08-31 17:29:10 · 301 阅读 · 0 评论 -
Jquery操作样式与尺寸位置相关方法
操作样式的方法逐个设置:使用css()方法,传入两个参数,第一个参数为样式,第二个参数为具体的值。逐个设置指的是每传入一个样式,就使用一个css方法 $("div").css("width", "150px") $("div").css("height", "150px") $("div").css("background", "blue")链式设置:使用css方法时可以直接使用链式设置来进行样式的操作,使用"."来将不同的css方法连接起来。尽量将链接控制在原创 2020-08-31 11:16:04 · 89 阅读 · 0 评论 -
jQuery操作类与文本值相关方法
操作类相关方法addClassaddClass表示为元素添加类,参数为要添加的类名,类型为字符串类型当添加多个类时,使用空格隔开removeClassremoveClass作用是删除类,参数为要删除的类名,类型为字符串类型当要删除多个类时,使用空格隔开toggleClasstoggleClass方法的作用是对元素的类进行操作。当输入的类名在元素中存在,则删除该类当不存在该类时,自动添加该类到元素中 $(function () { const原创 2020-08-30 21:21:01 · 82 阅读 · 0 评论 -
jQuery案例——attr与prop练习
实现功能:当输入不同的图片地址,点击切换按钮,能够实现图片的切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>attr与prop练习</title> <script src="./js/jquery-3.5.1.js"></script> <script> $(function ()原创 2020-08-30 11:04:07 · 105 阅读 · 0 评论 -
属性和属性节点
属性属性:属性指的是对象身上保存的变量添加属性使用对象名称.属性名称 = 属性值。获取属性使用对象名称.属性名称也可以使用**对象[“属性名称”]**来新增对象属性以及获取属性的值属性节点属性节点指的是在html中为元素标签添加的属性就是属性节点在网页源代码中attributes中所有的内容均为元素的属性节点使用setAttribute()来进行属性节点的新增。有两个参数,第一个参数为要添加的属性名称,第二个参数为添加的属性值,两个参数均为字符串类型使用getAttribute()来获原创 2020-08-30 10:39:22 · 167 阅读 · 0 评论 -
jQuery内容选择器
empty选择器:empty选择器的作用,找到既没有内容,也没有子元素的指定元素parent选择器:找到有内容或者是子元素的指定元素contains选择器:找到包含指定内容的指定元素has选择器:找到包含指定子元素的指定元素 $(function () { // empty选择器 const $div1 = $("div:empty") console.log($div1) // parent选择器 const $div2 = $.原创 2020-08-29 18:25:06 · 107 阅读 · 0 评论 -
jQuery静态方法与实例方法
静态方法与实例方法静态方法与实例方法都是类中的方法,在ES6之前,在定义类时,需要使用函数的方式创建。但是在ES6中可以直接使用关键字class来创建类 class People { }创建静态方法时,需要在类中定义,使用**类名.方法名 = function () {函数内容}**来定义静态方法在调用静态方法时直接使用类名进行调用 People.staticMethod = function () { console.log('静态方法被调用') } Peop原创 2020-08-29 12:13:59 · 197 阅读 · 0 评论 -
jQuery核心函数
jQuery核心函数为:$();或者 jQuery();传递内容可以为函数、字符串、字符串选择器、代码片段、DOM元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.12.4.js"></script> .原创 2020-06-06 09:41:59 · 110 阅读 · 0 评论 -
jQuery入口函数
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。在使用jQuery时,首先需要将jQuery库导入项目中,使用代码<script src="js/jquer原创 2020-06-04 10:39:34 · 219 阅读 · 1 评论