搜索到
14
篇与
的结果
-
js的dom操作 css选择器本质就是css与html两种语法建立关联的特定标识符那在JS语言的语法中，也有特点的方式与html语言编写的表情建立关联，我们就称之为JS选择器。一、getElement系列// 1.通过id名获取唯一满足条件的页面元素 document.getElementById('id名'); // 该方法只能由document调用 // 2、通过class名获取所有满足条件的页面元素 document.getElementsByClassName('class名'); // 该方法可以由document及任意页面元素对象调用 // 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组) // 没有匹配到任何结果返回空HTMLCollection对象 ([]) // 3.通过tag名获取所有满足条件的页面元素 document.getElementsByTagName('tag名'); // 该方法可以由document及任意页面元素对象调用 // 返回值为HTMLCollection (一个类数组结果的对象，使用方式同数组) // 没有匹配到任何结果返回空HTMLCollection对象 ([])二、querySelect系列// 1.获取第一个匹配到的页面元素 document.querySelector('css3语法选择器'); // 该方法可以由document及任意页面对象调用 // 2.获取所有匹配到的页面元素 document.querySelectorAll('css3语法选择器'); // 该方法可以由document及任意页面对象调用 // 返回值为NodeList (一个类数组结果的对象，使用方式同数组) // 没有匹配到任何结果返回空NodeList对象 ([])2.1 案例：<body> <div id="box" class="box"></div> <script> var box1 = document.getElementById('box'); var box2 = document.querySelector('.box'); // box1 === box2，就代表页面id为box，class为box的div标签 </script> </body>三、JS页面操作3.1 鼠标事件/* 交互的方式，叫做标签对象的事件绑定，可以绑定的事件有： onclick：鼠标点击 ondblclick：鼠标双击 onmousedown：鼠标按下 onmousemove：鼠标移动 onmouseup：鼠标抬起 onmouseover：鼠标悬浮 onmouseout：鼠标移开 oncontextmenu：鼠标右键 */3.2 事件的绑定// 具体绑定事件的方式： <body> <div class="box">绑定点击事件后可以完成点击交互</div> <script> var box = document.querySelector('.box'); // 页面class为box的div被鼠标点击后会有弹出框 box.onclick = function() { alert("box标签被点击了") } </script> </body>3.3 操作行间试样式<head> <style> .box { width: 200px; height: 200px; } </style> </head> <body> <div class="box" style="background-color: red"></div> <script> var box = document.querySelector('.box'); // 语法：页面对象.全局style属性.具体的样式名 box.onclick = function() { // 读：获取行间式样式值 var bgColor = box.style.backgroundColor; // 写：对行间式样式进行赋值，初始没有该条行间式样式，相同会自动添加设置好的行间式 box.style.backgroundColor = 'orange'; // css3多个单词的属性名采用小驼峰命名法 } </script> </body>3.4 只读计算后 样式<head> <style> .box { width: 200px; height: 200px; } </style> </head> <body> <div class="box" style="background-color: red"></div> <script> var box = document.querySelector('.box'); // 语法：getComputedStyle(页面元素对象, 伪类).样式名; // 注：我们不需要考虑伪类的范畴，直接用null填充即可 box.onclick = function() { // 只读：获取计算后样式值 var width = getComputedStyle(box, null).width; } </script> </body>3.5 操作标签class名<body> <div class="box">class名操作</div> <script> var box = document.querySelector('.box'); // 查看类名 var cName = box.className; // 修改类名 box.className = "ele"; // 增加类名 box.className = " tag"; // 添加后的结果class="ele tag"，所以赋值时一定注意tag前有个空格字符串 // 删除所有类名 box.className = ""; </script> </body>3.6 操作标签全局属性值<body> <img src="https://www.baidu.com/favicon.ico" class="image" /> <script> var img = document.querySelector('.image'); // 查看全局属性值 var imgSrc = img.getAttribute('src'); // 修改全局属性值 img.setAttribute('src', 'img/bg_logo.png'); // 删除全局属性值 img.setAttribute = ('src', '');; </script> </body> -
js内置对象 一、Number1.1 属性MAX VALUE JS可以表示的最大的数字 MIN VALUE JS可以表示的最小的数字1.2 方法toFixed(length) 指定保留长度的小数 toExponential() 用科学计数法表示 toPrecision(length)要求数字按照指定长度显示 整数+小数 toString(number) 把数字转换为字符串 可以按照指定的 进制 返回二、String2.1 属性length 字符串长度2.2 方法charAt(index) 返回指定位置的字符 concat(string)连接字符串 indexOf(str) 返回小字符串在字符串对象中第一次出现位置 -1表示不存在 lastlndexOf() 返回小字符在字符串中最后一次出现的位置 substr(start, length)截取字符串 省略长度截取到结束 substring(start, end)截取字符串,省略结束位置 一直到最后 slice(start, end)与substring 一模一样 split(char) 把字符串分割为数组 toUpperCase() 把字符串转为大写 toLowerCase() 把字符串转为小写 match() 匹配字符串 可用正则 search()查找字符串 可用正则 replace() 替换字符串可用正则 charCodeAt() 返回在指定的位置的字符的 Unicode 编码。 String.formCharCode() 从字符编码创建一个字符串。三、Array3.1 创建数组使用直接量[] 构造函数方式 new Array()3.2 数组特点索引必须连续 如果索引不连续，会产生稀疏数组3.3 数组的遍历（迭代）for 循环遍历 for ... in 循环 for ... of 循环3.4 数组元素的添加和删除#添加 为新索引赋值 利用数组长度,在数组尾部插入新元素 push() unshift() splice()#改变数组长度 pop() shift() splce() 运算符delete3.5 数组对象属性length数组长度 元素个数3.6 数组对象方法splice() 删除指定位置指定个数的元素 替换指定位置指定个数的元素 添加指定位置的元素 返回 被删除的元素组成的数组 reverse()翻转数组 sort() 数组排序 push() 和 pop() 在数组的最后添加或删除元素 unshift()和shift()在数组的最前面添加或删除元素 toString() 和 toLocalString() 把数组转换为字符串join0 把数组的元素拼接成字符串 slice() 截取数组中的一部分,返回新的数组 slice(start, end) concat()合并多个数组 indexOf() 搜索数组中的元素，并返回它所在的位置, lastlndexOf() 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索 forEach() 遍历 循环 map() 通过指定函数处理数组的每个元素，并返回处理后的数组 filter() 检测数值元素，并返回符合条件所有元素的数组 every() 检测数值元素的每个元素是否都符合条件。 some() 检测数组元素中是否有元素符合指定条件 reduce() 将数组元素 索引值从低到高 进行组合 reduceRight()将数组元素 索引值从高到低进行组合四、Math4.1 属性PI 返回圆周率（约等于3.14159）4.2 方法abs(x)返回数的绝对值。 sqrt(x) 返回数的平方根。 pow(x,y) 返回 x的y次幂。 ceil(x) 对数进行上舍入。 floor(x) 对数进行下舍入。 round(x) 把数四舍五入为最接近的整数。 max(x,y) 返回 x和 y中的最高值。 min(x,y) 返回 x和y中的最低值。 random() 返回0~1之间的随机数。五、Date5.1 方法getYear() 请使用 getFullYear0) 方法代替。 getFullYear() 从 Date 对象以四位数字返回年份。 getMonth() 从 Date 对象返回月份 (0 ~ 11)。 getDate() 从 Date 对象返回一个月中的某一天(1 ~ 31)。 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。 getHours() 返回 Date 对象的小时 (0 ~ 23)。 getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。 getSeconds() 返回 Date 对象的秒数 (0 ~ 59). getMilliseconds() 返回 Date 对象的亳秒(0 ~ 999). getTime() 返回 1970 年 1月1 日至今的毫秒数。 getTimezoneOffset() 返回本地时间与格林威治标准时间(GMT) 的分钟差, getUTc... 标准时区 set... setUTC.. toTimeString0 把 Date 对象的时间部分转换为字符串。 toDateString() 把 Date 对象的日期部分转换为字符串。 toUTCString() 根据世界时，把 Date 对象转换为字符串。 toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串 toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串 toLocaleDateString()根据本地时间格式，把 Date 对象的日期部分转换为字符串。六、RegExp6.1 属性global RegExp 对象是否具有标志 g ignoreCase RegExp 对象是否具有标志i。 lastlndex 一个整数，标示开始下一次匹配的字符位置 multiline RegExp 对象是否具有标志 m。 source 正则表达式的源文本。6.2 方法exec() 检索字符串中指定的值。返回找到的值，并确定其位置 test() 检索字符串中指定的值。返回 true 或 false。七、JSON7.1 方法JSON.parse() 解析json格式的字符串 JSON.stringify() 序列化对象 数组 或 原始值八、Global8.1 属性NAN InFinity8.2 方法escape()对字符串进行Unicode编码。 unescape() 对由 escape0 编码的字符串进行解码。encodeURl0 把字符串编码为 URI。对其他一些在网址中有特殊含义的符号":/?:@ &=+$,#"不进行编码 decodeURl() 解码某个编码的 URI。 encodeURlComponent() 把字符串编码为 URI 组件 decodeURlComponent() 解码一个编码的 URI 组件。 eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。 isFinite( 检查某个值是否为有穷大的数。 isNaN0) 检查某个值是否是数字。 parselnt() 解析一个字符串并返回一个整数。 parseFloat() 解析一个字符串并返回一个浮点数。 Number0) 把对象的值转换为数字。 String() 把对象的值转换为字符串。 所有内置构造函数 都是 全局对象的属性
-
js函数 一、JavaScript函数1.1 声明函数的方式function 关键字 匿名函数方式(表达式方式) Function 构造函数方式1.2 参数问题形参和实参数量问题 可选形参(参数默认值) 可变长的实参列表:实参对象 aruguments1.3 回调函数#一个函数就可以接收另一个函数作为参数，这种函数就称之为回调函数(高阶函数) function add(x, y, f) { return f(x) + f(y); } add(-5, 6, Math.abs)1.4 递归函数 函数内部调用自己就是递归函数//用递归 实现阶乘 function multiply(n) { if (n == 1) { return 1 } return n * multiply(n - 1) }1.5 自调函数 函数声明完 直接调用(function(){ console.log('ok') })()1.6 闭包函数 当一个函数返回了一个函数后，其内部的局部变量还被新函数引用，形成闭包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(); // 1 f2(); // 4 f3(); // 9二、JavaScript作用域2.1 局部作用域函数中使用定义的变量就是局部变量，只能在本函数中使用2.2 全局作用域var a = 100 function demo(){ console.log(a) var a = 200 }2.3 作用域链 函数嵌套函数会形成作用域链function demo(){ function fn(){ function fn1() { } } }2.4 块状作用域（ES6） 使用let关键字声明的变量会具有块状作用域for (let i = 0; i < 10; i ++) { } console.log(i) //变量不存在 Uncaught ReferenceError: i is not defined
-
js基础语法 一、分支结构1.1 if基础语法if (条件表达式) { 代码块; } // 1. 当条件表达式结果为true，会执行代码块；反之不执行 // 2. 条件表达式可以为普通表达式 // 3. 0、undefined、null、""、NaN为假，其他均为真1.2 if复杂语法// 1.双分支 if (表达式1) { 代码块1; } else { 代码块2; } // 2.多分支 if (表达式1) { } else if (表达式2) { } ... else if (表达式2) { } else { }1.3 if嵌套if (表达式1) { if (表达式2) { } }1.4 案例var weather = prompt("天气(晴|雨)"); // 文本输入弹出框 if (weather == "晴") { alert("今天是晴天") } else if (weather == "雨") { alert("今天是雨天") } else { alert("输入信息有误") }二、循环结构2.1 or循环for (循环变量①; 条件表达式②; 循环变量增量③) { 代码块④; } // for循环执行的顺序：① ②④③ ... ②④③ ②，入口为①，出口为②，②④③就是循环过程 // 案例： for (var i = 0; i < 5; i++) { console.log(i); } // 结果： 0 1 2 3 42.2 while循环while (条件表达式) { 代码块; } // 条件满足执行代码块，条件不满足跳出循环 // 案例： var i = 0; while (i < 5) { console.log(i); i++; } // 结果： 0 1 2 3 42.3 for...in迭代器var arr = [1, 2, 3, 4, 5] for (num in arr) { console.log(num); } // 结果： 0 1 2 3 42.4 break,continue关键词// 1. break：结束本层循环 // 2. continue：结束本次循环进入下一次循环三、JavaScript对象3.1 Object类型3.1.1 创建# 直接量 var obj = {name:'xiaolili', age:100, getInfo:function( console.log(this.age) )}new 构造函数 var obj = new Object() obj.name = 'xiaolili' obj.age = 1003.1.2 属性操作#读取或修改属性 console.log(obj.name) obj.name = 'lili' console.log(obj['name']) obj['name'] = 'honghong'删除属性 delete obj['name'] delete obj.name监测属性是否存在 delete obj['name'] delete obj.name3.2 声明类（构造函数）function User(name, age){ this.name = name this.age = age this.getInfo = function(){ console.log(this.name, this.age) } } var u = new User('鲁迅', 45)每个对象都有一个属性.constructor 从而获取其构造函数使用运算符instanceof可以判断一个对象是否属于某个构造函数3.3 thisthis表示方法 所属的对象全局函数中的this 指向 window3.4 原型和原型链每一个JavaScript对象都和另一个对象相关联,并从另一个对象继承属性,另一个对象就是”原型” 用直接量创建的对象 都具有同一个原型对象 Object.prototype原型链：对象的原型也有原型构成了原型链获取原型： 构造函数.prototype 对象.__proto__给原型添加属性和方法，以该对象为原型的对象 都可以使用该方法 检测属性 是自有属性还是继承自原型的属性 obj.hasOwnProperty(proName) 创建对象时指定原型 Object.create(原型对象)
-
js基础数据类型 一、变量的定义JS中定义变量，不同于Pvthon，我们需要像Python定义函数那样，也需要用特定的关键词来定义变量: ES5语法，我们采用var关键词定义变量，并且没有常量的概念 ES6语法，我们采用let关键词定义变量，用const关键词定义常量 注:我们不需要像Python那样切换解释器版本来区别到底该书写什么版本语法的代码，在一个JS文件中我们可以同时书写两种语法的JS代码，浏览器都可以自动帮我们解析并运行。// ES5定义变量：var是关键词、num是变量名、=为赋值符、10为变量值、;为JS语言语句的结束标识符 var num = 10; // ES6定义变量 let count = 100; const PI = 3.14;二、变量的命名规范/* 1. 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符） 2. 区分大小写 3. 不能出现关键字及保留字 */三、基本数据类型（JS语言中基本数据类型分值类型与引用类型两部分）3.1 指类型// 数字类型：number var num = 10; const PI = 3.14; console.log(typeof(num), num); // 结果：number 10 // 字符串类型：string var s1 = "双引号可以表示字符串"; var s2 = '单引号可以表示字符串'; console.log(typeof(s1), s1); // 结果：string 双引号可以表示字符串 // 布尔类型：boolean var b1 = true; var b2 = false; console.log(typeof(b1), b1); // 结果：string 双引号可以表示字符串 // 未定义类型：undefined var u1; var u2 = undefined; console.log(typeof(u1), u1); // 结果：undefined undefined3.2 引用类型// 函数类型：function function fn1() {} var fn2 = function() {}; console.log(typeof(fn1), fn1); // 结果：function ƒ fn1() {} // 对象类型：object var obj1 = {} console.log(typeof(obj1), obj1); // 结果：function {} // Array对象类型： var arr1 = [1, 2, 3, 4, 5] console.log(typeof(arr1), arr1); // 结果：object (5) [1, 2, 3, 4, 5]四、运算符4.1 算数运算符（n=5）4.2 赋值运算符（x=5,y=5）4.3 比较运算符（x=5）4.4 逻辑运算符（n=5）4.5 三目运算符// 结果 = 条件表达式 ? 结果1 : 结果2; // 语法规则：条件表达式成立，将结果1赋值给结果，反正赋值结果2 // 案例： var weather = prompt("天气(晴|雨)"); // 文本输入弹出框 var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服"; console.log(res); // 今天天气挺好
