- | 翁章彬 | -谢琰宸 | -陈枫 | -卢佳凯 | -黄炜杰 | -何睿 | -吴守康 | -黄楷钊 | -陈烽杰 | -
| 余金星 | -刘嘉远 | -周泽强 | -洪灿芳 | -薛晖 | -吴明杰 | -胡志文 | -侯锟铖 | -杨晨哲 | - -
| 陈志梁 | -吴泳泰 | -李雅芸 | -詹源铠 | -陈钰锋 | -杨丰华 | -曾鹏 | -吴昊绩 | -吴超 | -
| 胡江雄 | -谷兆明 | -陈洋 | -张平 | -危振山 | -达兴建 | -张静 | -叶小杰 | -周飘 | -
| 贺晋卓 | -李涛 | -赖杰林 | -陈振国 | -刘旭涛 | -江嘉兴 | -田鑫强 | -范雅欢 | -巫晨羿 | -
- | 第一行 | +第一行 | +
| 第二行 | +第二行 | +
| 第三行 | +第三行 | +
| 第四行 | +第四行 | +
| 第五行 | +第五行 | +
喜欢的水果： + + +
+ + + + + +``` + diff --git "a/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/10-02this.md" "b/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/10-02this.md" deleted file mode 100644 index 097cf57..0000000 --- "a/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/10-02this.md" +++ /dev/null @@ -1,244 +0,0 @@ -# this - -**要点** - -- **优先级new 显示 >隐式>默认** -- 在方法中，this 表示该方法所属的对象。 -- 如果单独使用，this 表示全局对象。即window -- 在函数中，this 表示全局对象。 -- 在函数中，在严格模式下，this 是未定义的(undefined)。 -- 在事件中，this 表示接收事件的元素。 -- 类似 call() 和 apply() 方法可以将 this 引用到任何对象。 -- 函数执行时生成this - -## 默认绑定 - -### 直接调用 - -在函数被直接调用时，this 将指向全局对象。在浏览器环境中全局对象是 Window - -**1，在全局作用域中：this永远指向window** - -``` -console.log(this); -console.log(window === this);//true -``` - -**2，在函数作用域中：** - -如果函数直接被调用 this指向window 函数名() - -被对象的对象.属性()调用 函数中的this指向这个对象 - -（1）严格模式下 - -```js -function fun(){ - 'use strict' - console.log(this) -} -fun();//this指向undefined -``` - -（2）非严格模式下 - -```js -function fun(){ - console.log(this) -} -fun();//this指向window -``` - -###独立调用 - -this指向的都是window对象,比如：立即执行函数，闭包 - -1.立即执行 - -```js -//立即执行函数 - (function () { - console.log(this);//window - }()); -``` - -2.闭包：每个函数在执行时候都会生成一个**独一无二的this**, 且它们的指向可能是相同的 - -```js -//闭包 -function fn(){ - console.log(this); //window -function fun1(){ - console.log(this); //window - } - fun1(); -function fun2(){ - console.log(this); //window - } - fun2(); - } -fn() -``` - -## 隐式绑定 - -**定义：规则:谁调用，指向谁。比如，对象调用对象的方法** - -```js - var a = 0; - var obj = { - a: 2, - fn: function () { - console.log(this); //obj本身 - function fn1() { - console.log(this); //window - } - fn1(); //独立调用 - } - } - //执行obj.fn()，形成this - obj.fn(); -``` - -### 隐式丢失 - -定义：就是指隐式绑定的函数丢失绑定对象，从而默认绑定到全局或者undefined（取决于是否使用严格模式） - -1.为函数调用创建别名 - -```js -function foo(){ - console.log(this.a); -} -var obj={ - a:2, - foo:foo -} -var bar=obj.foo; -var a="window"; -bar()//window - -//虽然bar是obj.foo的一个引用，但是bar引用的是foo函数的本身，此时的bar()其实就是一个不带任何修饰的函数调用，所以应用了默认绑定，this为全局 -``` - -2.传入回调函数 - -```js -function foo(){ - console.log(this.a); -} -function doFoo(fn){ - fn(); -} -var obj={ - a:2, - foo:foo -} -var a="window"; -doFoo(obj.foo)//window - -//参数传递其实就是隐式赋值。相当于var fn=obj.foo，与创建别名的结果一样，应用了默认绑定，应该注意的是，return返回一个函数时，也是应用了默认绑定 -``` - -## 显示绑定 - -用法：利用`call ` `apply` `bind`方法:改变`this`的指向 - -###1，bind— 原型中的方法Function.prototype.bind() - -```js -function fn(a){ - this.a = a - console.log(this.a); - } -var obj={ - a:'obj' - } -fn.call(obj,5); -fn.apply(obj,[5]) -var fn1 = fn.bind(obj)(5); -fn1; -``` - -(1),多次bind时只认第一次bind的值 - -```js -function fun(){ - console.log(this) -} -fun.bind(1).bind(2)();//1 -``` - -(2),bind函数中this不会被修改 - -```js -function fun(){ - console.log(this) -} -fun.bind(1); -fun -``` - -###2,父函数是有能力决定子函数的this 指向 - -```js -const arr = [1,2,3]; -arr.forEach( - function (e){ - console.log(this); //window window window - } -) - -``` - -## new 绑定 - -- **当使用 new 关键字调用函数时，函数中的 this 一定是 JS 创建的新对象** - -```js -function GetName(){ - //严格模式，即指定当前为构造函数 - 'use strict' - this.a = 'ABC'; - console.log(this); //指代当前对象GetName - } -GetName(); //独立调用 -var name = new GetName(); -var name1 = new GetName(); -``` - -## 箭头函数中的this - -**要点** - -- **箭头函数this的指向不会发生改变，也就是说在创建箭头函数时就已经确定了它的this的指向了；它的指向永远指向箭头函数外层的 this** -- **箭头函数中this指向不会被call，apply修改** -- **使用箭头函数后，其他的绑定方式无用** - -```js - var a = 'window' - var obj = { - a:'obj', - fn: () => this.a - } - console.log(obj.fn()); - -``` - -# 对象里两种函数书写形式 - -```js - - var obj ={ - //1 - // fn(){ - // console.log('11'); - // } - - //2 - fn: function () { - console.log(this);; - } - } -``` - diff --git "a/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/10-06js\345\237\272\347\241\200\350\257\255\346\263\225.md" "b/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/10-06js\345\237\272\347\241\200\350\257\255\346\263\225.md" deleted file mode 100644 index 901b19a..0000000 --- "a/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/10-06js\345\237\272\347\241\200\350\257\255\346\263\225.md" +++ /dev/null @@ -1,112 +0,0 @@ -# js基础语法 - -## 一.JavaScipt的概念和执行原理 - -（1）JavaScript也是程序语言中的一种，但是JavaScript是嵌入到HTML语言中，直接通过浏览器运行。 - -（2）JavaScript的执行原理：当客户端向服务器端请求某个页面时，服务器端将整个页面中包含JavaScript的脚本代码作为响应内容，发送回客户端机器，客户端浏览器根据发回的网页文件从上往下逐行读取并解析其中的html或者脚本代码。 - -## 二.编写位置 - -（1）直接写在页面标签script里面 - -~~~html -``` - - - - -点击按钮执行一个计算。
+ + + + + +``` + +###5修改 button 元素的背景： + +```js + + + +``` + +###6使用 removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄: + +```js +// 添加This is a paragraph.
+ + $("p").append(" 结尾后."); + ``` + +2. 在被选元素的开头插入内容 + + ```js +This is a paragraph.
+ + $("p").prepend("开头前. "); + ``` + +3. 在被选元素之后插入内容 + + ```js +This is a paragraph.
+ + $("p").after("元素之后插入内容. "); + ``` + +4. 在被选元素之前插入内容 + + ```js +This is a paragraph.
+ + $("p").before("元素之前插入内容. "); + + ``` + +5. 通过 append() 和 prepend() 方法添加若干新元素 + + ```js +This is a paragraph.
+ + var txt1="Text.
"; // 以 HTML 创建新元素 + var txt2=$("").text("Text."); // 以 jQuery 创建新元素 + var txt3=document.createElement("p"); + txt3.innerHTML="Text."; // 通过 DOM 来创建文本 + $("body").append(txt1,txt2,txt3); // 追加新元素 + } + ``` + +6. 通过 after() 和 before() 方法添加若干新元素 + + ```js +This is a paragraph.
+ var txt1="I "; // 以 HTML 创建元素 + var txt2=$("").text("love "); // 通过 jQuery 创建元素 + var txt3=document.createElement("big"); // 通过 DOM 创建元素 + txt3.innerHTML="jQuery!"; + $("p").after(txt1,txt2,txt3); // 在 img 之后插入新元素 + } + ``` + + + +### 元素删除 + +| 元素方法 | 作用 | +| ---------- | ---------------------- | +| remove（） | 标签和标签内容都被移除 | +| empty() | 只移除内容 | + +1. 标签和标签内容都被移除 + + ```js + $('[class="blue"]').remove(); + ``` + +2. 只移除内容 + + ```js + $('[class="green"]').empty(); + ``` + +## 操作元素内容 + +| 方法 | 说明 | +| ----------------- | ---------------------------------- | +| html() | 获取元素的html内容 | +| html('html,内容') | 设定元素的内容 | +| text() | 获取元素的内容，不识别html标签 | +| text('text 内容') | 设置元素的文本内容，不识别html标签 | +| val() | 获取元素的值（表单元素） | +| val('值') | 设定元素的值 | \ No newline at end of file diff --git "a/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/22-11-23jQuery\344\272\213\344\273\266.md" "b/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/22-11-23jQuery\344\272\213\344\273\266.md" new file mode 100644 index 0000000..67ab5bb --- /dev/null +++ "b/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/22-11-23jQuery\344\272\213\344\273\266.md" @@ -0,0 +1,55 @@ +# 事件 + +## 页面事件 + +1. window.onload（多次调用只会执行最后一个） + 当页面所有DOM元素以及所有外部文件（图片、外部 CSS、外部JavaScript等）加载完成之后才会执行。这里的所有DOM元素，指的是HTML部分的代码 + + ``` + + ``` + +2. $(document).ready()（可多次调用） + +## 鼠标事件 + +| 事件 | 说明 | +| --------- | ------------ | +| **click** | 鼠标单击事件 | +| dblclick | 鼠标双击事件 | +| mouseover | 鼠标移入事件 | +| mouseout | 鼠标移出事件 | +| mousedown | 鼠标按下事件 | +| mouseup | 鼠标松开事件 | +| mousemove | 鼠标移动事件 | + +## 键盘事件 + +| 键盘事件 | 触发条件 | +| ----------- | ------------------------ | +| **keydown** | 某个键盘按键被按下 | +| **keyup** | 某个键盘按键被松开 | +| keypress | 某个键盘按键被按下并松开 | + +## 表单（焦点）事件 + +| 事件 | 触发条件 | +| ------ | ------------------------------------------------------- | +| focus | 获取焦点时触发的事件 | +| blur | 失去焦点时触发的事件 | +| select | 当 textarea 或文本类型的 input 元素中的文本被选择时触发 | +| change | 表单改变时触发的事件 | + +## 复合事件 + +#### 1，hover() + +- 该方法相当于mouseover与mouseout事件的组合 + +```js +$("li").hover(function() { + $("li").css("background", "gray"); + },function() { + $("li").css("background", "green"); + }); +``` \ No newline at end of file diff --git "a/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/22-11-24jQuery\344\272\213\344\273\266\345\257\271\350\261\241.md" "b/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/22-11-24jQuery\344\272\213\344\273\266\345\257\271\350\261\241.md" new file mode 100644 index 0000000..f45db16 --- /dev/null +++ "b/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/22-11-24jQuery\344\272\213\344\273\266\345\257\271\350\261\241.md" @@ -0,0 +1,22 @@ +# 事件对象 + +定义：每一个事件的绑定函数，都接受一个事件对象为参数。这个事件对象当中，包括了很多事件的信息。 + +| 事件对象 | 作用 | +| ------------------------------------------------------------ | ------------------------------------------------------------ | +| event.currentTarget | 事件绑定节点 | +| event.target | 事件的触发节点(冒泡行为) | +| event.delegateTarget | 绑定事件的对象，通常就是 event.currentTarget | +| *event.relatedTarget* | 相关的节点，主要用于一些转换式的事件。比如鼠标移入，表示它从哪个节点来的 | +| *event.which* | 标明哪个按键触发了事件，鼠标和键盘的键标识统一在这个属性中了 | +| *event.preventDefault()* **,** *event.isDefaultPrevented()* | 禁止默认行为 | +| *event.stopImmediatePropagation()* **,** *event.isImmediatePropagationStopped()* | 不光禁止冒泡，还终止绑定函数链的继续进行。 | +| *event.stopPropagation()* **,** *event.isPropagationStopped()* | 禁止冒泡 | +| *event.pageX* **,** *event.pageY* | 事件触发时相对于 ***document*** 的鼠标位置 | +| *event.namespace* | 事件触发时的名字空间，比如 ***trigger('click.namespace')\*** | +| *event.data* | 额外传入的数据 | +| *event.result* | 上一个绑定函数的返回值 | +| *event.timeStamp* | 事件触发时的时间，其值为 ***(new Date).getTime()\*** | +| *event.type* | 事件类型 | + +如果一个绑定函数最后返回了 **false** ，则默认是 **event.preventDefault()** 和 **event.stopPropagation()** 行为。 \ No newline at end of file diff --git "a/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/22-11-27jQuery\346\226\271\346\263\225.md" "b/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/22-11-27jQuery\346\226\271\346\263\225.md" new file mode 100644 index 0000000..1b05090 --- /dev/null +++ "b/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/22-11-27jQuery\346\226\271\346\263\225.md" @@ -0,0 +1,101 @@ +##方法 + +### 事件绑定方法 + +1. bind（） + 在被选元素及子元素上添加一个或多个事件处理程序。 + + ```js + $('button').bind({"事件名称1 事件名称2 事件名称3":匿名函数}) + ``` + + + +2. on() + 在被选元素及子元素上添加一个或多个事件处理程序。 + + ```js + $('button').on({"事件名称1 事件名称2 事件名称3":匿名函数}) + ``` + + + **on() 和 click() 的区别:**二者在绑定静态控件时没有区别，但是如果面对动态产生的控件，只有 on() 能成功的绑定到动态控件中 + +3. delegate + + 为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。 + + ```js + $('button').delegate({"事件名称1","事件名称2 事件名称3":匿名函数}) + ``` + +### 解绑函数 + +1. off() + 不带参时默认全部事件解绑 + 带参数时，解绑指定事件 + +2. unbind + 2.1该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。 + + 2.2只能解绑用jQuery的bind方法以及用jQuery方法注册的事件处理程序。 + + ```js + $("选择器").unbind():如果没有参数，则表示解绑该元素绑定的所有事件 + $("选择器").unbind("事件名称")：解绑该元素绑定的某种事件。 + $("选择器").unbind("事件名称","事件名称"):多个参数之间用逗号隔开，表示解绑多个事件。 + ``` + +### event + +当回调函数被触发后，它们的参数通常是一个事件对象event。 + +##### 1、event方法： + +- **preventDefault**：取消浏览器默认行为。 +- **stopPropagation**：阻止事件向上层元素传播。 + +```js + +``` + +### 过滤方法 + +| 过滤器名 | jQuery语法 | 说明 | 返回值 | +| -------- | ------------------------------------------------------------ | ---------------------------------- | --------------------- | +| is() | $(*selector*).is(*selectorElement,*function*(index*,*element)*) | 用于查看选择的元素是否匹配选择器。 | bool | +| not() | $('[class=fruit]').not(':checked'); | 过滤“不符合条件”的元素 | 余下符合条件的元素 | +| filter() | $('li').filter('.red') | 选取符合条件的元素 | 集合元素 | +| has() | $('ul').has('li') | 检测某个元素是否在另一个元素中： | 集合元素 | +| hasClass | $('from').hasClass(“类名”) | 用于判断元素是否包含指定的类名 | bool | +| eq() | $(':checked').eq('index') | 根据元素集合的下标来过滤 | 返回下标为index的元素 | + +## 事件委托 + +``` +//target:源对象 +//currenttarget:当前调用该事件的对象 +//delegatetarget:委托对象 + $('ul').click( + function (event) { + var e = event || window.event; + console.log(this==e.currentTarget); + } + ) +``` + diff --git "a/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/22-11-29Ajax.md" "b/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/22-11-29Ajax.md" new file mode 100644 index 0000000..f895d39 --- /dev/null +++ "b/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/22-11-29Ajax.md" @@ -0,0 +1,93 @@ +# 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 + +```js + +``` \ No newline at end of file diff --git "a/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/22-12-01Ajax02.md" "b/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/22-12-01Ajax02.md" new file mode 100644 index 0000000..7d984b6 --- /dev/null +++ "b/49\347\224\260\351\221\253\345\274\272/\347\254\224\350\256\260/22-12-01Ajax02.md" @@ -0,0 +1,130 @@ +#一，jQuery Ajax + +#### 1，$.get()；执行get请求方式的ajax + +``` + $('button').eq(0).click( + function () { + $.get('data.json',{a:100,b:200},function (data) { + console.log(data); + },'json'); + } + ) +``` + +#### 2，$.post()；执行post请求方式的ajax + +``` + $('button').eq(1).click( + function () { + $.post('data.json',{a:100,b:200},function (data) { + console.log(data); + },'json'); + } + ) +``` + +#### 3，$.getJSON() + +- 通过Ajax获取服务器中JSON格式的数据 +- “全局方法”，直接定义在jQuery对象（即“$”）下的方法 + +``` + $('button').eq(2).click( + function () { + $.getJSON('data.json',function (data) { + console.log(data); + }) + } + ) +``` + +#### 4，$.getScript()；动态加载JavaScript的方法 + +- 通过AJAX来获取并运行一个外部JavaScript文件 +- 异步跨域加载JavaScript文件，可避免提前加载JavaScript文件 +- 减少服务器和客户端的负 担，加快页面加载速度 + +``` + $('button').eq(3).click( + function () { + $.getScript('test.js'); + } + ) +``` + +#### 5，$.ajax()；核心方法，所有的其他方法都是在内部使用此方法 + +- 以上方法用ajax（）都能实现 + +``` + $('button').eq(4).click( + function () { + $.ajax({ + url:'data.json', + type:'get', + data:{a:100,b:200}, + success:(data) => console.log(data), + error:()=> console.log('请求失败') + }) + } + ) +``` + +#一 原生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 -- Gitee