国内精品在线网站建设,腰膝酸软乏力是肾阴虚还是肾阳虚,做动态文字的网站,河南今天发生的重大新闻文章目录 一、基本使用1.1 内部方式1.2 外部导入方式1.3 css标签调用js脚本#xff08;触发事件#xff09; 二、Windows对象2.1 对象属性2.2 对象方法 三、数据类型3.1 字符串处理3.2 数组处理3.3 对象处理 四、流程控制4.1 操作符4.2 if判断语句4.3 for循环语句4.4 continu… 文章目录 一、基本使用1.1 内部方式1.2 外部导入方式1.3 css标签调用js脚本触发事件 二、Windows对象2.1 对象属性2.2 对象方法 三、数据类型3.1 字符串处理3.2 数组处理3.3 对象处理 四、流程控制4.1 操作符4.2 if判断语句4.3 for循环语句4.4 continue与break语句4.5 函数定义与调用 五、选择器5.1 通过id获取元素5.2 通过标签名获取元素 六、JS操作HTML6.1 插入内容6.2 修改标签属性6.3 改变标签样式6.4 获取输入的值6.5 添加标签元素6.6 删除元素 一、基本使用 JavaScript简称JS是一种轻量级客户端脚本语言通常被直接嵌入HTML 页面在浏览器上执行。JavaScript作用改变页面中的HTML元素、属性、样式、事件。 1.1 内部方式 内嵌样式在body标签中使用。 1.在body标签中写js脚本。
!DOCTYPE html
html langen
headmeta charsetUTF-8titlejs测试/title
/head
body
scriptalert(你好qingjun);
/script
/body
/html2.查看效果。
1.2 外部导入方式 在head标签中使用。 1.编写js脚本main.js统一存放在js目录下。
alert(你好卿君);2.html模板引用js文件。
!DOCTYPE html
html langen
headmeta charsetUTF-8titlejs测试/titlescript typetext/javascript srcjs/main.js/script ##引用js文件。
/head
body
/body
/html3.查看效果。
1.3 css标签调用js脚本触发事件 事件指的是当HTML中发生某些事件时所调用的方法处理程序。例如点击按钮点击后做相应操作例如弹出一句话。 1.可以使用css中的一个标签直接调用js脚本。
!DOCTYPE html
html langen
headmeta charsetUTF-8titlejs测试/title
/head
bodybutton typebutton onclickalert(欢迎来到中国)提交/button ## onclick标签直接调用js脚本。/body
/html2.查看效果。
二、Windows对象 Window 对象表示浏览器中打开的窗口。 2.1 对象属性
window对象属性描述document每个载入浏览器的 HTML 文档都会成为 Document 对象innerheight返回窗口的文档显示区的高度innerwidth返回窗口的文档显示区的宽度location Location对象包含有关当前 URL 的信息Navigator Navigator对象包含有关浏览器的信息Screen Screen对象包含有关客户端显示屏幕的信息history History对象包含用户在浏览器窗口中访问过的 URLwindow window包含对窗口自身的引用
1.基本使用。
!DOCTYPE html
html langen
headmeta charsetUTF-8title控制开关/title
/head
body
script typetext/javascriptwindow.document.write(输出内容);console.log(window.innerWidth,window.innerHeight,输出内容); //浏览器做适配时可以使用。console.log(window.Navigator);
/script
/body
/html2.刷新按钮。
!DOCTYPE html
html langen
headmeta charsetUTF-8title控制开关/title
/head
body
button typebutton onclicklocation.reload()刷新当前页面/button
button typebutton onclicklocation.hreflocation.href重新请求当前页面/button
button typebutton onclicklocation.hrefhttp://www.baidu.com请求别的页面/button
/body
/html2.2 对象方法
window对象方法描述alert()显示带有一段消息和一个确认按钮的警告框confirm()显示带有一段消息以及确认按钮和取消按钮的对话框setInterval()按照指定的周期以毫秒计来调用函数或计算表达式clearInterval()取消由 setInterval() 设置的 timeoutsetTimeout()在指定的毫秒数后调用函数或计算表达式。类似于休眠clearTimeout()取消由 setTimeout() 方法设置的 timeouttypeof()查看数据类型
1.点击一次刷新一次当前系统时间。
!DOCTYPE html
html langen
headmeta charsetUTF-8title控制开关/title
/head
body
button typebutton onclickrefresh()点击查看当前时间/button
script typetext/javascriptfunction refresh() {date new Date()alert(当前时间为date)console.log(date)}
/script
/body
/html 2.点击开始时间自动走。
!DOCTYPE html
html langen
headmeta charsetUTF-8title控制开关/title
/head
bodydiv iddemop当前时间/p
/div
button typebutton onclickstartRefresh()开始/button
button typebutton onclickstopRefresh()停止/buttonscript typetext/javascriptfunction refresh() {x document.getElementById(demo);y x.getElementsByTagName(p);y[0].innerHTML new Date() // 获取当前时间}// 点击开始调用refresh()函数1000毫秒进行周期性计数走动。function startRefresh() {interval setInterval(refresh(), 1000);}// 停止function stopRefresh() {console.log(interval);clearInterval(interval)}
/script
/body
/html 三、数据类型 在JS中数据类型有字符串、数组、布尔、数组、对象、Null、Undefined。 3.1 字符串处理
1.字符串处理方法。
script typetext/javascriptvar s hello world;s.length; // 字符串长度s[4] //根据索引获取值s.replace(h,H); //替换某个字符s.split(分隔符) //分隔为数组s.match(w) //找到返回匹配的字符否则返回nullconsole.log(s.match(w)); //将内容打印在控制台。console.log(s.length);console.log(s);console.log(s.replace(o,M));console.log(s.split(o))
/script2.字符拼接。
3.2 数组处理
1.数组处理相当于python中的列表是一个序列的数据结构。
###############################################################
//定义数组。
var computer new Array(); //定义空数组。
var computer [主机,显示器,键盘,鼠标] //定义有值的数组。
###############################################################
//向数组添加元素。
computer[0]主机; //通过索引下标获取数组中的有序元素。
computer[1]显示器;
computer[2]键盘;
computer.push(网线); //追加元素。
###############################################################
console.log(computer[3]); //根据下标获取元素并打印到控制台。2.查看效果。
3.3 对象处理
1.对象处理相当于python中的字典是一个具有映射关系的数据结构用于存储有一定关系的元素。字典中的key不允许重复。
格式d {key1:value1, key2:value2, key3:value3}
###############################################################
var user {name:卿君,sex: 男,age:26
};
console.log(user.name); //根据key查看value值方式一。
console.log(user[age]); //根据key查看value值方式二。
user.height 180cm //增加一对key-value。
user[height] 182cm; //根据key修改value值。
console.log(user.height);2.查看效果。
四、流程控制
4.1 操作符 操作符一个特定的符号用它与其他数据类型连接起来组成一个表达式。常用于条件判断根据表达式返回True/False采取动作。 类型操作符比较操作符 等于! 不等于 大于 小于 大于等于 小于等于算术操作符 加法- 减法* 乘法 / 除法% 取余 自增自动1– 自减自动-1逻辑操作符 与 || 或!() 结果取反赋值运算符 赋值 加法赋值- 减法赋值* 乘法赋值/ 除法赋值% 取余赋值
4.2 if判断语句 if条件判断判定给定的条件是否满足True或False根据判断的结果决定执行的语句。 //语法。
if (表达式) {代码块
} else if (表达式) {代码块
} else {代码块
}1.控制开关。
!DOCTYPE html
html langen
headmeta charsetUTF-8title控制开关/title
/head
body
img iddengpao srcimg/off.png altbr
button typebutton onclickmain(on)开灯/button
button typebutton onclickmain(off)关灯/button
script typetext/javascriptfunction main(status) {x document.getElementById(dengpao);console.log(x);if (status on) {x.src img/on.png;} else if (status off) {x.src img/off.png;}
}
/script
/body
/html2.查看效果。
4.3 for循环语句 for循环一般用于遍历数据类型的元素进行处理例如字符串、数组、对象。 //语法。
for (变量 in 序列) {代码块
}1.遍历数组通过索引获取元素。
!DOCTYPE html
html langen
headmeta charsetUTF-8title控制开关/title
/head
body
script typetext/javascriptvar computer [主机,显示器,键盘,鼠标];for(i in computer) {// console.log(i) //获取元素索引。console.log(i,computer[i]) // 使用索引获取值}
/script
/body
/html2.遍历数组通过匿名函数返回元素。
!DOCTYPE html
html langen
headmeta charsetUTF-8title控制开关/title
/head
body
script typetext/javascriptvar computer [主机,显示器,键盘,鼠标];computer.forEach(function(e) {console.log(e)})
/script
/body
/html3.遍历对象。
!DOCTYPE html
html langen
headmeta charsetUTF-8title控制开关/title
/head
body
script typetext/javascriptvar user1 {name:卿君,sex:男,age:26}; for(let a in user1) { //方式一。console.log(auser1[a])}var user2 {name:柏木,sex:男,age:28};Object.keys(user2).forEach(function (k) { //方式二使用内置对象遍历。console.log(k —— user2[k])})
/script
/body
/html4.4 continue与break语句 continue 当满足条件时跳出本次循环。break 当满足条件时跳出所有循环。注意只有在循环语句中才有效。 1.示例代码。
!DOCTYPE html
html langen
headmeta charsetUTF-8title控制开关/title
/head
body
script typetext/javascriptvar computer [主机,显示器,键盘,鼠标];//不打印第三个元素for(i in computer) {if (i 2) {continue} else {console.log(computer[i])}}//不打印第第二个以后的元素for(i in computer) {if (i 2) {break} else {console.log(computer[i])}}
/script
/body
/html2.查看效果。
4.5 函数定义与调用 函数是指一段可以直接被另一段程序或代码引用的程序或代码。在编写代码时常将一些常用的功能模块编写成函数放在函数库中供公共使用可减少重复编写程序段和简化代码结构。 //语法
function 函数名称(参数1, 参数2, ...) {代码块
return 表达式
}1.定义函数hello在按钮中引用函数点击按钮执行hello函数。
!DOCTYPE html
html langen
headmeta charsetUTF-8title控制开关/title
/head
body
button typebutton onclickhello()按钮/button
script typetext/javascriptfunction hello() {alert(hello world)}
/script
/body
/html2.传参用法。
!DOCTYPE html
html langen
headmeta charsetUTF-8title控制开关/title
/head
body
button typebutton onclickhello(卿君,26)按钮/button
script typetext/javascriptfunction hello(name,age) {alert(你好,我是name, 今年age岁。)console.log(hello)}
/script
/body
/html五、选择器 查找元素方法 通过id常用通过类名通过标签名 5.1 通过id获取元素
1.示例代码。
!DOCTYPE html
html langen
headmeta charsetUTF-8titlejs测试/title
/head
body
button typebutton idqingjun查看内容/button
scriptvar x document.getElementById(qingjun); //获取id为qingjun的元素x.onclick function () { //绑定“查看内容”事件alert(好好学习)}
/script
/body
/html2.查看效果。
5.2 通过标签名获取元素
1.示例代码。
!DOCTYPE html
html langen
headmeta charsetUTF-8titlejs测试/title
/head
body
div idmainpHello world1/ppHello world2/ppHello world3/p
/div
script typetext/javascriptvar x document.getElementById(main); //document表示当前页面获取id为main的元素返回的是一个集合。var y x.getElementsByTagName(p); // 获取集合中的p标签通过下标获取。document.write(div中的第二段文本是 y[1].innerHTML); //向当前文档写入内容
/script
/body
/html2.查看效果。
六、JS操作HTML
6.1 插入内容
1.向idbb的标签写入内容。
p idbb/p
script typetext/javascriptvar x document.getElementById(bb); //获取id为main的元素x.innerHTMLHello //插入内容Hello。
/script2.查看结果。
6.2 修改标签属性
1.修改显示图片修改之前。
img srcimg/3.jpg alt idaa2.修改之后。
img srcimg/3.jpg alt idaa
script typetext/javascriptvar x document.getElementById(aa);x.srcimg/4.jpg
/script6.3 改变标签样式
1.修改idbb标签的颜色。
p idbb/p
script typetext/javascriptvar x document.getElementById(bb);x.innerHTMLHello //先插入内容。x.style.colorblue //在修改字体颜色
/script2.查看结果。
6.4 获取输入的值 比如提交一个数据框里的内容点击提交按钮可以获取到刚刚输入的值供其他功能使用。 1.获取输入框里的内容。
请输入您的姓名: input typetext idccbr
button typebutton nametext onclickmain1()提交/button //店家提交按钮执行main1函数。script typetext/javascriptfunction main1() {var y document.getElementById(cc);alert(y.value)}
/script2.修改其他标签的内容。
#############################################################
p idbb/p
请输入您的姓名: input typetext idccbr
button typebutton nametext onclickmain1()提交/button
#############################################################
script typetext/javascriptvar x document.getElementById(bb); //获取idbb标签的元素。x.innerHTMLHello //向元素插入HTML内容function main1() {var y document.getElementById(cc);var s document.getElementById(bb);s.innerHTML y.value //设置s元素的内容是idc的input值}6.5 添加标签元素
1.向div中添加一个p标签并追加标签内容。
div idmainp张三Java开发/pp李四大数据工程师/pp王五k8s运维/p
/divscript typetext/javascriptvar x document.getElementById(main); //获取id为main的元素var y x.getElementsByTagName(p); // 返回的是一个集合下标获取var p document.createElement(p); //创建p标签var t document.createTextNode(卿君渗透测试); //创建添加的文本p.appendChild(t); //向创建的p标签追加文本var e document.getElementById(main); //获取添加的标签父元素e.appendChild(p) //向父元素添加新创建的p标签
/script2.查看效果。
6.6 删除元素
1.删除idmain标签的元素。
div idmainp张三Java开发/pp李四大数据工程师/pp王五k8s运维/p
/divscript typetext/javascriptvar x document.getElementById(main); //获取id为main的元素var y x.getElementsByTagName(p); // 返回的是一个集合下标获取var p document.createElement(p); //创建p标签var t document.createTextNode(卿君渗透测试); //创建添加的文本p.appendChild(t); //向创建的p标签追加文本var e document.getElementById(main); //获取添加的标签父元素e.remove() //删除idmain标签的所有元素。
/script2.查看效果。
