保定网站建设培训班,消费金融网站建设,个人wordpress主题,网站建设启动大会文章目录 JS是什么#xff1f;一、JS导入二、数据类型 变量 运算符三、流程控制四、函数五、对象 与 JSON5.1 对象5.2 JSON5.3 常见对象1. 数组2. Boolean对象3. Date对象4. Math5. Number6. String 六、事件6.1 常用方法1. 鼠标事件2. 键盘事件3. 表单事件 6.2 事件的绑定**1… 文章目录 JS是什么一、JS导入二、数据类型 变量 运算符三、流程控制四、函数五、对象 与 JSON5.1 对象5.2 JSON5.3 常见对象1. 数组2. Boolean对象3. Date对象4. Math5. Number6. String 六、事件6.1 常用方法1. 鼠标事件2. 键盘事件3. 表单事件 6.2 事件的绑定**1. 通过属性绑定****2.通过DOM编程绑定 与 触发** 七、BOM编程7.1 BOM控制浏览器行为演示7.2 BOM实现会话级和持久级数据存储 八、DOM编程8.1 获取页面元素的几种方式8.2 操作元素的属性值8.3 增删元素 总结 JS是什么
制作动态页面 脚本语言 弱类型 TS 强类型 一、JS导入
1.HTML内部包裹 但是只能单页面使用 scriptfunction suprise(){alert(Hello JS)}/script引入外部JS文件
script srcjs/button.js typetext/javascript/script二、数据类型 变量 运算符
2.1 数据类型
数值类型统一为 number , 不区分整数和浮点数字符串类型为 string 和JAVA中的String相似,JS中不严格区分单双引号,都可以用于表示字符串布尔类型为boolean 和Java中的boolean相似,但是在JS的if语句中, 非空字符串会被转换为’真’;非零数字也会被认为是’真’ 引用数据类型对象是Object类型, 各种对象和数组在JS中都是Object类型JS中的各种函数属于function数据类型js为弱类型语言,统一使用 var 声明对象和变量,在赋值时才确定真正的数据类型,变量如果只声明没有赋值的话,数据类型为undefined在JS中,如果给一个变量赋值为null,其数据类型是Object, 可以通过typeof关键字判断数据类型 2.2 变量
弱类型变量,可以统一声明成varvar声明的变量可以再次声明变量可以使用不同的数据类型多次赋值JS的语句可以以; 结尾,也可以不用;结尾变量标识符严格区分大小写如果使用了 一个没有声明的变量,那么运行时会报 uncaught ReferenceError: *** is not defined at index.html:行号:列号 错 如果一个变量只声明,没赋值,那么值是undefined 2.3 运算符 算数运算符 - * / % 其中需要注意的是 / 和 %
/在除0时,结果是Infinity ,而不是报错 %在模0时,结果是NaN,意思为 not a number ,而不是报错 复合算数运算符 – - * / % 同样需要注意 /和% 结果与上同 关系运算符 ! 需要注意的是 和 差别 符号,如果两端的数据类型不一致,会尝试将两端的数据转换成number,再对比number大小 ‘123’ 这种字符串可以转换成数字true会被转换成1 false会被转换成0 符号,如果两端数据类型不一致,直接返回false,数据类型一致在比较是否相同 逻辑运算符 || 条件运算符 条件? 值1 : 值2 三、流程控制
3.1 IF
if()中的非空字符串会被认为是trueif()中的非零数字会被认为是true 举例
if(false){// 非空字符串 if判断为trueconsole.log(true)
}else{console.log(false)
}
if(){// 长度为0字符串 if判断为falseconsole.log(true)
}else{console.log(false)
}
if(1){// 非零数字 if判断为trueconsole.log(true)
}else{console.log(false)
}
if(0){console.log(true)
}else{console.log(false)
}3.2 Switch 与JAVA一致
var monthStr prompt(请输入月份, 例如10);
var month Number.parseInt(monthStr);switch (month) {case 3:case 4:case 5 :console.log(春季);break;case 6 :case 7:case 8 :console.log(夏季);break;default :console.log(输入有误);
}3.3 循环
while
/* 打印99 乘法表 */
let i 1;
while(i 9){let j 1;while(j i){document.write(j * i j * i nbsp;nbsp;nbsp;nbsp;);j;}document.write(hr/);i;
}for
for (let i 1; i 9; i) {for (let j 1; j i; j) {document.write(j * i j * i nbsp;nbsp;nbsp;nbsp;);}document.write(hr/)
}foreach
var cities [北京,上海,深圳,武汉,西安,成都];
document.write(ul);
for (var index in cities) {document.write(licities[index]/li)
}
document.write(/ul);四、函数
函数没有权限控制符不用声明函数的返回值类型,需要返回在函数体中直接return即可,也无需void关键字参数列表中,无需数据类型调用函数时,实参和形参的个数可以不一致声明函数时需要用function关键字函数没有异常列表
/*
语法1 : function 函数名 (参数列表){函数体}*/
function sum(a, b) {return a b;
}var result sum(1,2);
console.log(result);/*
语法2 : var 函数名 function (参数列表){函数体}*/
var add function (c,d) {return c*d;
}let result2 add(1,2);
console.log(result2);五、对象 与 JSON
5.1 对象
// 语法1 通过new Object()直接创建对象
let person new Object();
// 添加属性并且赋值
person.name Gavin;
person.age 20;
person.foods[橘子,树莓,香蕉];
//对象添加函数
person.eat function () {console.log(this.age this.name吃:);for (let i 0; i this.foods.length; i) {console.log(this.foods[i]);}
}
//调用对象属性值
console.log(person.name);
console.log(person.age);
//调用对象方法
person.eat();/*
* 语法2 通过 {}形式创建对象
* 语法为 var person {
* 属性名:属性值,属性名,属性值,函数名:函数}
* */
var person {name : Doug,age : 25,foods : [橘子,树莓,香蕉],eat : function () {console.log(this.age this.name吃:);for (let i 0; i this.foods.length; i) {console.log(this.foods[i]);}}
}
//调用对象属性值
console.log(person.name);
console.log(person.age);
//调用对象方法
person.eat();5.2 JSON 一种字符串格式可以转换成对象用于前后端传输数据。 通过JSON.parse()方法可以将一个JSON串转换成对象 通过JSON.stringify()方法可以将一个对象转换成一个JSON格式的字符串 JSON的语法 var obj“{‘属性名’:‘属性值’,‘属性名’:{‘属性名’:‘属性值’},‘属性名’:[‘值1’,‘值1’,‘值3’]}”
/* 定义一个JSON串 */
var guyStr {name:道格,age:26,Friend:{name:维克,age:24},food:[苹果,香蕉,树莓],pets:[{type:Dog,name:刀疤},{type:Cat,name:丧彪}]};
/* 将一个JSON串转换为对象 */
var guy JSON.parse(guyStr);
console.log(guy);
console.log(typeof guy);// object
/* 获取对象属性值 */
console.log(guy.name);
console.log(guy.Friend.name);
console.log(guy.food[0]);
console.log(guy.pets[1].type);/* 定义一个对象 */
var student {name : 道格,age : 26,Friend : {name : 维克,age : 24},food : [苹果,香蕉,树莓],pets : [{type : Dog , name : 刀疤},{type : Cat , name : 丧彪}]
}
/* 获取对象属性值 */
console.log(student.name);
console.log(student.age);
console.log(student.Friend.name);
for (let i 0; i student.food.length; i) {console.log(student.food[i]);
}
console.log(student.pets[0].type);
/* 将对象转换成JSON字符串 */
var stuStrForJSON JSON.stringify(student);
console.log(stuStrForJSON);
console.log(typeof stuStrForJSON);5.3 常见对象
1. 数组
创建数组四种方式
new Array() 创建空数组new Array(5) 创建数组时给定长度new Array(ele1,ele2,ele3,… … ,elen); 创建数组时指定元素值[ele1,ele2,ele3,… … ,elen]; 相当于第三种语法的简写
数组常见API JS数组属于Object类型,其长度是可以变化的,更像JAVA中的集合
方法描述concat()连接两个或更多的数组并返回结果。copyWithin()从数组的指定位置拷贝元素到数组的另一个指定位置中。entries()返回数组的可迭代对象。every()检测数值元素的每个元素是否都符合条件。fill()使用一个固定值来填充数组。filter()检测数值元素并返回符合条件所有元素的数组。find()返回符合传入测试函数条件的数组元素。findIndex()返回符合传入测试函数条件的数组元素索引。forEach()数组每个元素都执行一次回调函数。from()通过给定的对象中创建一个数组。includes()判断一个数组是否包含一个指定的值。indexOf()搜索数组中的元素并返回它所在的位置。isArray()判断对象是否为数组。join()把数组的所有元素放入一个字符串。keys()返回数组的可迭代对象包含原始数组的键(key)。lastIndexOf()搜索数组中的元素并返回它最后出现的位置。map()通过指定函数处理数组的每个元素并返回处理后的数组。pop()删除数组的最后一个元素并返回删除的元素。push()向数组的末尾添加一个或更多元素并返回新的长度。reduce()将数组元素计算为一个值从左到右。reduceRight()将数组元素计算为一个值从右到左。reverse()反转数组的元素顺序。shift()删除并返回数组的第一个元素。slice()选取数组的一部分并返回一个新数组。some()检测数组元素中是否有元素符合指定条件。sort()对数组的元素进行排序。splice()从数组中添加或删除元素。toString()把数组转换为字符串并返回结果。unshift()向数组的开头添加一个或更多元素并返回新的长度。valueOf()返回数组对象的原始值。Array.of()将一组值转换为数组。Array.at()用于接收一个整数值并返回该索引对应的元素允许正数和负数。负整数从数组中的最后一个元素开始倒数。Array.flat()创建一个新数组这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。Array.flatMap()使用映射函数映射每个元素然后将结果压缩成一个新数组。
2. Boolean对象
toString()把布尔值转换为字符串并返回结果。valueOf()返回 Boolean 对象的原始值。
3. Date对象
方法描述getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)。getDay()从 Date 对象返回一周中的某一天 (0 ~ 6)。getFullYear()从 Date 对象以四位数字返回年份。getHours()返回 Date 对象的小时 (0 ~ 23)。getMilliseconds()返回 Date 对象的毫秒(0 ~ 999)。getMinutes()返回 Date 对象的分钟 (0 ~ 59)。getMonth()从 Date 对象返回月份 (0 ~ 11)。getSeconds()返回 Date 对象的秒数 (0 ~ 59)。getTime()返回 1970 年 1 月 1 日至今的毫秒数。getTimezoneOffset()返回本地时间与格林威治标准时间 (GMT) 的分钟差。getUTCDate()根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。getUTCDay()根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。getUTCFullYear()根据世界时从 Date 对象返回四位数的年份。getUTCHours()根据世界时返回 Date 对象的小时 (0 ~ 23)。getUTCMilliseconds()根据世界时返回 Date 对象的毫秒(0 ~ 999)。getUTCMinutes()根据世界时返回 Date 对象的分钟 (0 ~ 59)。getUTCMonth()根据世界时从 Date 对象返回月份 (0 ~ 11)。getUTCSeconds()根据世界时返回 Date 对象的秒钟 (0 ~ 59)。getYear()已废弃。 请使用 getFullYear() 方法代替。parse()返回1970年1月1日午夜到指定日期字符串的毫秒数。setDate()设置 Date 对象中月的某一天 (1 ~ 31)。setFullYear()设置 Date 对象中的年份四位数字。setHours()设置 Date 对象中的小时 (0 ~ 23)。setMilliseconds()设置 Date 对象中的毫秒 (0 ~ 999)。setMinutes()设置 Date 对象中的分钟 (0 ~ 59)。setMonth()设置 Date 对象中月份 (0 ~ 11)。setSeconds()设置 Date 对象中的秒钟 (0 ~ 59)。setTime()setTime() 方法以毫秒设置 Date 对象。setUTCDate()根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。setUTCFullYear()根据世界时设置 Date 对象中的年份四位数字。setUTCHours()根据世界时设置 Date 对象中的小时 (0 ~ 23)。setUTCMilliseconds()根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。setUTCMinutes()根据世界时设置 Date 对象中的分钟 (0 ~ 59)。setUTCMonth()根据世界时设置 Date 对象中的月份 (0 ~ 11)。setUTCSeconds()setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。setYear()已废弃。请使用 setFullYear() 方法代替。toDateString()把 Date 对象的日期部分转换为字符串。toGMTString()已废弃。请使用 toUTCString() 方法代替。toISOString()使用 ISO 标准返回字符串的日期格式。toJSON()以 JSON 数据格式返回日期字符串。toLocaleDateString()根据本地时间格式把 Date 对象的日期部分转换为字符串。toLocaleTimeString()根据本地时间格式把 Date 对象的时间部分转换为字符串。toLocaleString()根据本地时间格式把 Date 对象转换为字符串。toString()把 Date 对象转换为字符串。toTimeString()把 Date 对象的时间部分转换为字符串。toUTCString()根据世界时把 Date 对象转换为字符串。实例var today new Date(); var UTCstring today.toUTCString();UTC()根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。valueOf()返回 Date 对象的原始值。
4. Math
方法描述abs(x)返回 x 的绝对值。acos(x)返回 x 的反余弦值。asin(x)返回 x 的反正弦值。atan(x)以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。atan2(y,x)返回从 x 轴到点 (x,y) 的角度介于 -PI/2 与 PI/2 弧度之间。ceil(x)对数进行上舍入。cos(x)返回数的余弦。exp(x)返回 Ex 的指数。floor(x)对 x 进行下舍入。log(x)返回数的自然对数底为e。max(x,y,z,…,n)返回 x,y,z,…,n 中的最高值。min(x,y,z,…,n)返回 x,y,z,…,n中的最低值。pow(x,y)返回 x 的 y 次幂。random()返回 0 ~ 1 之间的随机数。round(x)四舍五入。sin(x)返回数的正弦。sqrt(x)返回数的平方根。tan(x)返回角的正切。tanh(x)返回一个数的双曲正切函数值。trunc(x)将数字的小数部分去掉只保留整数部分。
5. Number
方法描述isFinite检测指定参数是否为无穷大。isInteger检测指定参数是否为整数。isNaN检测指定参数是否为 NaN。isSafeInteger检测指定参数是否为安全整数。toExponential(x)把对象的值转换为指数计数法。toFixed(x)把数字转换为字符串结果的小数点后有指定位数的数字。toLocaleString(locales, options)返回数字在特定语言环境下的表示字符串。toPrecision(x)把数字格式化为指定的长度。toString()把数字转换为字符串使用指定的基数。valueOf()返回一个 Number 对象的基本数字值。
6. String
方法描述charAt()返回在指定位置的字符。charCodeAt()返回在指定的位置的字符的 Unicode 编码。concat()连接两个或更多字符串并返回新的字符串。endsWith()判断当前字符串是否是以指定的子字符串结尾的区分大小写。fromCharCode()将 Unicode 编码转为字符。indexOf()返回某个指定的字符串值在字符串中首次出现的位置。includes()查找字符串中是否包含指定的子字符串。lastIndexOf()从后向前搜索字符串并从起始位置0开始计算返回字符串最后出现的位置。match()查找找到一个或多个正则表达式的匹配。repeat()复制字符串指定次数并将它们连接在一起返回。replace()在字符串中查找匹配的子串并替换与正则表达式匹配的子串。replaceAll()在字符串中查找匹配的子串并替换与正则表达式匹配的所有子串。search()查找与正则表达式相匹配的值。slice()提取字符串的片断并在新的字符串中返回被提取的部分。split()把字符串分割为字符串数组。startsWith()查看字符串是否以指定的子字符串开头。substr()从起始索引号提取字符串中指定数目的字符。substring()提取字符串中两个指定的索引号之间的字符。toLowerCase()把字符串转换为小写。toUpperCase()把字符串转换为大写。trim()去除字符串两边的空白。toLocaleLowerCase()根据本地主机的语言环境把字符串转换为小写。toLocaleUpperCase()根据本地主机的语言环境把字符串转换为大写。valueOf()返回某个字符串对象的原始值。toString()返回一个字符串。
六、事件
事件就是与浏览器交互的行为事件比如点击按钮 发生相应的事件也就是执行函数功能点击调用方法。
6.1 常用方法
1. 鼠标事件
属性描述onclick当用户点击某个对象时调用的事件句柄。oncontextmenu在用户点击鼠标右键打开上下文菜单时触发ondblclick当用户双击某个对象时调用的事件句柄。onmousedown鼠标按钮被按下。onmouseenter当鼠标指针移动到元素上时触发。onmouseleave当鼠标指针移出元素时触发onmousemove鼠标被移动。onmouseover鼠标移到某元素之上。onmouseout鼠标从某元素移开。onmouseup鼠标按键被松开。
2. 键盘事件
属性描述onkeydown某个键盘按键被按下。onkeypress某个键盘按键被按下并松开。onkeyup某个键盘按键被松开。
3. 表单事件
属性描述onblur元素失去焦点时触发onchange该事件在表单元素的内容改变时触发( , , , 和 )onfocus元素获取焦点时触发onfocusin元素即将获取焦点时触发onfocusout元素即将失去焦点时触发oninput元素获取用户输入时触发onreset表单重置时触发onsearch用户向搜索域输入文本时触发 ( input“search”)onselect用户选取文本时触发 ( 和 )onsubmit表单提交时触发
6.2 事件的绑定
1. 通过属性绑定
headmeta charsetUTF-8titleTitle/titlescriptfunction testDown1(){console.log(down1)}function testDown2(){console.log(down2)}function testFocus(){console.log(获得焦点)}function testBlur(){console.log(失去焦点)}function testChange(input){console.log(内容改变)console.log(input.value);}function testMouseOver(){console.log(鼠标悬停)}function testMouseLeave(){console.log(鼠标离开)}function testMouseMove(){console.log(鼠标移动)}/script
/head
body
input typetextoncontextmenutestDown2()ondblclicktestFocus()onmouseuptestBlur()onmousedowntestDown1()onmouseentertestMouseOver()onmousemovetestMouseMove()onmouseleavetestMouseLeave()onkeydowntestDown1(),testDown2()onchangetestChange(this)
/
button onclicktestDown1()按钮/button
/body通过事件属性绑定函数,在行为发生时会自动执行函数一个事件可以同时绑定多个函数一个元素可以同时绑定多个事件方法中可以传入 this对象,代表当前元素 2.通过DOM编程绑定 与 触发
html langen
headmeta charsetUTF-8titleTitle/titlescript// 页面加载完毕事件,浏览器加载完整个文档行为window.onload function () {var inpId document.getElementById(testInp);// 通过DOM编程绑定事件inpId.onchange testChange;var byId document.getElementById(btn1);byId.onclick function () {console.log(被点了);// 调用事件方法触发事件inpId.onchange();}}function testChange() {console.log(内容改变);console.log(event.target.value);}/script
/head
body
input typetext idtestInp/
button idbtn1按钮/button
/body
/html七、BOM编程 BOM是Browser Object Model的简写即浏览器对象模型。 通过window对象及属性的一系列方法 控制浏览器行为的一种编程 BOM编程的对象结构如下 :
window 顶级对象,代表整个浏览器窗口 location对象 window对象的属性之一,代表浏览器的地址栏history对象 window对象的属性之一,代表浏览器的访问历史screen对象 window对象的属性之一,代表屏幕navigator对象 window对象的属性之一,代表浏览器软件本身document对象 window对象的属性之一,代表浏览器窗口目前解析的html文档console对象 window对象的属性之一,代表浏览器开发者工具的控制台localStorage对象 window对象的属性之一,代表浏览器的本地数据持久化存储sessionStorage对象 window对象的属性之一,代表浏览器的本地数据会话级存储
7.1 BOM控制浏览器行为演示
1. 三种弹窗方法
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescriptfunction testAlert() {//普通信息弹窗window.alert(提示信息)}function testConfirm() {// 确认框var con confirm(确认删除)if(con){alert(确认)}else{alert(NO)}}function testPrompt(){//信息输入 对话框var res prompt(请输入名称,例如道格);alert(您输入的是 res);}/script
/head
bodyinput typebutton value提示框 onclicktestAlert()/ brinput typebutton value确认框 onclicktestConfirm()/ brinput typebutton value对话框 onclicktestPrompt()/ br
/body
/html2. 页面跳转
headmeta charsetUTF-8titleTitle/titlescriptfunction goGitHub() {var flag confirm(即将切换到GitHub)if(flag){// 通过BOM地址栏切换URLwindow.location.href https://github.com/knellwake;}}/script
/head
bodybutton onclickgoGitHub()跳转页面/button
/body
/html7.2 BOM实现会话级和持久级数据存储
会话级数据 : 内存型数据,是浏览器在内存上临时存储的数据,浏览器关闭后,数据失去,通过window的sessionStorge属性实现持久级数据 : 磁盘型数据,是浏览器在磁盘上持久存储的数据,浏览器关闭后,数据仍在,通过window的localStorge实现可以用于将来存储一些服务端响应回来的数据,比如:token令牌,或者一些其他功能数据,根据数据的业务范围我们可以选择数据存储的会话/持久 级别
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescriptfunction saveItem(){// 存储会话 临时window.sessionStorage.setItem(sessionMsg,sessionValue);// 存储持久window.localStorage.setItem(localMsg,localValue);console.log(ok!)}function removeItem() {// 删除数据sessionStorage.removeItem(sessionMsg);localStorage.removeItem(localMsg);}function readItem() {// 读取数据console.log(开始读取)console.log(session: sessionStorage.getItem(sessionMsg));console.log(local: localStorage.getItem(localMsg));}/script
/head
bodyinput typebutton value存储数据 onclicksaveItem()input typebutton value读取数据 onclickreadItem()input typebutton value删除数据 onclickremoveItem()
/body
/html结果
会话 数据 关闭浏览器再打开 读取后为Null持久 存储的 存在 删除后也为 Null
八、DOM编程 DOM(Document Object Model)编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程. document对象代表整个html文档可用来访问页面中的所有元素根据HTML代码结构特点,document对象本身是一种树形结构的文档对象。 以上代码的生成树结构 DOM编程其实就是用window对象的document属性的相关API完成对页面元素的控制的编程 DOM树中节点的类型node 节点,所有结点的父类型 element 元素节点,node的子类型之一,代表一个完整标签attribute 属性节点,node的子类型之一,代表元素的属性text 文本节点,node的子类型之一,代表双标签中间的文本
8.1 获取页面元素的几种方式
在整个文档范围内查找元素结点
功能API返回值根据id值查询document.getElementById(“id值”)一个具体的元素节根据标签名查询document.getElementsByTagName(“标签名”)元素节点数组根据name属性值查询document.getElementsByName(“name值”)元素节点数组根据类名查询document.getElementsByClassName(“类名”)元素节点数组
在具体元素节点范围内查找子节点
功能API返回值查找子标签element.children返回子标签数组查找第一个子标签element.firstElementChild标签对象查找最后一个子标签element.lastElementChild节点对象
查找指定子元素节点的父节点
功能API返回值查找指定元素节点的父标签element.parentElement标签对象
查找指定元素节点的兄弟节点
功能API返回值查找前一个兄弟标签node.previousElementSibling标签对象查找后一个兄弟标签node.nextElementSibling标签对象
headmeta charsetUTF-8titleTitle/titlescript/*
1 获得document dom树window.document
2 从document中获取要操作的元素1. 直接获取var el1 document.getElementById(username) // 根据元素的id值获取页面上唯一的一个元素var els document.getElementsByTagName(input) // 根据元素的标签名获取多个同名元素var els document.getElementsByName(Doug) // 根据元素的name属性值获得多个元素var els document.getElementsByClassName(calssA) // 根据元素的class属性值获得多个元素2. 间接获取var csdiv01.children // 通过父元素获取全部的子元素var firstChild div01.firstElementChild // 通过父元素获取第一个子元素var lastChild div01.lastElementChild // 通过父元素获取最后一个子元素var parent pinput.parentElement // 通过子元素获取父元素var pElement pinput.previousElementSibling // 获取前面的第一个元素var nElement pinput.nextElementSibling // 获取后面的第一个元素
*/function fun1(){//1 获得document//2 通过document获得元素var el1 document.getElementById(username); // 根据元素的id值获取页面上唯一的一个元素console.log(el1);}function fun2(){var els document.getElementsByTagName(input); // 根据元素的标签名获取多个同名元素for(var i 0 ; i els.length ; i){console.log(els[i]);}}function fun3(){var els document.getElementsByName(Doug) // 根据元素的name属性值获得多个元素console.log(els)for(var i 0;i els.length;i){console.log(els[i])}}function fun4(){var els document.getElementsByClassName(classA) // 根据元素的class属性值获得多个元素for(var i 0 ; i els.length ; i){console.log(els[i])}}function fun5(){// 先获取父元素var div01 document.getElementById(div01)// 获取所有子元素var csdiv01.children // 通过父元素获取全部的子元素for(var i 0;i cs.length;i){console.log(cs[i])}console.log(div01.firstElementChild) // 通过父元素获取第一个子元素console.log(div01.lastElementChild) // 通过父元素获取最后一个子元素}function fun6(){// 获取子元素var pinput document.getElementById(password)console.log(pinput.parentElement) // 通过子元素获取父元素}function fun7(){// 获取子元素var pinput document.getElementById(password)console.log(pinput.previousElementSibling) // 获取前面的第一个元素console.log(pinput.nextElementSibling) // 获取后面的第一个元素}/script
/head
body
div iddiv01input typetext classclassA idusername nameDoug/input typetext classclassB idpassword nameDoug/input typetext classclassA idemail/input typetext classclassC idaddress/
/div
input typetext classclassA/brhr
input typebutton value通过父元素获取子元素 onclickfun5() idbtn05/
input typebutton value通过子元素获取父元素 onclickfun6() idbtn06/
input typebutton value通过当前元素获取兄弟元素 onclickfun7() idbtn07/
hrinput typebutton value根据id获取指定元素 onclickfun1() idbtn01/
input typebutton value根据标签名获取多个元素 onclickfun2() idbtn02/
input typebutton value根据name属性值获取多个元素 onclickfun3() idbtn03/
input typebutton value根据class属性值获得多个元素 onclickfun4() idbtn04/
/body
/html8.2 操作元素的属性值
属性操作
需求操作方式读取属性值元素对象.属性名修改属性值元素对象.属性名新的属性值
内部文本操作
需求操作方式获取或者设置标签体的文本内容element.innerText获取或者设置标签体的内容element.innerHTML
headmeta charsetUTF-8titleTitle/titlescript/*对元素进行操作1. 操作元素的属性 元素名.属性名2. 操作元素的样式 元素名.style.样式名 样式名- 要进行驼峰转换3. 操作元素的文本 元素名.innerText 只识别文本元素名.innerHTML 同时可以识别html代码*/function changeAttribute() {var in1 document.getElementById(in1)// 语法 元素.属性名// 获得属性值console.log(in1.type)console.log(in1.value)// 修改属性值in1.type buttonin1.value 嗨}function changeStyle() {var in1 document.getElementById(in1)// 语法 元素.style.样式名 原始样式名中的-符号 要转换驼峰式 background-color backgroundColorin1.style.color greenin1.style.borderRadius 5px}function changeText() {var div01 document.getElementById(div01)/*语法 元素名.innerText 只识别文本元素名.innerHTML 同时可以识别html代码*/console.log(div01.innerText)div01.innerHTML h1嗨/h1}/scriptstyle#in1 {color: red;}/style
/head
bodyinput idin1 typetext valuehello
div iddiv01hello
/divhr
button onclickchangeAttribute()操作属性/button
button onclickchangeStyle()操作样式/button
button onclickchangeText()操作文本/button/body
/html8.3 增删元素
对页面的元素进行增删操作
API功能document.createElement(“标签名”)创建元素节点并返回但不会自动添加到文档中document.createTextNode(“文本值”)创建文本节点并返回但不会自动添加到文档中element.appendChild(ele)将ele添加到element所有子节点后面parentEle.insertBefore(newEle,targetEle)将newEle插入到targetEle前面parentEle.replaceChild(newEle, oldEle)用新节点替换原有的旧子节点element.remove()删除某个标签
headmeta charsetUTF-8titleTitle/titlescript/* 增删元素var element document.createElement(元素名) // 创建元素父元素.appendChild(子元素) // 在父元素中追加子元素父元素.insertBefore(新元素,参照元素) // 在某个元素前增加元素父元素.replaceChild(新元素,被替换的元素) // 用新的元素替换某个子子元素元素.remove() // 删除当前元素*/function addFz() {// 获取父元素 IDvar cityUl document.getElementById(city);// 创建新元素 li/livar fzLi document.createElement(li);// 设置新元素 id 属性 文本 li idcs福州/lifzLi.id fz;fzLi.innerText 福州;//在父元素中追加子元素cityUl.appendChild(fzLi);}function addCsBeforeSz() {// 获取父var cityUl document.getElementById(city);// 获取前面的var szLi document.getElementById(sz);// 创建新的var csLi document.createElement(li);csLi.id cs;csLi.innerText 长沙;//插入到szLi前面cityUl.insertBefore(csLi,szLi);}function replaceSz() {// 获取父var cityUl document.getElementById(city);// 获取var szLi document.getElementById(sz);// 创建新的var xmLi document.createElement(li);xmLi.id xm;xmLi.innerText 厦门;//插入到szLi前面cityUl.replaceChild(xmLi,szLi);}function removeGz(){var gzLi document.getElementById(gz);gzLi.remove();}function clearCity(){var cityUl document.getElementById(city);cityUl.remove();}/script
/head
body
ul idcityli idbj北京/lili idsh上海/lili idsz深圳/lili idgz广州/li
/ulhr
!-- 目标1 在城市列表的最后添加一个子标签 li idfz长沙/li --
button onclickaddFz()增加福州/button
!-- 目标2 在城市列表的深圳前添加一个子标签 li idcs长沙/li --
button onclickaddCsBeforeSz()在深圳前插入长沙/button
!-- 目标3 将城市列表的深圳替换为 li idxm厦门/li --
button onclickreplaceSz()替换深圳为厦门/button
!-- 目标4 将城市列表删除广州 --
button onclickremoveGz()删除广州/button
!-- 目标5 清空城市列表 --
button onclickclearCity()清空/button/body
/html总结
关于前后端传送数据
