diff --git "a/\350\214\203\351\233\205\346\254\242/\344\275\234\344\270\232/10.12 \345\257\271\350\261\241\344\275\234\344\270\232.md" "b/\350\214\203\351\233\205\346\254\242/\344\275\234\344\270\232/10.12 \345\257\271\350\261\241\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..f2ac7949bc81f874f619adabd9e80fe4cbfd2ad6 --- /dev/null +++ "b/\350\214\203\351\233\205\346\254\242/\344\275\234\344\270\232/10.12 \345\257\271\350\261\241\344\275\234\344\270\232.md" @@ -0,0 +1,115 @@ +#### 题目 + +```js + +``` + +我们根据需要，可以students.prototype 属性指定新的对象，来作为students的原型对象。但是这个时候有个问题，新的对象的constructor属性则不再指向students构造函数了。 + +3. _ **proto** _ 属性 + +用构造方法创建一个新的对象之后，这个对象中默认会有一个属性__proto__, 这个属性就指向了构造方法的原型对象 \ No newline at end of file diff --git "a/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/10.27 \345\216\237\345\236\213\351\223\276.md" "b/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/10.27 \345\216\237\345\236\213\351\223\276.md" new file mode 100644 index 0000000000000000000000000000000000000000..0f5234b2feaedf7c14fd0fffa4d76e56816eb5ce --- /dev/null +++ "b/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/10.27 \345\216\237\345\236\213\351\223\276.md" @@ -0,0 +1,49 @@ +## 原型链 + +所有的原型构成了一个链条，这个链条我们称之为原型链。 + +当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找，即它的构造函数的**prototype**，如果还没有找到就会再在构造函数的**prototype**的__proto__中查找，这样一层一层向上查找就会形成一个链式结构 + +子级没权限 增/改/删 父级的属性,除非父级的属性是引用值 + +```js +var Test = function () { + name:'张静' +} +function Test(){ + this.name = '张静' +} +Test.prototype = { + name:'安可', + sayHi: function(){ + console.log('Hello,I am'+this.name); + } +} +var test = new Test() +test.sayHi(); +Test.prototype.sayHi(); +``` + +#### 示例 + +```js + 例子： +Person.prototype.lastName = "u"; + function Person(name) { + this.name = name; + } + var person = new Person('F'); +// 想要修改lastName必须通过原型来修改，Person.prototype.lastName = " "来修改 +// 如果直接在构造函数Person.lastName来修改，只是在构造函数中增加一个lastName属性 +// 通过对象来修改原型属性是不可能的 +``` + +#### 总结 + + 1.原型__proto__, prototype, constuctor + + 2.原型重写与修改 Test.prototype = {} Test.prototype.name = '' + + 3.原型链，所有子级(自己没有)会引用其父级的属性, 子级一般来说不能修改父级属性,(除非是引用) + + 4.绝大数对象最终都会继承自Object.prototype, 除非使用Object.create(null) \ No newline at end of file diff --git "a/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/10.31 \347\273\247\346\211\277.md" "b/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/10.31 \347\273\247\346\211\277.md" new file mode 100644 index 0000000000000000000000000000000000000000..d1b6eaf419f6c10ee3f4f5a309a066c4c6200bb6 --- /dev/null +++ "b/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/10.31 \347\273\247\346\211\277.md" @@ -0,0 +1,80 @@ +## 继承 + +#### 原型链继承 + +原型链继承是ECMAScript的主要继承方式（传统形式）。其基本思想就是通过原型继承多个引用类型的属性和方法。 + +```js +function Personal () { +} +Personal.prototype = { + constructor:Personal , + name:'hhh', + sayName:function () {} +} +var p = new Personal(); +p.name +p.sayName() +``` + +#### 构造函数继承 + +call和apply方法，将父类构造函数绑定在子类上 + +```js +//父类 +function Person(name, age, sex) { + this.name = name; + this.age = age; + this.sex = sex; +} +//子类 +function Student(name, age, sex, grade) { + //call thi默认指向window + Person.call(this, name, age, sex); + //apply + Person.call(this, [name, age, sex]); + this.grade = grade; +} +var student = new Student('张三',29,'男',2022); +console.log(student.name); +``` + +#### 共享原型 + +可复用成员应该转移到原型中而不是放置在this中。因此，处于继承的目的，任何值得继承的东西都应该放置在原型中实现。所以，可以仅将子对象的原型与父对象的原型设置为相同即可。这种模式能够简短而迅速地原型链查询。 + +```js +function Father(){} +Father.prototype.sex = 'male'; +function Son(){} +//Target:目标 Origin:起源 +function inherit(Target,Origin){ + Target.prototype = Origin.prototype; +} +inherit(Son,Father); +var son = new Son(); +Son.prototype.skill = 'js'; +console.log(son.__proto__.sex); +console.log(son.skill); +var father = new Father(); +console.log(father.skill); +``` + +#### 圣杯模式 + +```js +var inherit = (function(){ + //闭包可以实现属性私有化 + var F = function(){}; + return function(Target,Origin){ + F.prototype = Origin.prototype; + Target.prototype = new F(); + Target.prototype.constructor = Target; //归位 + Target.prototype.uber = Origin.prototype; //超类 + } +}()) +inherit(Son,Father) +var son = new Son(); +var father = new Father(); +``` \ No newline at end of file diff --git "a/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.1 Class\350\257\255\346\263\225\347\263\226\347\273\247\346\211\277.md" "b/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.1 Class\350\257\255\346\263\225\347\263\226\347\273\247\346\211\277.md" new file mode 100644 index 0000000000000000000000000000000000000000..ce81fcd354f805850c675c66b222175a50bd0e88 --- /dev/null +++ "b/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.1 Class\350\257\255\346\263\225\347\263\226\347\273\247\346\211\277.md" @@ -0,0 +1,29 @@ +### Class语法糖继承 + +关键字class从ES6开始正式被引入到JavaScript中。class的目的就是让定义类更简单。 + +class的定义包含了构造函数constructor和定义在原型对象上的函数hello()（注意没有function关键字），这样就避免了Student.prototype.hello = function () {...}这样分散的代码。 + +用class定义对象的另一个巨大的好处是继承更方便了。想一想我们从Student派生一个PrimaryStudent需要编写的代码量。现在，原型继承的中间对象，原型对象的构造函数等等都不需要考虑了，直接通过extends来实现： + +``` +//使用extends继承 +class PrimaryStudent extends Student { + //构造器 + constructor(name, grade) { + super(name); //记得用super调用父类的构造方法!(constructor) + this.grade = grade; + } + //方法 + myGrade() { + alert('I am at grade ' + this.grade); + } +} +``` + +注意PrimaryStudent的定义也是class关键字实现的，而extends则表示原型链对象来自Student。子类的构造函数可能会与父类不太相同，例如，PrimaryStudent需要name和grade两个参数，并且需要通过super(name)来调用父类的构造函数，否则父类的name属性无法正常初始化。 + +PrimaryStudent已经自动获得了父类Student的hello方法，我们又在子类中定义了新的myGrade方法。 + +**ES6引入的class和原有的JavaScript原型继承实际上没有任何区别，class的作用就是让JavaScript引擎去实现原来需要我们自己编写的原型链代码。简而言之，用class的好处就是极大地简化了原型链代码。** + diff --git "a/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.14 DOM.md" "b/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.14 DOM.md" new file mode 100644 index 0000000000000000000000000000000000000000..1d46e26b846e0742fc87e88c43388fb19904c49a --- /dev/null +++ "b/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.14 DOM.md" @@ -0,0 +1,247 @@ +## 元素获取 + +#### 获取特殊元素（body、html） + +``` +//html头部里的title 输出Document + console.log(document.title); +//输出html头部里的全部 + console.log(document.head); +//全部html + console.log(document.documentElement); +``` + +#### 根据选择器获取元素 + +**document.querySelector（）：通过 css 中的选择器去选取第一个符合条件的标签元素** + +**document.querySelectorAll（）：通过 css 中的选择器去选取所有符合条件的标签元素集合（伪数组）** + +**使用时注意：** + +浏览器兼容问题：不支持 IE8 + +需要将 js 代码写在 html 结构之后；不会动态增加 + +### 根据类名获取元素 + +**方法：document.getElementsByClassName()** + +**返回：HTMLCollection集合 **即class 属性值相同的元素对象组成的动态集合（伪数组） + +**参数：字符串类型的 class 属性值** + +此方法内部获取的元素是动态增加的 + +\###4根据 name 获取元素 + +**方法： document.getElementsByName()** + +**参数：字符串类型的 name 属性值。** + +**返回：返回的是NodeList** 即name 属性值相同的元素对象组成的集合（伪数组形式）。 + +不建议使用：在 IE 和 Opera 中有兼容问题，会多选中 id 属性值相同的元素 + +\###5根据标签名获取元素 + +**方法：document.getElementsByTagName()** + +**参数：字符串类型的标签名。** + +**返回：返回的是HTMLCollection集合** 即同名的元素对象组成的集合（以伪数组的形式存储）。 + +根据 id 获取元素 + +**方法： document.getElementById()** + +**参数：字符串类型的 id 的属性值。** + +**返回值：对应 id 名的元素对象。** + +***注意：*** ***代码执行顺序，如果 js 在 html 结构之前，会导致结构未加载，不能获取对应id的元素***** + +### 7子/父/兄弟节点获取 + +| 属性 | 内容 | +| ------------------------------------------------------- | ---------------------------------- | +| document.body.**childNodes** | 获取body的子节点 | +| document.body.**childElementCount** | 获取body的子节点长度 | +| document.body.**firstChild** | 返回第一个**子节点(**包含文本节点) | +| document.body.**firstElementChild** | 返回第一个**元素子节点** | +| document.body.**lastChild** | 返回最后一个**字节点** | +| document.body.**lastElementChild** | 返回最后一个**元素子节点** | +| document.body.**children[0].children[0].parentNode** | 返回父元素，两种方法效果一样 | +| document.body.**children[0].children[0].parentElement** | 返回父元素，两种方法效果一样 | +| document.body.**children[0].nextSibling** | 下一个兄弟节点(包含文本节点) | +| document.body.**children[0].nextElementSibling** | 下一个元素兄弟节点 | +| document.body.**children[1].previousSibling** | 上一个兄弟节点(包含文本节点); | +| document.body.**children[1].previousElementSibling** | 上一个元素兄弟节点 | + +| 方法 | 内容 | +| ---------------------------------- | ------------------------------------------- | +| document.body.**hasChildNodes();** | 判断是否有子节点，有返回true，没有返回false | +| | | + +## 节点层数 + +节点定义：DOM的最小组成单位叫做节点（node），文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。 + +### 节点类型 + +| 节点 | 值 | 释义 | 对应常量 | +| ----------------------------- | ---- | ------------------------------------------------------------ | --------------------------- | +| 文档节点 Document | 9 | 整个HTML文档document对象作为window对象的属性存在的，不用获取可以直接使用 | Node.DOCUMENT_NODE | +| 文档类型节点 DocumentType | 10 | doctype标签 | Node.DOCUMENT_TYPE_NODE | +| 元素节点 Element | 1 | HTML文档中的HTML标签 | Node.ELEMENT_NODE | +| 文本节点 Text | 3 | HTML标签中的文本内容 | Node.TEXT_NODE | +| 注释节点 Comment | 8 | | Node.COMMENT_NODE | +| 文档片断节点 DocumentFragment | 11 | | Node.DOCUMENT_FRAGMENT_NODE | +| 属性节点 Attribute | 2 | 元素的属性 表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分 | Node.ATTRIBUTE_NODE | + +### 节点关系 + +- 父节点关系（parentNode）：直接的那个上级节点 + +- 子节点关系（childNode）：直接的下级节点 （属性；firstChild（第一个子节点），lastChild（最后一个子节点）） + +- 同级节点关系（sibling）：拥有同一父节点的节点 （属性；nextSibling（紧邻在后的那个同级节点），previousSibling（紧邻在前的那个同级节点）） + +- 遍历节点 + + ``` + console.log(document.body.childNodes); + for (var i = 0; i < document.body.childNodes.length; i++) { + node = document.body.childNodes[i]; + console.log(node.nodeType); //节点类型 + console.log(node.nodeName); //节点名称 + console.log(node.nodeValue); //节点值 + } + ``` + +### 节点树 + + + +## DOM级别 + +1. DOM 0 级事件： onclick + +2. DOM 2 级事件：EventTarget.addEventListener(type, listener, useCapture) + +3. | 参数 | 描述 | + | ------------ | ------------------------------------------------------------ | + | *event* | **必须**。字符串，指定**事件名**。 **注意:** 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 | + | *function* | **必须**。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。 | + | *useCapture* | **可选**。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行 | + +## Node + +| | 元素节点 | 属性节点 | 文本节点 | 注释节点 | +| --------- | -------- | -------- | -------- | ---------- | +| nodeType | 1 | 2 | 3 | 8 | +| nodeName | 元素名 | 属性名 | #text | #comment | +| nodeValue | null | 属性值 | 文本值 | 注释的文本 | + +## 操作（增删改子节点） + +``` + + + + + + + Document + + + +
+
+   +   +   + +
+ + +``` + +### appendChild(增加) + +ppendChild方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点 + +``` + +``` + +### removeChild() （删除） + +- removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。返回值是移除的子节点 + +``` + +``` + +### replaceChild() 修改替换 + +- replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点 +- replaceChild方法接受两个参数，第一个参数newChild是用来替换的新节点，第二个参数oldChild是将要替换走的子节点。返回值是替换走的那个节点oldChild + +``` + +``` + +### insertBefore() + +在...前插入... + +- insertBefore方法用于将某个节点插入父节点内部的指定位置，返回值是插入的新节点newNode +- insertBefore方法接受两个参数，第一个参数是所要插入的节点newNode，第二个参数是父节点parentNode内部的一个子节点referenceNode。newNode将插在referenceNode这个子节点的前面 + +``` + +``` \ No newline at end of file diff --git "a/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.15 DOM.md" "b/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.15 DOM.md" new file mode 100644 index 0000000000000000000000000000000000000000..fc37c784aeabb7cad4debdab76a901cfe481d7c8 --- /dev/null +++ "b/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.15 DOM.md" @@ -0,0 +1,196 @@ +## **克隆元素** + +**`Node.cloneNode()`** 方法返回调用该方法的节点的一个副本。 + +``` +var dupNode = node.cloneNode(bool); +``` + +- node:将要被克隆的节点 +- dupNode:克隆生成的副本节点 +- deep:是否采用深度克隆，==默认是false，表示浅拷贝，只拷贝标签，不拷贝内容;如果为 true，则该节点的所有后代节点也都会被克隆== + +示例: + +``` +var h2List = document.querySelectorAll('h2');//获取h2节点 +//cloneNode(bool):true表示内容一起克隆， false:只克隆标签 +var newH2 = h2List[0].cloneNode(true);//克隆h2节点的全部内容 +var box = document.getElementById('box'); +btn.onclick = () => { + box.appendChild(newH2);//向box添加被克隆的h2节点 + var btn = document.getElementById('btn'); +} +``` + +------ + +## 获取属性节点的值 + +- Element.==getAttribute==():返回指定属性的值 +- Element.==setAttribute==():设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。 + +**获取属性节点** + +- Element.getAttributeNode()：返回指定元素的指定属性节点 +- Element.getAttributeNode().value:取得节点值 +- Element.setAttributeNode()为指定的 Element 添加属性节点也可以设置值。 +- +- Element.attributes：返回当前元素节点的所有属性节点 +- Element.attributes.class:除了Class还可以点nodeType, nodeName,nodeValue(**就是标签,元素,节点**) + +``` + + +

我是h2

+``` + +``` +var btn1 = document.getElementById('btn1'); +var myh2 = document.querySelector('h2'); +btn1.onclick = () => { + //获取属性 + var st = myh2.getAttribute('class');//hide + if (st == 'hide') { + //设置属性 + myh2.setAttribute('class', 'show');//class="show" + }else{ + myh2.setAttribute('class', 'hide'); + } +} +``` + +**使用getAttributeNode获取属性节点** + +``` +//第二种方式:使用getAttributeNode获取属性节点的值 +console.log(myH2.getAttributeNode('class'));//Class='hide' +//使用setAttributeNode 设置class的值 +myH2.setAttributeNode('class','show');//Class='show' +``` + +**使用attributes获取所有属性节点** + +``` +console.log(myH2.attributes); +console.log(myH2.attributes.class); //class: nodeType, nodeName, nodeValue +``` + +------ + +## 更新DOM + +拿到一个DOM节点后，我们可以对它进行更新。 + +可以直接修改节点的文本，方法有两种： + +**一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树**： + +``` +// 获取

...

+var p = document.getElementById('p-id'); +// 设置文本为abc: +p.innerHTML = 'ABC'; //

ABC

+// 设置HTML: +p.innerHTML = 'ABCRED XYZ'; +//

...

的内部结构已修改 +id.innerHTML='123'//可以解析HTML文本值 +``` + +用innerHTML时要注意，是否需要写入HTML。如果写入的字符串是通过网络拿到了，要注意对字符编码来避免XSS攻击。 + +**第二种是修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签**： + +``` +// 获取

...

+var p = document.getElementById('p-id'); +// 修改文本的值: +p.innerText = ''; +// HTML被自动编码，无法设置一个 + + + +
+

+ + + +
+ + + +``` + +------ + +#### 反向过滤: not() + +在jQuery中， 我们还可以使用not()方法来过滤“不符合条件”的元素，并且返回余下符合条件的元素。(就是说从匹配的元素集合中移除指定的元素。) + +其中，not()方法可以使用选择器过滤，也可以使用函数过滤。 + +语法： + +``` +$().not(selector或fn) +``` + +**需求描述：设置ul下li标签的背景为红色，排除第二个li** + +``` + +var two = $('ul>li').eq(1); +$('ul>li').not(two).css('background', 'red'); +``` + +------ + +#### 选择器过滤: filter() + +filter[选择器]过滤，指的是使用选择器来选取符合条件的元素。 + +语法： + +``` +$().filter(selector or fn) +``` + +------ + +#### has():过滤子代元素 + +在jQuery中，表达式过滤除了可以使用filter()访问外，我们还可以使用has()方法。has()方法虽然没有filter()方法那么强大，**但是它的运行速度比较快**。 + +作用:保留包含特定后代的元素，去掉那些不含有指定后代的元素。 + +语法： + +``` +$().has(selector|element) +``` + +说明： + +参数selector是一个选择器。element是一个DOM元素 + +has()方法与filter()方法功能相似，不过has()方法只有选择器过滤，没有函数过滤。因此我们可以把has() 方法看成是filter()方法的精简版。 + +**示例:给含有ul的li加上背景色** + +``` + +$('li').has('ul').css('background-color', 'red'); +``` + +------ + +#### index() + +在jQuery中，我们可以使用index()方法来获取当前jQuery对象集合中“指定元素”的索引值。 + +``` +$(selector).index() +``` + +说明： + +index()方法可以接受一个“jQuery对象”或“DOM对象”作为参数，不过一般情况下，我们很少会使用到参 数。当index()不带参数时，一般指的是当前元素相对于父元素的索引值。 + +**示例:** + +``` + +var index= $('li[class=6]').index(); +console.log(index);//1 +``` \ No newline at end of file diff --git "a/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.29 Ajax.md" "b/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.29 Ajax.md" new file mode 100644 index 0000000000000000000000000000000000000000..ace78cb23b220292ea49aba6aee142714cbc4447 --- /dev/null +++ "b/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.29 Ajax.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 + +``` + +``` \ No newline at end of file diff --git "a/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.30 JQueryAjax.md" "b/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.30 JQueryAjax.md" new file mode 100644 index 0000000000000000000000000000000000000000..02721cb432ff612df8220d7e9bae273a68b4d506 --- /dev/null +++ "b/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.30 JQueryAjax.md" @@ -0,0 +1,71 @@ +## JQueryAjax + +``` + + + + + +``` + +$.get() + +``` +$('button').eq(0).click( + function () { + $.get('data.json',{a:100,b:200},function (data) { + console.log(data); + },'json'); + } +) +``` + +$.post() + +``` +$('button').eq(1).click( + function () { + $.post('data.json',{a:100,b:200},function (data) { + console.log(data); + },'json'); + } +) +``` + +getJSON() + +``` +$('button').eq(2).click( + function () { + $.getJSON('data.json',function (data) { + console.log(data); + }) + } +) +``` + +getScript:动态引入js文件 + +``` +$('button').eq(3).click( + function () { + $.getScript('test.js'); + } +) +``` + +$.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('请求失败') + }) + } +) +``` \ No newline at end of file diff --git "a/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.3\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" "b/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.3\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" new file mode 100644 index 0000000000000000000000000000000000000000..05d68e4ea739577a3d21df944a6f93b715193c2c --- /dev/null +++ "b/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.3\346\255\243\345\210\231\350\241\250\350\276\276\345\274\217.md" @@ -0,0 +1,44 @@ +### 正则表达式 + +正则表达式（Regular Expression，简写为regex、regexp 或RE） + +意思是符合某种规则的表达式 + +```js +[0-9] 匹配单个数字0-9 + +[a-zA-Z0-9_] 匹配单个的数字、字母下划线 + +[范围]匹配任意一个除括号范围内的字符 + +[ ^0-9]匹配任意一个非数字字符 + +\w匹配单个的数字、字母下划线 等价于 [a-zA-Z0-9_] + +\W 匹配单个非数字、字母下划线 + +\d 匹配单个数字 等价于 [0-9] + +\D 匹配单个非数字 + +\s一位空白 + +\S一位非空白 + +.任意内容（换行不算）,除去换行符的所有 +``` + +```js +//1.字面量 +var exp = /jhfglah/; +//2.构造函数创建 +var exp1 = new RegExp('fahfahf'); +//test:检测正则是否匹配到，如果匹配成功返回的是true 否则返回的是false +//数量 +//①:{m,n} 匹配最少是m个，最多是n个 +console.log(/\d{1,4}?/.exec('99999')); +//②:{m,} 最少m个，无上限 +console.log(/\d{1,}/.exec('99999999999')); +//③:{m} 匹配指定个数 +console.log(/\d{4}/.exec('999')); +``` \ No newline at end of file diff --git "a/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.8 DOM.md" "b/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.8 DOM.md" new file mode 100644 index 0000000000000000000000000000000000000000..da40655fdee3b4f0b2568640a4c69610c1fe688a --- /dev/null +++ "b/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/11.8 DOM.md" @@ -0,0 +1,254 @@ +### HTML DOM + +HTML DOM定义了访问和操作HTML文档的标准方法。 + +HTML DOM将HTML文档表示为带有元素、属性和文本的树结构（节点树）。 + +在树形结构中，所有的元素及它们包含的文本都可以被DOM树所访问到。 + +HTML DOM独立于语言平台，它可以被任何的语言所使用（如Java，JavaScript） + +#### DOM树（文档树） + +Document对象是所有HTML文档内其他对象的父节点（根节点）。当浏览器加载一个 HTML 文档时，会创建一个 Document 对象。通过 Document 对象我们可以访问 HTML 文档中的所有元素。 + + + +![image-20221204000005660](C:\Users\86178\AppData\Roaming\Typora\typora-user-images\image-20221204000005660.png) + + + +#### 使用DOM访问文档对象的元素 + +DOM提供了两种方法来访问树上的节点： + +1. 通过使用getElementById()方法，getElementsByName()方法和getElementsByTagName()方法 +2. 通过使用一个元素节点的属性 + + + +##### 1.getElementById() + +作用：可返回对拥有指定 ID 的第一个对象的引用。 + +返回值：第一个 匹配到 ID 的 DOM Element 对象。如果当前文档中拥有指定 ID 的元素不存在则返回 null. + +**语法** + +```js +document.getElementById(id); +``` + +| 参数 | 说明 | +| ---- | ------------------ | +| id | 要查找的元素的 ID. | + +**示例** + +```HTML + 变色 + + +``` + + + +##### 2.getElementsByName() + +作用：返回带有指定名称的对象的集合。 + +**语法** + +```js +document.getElementsByName(name) +``` + +| 参数 | 描述 | +| :--- | :----------------- | +| name | 必须。元素的名称。 | + +返回值：是一个实时更新的 `NodeList` 集合。当文档中有同一个 name 属性的元素被添加或移除时，这个集合会自动更新。 + +**示例** + +```HTML + 变色 + + +``` + +##### window.open() - 打开新窗口 + +```html +语法：window.open('链接'): + + + + + + +``` + +##### window.close() - 关闭当前窗口 + +```js +语法：window.close() + + + + + + + +``` + +##### window.setInterval() - 定时器 + +可按照指定的周期（以毫秒计）来调用函数或计算表达式。（ 1000 毫秒= 1 秒。） + +会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。 + +返回值：返回一个 ID（数字），可以将这个ID传递给clearInterval()，用作 clearInterval() 方法的参数，以取消执行。 + +###### 语法 + +```js +setInterval(code|function, milliseconds[, param1, param2, ...]); +``` + +| 参数 | 描述 | +| :------------------ | :----------------------------------------------------------- | +| code/function | 必需。要执行的代码或是调用的函数。 | +| milliseconds | 必需。周期性执行或调用 code/function 之间的时间间隔，以毫秒计。 | +| param1, param2, ... | 可选。 传给执行函数的其他参数 | + +###### 示例 + +```js +/setInterval(code|function, milliseconds[, param1, param2, ...]); + +示例1： + var a={ + food:function (name,foodname){ + console.log(name+"今天吃"+foodname); + } + } + window.setInterval(a.food,600,"小苏","炸鸡") + +示例2： + window.setInterval(function (){console.log("吃了吗")},700) + +示例3： +function name(params) { + console.log("在干嘛") + } + window.setInterval(name,500) + +示例4: +function name(params) { + console.log(params+"在干嘛") + } + window.setInterval(name,500,"安梅") +``` + + + + + +##### window.clearInterval() + +能够取消 setInterval() 方法设置的定时器。 + +语法 + +```js +//id_of_setinterval——调用 setInterval() 函数时所获得的返回值 +clearInterval(id_of_setinterval) +``` + +###### 实例 + +```js + var sum=0; + var a={ + food:function (name,foodname){ + console.log(name+"今天吃"+foodname); + sum+=1; + if(sum==10){ + window.clearInterval(cc) + console.log('别吃啦，明天再吃，呆瓜'); + } + } + } + var cc=window.setInterval(a.food,330,"小苏","炸鸡") +``` + +**注意:** 要使用 clearInterval() 方法, 在创建setInterval时要使用全局变量 + +##### window.setTimeout() - 延时器 + +实例： + +```js + var a=window.setTimeout(() => { + console.log('在干吗呀'); + }, 3000); +``` + + + diff --git "a/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/12.1 jQuery Ajax.md" "b/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/12.1 jQuery Ajax.md" new file mode 100644 index 0000000000000000000000000000000000000000..82a13b86b3f30ce689d8aad940b6daf871440d25 --- /dev/null +++ "b/\350\214\203\351\233\205\346\254\242/\347\254\224\350\256\260/12.1 jQuery Ajax.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