this is a paragraph!!!
') +``` + +#### 3， 添加元素 + +##### 1，方法 + +| 方法 | 说明 | +| ---------------------------------- | ------------------------------------------------------------ | +| **prepend(content)** | 在被选元素内部的开头插入元素或内容，被追加的content参数，可以是字符，HTML元素标记。 | +| $(content).**prependTo**(selector) | 把content元素或内容加入selector元素开头 | +| **append(content)** | 在被选元素内部的结尾插入元素或内容， 被追加的content参数，可以是字符，HTML元素标记。 | +| $(content).appendTo(selector) | 把content元素或内容插入slector元素内，默认是在尾部 | +| **before()** | 在元素前插入指定的元素或内容: $(selector).before(content) | +| **after()** | 在元素后插入指定的元素或内容: $(selector).after(content) | + +#### 4，删除元素 + +| 方法 | 说明 | +| ------------ | ---------------------------------------------------- | +| **remove()** | 删除所选元素或指定的子元素，包括整个标签和内容一起删 | +| **empty()** | 清除所选元素的内容 | + +#### 5，遍历元素 **each()** + +- index；遍历元素的序列号，从0开始（下标） +- element；当前的元素(===this)，此时是dom元素（index下标对应的内容） + +``` +$(selector).each(function(index,element){ + +}) +``` \ No newline at end of file diff --git "a/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-30\344\272\213\344\273\266\345\257\271\350\261\241.md" "b/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-30\344\272\213\344\273\266\345\257\271\350\261\241.md" new file mode 100644 index 0000000000000000000000000000000000000000..0273cd49c10a71e24b20c2ee5a5831b453d6428d --- /dev/null +++ "b/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-11-30\344\272\213\344\273\266\345\257\271\350\261\241.md" @@ -0,0 +1,135 @@ +### 一，Jquery + +#### 1、绑定 + +##### 1.1 、==bind==函数 + +``` +$('选择器').bind({"事件名称":匿名函数}) +``` + +例: + +``` + +``` + +##### 1.2 、==on==函数 + +两个形参 + +``` +$('选择器').on('事件名称':匿名函数) +``` + +例: + +``` + +``` + +三个参数 + +``` +$(“父节点选择器”).on(“事件名称”,“孩子节点,即要绑定的元素”,匿名函数) +``` + +例: + +``` + +``` + +##### 1.3 delegate（） + +``` +$('.parent').delegate('a', 'click', function () { + console.log('click event on tag a'); +}) +``` + +#### 2、解绑函数 + +##### 2.1、off() + +不带参时默认全部事件解绑 + +``` + +``` + +##### 2.2、unbind + +unbind方法只能解绑用jQuery的bind方法以及用jQuery方法注册的事件处理程序。 + +用法: + +- $("选择器").unbind():如果没有参数，则表示解绑该元素绑定的所有事件 +- $("选择器").unbind("事件名称")：解绑该元素绑定的某种事件。 +- $("选择器").unbind("事件名称","事件名称"):多个参数之间用逗号隔开，表示解绑多个事件。 + +#### 3、一次事件 + +##### 1、one() + +当前元素只触发一次该事件one(事件类型,function) + +``` + +``` + +#### 4、event + +当回调函数被触发后，它们的参数通常是一个事件对象event。 + +##### 1、event方法： + +- **preventDefault**：取消浏览器默认行为。 +- **stopPropagation**：阻止事件向上层元素传播。 + +``` + +``` \ No newline at end of file diff --git "a/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-12-01\346\226\271\346\263\225.md" "b/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-12-01\346\226\271\346\263\225.md" new file mode 100644 index 0000000000000000000000000000000000000000..8f5da9f507a0e9c79ae7e6d8cb922da3ff3b8324 --- /dev/null +++ "b/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-12-01\346\226\271\346\263\225.md" @@ -0,0 +1,98 @@ +### 一，过滤方法 + +| 过滤器名 | jQuery语法 | 说明 | 返回值 | +| -------------- | ---------------------- | -------------------------- | -------- | +| :first | $('li:first') | 选取第一个元素 | 单个元素 | +| :last | $('li:last') | 选取最后一个元素 | 单个元素 | +| ==:not== | $('li:not(.red)') | 选取class不是red的li的元素 | 集合元 | +| :even | $('li:even') | 选取索引是偶数的所有元素 | 集合元素 | +| ==:eq(index)== | $('li:eq(下标)') | 选取索引等于index的元素 | 单个元素 | +| ==is()== | $('li').is('.red') | 传递选择器 | 集合元素 | +| ==filter()== | $('li').filter('.red') | 选取符合条件的元素 | 集合元素 | + +#### 1，选择器过滤： ==filter()==；使用选择器来选取符合条件的元素 + +``` +$().filter(selector or fn) +``` + +#### 2，子代元素过滤：==has()==；运行速度快 + +``` +$().has(selector) +``` + +#### 3，类名过滤: ==hasClass()==；根据元素的class来过滤 + +- 用于判断元素是否包含指定的类名：返回TRUE或FALSE + +``` +$().hasClass(“类名”) +``` + +#### 4，下标过滤: ==eq()==；根据元素集合的下标来过滤 + +- 下标从0开始，正数表示正数下标第几个元素，负数表示倒数第几个元素 + +``` +$().eq(n) +``` + +#### 5，判断过滤: ==is()==；根据某些条件进行判断，然后选取符合条件的元素，返回TRUE或FALSE + +``` +$().is(selector) +//判断元素是否可见 +$().is(":visible") +//判断元素是否处于动画中 +$().is(":animated") +//判断单选框或复选框是否被选中 +$().is(":checked") +//判断当前元素是否第一个子元素 +$(this).is(":first-child") +//判断文本中是否包含jQuery这个词 +$().is(":contains('jQuery')") +//判断是否包含某些类名 +$().is(".select") +``` + +#### 6，反向过滤: ==not()==；过滤“不符合条件”的元素，返回余下符合条件的元素 + +``` +$().not(selector或fn) +``` + +### 二、遍历元素（each()） + +``` +$('li').each(function(index, element){ …… }) +``` + +- each()方法接收一个匿名函数作为参数，该函数有两个参数：index，element。 +- index是一个可选参数，它表示元素的索引号（即下标）。通过形参index以及配合this关键字 +- element是一个可选参数，它表示当前元素，可以使用(this)代替。也就是说，(element)等价于 $(this) + +### 三、事件委托 + +``` +//target:源对象 +//currenttarget:当前调用该事件的对象 +//delegatetarget:委托对象 + $('ul').click( + function (event) { + var e = event || window.event; + console.log(this==e.currentTarget); + } + ) +``` + +### 四、阻止默认行为（event） + +``` + $('a').click( + function (event) { + var e = event || window.event; + e.preventDefault(); + } + ) +``` \ No newline at end of file diff --git "a/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-12-02\345\216\237\347\224\237Ajax.md" "b/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-12-02\345\216\237\347\224\237Ajax.md" new file mode 100644 index 0000000000000000000000000000000000000000..a54a7d5acbce036a6c7fa3453db679329ac3e3c5 --- /dev/null +++ "b/31\345\220\264\346\254\243\347\207\225/\347\254\224\350\256\260/2022-12-02\345\216\237\347\224\237Ajax.md" @@ -0,0 +1,151 @@ +### 一，Ajax + +#### 1，概念与特点； + +- 一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互 +- 使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载 + +#### 2. AJAX 的优缺点 + +- 不需要插件的⽀持，原⽣ js 就可以使用 +- 用户体验好（不需要刷新页面就可以更新数据） +- 减轻服务端和带宽的负担 +- 缺点：搜索引擎的支持度不够 + +### 二，http + +#### 1，简述 + +- 超文本传输协议(HyperText Transfer Protocol)规定了Web浏览器如何从Web服务器获取文档和向Web服务器提交表单内容，以及Web服务器如何响应这些请求和提交 + +#### 2，属性 + +##### （1） responseText：作为响应体返回的文本 + +##### （2） responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档 + +##### （3） status：响应的 HTTP 状态 + +##### （4） statusText：响应的 HTTP 状态描述 + +##### （5） readyState：返回HTTP请求状态 + +- 0 open()尚未调用 UNSENT +- 1 open()已调用 OPENED +- 2 接收到头信息 HEADERS_RECEIVED +- 3 接收到响应主体 LOADING +- 4 响应完成 DONE，所有的浏览器都触发该事件 + +##### （6） readystatechange 请求状态改变事件 + +#### 3，http请求 + +##### （1）创建对象；XMLHttpRequest() + +##### （2）请求设置；open("GET","路径",true) + +##### （3）发送请求；send() + +``` +var newAj=new XMLHttpRequest(); + newAj.open("GET","json练习.json",true); + newAj.send(); + newAj.onreadystatechange=function(){ + if (newAj.readyState==4) { + if (newAj.status==200) { + var obj=JSON.parse(newAj.responseText); + console.log(obj); + } + } + } +``` + +### 三，JSON与对象之间的转换 + +#### 1，JSON.stringify(obj):将对象转成json数据格式 + +#### 2，JSON.parse(json):将json转成对象 + +``` + +``` + +#### 3，遍历 for in + +``` + +``` + +### 原生AJAX + +#### 1，GET方法；传送数据量小，处理效率高，安全性低，会被缓存 + +- send()中不需要添加任何参数,因为在连接服务器的时候就已经发送 +- get请求就不必要设置 xhr.setRequestHeader(header,value) + +``` +var newAj=new XMLHttpRequest(); + newAj.open("GET","json练习.json",true); + newAj.send(); + newAj.onreadystatechange=function(){ + if (newAj.readyState==4) { + if (newAj.status==200) { + var obj=JSON.parse(newAj.responseText); + console.log(obj); + } + } + } +``` + +#### 2，post方法;传送数据量大，处理效率低，安全性高，不会被缓存 + +- send()中需要添加参数，建议设置请求头 +- 参数可以是null或者xhr.send()|send(带有参数的)post请求在传递值的情况下必须 设置 xhr.setRequestHeader(header,value) + +``` + var xhr = new XMLHttpRequest(); + xhr.open('post', 'data.json', true); + xhr.send({ a: 100, b: 200 }); + //设置行头 + xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + xhr.onreadystatechange = function () { + if (xhr.readyState == 4 && xhr.status == 200) { + console.log(xhr.response['No1']); + // 手动转成对象 + // var obj = JSON.parse(xhr.response); + } + } +``` + +#### 3.响应数据处理；将返回的json类型的数据转换成对象 + +##### 1，手动转换 + +``` +var obj = JSON.parse(xhr.response) +console.log(obj.name) +``` + +##### 2，自动转换 + +``` +//创建对象后设置: +xhr.responseType = 'json'; +console.log(xhr.response.name) +``` \ No newline at end of file