From 0e809ffaacdd1dd6eb31add95e1622a67bc939d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=96=9B=E6=99=96?= <2421750128@qq.com> Date: Wed, 30 Nov 2022 13:10:57 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../11.24jQuery\344\270\213.md" | 20 ++++ ...07\346\273\244\346\226\271\346\263\225.md" | 26 +++++ ...07\346\273\244\346\226\271\346\263\225.md" | 31 ++++++ .../\347\254\224\350\256\260/11.29ajax.md" | 103 ++++++++++++++++++ 4 files changed, 180 insertions(+) create mode 100644 "14\350\226\233\346\231\226/\344\275\234\344\270\232/11.24jQuery\344\270\213.md" create mode 100644 "14\350\226\233\346\231\226/\344\275\234\344\270\232/11.28\350\277\207\346\273\244\346\226\271\346\263\225.md" create mode 100644 "14\350\226\233\346\231\226/\347\254\224\350\256\260/11.28\350\277\207\346\273\244\346\226\271\346\263\225.md" create mode 100644 "14\350\226\233\346\231\226/\347\254\224\350\256\260/11.29ajax.md" diff --git "a/14\350\226\233\346\231\226/\344\275\234\344\270\232/11.24jQuery\344\270\213.md" "b/14\350\226\233\346\231\226/\344\275\234\344\270\232/11.24jQuery\344\270\213.md" new file mode 100644 index 0000000..d885187 --- /dev/null +++ "b/14\350\226\233\346\231\226/\344\275\234\344\270\232/11.24jQuery\344\270\213.md" @@ -0,0 +1,20 @@ + diff --git "a/14\350\226\233\346\231\226/\344\275\234\344\270\232/11.28\350\277\207\346\273\244\346\226\271\346\263\225.md" "b/14\350\226\233\346\231\226/\344\275\234\344\270\232/11.28\350\277\207\346\273\244\346\226\271\346\263\225.md" new file mode 100644 index 0000000..68559a8 --- /dev/null +++ "b/14\350\226\233\346\231\226/\344\275\234\344\270\232/11.28\350\277\207\346\273\244\346\226\271\346\263\225.md" @@ -0,0 +1,26 @@ +获取下拉框的值 + +``` +var select = document.getElementById('sel'); + // var option = document.getElementsByTagName('option'); + select.onchange = () =>{ + for (var a of select) { + if (a.selected) { + console.log(a.innerText); + } + } + } +``` + +反选not + +``` +$('#selectAll').change(function () { + var bool = $(this).is(':checked'); + if (bool) { + var truee = $("[class='fruit']").not($(':checked')); + $("[class='fruit']").not(truee).prop('checked',''); + truee.prop('checked','checked'); + } + }) +``` diff --git "a/14\350\226\233\346\231\226/\347\254\224\350\256\260/11.28\350\277\207\346\273\244\346\226\271\346\263\225.md" "b/14\350\226\233\346\231\226/\347\254\224\350\256\260/11.28\350\277\207\346\273\244\346\226\271\346\263\225.md" new file mode 100644 index 0000000..2cf55ee --- /dev/null +++ "b/14\350\226\233\346\231\226/\347\254\224\350\256\260/11.28\350\277\207\346\273\244\346\226\271\346\263\225.md" @@ -0,0 +1,31 @@ +## 事件委托 + +**target** :源对象 + +**currenttarget** :当前调用该事件的对象 + +**jquery**.**on**()绑定方法 + +**on**('事件',元素,函数) + +e.**keycode**：键码值 + +dom创建元素 + +插入元素 + +**clone**():如果是true会连同事件一起复制， + +## 过滤方法 + +**eq**():坐标过滤 + +**is**():p判断当前选择的元素集合中，是否有符合条件的元素有返回true,否则返回false + +**filter**():同辈过滤 + +**has**():子代过滤 + +**find**():查找当前元素的子代 + +**not**():符合条件的排除过滤掉 diff --git "a/14\350\226\233\346\231\226/\347\254\224\350\256\260/11.29ajax.md" "b/14\350\226\233\346\231\226/\347\254\224\350\256\260/11.29ajax.md" new file mode 100644 index 0000000..bb48dda --- /dev/null +++ "b/14\350\226\233\346\231\226/\347\254\224\350\256\260/11.29ajax.md" @@ -0,0 +1,103 @@ +一 什么是Ajax ？ +（1） + +ajax 全名 async javascript and XML(异步JavaScript和XML) + +是前后台交互的能⼒ 也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具 + +AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 + +AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 + +是⼀个 默认异步执⾏机制的功能,AJAX分为同步（async = false）和异步（async = true） + +1.1 AJAX 的工作原理 + +其工作原理基本经过以下几个步骤： + +客户端发送请求，请求交给 xhr。 +xhr 把请求提交给服务。 +服务器进行业务处理。 +服务器响应数据交给 xhr 对象。 +xhr 对象接收数据，由 JavaScript 把数据写到页面上。 +AJAX 工作原理 + +AJAX 的创建步骤 +根据 AJAX 的工作原理，它的创建步骤主要包括： + +创建 XMLHttpRequest 对象，即创建一个异步调用对象。 +创建一个新的 HTTP 请求，并指定该 HTTP 请求的方法、URL 及验证信息。 +设置响应 HTTP 请求状态变化的函数。 +发送 HTTP 请求。 +获取异步调用返回的数据。 +使用 JavaScript 和 DOM 实现局部刷新。 +AJAX 的具体使用 +以下是 使用 AJAX 的完整流程。 + +（2） 什么是同步请求（false） +同步请求是指当前发出请求后，浏览器什么都不能做， + +必须得等到请求完成返回数据之后，才会执行后续的代码， + + 相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。 + + 也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态， + 当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态 +(3) 什么是异步请求？（默认:true） +默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事， +Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。 +一般默认值为true，异步。异步请求可以完全不影响用户的体验效果， +无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。 +二 Ajax的优势 +不需要插件的⽀持，原⽣ js 就可以使⽤ + +⽤户体验好（不需要刷新⻚⾯就可以更新数据） + +减轻服务端和带宽的负担 + +缺点：搜索引擎的⽀持度不够，因为数据都不在⻚⾯上，搜索引擎搜索不到 + +三 Ajax的操作流程 + +首先通过PHP页面将数据库中的数据取出 + +取出后转成json格式的字符串，后利用ajax把字符串返还给前台 + +再利用json.parse解析通过循环添加到页面上 + +那么反之，前端的数据可以利用ajax提交到后台 + +但是后台是没有办法直接把这些数据插入到数据库中，所以要先提交到PHP页面上 最后再由PHP将数据插入到数据库中 + +四 Ajax的使用 +在 js 中有内置的构造函数来创建 ajax 对象 + +创建 ajax 对象以后，我们就使⽤ ajax 对象的⽅法去发送请求和接受响应 + +Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。 + +1.创建⼀个 ajax 对象 + +// IE9及以上 +const xhr = new XMLHttpRequest() +// IE9以下 +const xhr = new ActiveXObject('Mricosoft.XMLHTTP') +上⾯就有了⼀个 ajax 对象 我们就可以使⽤这个 xhr 对象来发送 ajax 请求了 + +6.同源策略 + +两个url必须协议，域名，端口都相等才属于同源，由于安全问题，默认只有同源的地址才能通过ajax来访问 + +不同源地址之间如果需要相互请求，必须服务端与客户端配合 + +6.1跨域请求 + +跨域请求 + +JSONP + +配置代理 + +jsonp 代表传给后端回调函数名称的参数 + +jsonpCallback 具体回调函数名称 -- Gitee