diff --git "a/\345\274\240\351\207\221\344\270\275/20231031-JS\347\232\204\345\237\272\346\234\254\346\246\202\345\277\265.md" "b/\345\274\240\351\207\221\344\270\275/20231031-JS\347\232\204\345\237\272\346\234\254\346\246\202\345\277\265.md" new file mode 100644 index 0000000000000000000000000000000000000000..456eb356df4a16a35d7f837c9ac2fa7b59310a0f --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231031-JS\347\232\204\345\237\272\346\234\254\346\246\202\345\277\265.md" @@ -0,0 +1,61 @@ +### JS的基本概念 + +## javaScript是什么？ +是一种运动在客户端（浏览器）的编程 +语言，实现人机交互效果。 + +## javaScript的作用 +网页特效（监听用户的一些行为让网页做出对应的反馈）表单验证（针对表单数据 +的合法性判断）数据交互（获取后台的数据，渲染到前端）服务端编程（node.js） + +## JavaScript的组成 +ECMAScript: +规定了js基础语法核心知识。比如：变量，分支语句，循环语句，对象等等 + +Web APls: +DOM 操作文档，比如对页面元素进行移动，大小，添加删除等操作BOM +操作浏览器，比如页面弹窗，检查窗口宽度，存储数据到浏览器等等 + +## JaveScript书写位置 +内部JavaScript +直接写在HTML文件里，用script标签包住 +规范： +script 标签写在上面 +拓展：alert（你好，js）页面弹出警告对话框 + +注意事项 + +``` +我们将 + +``` + + +注意事项： script标签中间无需写代码，否则会被忽略！ + +外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML也会更加易读，因此这是个好习惯。 + +内联JavaScript +代码写在标签内部 + +``` +语法： + 注意：此处作为了解即可，但是后面vue框架会用这种模式 + + + +``` diff --git "a/\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204\343\200\201\346\225\260\346\215\256\347\261\273\345\236\213\345\222\214\345\217\230\351\207\217.md" "b/\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204\343\200\201\346\225\260\346\215\256\347\261\273\345\236\213\345\222\214\345\217\230\351\207\217.md" new file mode 100644 index 0000000000000000000000000000000000000000..828ebab120a49038b10b363979055f4f4e7f1cd1 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231101-JS\345\255\227\347\254\246\344\270\262\345\222\214\346\225\260\347\273\204\343\200\201\346\225\260\346\215\256\347\261\273\345\236\213\345\222\214\345\217\230\351\207\217.md" @@ -0,0 +1,113 @@ +### JS的数据类型和变量 +## 数据类型 +1.Number + +JavaScript区别整数和浮点数，统一用Number表示 + +JavaScrip区别整数和浮点数，统一用number表示 + +``` +let one=123;//整数 + +let two=0.1;//浮点数 + +let three=-1;//负数 + +let four=NaN;//NaN表示Not a Number,当计算不出结果时用NaN表示。 + +let five=Infinity;//无限大，超过了JavaScript +的Number所能表示的最大值。 + +``` + +Number可以做四则运算，规则和数学一样。 + +2.字符串 + +字符串是以单引号'或双引号"括起来的任意文本，比如 +'abc','xyz'等等。"或""本身只是一种表示方式，不是字符串的一部分，因此 +字符串'abc'只有a,b,c这3个字符 + +3.布尔值 + +一个布尔值只有true,false两种植。 + +4.比较运算符 +==会自动转换数据类型再进行比较。 +===不会自动转换数据类型，如果数据类型不一样，就直接返回false。 +isNaN（）函数，用于比较NaN.NaN不能用==和===的方式比较。 + +5.null和underfined +null表示空underfined表示未定义 + +6.数组 +数组用Array[]的方式建立。数组的元素用索引来访问， +索引的起始值为0. + +7.对象 +JavaScript的对象是一组由键-值组成的无序集合， +例如： +```var person = { + name: 'Bob', + age: 20, + tags: ['js', 'web', 'mobile'], + city: 'Beijing', + hasCar: true, + zipcode: null +}; +``` + +JavaScript对象的键都是字符串类型，值可以是任意数据 +类型。上述person对象一共定义了6个键值对，其中每个键又 +称为对象的属性，例如，person的name属性'Bob',zipcode属性为null。 +要获取一个对象的属性， 我们用对象变量.属性名的方式： +person.name;//'Bob' person.zipcode;//null + +## 变量 +变量名=值 + +strict模式 +在strict模式下运行的JavaScript代码，强制通过var申明变量，未使用var申请变量 +就使用的，将导致运行错误。 +使用方式： +在代码第一行写上 use strict + +### 字符串 +字符串要用“或”括起来。 + +1.转义字符/用了该符号后，后面跟着的字符会被打印出来 + +2.\n换行，\t制表符。 + +3.ASCII字符可以以\x41；就相当于A。 + +4.还能用Unicode字符。 + +## 多行字符串 + +1.用反引号将字符括起来，一段文字里的换行就会保留下来。 + +## 模板字符串 + +1.把多个字符串连接起来，可以用+号连接。 + +2.将字符串用${}把字符串包含起来，添加在需要添加的字符后面。 + +## 操作字符串 + +1.利用数组的读取来获得来获得特定位置的字符。索引号从0开始。（直接用数组索引赋值，不会 +有错误，但是也不会对数组造成任何变化。） + +2.toUpperCase:把一个字符串全部变为大写。 +``` +运用方法： + +var s='你好' +s.toUpperCase(); + +3.toLowerCase:把一个字符变成小写。 + +4.indexOf:搜索指定字符串出现的位置。如果找到了指定的字符串，就返回该 +字符出现的位置，如果没有找到该字符串，就输出-1. + +5.substring:返回指定索引区间的字串。如：substring(0,2)会返回0到2（不包括2）的值。 \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231102-\346\225\260\347\273\204.md" "b/\345\274\240\351\207\221\344\270\275/20231102-\346\225\260\347\273\204.md" new file mode 100644 index 0000000000000000000000000000000000000000..699def4d179945b04854bc5a006573c20817d41f --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231102-\346\225\260\347\273\204.md" @@ -0,0 +1,33 @@ +## 数组 +基本属性：想要获得数组长度就直接访问.length属性。 +为.length赋值会导致数组发生变化，如果没有超过原有索引 +大小，就改变数组索引不能为其赋值。 + +1.indexOf:通过搜索数值的值来搜索指定元素的位置。没有搜索到就返回-1。 + +2.slice:截取数组的部分元素，生成一个新的数组。 + +var arr=[1,2,3,4,5] + +var newarr=arr.slice(1,4) + +config.log(newarr) + +返回值为[2,3,4]不包括索引4。 + +4.push和pop：push在数组末尾添加若干元素，pop在删除数组最后一个元素。 + +5.unshift和shift:unishift在数组头部添加若干元素，shift方法删除数组的第一个元素。 + +6.sort：可以对数组进行排序，直接调用，就按照默认方式排序。 + +7.reverrse:将数组排序调转。 + +8.splice:修改数组的万能方法。 + +9.concat:连接若干个数组，然后组成一个新的数组。 + +10.join：可以指定符号连接数组中的元素，返回连接后的字符串。 + +## 多维数组 +数组里面包含数组。 \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231106-JS\345\210\244\346\226\255\345\276\252\347\216\257\345\222\214map\345\222\214set.md" "b/\345\274\240\351\207\221\344\270\275/20231106-JS\345\210\244\346\226\255\345\276\252\347\216\257\345\222\214map\345\222\214set.md" new file mode 100644 index 0000000000000000000000000000000000000000..17ab3e9e0a88cb81f3649b46146a09efea21bf86 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231106-JS\345\210\244\346\226\255\345\276\252\347\216\257\345\222\214map\345\222\214set.md" @@ -0,0 +1,177 @@ +## JS判断循环和map和set + +### 判断 + +#### 条件判断 + +使用if(){...}else{...}来进行条件判断。 + +```根据年龄显示不同内容，可以用if语句实现如下： +var age=20； +if（age>=18）{ + //如果age>=18为true，则执行if语句块 + alert(adult"); +} +else { + //否则执行else语句块 + alert(adult"); +} +``` +## 多行条件判断 +``` +如果还要更细致地判断条件，可以使用多个if...else...的组合： +var age=3; +if(age>=18){ + alert('adult'); +}else if(age>=6){ + alert('teenager'); +}else{ + alert('kid'); +} +``` + +JavaScript把null、undefined、0、NaN和空字符串''视为false，其他值一概视为true，因此上述代码条件判断的结果是true + +### 循环 +JS有两种循环，一种是for循环，通过初始条件、结束条件和递增条件来循环执行语句块： +``` +var x=0; +var i; +for (i=1;i<=10000;i++){ + x=x+i; +} +x; +``` + +for 循环的控制条件： +``` +i=1 =》初始条件，将变量i置为1； +i<=10000 =》判断条件，满足时就继续循环，不满足就退出循环； +i++ =》每次循环后的递增条件，由于每次循环后变量都会加1，因此它终将在若干次循环后不满足判断条件i<=10000而退出循环。 +``` +## for循环最常用的地方是利用索引来遍历数组： +``` +var arr = ['Apple', 'Google', 'Microsoft']; +var i, x; +for (i=0; i 100) { + break; // 通过if判断来退出循环 + } + x ++; +} +``` + +## for...in +for循环的一个变体是for...in循环，它可以把一个对象的所有属性依次循环出来： +``` +var o={ + name:'Jack', + age:20, + cicty:'Beijing' +}; +for(var key in o){ + console.log(key);// 'name', 'age', 'city' +} +``` + +## 要过滤掉对象继承的属性，用hasOwnProperty()来实现： +``` +var o = { + name: 'Jack', + age: 20, + city: 'Beijing' +}; +for (var key in o) { + if (o.hasOwnProperty(key)) { + console.log(key); // 'name', 'age', 'city' + } +} +``` + +### 请注意，for...in对Array的循环得到的是String而不是Nmber。 + +## While +while循环只有一个判断条件，条件满足，就不断循环，条件不满足时则退出循环。比如我们要计算100以内所有奇数之和，可以用while循环实现： +``` +var x = 0; +var n = 99; +while (n > 0) { + x = x + n; + n = n - 2; +} +x; // 2500 +在循环内部变量n不断自减，直到变为-1时，不再满足while条件，循环退出。 +``` + +### do...while +最后一次循环是do{...}while()循环，它和while循环的唯一区别在于，不是在每次循环开始 +的时候判断条件，而是在每次循环完成的时候判断条件： +``` +var n = 0; +do { + n = n + 1; +} while (n < 100); +n; // 100 + +用do { ... } while()循环要小心，循环体会至少执行1次，而for和while循环则可能一次都不执行。 +``` +## MAP +Map是一组键值对的结构，具有极快的查找速度 +``` + 如果用Map实现，只需要一个“名字”-“成绩”的对照表，直接根据名字查找成绩，无论这个表有多大，查找速度都不会变慢。用JavaScript写一个Map如下： + +var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]); +m.get('Michael'); // 95 + +初始化Map需要一个二维数组，或者直接初始化一个空Map。Map具有以下方法： + +var m = new Map(); // 空Map +m.set('Adam', 67); // 添加新的key-value +m.set('Bob', 59); +m.has('Adam'); // 是否存在key 'Adam': true +m.get('Adam'); // 67 +m.delete('Adam'); // 删除key 'Adam' +m.get('Adam'); // undefined +``` + +## SET +Set和Map类似，也是一组value的集合。由于value不能重复，所以,在Set中，没有重复的 +value，经常使用排除重复值。 +``` +要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set： + +var s1 = new Set(); // 空Set +var s2 = new Set([1, 2, 3]); // 含1, 2, 3 +重复元素在Set中自动被过滤： + +var s = new Set([1, 2, 3, 3, '3']); +s; // Set {1, 2, 3, "3"} +注意数字3和字符串'3'是不同的元素。 + +通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果： + +s.add(4); +s; // Set {1, 2, 3, 4} +s.add(4); +s; // 仍然是 Set {1, 2, 3, 4} +通过delete(key)方法可以删除元素： + +var s = new Set([1, 2, 3]); +s; // Set {1, 2, 3} +s.delete(3); +s; // Set {1, 2} +``` +JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成。 + +JavaScript的对象用于描述现实世界中的某个对象。例如，为了描述“小明”这个淘气的小朋友，我们可以用若干键值对来描述他： + +JavaScript用一个{...}表示一个对象，键值对以xxx: xxx形式申明，用,隔开。注意，最后一个键值对不需要在末尾加,，如果加了，有的浏览器（如低版本的IE）将报错。 + diff --git "a/\345\274\240\351\207\221\344\270\275/20231107-JS\345\207\275\346\225\260\345\222\214iterable.md" "b/\345\274\240\351\207\221\344\270\275/20231107-JS\345\207\275\346\225\260\345\222\214iterable.md" new file mode 100644 index 0000000000000000000000000000000000000000..27bcdf7e470820851a175c30310f63e8fdb49ebf --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231107-JS\345\207\275\346\225\260\345\222\214iterable.md" @@ -0,0 +1,68 @@ +## itrtable +遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。 + +## 具有iterable类型的集合可以通过新的for...of 循环来遍历。 +``` +用for...of循环遍历集合，用法如下： +var a =['A','B','C ']; +var s =new Set(['A','B','C']); +var m =new Map([1,'x'],[2,'y'],[3,'z']); +for(var x of a ){ +//遍历Array +console.log(x); +} +for(var x of s ){ +//遍历Set +console.log(x); +} +for(var x of m ){ +//遍历Map +console.log(x[0]+'='+x[1]); +} +``` +更好的方式是直接使用iterable内置的forEach方法， +它接收一个函数，每次迭代就自动回调该函数。以Array +为例： +``` +use strict'; +var a=['A','B','C']; +a.forEach(function(element,index,array){ + // element: 指向当前元素的值 + // index: 指向当前索引 + // array: 指向Array对象本身 + console.log(element+',index='+index); +}); +``` + +## Set与Array类似，但Set没有索引，因此回调函数的前两个参数都是元素本身: +``` +var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]); +m.forEach(function (value, key, map) { + console.log(value); +}); + +``` + +## 函数 + +### 抽象 +抽象是数学中非常常见的概念。 + +## 函数定义和调用 + +### 定义函数 +上述abs()函数的定义如下： +``` +1.function指出这是一个函数定义； +2.abs是函数的名称； +3.（x）括号内列出函数的参数，多个参数以，分隔； +4.{...}之间的代码是函数体，可以包含若干语句，甚至可以没有任何语句。 +``` +var abs = function (x) { if (x >= 0) { return x; } else { return -x; } }; +``` +在这种方式下，function (x) { ... }是一个匿名函数，它没有函数名。但是，这个匿名函数赋值给了变量abs，所以，通过变量abs就可以调用该函数。 + +上述两种定义完全等价，注意第二种方式按照完整语法需要在函数体末尾加一个;，表示赋值语句结束。 + +``` + diff --git "a/\345\274\240\351\207\221\344\270\275/20231108-JS\345\207\275\346\225\260\350\241\245\345\205\205.md" "b/\345\274\240\351\207\221\344\270\275/20231108-JS\345\207\275\346\225\260\350\241\245\345\205\205.md" new file mode 100644 index 0000000000000000000000000000000000000000..68931b95b0c43dbfeb628b1dd0cb2d0bc2ab2df2 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231108-JS\345\207\275\346\225\260\350\241\245\345\205\205.md" @@ -0,0 +1,49 @@ +## 调用函数 + +## arguments + +arguments只有函数内部起作用，并且永远指向当前 +函数的调用者传入的所有参数 +``` +'use strict' +function foo(x){ + console.log('x='+x); + for(var i=0;i){ + console.log('arg ' + i + ' = ' + arguments[i]); + } +} +foo（10,20,30）; +``` + +## rest参数 +``` +function foo(a, b) { + var i, rest = []; + if (arguments.length > 2) { + for (i = 2; i Math.abs(-5) + Math.abs(6) ==> 11; +return 11; +``` + +用代码验证一下： +``` +'use strict'; + +function add(x, y, f) { + return f(x) + f(y); +} +var x = add(-5, 6, Math.abs); // 11 +console.log(x); +``` \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231122-JS\347\232\204fileter.md" "b/\345\274\240\351\207\221\344\270\275/20231122-JS\347\232\204fileter.md" new file mode 100644 index 0000000000000000000000000000000000000000..e71cc5a4391dab2c75d7e1f1be2f87e1768908c9 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231122-JS\347\232\204fileter.md" @@ -0,0 +1,29 @@ +## filter + +filter也是一个常用的操作，它用于把Array的某些元素 +过滤掉，然后返回剩下的元素。 + +和map()类似，Array的filter()也接收一个函数。和map() +不同的是，filter()把传入的函数依次作用于每个元素， +然后根据返回值是true还是false决定保留还是丢弃该元素。 + +例如，在一个Array中，删掉偶数，只保留奇数，可以这么写： +``` +var arr = [1, 2, 4, 5, 6, 9, 10, 15]; +var r = arr.filter(function (x) { + return x % 2 !== 0; +}); +r; // [1, 5, 9, 15] +``` + +把一个Array中的空字符串删掉，可以这么写： +``` +var arr = ['A', '', 'B', null, undefined, 'C', ' ']; +var r = arr.filter(function (s) { + return s && s.trim(); // 注意：IE9以下的版本没有trim()方法 +}); +r; // ['A', 'B', 'C'] +``` + +可见用filter()这个高阶函数，关键在于正确实现一个 +“筛选”函数。 \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231123-JS\351\253\230\351\230\266\345\207\275\346\225\260\345\222\214\346\225\260\347\273\204.md" "b/\345\274\240\351\207\221\344\270\275/20231123-JS\351\253\230\351\230\266\345\207\275\346\225\260\345\222\214\346\225\260\347\273\204.md" new file mode 100644 index 0000000000000000000000000000000000000000..b742bd637471d1d38a186c4005f13acf84be1b1d --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231123-JS\351\253\230\351\230\266\345\207\275\346\225\260\345\222\214\346\225\260\347\273\204.md" @@ -0,0 +1,141 @@ +## filter + +filter也是一个常用的操作，它用于把Array的某些元素过滤掉， +然后返回剩下的元素。 + +和map()类似，Array的filter()也接收一个函数。和map()把传入 +的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。 + +例如，在一个Array中，删掉偶数，只保留奇数，可以这么写： +``` +var arr = [1, 2, 4, 5, 6, 9, 10, 15]; +var r = arr.filter(function (x) { + return x % 2 !== 0; +}); +r; // [1, 5, 9, 15] +``` + +把一个Array中的空字符串删掉，可以这么写： +``` +var arr = ['A', '', 'B', null, undefined, 'C', ' ']; +var r = arr.filter(function (s) { + return s && s.trim(); // 注意：IE9以下的版本没有trim()方法 +}); +r; // ['A', 'B', 'C'] +``` + +## 回调函数 +filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数， +表示元素的位置和数组本身： +``` +var arr = ['A', 'B', 'C']; +var r = arr.filter(function (element, index, self) { + console.log(element); // 依次打印'A', 'B', 'C' + console.log(index); // 依次打印0, 1, 2 + console.log(self); // self就是变量arr + return true; +}); +``` + +利用filter，可以巧妙地去除Array的重复元素： +``` +'use strict'; + +var + r, + arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry']; +r = arr.filter(function (element, index, self) { + return self.indexOf(element) === index; +}); + +console.log(r.toString()); +``` + +去除重复元素依靠的是indexOf总是返回第一个元素的位置， +后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了。 + +## sort + +## 排序算法 + +默认情况下，对字符串排序，是按照ASCLL的大小比较的，现在，我们提出排序应该忽略大小写，按照字母序排序。要实现这个算法，不必对现有代码大加改动，只要我们能定义出忽略大小写的比较算法就可以： +``` +var arr = ['Google', 'apple', 'Microsoft']; +arr.sort(function (s1, s2) { + x1 = s1.toUpperCase(); + x2 = s2.toUpperCase(); + if (x1 < x2) { + return -1; + } + if (x1 > x2) { + return 1; + } + return 0; +}); // ['apple', 'Google', 'Microsoft'] +``` + +忽略大小写来比较两个字符串，实际上就是先把字符串都变成大写 +（或者都变成小写），再比较。 + +## Array + +### every + +every()方法可以判断数组的所有元素是否满足测试条件。 + +例如：给定一个包含若干字符串的数组，判断所有字符串是否满足指定的测试条件： +``` +'use strict'; +var arr = ['Apple', 'pear', 'orange']; +console.log(arr.every(function (s) { + return s.length > 0; +})); // true, 因为每个元素都满足s.length>0 + +console.log(arr.every(function (s) { + return s.toLowerCase() === s; +})); // false, 因为不是每个元素都全部是小写 +``` + + +### find + +find()方法用于查找符合条件的第一个元素，如果找到了，返回这个元素，否则，返回undefined: +``` +'use strict'; +var arr = ['Apple', 'pear', 'orange']; +console.log(arr.find(function (s) { + return s.toLowerCase() === s; +})); // 'pear', 因为pear全部是小写 + +console.log(arr.find(function (s) { + return s.toUpperCase() === s; +})); // undefined, 因为没有全部是大写的元素 +``` + +## findindex + +findindex()和find()类似，也是查找符合条件的第一个元素， +不同之处在于findindex()会返回这个元素的索引，如果没有找到 +，返回-1: +``` +'use strict'; +var arr = ['Apple', 'pear', 'orange']; +console.log(arr.findIndex(function (s) { + return s.toLowerCase() === s; +})); // 1, 因为'pear'的索引是1 + +console.log(arr.findIndex(function (s) { + return s.toUpperCase() === s; +})); // -1 +``` + +## forEach + +forEach()和map()类似，它也把每个元素依次作用传入的函数，但不能返回新的数组。forEach()常用于遍历数组，因此，传入的函数不需要返回值： +``` +'use strict'; +var arr = ['Apple', 'pear', 'orange']; +arr.forEach(console.log); // 依次打印每个元素 +``` + + diff --git "a/\345\274\240\351\207\221\344\270\275/20231127-JS\345\270\270\347\224\250\345\257\271\350\261\241\344\270\216\346\255\243\345\210\231.md" "b/\345\274\240\351\207\221\344\270\275/20231127-JS\345\270\270\347\224\250\345\257\271\350\261\241\344\270\216\346\255\243\345\210\231.md" new file mode 100644 index 0000000000000000000000000000000000000000..19ed41eeb67aa42caff7b44713b0b00be5a36c4a --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231127-JS\345\270\270\347\224\250\345\257\271\350\261\241\344\270\216\346\255\243\345\210\231.md" @@ -0,0 +1,40 @@ +## 标准对象 + +但是某些对象还是和其他对象不太一样。为了区分对象的类型，我们用typeof操作符获取对象的类型，它总是返回一个字符串： +``` +typeof 123; // 'number' +typeof NaN; // 'number' +typeof 'str'; // 'string' +typeof true; // 'boolean' +typeof undefined; // 'undefined' +typeof Math.abs; // 'function' +typeof null; // 'object' +typeof []; // 'object' +typeof {}; // 'object' +``` + +可见，number、string、boolean、function和undefined有别于其他类型。特别注意null的类型是 +object,Array的类型也是object，如果我们用typeof将 +无法区分出null、Array和通常意义上的object--{} + +## 包装对象 +有这么几条规则需要遵守： +``` +不要使用new Number()、new Boolean()、new String()创建包装对象； + +用parseInt()或parseFloat()来转换任意类型到number； + +用String()来转换任意类型到string，或者直接调用某个对象的toString()方法； + +通常不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {...}； + +typeof操作符可以判断出number、boolean、string、function和undefined； + +判断Array要使用Array.isArray(arr)； + +判断null请使用myVar === null； + +判断某个全局变量是否存在用typeof window.myVar === 'undefined'； + +函数内部判断某个变量是否存在用typeof myVar === 'undefined' +``` \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231128-JS\351\227\255\345\214\205.md" "b/\345\274\240\351\207\221\344\270\275/20231128-JS\351\227\255\345\214\205.md" new file mode 100644 index 0000000000000000000000000000000000000000..453e05bb67ceccfe356467fd25edca8fca47a5f0 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231128-JS\351\227\255\345\214\205.md" @@ -0,0 +1,38 @@ +## 闭包 +### 函数作为返回值 +高阶函数除了可以接受函数作为参数外，还可以把函数作为结果值返回。 +``` +function sum(arr){ + var sum =function(){ + return arr.reduce(function(x,y){ + return x+y; + }) + } + + return sum; +} +``` + +闭包，就是一个函数（被一个函数返回的函数），并不是所有被返回的函数都称之为闭包。除了被返回，这个函数应该还必须引用了外部函数中传入的参数或者定义的变量，那么这样的一个返回函数，才称之为闭包 + +## 闭包 +``` +function count(){ + var arr =[]; + for (var i=1; i<=3;i++){ + arr.push((function(n){ + return function(){ + return n*n; + } + })(i)); + } + return arr; +} +var results =count(); +var f1 =results[0]; +var f2 =results[1]; +var f3 =results[2]; +f1(); +f2(); +f3(); +``` \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231129-JS\347\232\204\347\256\255\345\244\264\345\207\275\346\225\260.md" "b/\345\274\240\351\207\221\344\270\275/20231129-JS\347\232\204\347\256\255\345\244\264\345\207\275\346\225\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..34e2e157b3e548b6070202fd88bade0183b19bf9 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231129-JS\347\232\204\347\256\255\345\244\264\345\207\275\346\225\260.md" @@ -0,0 +1,50 @@ +## 箭头函数 +x => x * x 上面的箭头函数相当于： +``` +function (x) { + return x * x; +} +``` +如果参数不是一个，就需要用括号()括起来： +``` +// 两个参数: +(x, y) => x * x + y * y + +// 无参数: +() => 3.14 + +// 可变参数: +(x, y, ...rest) => { + var i, sum = x + y; + for (i=0; i y - this.birth; // this.birth仍是1990 + return fn.call({birth:2000}, year); + } +}; +obj.getAge(2015); // 33 +``` \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231130-JS\346\255\243\345\210\231.md" "b/\345\274\240\351\207\221\344\270\275/20231130-JS\346\255\243\345\210\231.md" new file mode 100644 index 0000000000000000000000000000000000000000..042e6714c5c51e6057fb8e8c37045a673e93774c --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231130-JS\346\255\243\345\210\231.md" @@ -0,0 +1,47 @@ +## 正则 +因为正则表达式也是用字符串表示的，所以，我们要首先了解如何用字符来描述字符。 在正则表达式中，如果直接给出字符，就是精确匹配。用\d可以匹配一个数字，\w可以匹配一个字母或数字，所以： +``` +'00\d'可以匹配'007'，但无法匹配'00A'； + +'\d\d\d'可以匹配'010'； + +'\w\w'可以匹配'js'； +``` + +可以匹配任意字符，所以： + +``` +'js.'可以匹配'jsp'、'jss'、'js!'等等。 +``` +eg:\d{3}\s+\d{3,8}。 + +我们来从左到右解读一下： + +``` +\d{3}表示匹配3个数字，例如'010'； + +\s可以匹配一个空格（也包括Tab等空白符），所以\s+表示至少有一个空格，例如匹配' '，'\t\t'等； + +\d{3,8}表示3-8个数字，例如'1234567'。 +``` +## 进阶 +要做更精确地匹配，可以用[]表示范围，比如： +``` +[0-9a-zA-Z\_]可以匹配一个数字、字母或者下划线； + +[0-9a-zA-Z\_]+可以匹配至少由一个数字、字母或者下划线组成的字符串，比如'a100'，'0_Z'，'js2015'等等； + +[a-zA-Z\_\$][0-9a-zA-Z\_\$]*可以匹配由字母或下划线、$开头，后接任意个由一个数字、字母或者下划线、$组成的字符串，也就是JavaScript允许的变量名； + +[a-zA-Z\_\$][0-9a-zA-Z\_\$]{0, 19}更精确地限制了变量的长度是1-20个字符（前面1个字符+后面最多19个字符）。 +``` +^表示行的开头，^\d表示必须以数字开头。 + +表示行的结束，\d 表示必须以数字结束。 + +你可能注意到了，js也可以匹配'jsp'，但是加上^js$就变成了整行匹配，就只能匹配'js'了 + +## 切分字符串 +``` +'a,b;; c d'.split(/[\s\,\;]+/); // ['a', 'b', 'c', 'd'] +``` \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231204-JS\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241.md" "b/\345\274\240\351\207\221\344\270\275/20231204-JS\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241.md" new file mode 100644 index 0000000000000000000000000000000000000000..ebd1cddbed6d4221beeef695a38a825eb607e40a --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231204-JS\346\265\217\350\247\210\345\231\250\345\257\271\350\261\241.md" @@ -0,0 +1,138 @@ +## 浏览器对象 + +### window + +window 对象不但充当全局作用域，而且表示浏览器窗口。 window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。 兼容性：IE<=8不支持 + +``` +'use strict'; +// 可以调整浏览器窗口大小试试: +console.log('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight); +``` +对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。 + +## navigator +navigator 对象表示浏览器的信息，最常用的属性包括 + +``` +navigator.appName：浏览器名称； +navigator.appVersion：浏览器版本； +navigator.language：浏览器设置的语言； +navigator.platform：操作系统类型； +navigator.userAgent：浏览器设定的User-Agent字符串。 +'use strict'; +console.log('appName = ' + navigator.appName); +console.log('appVersion = ' + navigator.appVersion); +console.log('language = ' + navigator.language); +console.log('platform = ' + navigator.platform); +console.log('userAgent = ' + navigator.userAgent); +``` + +注意：navigator的信息可以很容易地被用户修改，正确的方法是充分利用JavaScript对不存在属性返回undefined的特性，直接用短路运算符||计算： + +var width = window.innerWidth || document.body.clientWidth; + +## screen +screen对象表示屏幕的信息，常用的属性有： +``` +screen.width：屏幕宽度，以像素为单位； +screen.height：屏幕高度，以像素为单位； +screen.colorDepth：返回颜色位数，如8、16、24。 +'use strict'; +console.log('Screen size = ' + screen.width + ' x ' + screen.height); +``` + +## location +screen对象表示屏幕的信息，常用的属性有： +``` +screen.width：屏幕宽度，以像素为单位； +screen.height：屏幕高度，以像素为单位； +screen.colorDepth：返回颜色位数，如8、16、24。 +'use strict'; +console.log('Screen size = ' + screen.width + ' x ' + screen.height); +``` + +## location + +location对象表示当前页面的URL信息 + +``` +http://www.example.com:8080/path/index.html?a=1&b=2#TOP +``` + +可以用location.href获取。要获得URL各个部分的值： + +location.protocol; // 'http' +location.host; // 'www.example.com' +location.port; // '8080' +location.pathname; // '/path/index.html' +location.search; // '?a=1&b=2' +location.hash; // 'TOP' +要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。 + +'use strict'; +if (confirm('重新加载当前页' + location.href + '?')) { + location.reload(); +} else { + location.assign('/'); // 设置一个新的URL地址 +} +document +document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。 + +document的title属性是从HTML文档中的xxx读取的，但是可以动态改变： + +'use strict'; +document.title = '努力学习JavaScript!'; +要查找DOM树的某个节点，需要从document对象开始查找。最常用的查找是根据ID和Tag Name。 + +我们先准备HTML数据： + +
+
摩卡
+
热摩卡咖啡
+
酸奶
+
北京老酸奶
+
果汁
+
鲜榨苹果汁
+
+用document对象提供的getElementById()和getElementsByTagName()可以按ID获得一个DOM节点和按Tag名称获得一组DOM节点： + +'use strict'; +var menu = document.getElementById('drink-menu'); +var drinks = document.getElementsByTagName('dt'); +var i, s; + +s = '提供的饮料有:'; +for (i=0; i + + + + + ... + +如果引入的第三方的JavaScript中存在恶意代码，则www.foo.com网站将直接获取到www.example.com网站的用户登录信息。 + +## history +history对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮。 + +这个对象属于历史遗留对象，对于现代Web页面来说，由于大量使用AJAX和页面交互，简单粗暴地调用history.back()可能会让用户感到非常愤怒。 + +新手开始设计Web页面时喜欢在登录页登录成功时调用history.back()，试图回到登录前的页面。这是一种错误的方法。 + +任何情况，你都不应该使用history这个对象了。 \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231205-JS\346\233\264\346\226\260DOM.md" "b/\345\274\240\351\207\221\344\270\275/20231205-JS\346\233\264\346\226\260DOM.md" new file mode 100644 index 0000000000000000000000000000000000000000..2d4045ab27f7045c20a8fabd88ae00fc76f2f73d --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231205-JS\346\233\264\346\226\260DOM.md" @@ -0,0 +1,126 @@ +## 更新DOM +可以直接修改节点的文本，两种方法： 一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树： + +// 获取

...

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

ABC

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

...

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

...

+var p = document.getElementById('p-id'); +// 设置文本: +p.innerText = ''; +// HTML被自动编码，无法设置一个 +这种方式的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击时提交表单，或者用户在最后一个输入框按回车键。因此，第二种方式是响应本身的onsubmit事件，在提交form时作修改： + + +
+ + +
+ + +注意要return true来告诉浏览器继续提交，如果return false，浏览器将不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。 + +在检查和修改时，要充分利用来传递数据。 eg:很多登录表单希望用户输入用户名和口令，但是，安全考虑，提交表单时不传输明文口令，而是口令的MD5。普通JavaScript开发人员会直接修改： + + +
+ + + +
+ + +这个做法看上去没啥问题，但用户输入了口令提交时，口令框的显示会突然从几个变成32个（因为MD5有32个字符）。 + +要想不改变用户的输入，可以利用实现： + + +
+ + + + +
+ + +注意到id为md5-password的标记了name="password"，而用户输入的id为input-password的没有name属性。没有name属性的的数据不会被提交。 \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231211-JS\347\232\204Ajax\345\222\214Promise.md" "b/\345\274\240\351\207\221\344\270\275/20231211-JS\347\232\204Ajax\345\222\214Promise.md" new file mode 100644 index 0000000000000000000000000000000000000000..3364b85643cc7a693eff4dac168d86d2819708f2 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231211-JS\347\232\204Ajax\345\222\214Promise.md" @@ -0,0 +1,115 @@ +## AJAX +'use strict'; +function success(text) { + var textarea = document.getElementById('test-ie-response-text'); + textarea.value = text; +} + +function fail(code) { + var textarea = document.getElementById('test-ie-response-text'); + textarea.value = 'Error code: ' + code; +} + +var request = new ActiveXObject('Microsoft.XMLHTTP'); // 新建Microsoft.XMLHTTP对象 + +request.onreadystatechange = function () { // 状态发生变化时，函数被回调 + if (request.readyState === 4) { // 成功完成 + // 判断响应结果: + if (request.status === 200) { + // 成功，通过responseText拿到响应的文本: + return success(request.responseText); + } else { + // 失败，根据响应码判断失败原因: + return fail(request.status); + } + } else { + // HTTP请求还在继续... + } +} + +// 发送请求: +request.open('GET', '/api/categories'); +request.send(); + +alert('请求已发送，请等待响应...'); +安全限制 +默认情况下，JavaScript在发送AJAX请求时，URL的域名必须和当前页面完全一致。 完全一致的意思是，域名要相同（www.example.com和example.com不同），协议要相同（http和https不同），端口号要相同（默认是:80端口，它和:8080就不同）。有的浏览器口子松一点，允许端口不同，大多数浏览器都会严格遵守这个限制。 一是通过Flash插件发送HTTP请求，这种方式可以绕过浏览器的安全限制，但必须安装Flash，并且跟Flash交互。不过Flash用起来麻烦，而且现在用得也越来越少了。 + +二是通过在同源域名下架设一个代理服务器来转发，JavaScript负责把请求发送到代理服务器： + +'/proxy?url=http://www.sina.com.cn' 代理服务器再把结果返回，这样就遵守了浏览器的同源策略。这种方式麻烦之处在于需要服务器端额外做开发。 + +第三种方式称为JSONP，它有个限制，只能用GET请求，并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源： + + + + + ... + + +... + + +操作文件 +在HTML表单中，可以上传文件的唯一控件就是。 + +注意：当一个表单包含时，表单的enctype必须指定为multipart/form-data，method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。 + +出于安全考虑，浏览器只允许用户点击来选择本地文件，用JavaScript对的value赋值是没有任何效果的。当用户选择了上传某个文件后，JavaScript也无法获得该文件的真实路径： + +待上传文件 +通常，上传的文件都由后台服务器处理，JavaScript可以在提交表单时对文件扩展名做检查，以便防止用户上传无效格式的文件： + +var f = document.getElementById('test-file-upload'); +var filename = f.value; // 'C:\fakepath\test.png' +if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) { + alert('Can only upload image file.'); + return false; +} +File API +由于JavaScript对用户上传的文件操作非常有限，尤其是无法读取文件内容，使得很多需要操作文件的网页不得不用Flash这样的第三方插件来实现。 随着HTML5的普及，新增的File API允许JavaScript读取文件内容，获得更多的文件信息。 HTML5的File API提供了File和FileReader两个主要对象，可以获得文件信息并读取文件。 + +var + fileInput = document.getElementById('test-image-file'), + info = document.getElementById('test-file-info'), + preview = document.getElementById('test-image-preview'); +// 监听change事件: +fileInput.addEventListener('change', function () { + // 清除背景图片: + preview.style.backgroundImage = ''; + // 检查文件是否选择: + if (!fileInput.value) { + info.innerHTML = '没有选择文件'; + return; + } + // 获取File引用: + var file = fileInput.files[0]; + // 获取File信息: + info.innerHTML = '文件: ' + file.name + '
' + + '大小: ' + file.size + '
' + + '修改: ' + file.lastModifiedDate; + if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') { + alert('不是有效的图片文件!'); + return; + } + // 读取文件: + var reader = new FileReader(); + reader.onload = function(e) { + var + data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...' + preview.style.backgroundImage = 'url(' + data + ')'; + }; + // 以DataURL的形式读取文件: + reader.readAsDataURL(file); + }); +回调 +在JavaScript中，执行多任务实际上都是异步调用，比如上面的代码： + +reader.readAsDataURL(file); + +就会发起一个异步操作来读取文件内容。因为是异步操作，所以我们在JavaScript代码中就不知道什么时候操作结束，因此需要先设置一个回调函数： + +reader.onload = function(e) { + // 当文件读取完成后，自动调用此函数: +}; +当文件读取完成后，JavaScript引擎将自动调用我们设置的回调函数。执行回调函数时，文件已经读取完毕，所以我们可以在回调函数内部安全地获得文件内容。 \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231212-JS\347\232\204Promise.md" "b/\345\274\240\351\207\221\344\270\275/20231212-JS\347\232\204Promise.md" new file mode 100644 index 0000000000000000000000000000000000000000..a891e7bfa4e0f19fbbd81bf35da69550743f0c1f --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231212-JS\347\232\204Promise.md" @@ -0,0 +1,59 @@ +## Promise +在JavaScript的世界中，所有代码都是单线程执行的。 + +由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现： + +function callback() { + console.log('Done'); +} +console.log('before setTimeout()'); +setTimeout(callback, 1000); // 1秒钟后调用callback函数 +console.log('after setTimeout()'); +可见，异步操作会在将来的某个时间点触发一个函数调用。 + +AJAX就是典型的异步操作。 eg： + +request.onreadystatechange=function(){ + if (request.readyState===4){ + if(request.status===200){ + return success (request.responseText); + } else { + return fail(request.status); + } + } +} +把回调函数success(request.responseText)和fail(request.status)写到一个AJAX操作里很正常，但是不好看，而且不利于代码复用。 + +Promise有各种开源实现，在ES6中被统一规范，由浏览器直接支持。先测试一下你的浏览器是否支持Promise： + +'use strict'; + +new Promise(function () {}); +// 直接运行测试: +console.log('支持Promise!'); +eg:生成一个0-2之间的随机数，如果小于1，则等待一段时间后返回成功，否则返回失败： + +function test (resolve,reject){ + var timeOut=Math.random()*2; + log('set timeout to:'+timeOut+'seconds.'); + setTimeout(function(){ + if(timeOut<1){ + log('call resolve()...'); + resolve('200 OK'); + } + else{ + log('call reject()...'); + reject('timeout in'+timeOut+'seconds.'); + } + },timeOut*1000); +} +我们就可以用一个Promise对象来执行它，并在将来某个时刻获得成功或失败的结果： + +var p1 =new Promise(test); +var p2 =p1.then(function(result){ + console.log('成功：'+result); +}); +var p3 =p2.catch(function(reason) +{ + console.log('失败：'+reason); +}); \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231213-JS\347\232\204jQuery.md" "b/\345\274\240\351\207\221\344\270\275/20231213-JS\347\232\204jQuery.md" new file mode 100644 index 0000000000000000000000000000000000000000..12db36b0204a0b15c32e7199fbe4da618dc7dc16 --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231213-JS\347\232\204jQuery.md" @@ -0,0 +1,79 @@ +## JQUERY + +### 选择器 + +选择器是jQuery的核心。一个选择器写出来类似$('#dom-id')。 + +// 按ID查找： +var a = document.getElementById('dom-id'); + +// 按tag查找： +var divs = document.getElementsByTagName('div'); + +// 查找

： +var ps = document.getElementsByTagName('p'); +// 过滤出class="red": +// TODO: + +// 查找里面的所有： +var table = ... +for (var i=0; i +} +按ID查找 +如果某个DOM节点有id属性，利用jQuery查找如下： + +// 查找
: +var div = $('#abc'); +按tag查找 +按tag查找只需要写上tag名称就可以了： + +var ps = $('p'); // 返回所有

节点 +ps.length; // 数一数页面有多少个

节点 +按class查找 +按class查找注意在class名称前加一个.： + +var a = $('.red'); // 所有节点包含`class="red"`都将返回 +// 例如: +//

...
+//

...

+通常很多节点有多个class，我们可以查找同时包含red和green的节点： + +var a = $('.red.green'); // 注意没有空格！ +// 符合条件的节点： +//
...
+//
...
+按属性查找 +一个DOM节点除了id和class外还可以有很多属性，很多时候按属性查找会非常方便，比如在一个表单中按属性来查找： + +var email = $('[name=email]'); // 找出 +var passwordInput = $('[type=password]'); // 找出 +var a = $('[items="A B"]'); // 找出 +当属性的值包含空格等特殊字符时，需要用双引号括起来。 + +按属性查找还可以使用前缀查找或者后缀查找： + +var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM +// 例如: name="icon-1", name="icon-2" +var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM +// 例如: name="startswith", name="endswith" +这个方法尤其适合通过class属性查找，且不受class包含多个名称的影响： + +var icons = $('[class^="icon-"]'); // 找出所有class包含至少一个以`icon-`开头的DOM +// 例如: class="icon-clock", class="abc icon-home" +组合查找 +组合查找就是把上述简单选择器组合起来使用。如果我们查找$('[name=email]')，很可能把表单外的 + +也找出来，但我们只希望查找，就可以这么写： +var emailInput = $('input[name=email]'); // 不会找出
+同样的，根据tag和class来组合查找也很常见： + +var tr = $('tr.red'); // 找出
... +多项选择器 +多项选择器就是把多个选择器用,组合起来一块选： + +$('p,div'); // 把

和

都选出来 +$('p.red,p.green'); // 把

和

都选出来 +要注意的是，选出来的元素是按照它们在HTML中出现的顺序排列的，而且不会有重复元素。例如， + +不会被上面的$('p.red,p.green')选择两次。 \ No newline at end of file diff --git "a/\345\274\240\351\207\221\344\270\275/20231214-JS\347\232\204JQUERY\347\232\204\350\241\245\345\205\205.md" "b/\345\274\240\351\207\221\344\270\275/20231214-JS\347\232\204JQUERY\347\232\204\350\241\245\345\205\205.md" new file mode 100644 index 0000000000000000000000000000000000000000..6a38e040fc92da814f21ed7d64c756967cfd1bfb --- /dev/null +++ "b/\345\274\240\351\207\221\344\270\275/20231214-JS\347\232\204JQUERY\347\232\204\350\241\245\345\205\205.md" @@ -0,0 +1,56 @@ +## JQUERY的补充 + +### 操作DOM +拿JQUERY对象的作用：操作对应的DOM节点。 + +### 修改Text和HTML +JQUERY对象的text()和html()方法分别获取节点的文本和原始HTML文本 + +

    +
  • JavaScript
    • +
  • Java &: JavaScript
    • +
+分别获取文本和HTML: + +$('#test-ul li[name=book]').text();//'Java & JavaScript' +$('#test-ul li[name=book]').html();//'Java &: JavaScript' +JQUERY的API设计非常巧妙：无参数调用text（）是获取文本，传入参数就变成设置文本，HTML也是类似操作 + +'use strict'; +var j1=$('#test-ul li.js'); +var j2=$('#test-ul li[name=book]'); +j1.html('JavaScript'); +j2.text('JavaScript & ECMAScript'); + +//JavaScript +//Java & JavaScript +一个jQuery对象可以包含0个或任意个DOM对象，它的方法实际上会作用在对应的每个DOM节点上。 + +$('#test-ul li').text('JS');//是不是两个节点都变成了JS？ +所以jQuery对象的另一个好处是我们可以执行一个操作，作用在对应的一组DOM节点上。即使选择器没有返回任何DOM节点 + +//如果不存在id为not-exist的节点： +$('#not-exist').text('Hello');//代码不报错，没有节点被设置为'Hello' +修改CSS +jQuery对象有"批量操作"的特点 + +
    + +
  • JavaScript
    • +
  • Java
    • +
  • Python
    • +
  • Swift
    • +
  • Scheme
    • + +
+要高亮显示动态语言，调用jQuery对象的css('name','value')方法，我们用一行语句实现： + +'use strict' +$('#test-css li.dy>span').css('background-color','#ffd351').css('color','red'); +注意，jQuery对象的css()方法可以这么用： + +var div =$('#test-div'); +div.css('color'); +div.css('color','#336699'); +div.css('color',''); +为了和JavaScript保持一致，css属性可以用'baclground-color'和'backgroundColor' \ No newline at end of file