From 613e3079f8889663c0703637b764e3d2c081048b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?09=E9=99=88=E7=83=BD=E6=9D=B0sql=E8=BF=9B=E9=98=B6?= <3241892760@qq.com> Date: Mon, 28 Nov 2022 07:37:05 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E6=8F=90=E4=BA=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../11.24jQuery\344\270\213.md" | 129 ++++++++++++++++++ 1 file changed, 129 insertions(+) create mode 100644 "09\351\231\210\347\203\275\346\235\260/\347\254\224\350\256\260/11.24jQuery\344\270\213.md" diff --git "a/09\351\231\210\347\203\275\346\235\260/\347\254\224\350\256\260/11.24jQuery\344\270\213.md" "b/09\351\231\210\347\203\275\346\235\260/\347\254\224\350\256\260/11.24jQuery\344\270\213.md" new file mode 100644 index 0000000..4758a8e --- /dev/null +++ "b/09\351\231\210\347\203\275\346\235\260/\347\254\224\350\256\260/11.24jQuery\344\270\213.md" @@ -0,0 +1,129 @@ +### Jquery + +#### 一、绑定 + +##### 1、bind函数 + +$('选择器').bind({"事件名称":匿名函数}) + +例: + + + $('button').bind('click':function(){}) + //函数内容 + + + +##### 2、on函数 + +两个形参 + +$('选择器').on('事件名称':匿名函数) + +例: + + + $('button').on('click':function(){}) + //函数内容 + + + +三个参数 + +$(“父节点选择器”).on(“事件名称”,“孩子节点,即要绑定的元素”,匿名函数) + +例: + + + $('ul').on('click','li',function(){ + $(this).css("color":"blue") + }) + + + +#### 二、解绑函数 + +##### 1、off() + +不带参时默认全部事件解绑 + +$(function () { + $('#btn').click( + function () { + alert('点击了'); + } + ).dblclick( + function () { + alert('双击'); + } + ).off(); + }) + + + +##### 2、unbind + +unbind方法只能解绑用jQuery的bind方法以及用jQuery方法注册的事件处理程序。 + +用法: + +- $("选择器").unbind():如果没有参数，则表示解绑该元素绑定的所有事件 +- $("选择器").unbind("事件名称")：解绑该元素绑定的某种事件。 +- $("选择器").unbind("事件名称","事件名称"):多个参数之间用逗号隔开，表示解绑多个事件。 + +#### 三、一次事件 + +##### 1、one() + +当前元素只触发一次该事件one(事件类型,function) + +$(function () { + $('#btn').one('click',function () { + alert('点击'); + }) + }) + + + +#### 四、event + +当回调函数被触发后，它们的参数通常是一个事件对象event。 + +##### 1、event方法： + +- **preventDefault**：取消浏览器默认行为。 +- **stopPropagation**：阻止事件向上层元素传播。 + + $(function () { + $('#btn').click( + function (event) { + console.log('btn'); + } + ) +}) +$(function () { + $('#div').click( + function (event) { + console.log('div触发了'); + } + ) +}) + + + + + + + +### hover(鼠标移入移出) + +$(function () { + $('div').hover( + function () { + $(this).css('color','red') + }， + function () { + $(this).css('color','white') + } + ) + }) -- Gitee From e9e1d04ad3f28f7dae8f11ced9815cd410ece1aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?09=E9=99=88=E7=83=BD=E6=9D=B0sql=E8=BF=9B=E9=98=B6?= <3241892760@qq.com> Date: Wed, 30 Nov 2022 13:27:07 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E6=8F=90=E4=BA=A4?= 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 "09\351\231\210\347\203\275\346\235\260/\344\275\234\344\270\232/11.24jQuery\344\270\213.md" create mode 100644 "09\351\231\210\347\203\275\346\235\260/\344\275\234\344\270\232/11.28\350\277\207\346\273\244\346\226\271\346\263\225.md" create mode 100644 "09\351\231\210\347\203\275\346\235\260/\347\254\224\350\256\260/11.28\350\277\207\346\273\244\346\226\271\346\263\225.md" create mode 100644 "09\351\231\210\347\203\275\346\235\260/\347\254\224\350\256\260/11.29ajax.md" diff --git "a/09\351\231\210\347\203\275\346\235\260/\344\275\234\344\270\232/11.24jQuery\344\270\213.md" "b/09\351\231\210\347\203\275\346\235\260/\344\275\234\344\270\232/11.24jQuery\344\270\213.md" new file mode 100644 index 0000000..d885187 --- /dev/null +++ "b/09\351\231\210\347\203\275\346\235\260/\344\275\234\344\270\232/11.24jQuery\344\270\213.md" @@ -0,0 +1,20 @@ + diff --git "a/09\351\231\210\347\203\275\346\235\260/\344\275\234\344\270\232/11.28\350\277\207\346\273\244\346\226\271\346\263\225.md" "b/09\351\231\210\347\203\275\346\235\260/\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/09\351\231\210\347\203\275\346\235\260/\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/09\351\231\210\347\203\275\346\235\260/\347\254\224\350\256\260/11.28\350\277\207\346\273\244\346\226\271\346\263\225.md" "b/09\351\231\210\347\203\275\346\235\260/\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/09\351\231\210\347\203\275\346\235\260/\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/09\351\231\210\347\203\275\346\235\260/\347\254\224\350\256\260/11.29ajax.md" "b/09\351\231\210\347\203\275\346\235\260/\347\254\224\350\256\260/11.29ajax.md" new file mode 100644 index 0000000..bb48dda --- /dev/null +++ "b/09\351\231\210\347\203\275\346\235\260/\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