1、JavaScript中字符串的常见操作
2、javascript中数组的常见操作
3、JavaScript中日期的相关操作
4、JavaScript中函数的相关操作
5、JavaScript中的BOM对象
6、HTML DOM对象中的节点查找(全局查找以及局部查找)
7、JavaScript中增加时间的两种操作
8、如何获取节点对应的文本值以及如何对标签内部的文本值进行赋值(很常用)
9、如何对一个标签的属性进行赋值和取值
10、节点操作(重点)
11、模态对话框
12、复选框如何表示选中与未选中以及相应案例
13、如何自JavaScript当中改变css样式
14、事件介绍(onsubmit、onkeyup、onfocus)
概括:一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:核心(ECMAScript) 、文档对象模型(DOM) Document object model (整合js,css,html)、浏览器对象模型(BOM) Broswer object model(整合js和浏览器)、
Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的。
简单地说,ECMAScript 描述了以下内容:
语法
类型
语句
关键字
保留字
运算符
对象 (封装 继承 多态) 基于对象的语言,使用对象.
本篇博客将围绕上面三部分进行叙述。
1、JavaScript中字符串的常见操作 |
-
x.length ----获取字符串的长度
-
x.toLowerCase() ----转为小写
-
x.toUpperCase() ----转为大写
-
x.trim() ----去除字符串两边空格,但是不能去掉两边的换行符和制表符
-
x.charAt(index) ----返回字符串中第index位置的字符
-
x.indexOf(findstr) ----返回字符串中出现str的第一个位置(从前向后找)
-
x.lastIndexOf(findstr,fromIndex) ----返回字符串中出现str的第一个位置(从后向前找) ==> 用着有点不对
-
x.substr(start) ----返回字符串从start位置开始到结尾的字符串
-
x.substr(start, length) ----start表示开始位置,length表示截取长度 ==> 前面是索引位置,后面是长度
-
x.substring(start) ----返回字符串从start位置开始结尾的字符串
-
x.substring(start,end) ----返回字符串从start位置开始,到索引end位置结束的字符串(左闭又开) ===> 前面是索引位置,后面也是索引位置
-
x.slice(start, end) ----切片操作字符串,(注意:无论下标是怎样的,查找的时候都是从前向后进行查找) [左闭右开]
-
其中slice的用法和substring的用法基本相同.
-
x.replace(findstr,tostr) ---- 字符串替换
-
x.split(); ----分割字符串
-
x.concat(addstr) ---- 拼接字符串
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
其实JavaScript中字符串的操作和Java、Python基本差不都,下面截取一张Java中常见字符串的操作。
代码示例:
-
<script>
-
var str1 = "I love Python"
-
console.log("字符串的长度是:"+str1.length)
-
console.log("字符串转化为小写:"+str1.toLowerCase())
-
console.log("字符串转化为大写:"+str1.toUpperCase())
-
var str2 = "Hadoop and Spark"
-
console.log(str2.trim())
-
console.log("字符串中第三个位置的字符是:"+str1.charAt(3))
-
console.log("字符串中出现字母P的第一个位置是:"+str1.indexOf("P"))
-
console.log("字符串中出现字符串Python的第一个位置是:"+str1.indexOf("Python"))
-
//下面这个感觉结果不对啊
-
console.log("字符串中从后向前出现字符串P的第一个位置是:"+str1.lastIndexOf("P"))
-
console.log("返回字符串从第二个位置开始到结尾的字符串:"+str2.substr(2))
-
console.log("返回字符串从第二个位置开始,并截取3个长度的串"+str2.substr(2,3))
-
console.log("返回字符串从第二个位置开始到结尾的字符串"+str2.substring(2))
-
console.log("返回字符串从第二个位置开始到第五个位置的字符串(左闭右开)"+str2.substring(2,5))
-
//下面这两行是无效的
-
console.log("返回字符串从第二个位置开始到-1位置的字符串"+str2.substring(1,-2))
-
console.log("返回字符串从-5位置开始到-1位置的字符串"+str2.substring(-5,-2))
-
//切片的相关操作:看来切片的功能是最强大的
-
console.log("返回字符串从第二个位置开始到结尾的字符串"+str2.slice(2))
-
console.log("返回字符串从第二个位置开始第五个位置的字符串(左闭右开)"+str2.slice(2,5))
-
console.log("返回字符串从第二个位置开始到-1位置的字符串"+str2.slice(1,-2))
-
console.log("返回字符串从-5位置开始到-1位置的字符串"+str2.slice(-5,-2))
-
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
运行结果:
2、JavaScript中数组的常见操作 |
-
1、Array.prototype.join(separator) :循环遍历数组中的每一个元素(数组中的元素可以是字符串,
-
也可以是数字),并用指定的分隔符separator将它们拼接起来,结果返回一个字符串。
-
2、Array.prototype.concat:用于字符串的拼接的操作(当然也可以拼接数组)
-
3、Array.prototype.sort:不是按照数字大小进行排序的,而是按照最高位的ASCII码排序的。(这是一个坑)
-
如何将数字按照大小排序呢?
-
function sort_arr(m,n) {
-
return n - m;
-
}
-
然后sort中的参数写的是sort_arr这个函数。
-
4、数组的切片操作和字符串的切片操作是一样的.
-
5、数组中的push pop这两个方法模拟的是一个栈操作
-
x.push(value, ...) 压栈
-
x.pop() 弹栈
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
代码示例:
-
<script>
-
var arr1 = ["spark","Hadoop",10]
-
var arr2 = new Array("spark","Hadoop",10)
-
for (var i=0;i<arr1.length;i++){
-
console.log(arr1[i])
-
}
-
for (var j=0;j<arr2.length;j++){
-
console.log(arr2[j])
-
}
-
console.log("-------------")
-
str3 = arr1.join("_")
-
console.log(str3)
-
str4 = arr2.join("-")
-
console.log(str4)
-
console.log("-------------")
-
var a = [1,2,3]
-
var b = a.concat([4,5])
-
var c = a.concat(7,8)
-
console.log(a.toString())
-
console.log(b.toString())
-
console.log(c.toString())
-
console.log("-------------")
-
var d = [100,56,34,8,6,7]
-
e = d.sort()
-
//数组本身的顺序发生了变化
-
console.log(d)
-
console.log(e)
-
var arr4 = ["abc","hbfds","dfe","b"]
-
arr4.sort()
-
console.log(arr4)
-
function sort_arr(m,n) {
-
return n - m;
-
}
-
var d2 = [100,56,34,8,6,7]
-
d2.sort(sort_arr)
-
console.log(d2)
-
//数组中的切片方法,和我们字符串中的方法是一样的:
-
var arr5 = ["spark","Hadoop","hbase","scala","Django"]
-
console.log("返回数组中第1个索引位置之后的列表"+arr5.slice(1))
-
console.log("返回数组中第1个索引位置到第四个索引位置之后的列表"+arr5.slice(1,4))
-
console.log("返回数组中第1个索引位置到第-1个索引位置之后的列表"+arr5.slice(1,-1))
-
console.log("返回数组中第-3个索引位置到第-1个索引位置之后的列表"+arr5.slice(-3,-1))
-
//数组中的插入和删除的方法:push 和 pop
-
var arr6 = ["spark","Hadoop","hbase","scala","Django"]
-
arr6.push("dj")
-
console.log(arr6.toString())
-
arr6.pop("dj")
-
console.log(arr6.toString())
-
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
运行结果:
3、JavaScript中日期的常见操作 |
-
获取日期和时间
-
getDate() 获取日
-
getDay () 获取星期
-
getMonth () 获取月(0-11)
-
getFullYear () 获取完整年份
-
getYear () 获取年
-
getHours () 获取小时
-
getMinutes () 获取分钟
-
getSeconds () 获取秒
-
getMilliseconds () 获取毫秒
-
getTime () 返回累计毫秒数(从1970/1/1午夜)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
代码示例:
-
<script>
-
<!--构造一个函数,获取当前最新的时间-->
-
function getCurrrentDate() {
-
//1、创建Date对象
-
var date = new Date()
-
console.log(date.toString())
-
//2、获取当前年份
-
var year = date.getFullYear()
-
console.log("当前年份是:"+year)
-
//3、获取当前月份,js中月份是从0到11,所以我们要加1
-
var month = date.getMonth() + 1;
-
console.log("当前月份是:"+month)
-
//4、获得当前日期(即几号)
-
var day = date.getDate()
-
console.log("当前日期是:"+day)
-
//5、获得当前小时
-
var hour = date.getHours()
-
console.log("当前小时是:"+hour)
-
//6、获得当前分钟
-
var min = date.getMinutes()
-
console.log("当前分钟是:"+min)
-
//7、获得当前秒
-
var sec = date.getSeconds();
-
console.log("当前秒是:"+sec)
-
//8、获得当前星期几
-
var week = date.getDay() //在js当中星期几是用数字表示的
-
console.log("当前星期几:"+week)
-
return year + "年" +changeNum(month)+"月"+day+"日"+hour+"时"+min+"分"+sec+"秒"+parseWeek(week)
-
}
-
console.log(getCurrrentDate())
-
//解决:自动补齐两位数字的方法
-
function changeNum(num) {
-
if (num < 10)
-
return "0"+num;
-
else
-
return num;
-
}
-
console.log(changeNum(6))
-
//解决:将数字0-6转换成星期日到星期六
-
function parseWeek(week) {
-
var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
-
return arr[week];
-
}
-
console.log(parseWeek(0));
-
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
运行效果:
4、JavaScript中函数的常见操作 |
-
function 函数名 (参数){ <br> 函数体;
-
return 返回值;
-
}
-
功能说明:
-
可以使用变量、常量或表达式作为函数调用的参数
-
函数由关键字function定义
-
函数名的定义规则与标识符一致,大小写是敏感的
-
返回值必须使用return
-
Function 类可以表示开发者定义的任何函数。
-
函数的内置对象arguments:函数参数的集合
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
函数的内置对象arguments的相关应用:
-
<script>
-
//内置对象arguments的应用1
-
function add(x,y)
-
{
-
var sum = 0
-
for (var i=0;i<arguments.length;i++)
-
{
-
sum += arguments[i]
-
console.log(arguments[i])
-
}
-
console.log("总和是:"+sum)
-
}
-
add(2,3)
-
//内置对象arguments的应用2:判断函数参数的个数是否正确
-
function add_sum(a,b,c)
-
{
-
if (arguments.length != 3)
-
console.log("函数的参数个数不对!")
-
else
-
alert("传入参数的个数success!")
-
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
运行结果:
-
2
-
3
-
总和是:5
-
函数的参数个数不对!
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
5、JavaScript中的BOM对象 |
注意:jQuery当中没有定时器,只有Js当中有
window对象:
所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.
-
alert() 显示带有一段消息和一个确认按钮的警告框。
-
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
-
prompt() 显示可提示用户输入的对话框。
-
//setInterval可以让一个函数循环往复的操作.
-
setInterval(func,time):按照指定的周期(以毫秒计)来调用函数或计算表达式,从而设置一个定时器。
-
clearInterval(arg) 取消由 setInterval() 设置的定时器,arg的数值是setInterval()的返回值。
-
//setTimeout只会让一个函数执行一次.
-
setTimeout(func,time) :在指定的毫秒数后调用函数或计算表达式。
-
clearTimeout(arg) :取消由 setTimeout() 方法设置的定时器,arg的数值是setTimeout()的返回值。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
示例程序1:
-
<script>
-
<!--我们对一个BOM对象操作,实际上就是对一个窗口对象经操作-->
-
// alert的使用
-
aa = alert("确定")
-
console.log(aa)
-
// confirm的使用
-
bb = confirm("是否确认操作?")
-
console.log(bb)
-
if (bb)
-
console.log("OK")
-
else
-
console.log("False")
-
// prompt的使用:类似于Python中的Input按钮
-
cc = prompt("please input a number:")
-
console.log("用户输入的数值是:"+cc)
-
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
示例程序2:
-
<script>
-
<!--每隔一秒钟打一个OK-->
-
function print_ok() {
-
console.log("OK")
-
}
-
//注意:首次执行时间是2秒钟之后,而不是上来就开始执行
-
var ID = setInterval(print_ok,2000)
-
console.log("ID的数值是:"+ID)
-
//print_ok还没有执行,就已经被取消了
-
clearInterval(ID)
-
//注意:首次执行时间是3秒钟之后,而不是上来就开始执行,并且只会执行一次
-
var ID2 = setTimeout(print_ok,3000)
-
console.log("ID2的数值是:"+ID2)
-
clearTimeout(ID2)
-
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
示例程序3:定时器的应用(很重要)
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title</title>
-
<style>
-
[type="text"]{
-
width: 250px;
-
}
-
</style>
-
</head>
-
<body>
-
<input type="text"> <button>start</button> <button>stop</button>
-
</body>
-
<script>
-
button_ele = document.getElementsByTagName("button")
-
input_ele = document.getElementsByTagName("input")[0]
-
//给标签按钮增加一个事件监听器
-
var ID;
-
console.log("ID的初始数值是:"+ID)
-
button_ele[0].onclick = function(){
-
//一旦ID已经有了数值,用户的操作就置为无效:否则点一次开了一次定时器
-
if (ID == undefined){
-
input_ele.value = new Date().toString()
-
//1s钟之后就会周而复始的更新值
-
ID = setInterval(set_time,1000)
-
}
-
}
-
button_ele[1].onclick = function(){
-
clearInterval(ID)
-
console.log("ID此时的数值是:"+ID)
-
ID = undefined;
-
}
-
function set_time() {
-
input_ele.value = new Date().toString()
-
}
-
</script>
-
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
部分截图:
6、HTML DOM对象中的节点查找(全局查找与局部查找) |
HTML DOM:
HTML Document Object Model(文档对象模型)
HTML DOM 定义了访问和操作HTML文档的标准方法
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)
document与element节点是重点
-
直接查找节点:
-
document.getElementById(“idname”)
-
document.getElementsByTagName(“tagname”)
-
document.getElementsByName(“name”)
-
document.getElementsByClassName(“name”) ===> 这个只有在属性中含有name属性的时候才可以用
-
导航节点属性:
-
parentElement 或者 parentNode // 父节点标签元素
-
children // 所有子标签
-
firstElementChild // 第一个子标签元素
-
lastElementChild // 最后一个子标签元素
-
nextElementtSibling // 下一个兄弟标签元素
-
previousElementSibling // 上一个兄弟标签元素
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
节点的查找实际上分为两种方式:全部查找与局部查找
-
获取标签的第一种方法:通过document全局查找
-
获取标签的第二种方法:获取父标签在父亲的局部范围内去查找
- 1
- 2
- 1
- 2
代码示例:
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title</title>
-
</head>
-
<body>
-
<div id="div1">
-
<div name="yuan">i am div2</div>
-
<div class="div2">i am div1</div>
-
<div id="div3">i am div3</div>
-
<p>hello p</p>
-
</div>
-
</body>
-
<script>
-
div2 = document.getElementsByClassName("div2")[0]
-
console.log(div2)
-
//父节点标签的查找方法:parentNode也可以
-
div2_par = div2.parentElement
-
console.log(div2_par)
-
div2_parr = div2.parentNode
-
console.log(div2_parr)
-
//子节点标签的查找方法:别用childNodes
-
div2_par_child = div2_par.children
-
console.log(div2_par_child)
-
//第一个子标签元素:firstChild别用
-
div2_par_firstchild = div2_par.firstElementChild
-
console.log(div2_par_firstchild)
-
//最后一个子标签元素:lastChild别用
-
div2_par_lastchild = div2_par.lastElementChild
-
console.log(div2_par_lastchild)
-
div2_ele = document.getElementsByClassName("div2")[0]
-
//上一个兄弟标签
-
div2_ele_up = div2_ele.previousElementSibling
-
console.log(div2_ele_up)
-
//下一个兄弟标签
-
div2_ele_down = div2_ele.nextElementSibling
-
console.log(div2_ele_down)
-
</script>
-
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
运行结果:
代码示例2:全局查找与局部查找
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title</title>
-
</head>
-
<body>
-
<div class="item"></div>
-
<div id="d1">
-
<div class="item">hello you</div>
-
</div>
-
</body>
-
<script>
-
//获取标签的第一种方法:通过document全局查找
-
var eles = document.getElementsByClassName("item")
-
console.log(eles[1])
-
//获取标签的第二种方法:获取父标签在父亲的局部范围内去查找
-
var div_d1 = document.getElementById("d1")
-
//在div_d1的局部范围内去查找
-
var hello_div = div_d1.getElementsByClassName("item")
-
console.log(hello_div[0])
-
</script>
-
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
7、Js中增加事件的两种操作 |
-
方法1:
-
onclick="fun1()"
-
方法2:
-
item2_ele.onclick = function(){
-
alert("OK_two")
-
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
代码示例:
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title</title>
-
</head>
-
<body>
-
<input type="button" class="item1" value="click_one" onclick="fun1()">
-
<input type="button" class="item2" value="click_two">
-
</body>
-
<script>
-
function fun1() {
-
alert("OK_one!")
-
}
-
item2_ele = document.getElementsByClassName("item2")[0]
-
item2_ele.onclick = function(){
-
alert("OK_two")
-
}
-
</script>
-
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
8、如何获取节点对应的文本值以及如何对标签内部的文本值进行赋值(很常用) |
-
获取节点对应的文本值:当标签里面没有标签的时候,两个属性是没有区别的
-
方法1:console.log(ele.innerText) ==> 获取一个标签里面的所有文本
-
方法2:console.log(ele.innerHTML) ==> 获取一个标签里面的所有文本以及相应的内部标签
-
两者的区别:
-
innertText只获取标签内部对应的文本(仅获取文本,结果是一个字符串),而innerHTML将标签内部的
-
标签都会给拿出来(识别标签)
-
eg:
-
PPP
-
<p>PPP</p>
-
如何对标签内部的文本进行赋值:
-
方法1:ele2[0].innerText = "<a href=''>点击</a>"
-
方法2:ele2[0].innerHTML = "<a href=''>点击</a>"
-
两者的区别:
-
无论怎么赋值,都是用你当前当前的内容替换掉标签里面的所有的内容,但是前者文本渲染,
-
后者按标签去渲染(即后者识别标签),所以通常后者用的多。
-
但是我自己在操作的时候很少去赋值一个标签,基本上都是克隆。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
示例1:获取节点对应的文本值
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title</title>
-
</head>
-
<body>
-
<div class="c1">DIV</div>
-
<div class="c2">
-
<p>PPP</p>
-
</div>
-
</body>
-
<script>
-
var ele = document.getElementsByClassName("c1")[0]
-
//打印出节点
-
console.log(ele)
-
//获取节点对应的文本值
-
console.log(ele.innerText)
-
console.log(ele.innerHTML)
-
var ele2 = document.getElementsByClassName("c2")
-
//打印出节点
-
console.log(ele2[0])
-
//获取节点对应的文本值:innertText只获取标签内部对应的文本(仅获取文本,结果是一个字符串),而innerHTML将标签内部的
-
//标签都会给拿出来(识别标签)
-
console.log(ele2[0].innerText)
-
console.log(typeof ele2[0].innerText)
-
console.log(ele2[0].innerHTML)
-
console.log(typeof ele2[0].innerHTML)
-
</script>
-
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
效果:
示例2:如何对标签内部的文本值进行赋值(innerText)
-
<body>
-
<div class="c1">DIV</div>
-
<div class="c2">
-
<p>PPP</p>
-
</div>
-
</body>
-
<script>
-
var ele = document.getElementsByClassName("c1")[0]
-
var ele2 = document.getElementsByClassName("c2")
-
//如何对标签内部的文本进行赋值:此时将会对标签里面的所有内容进行赋值
-
ele2[0].innerText = "<a href=''>点击</a>"
-
console.log(ele2[0].innerText)
-
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
效果展示:
示例3:如何对标签内部的文本值进行赋值(innerHTML)
-
<body>
-
<div class="c1">DIV</div>
-
<div class="c2">
-
<p>PPP</p>
-
</div>
-
</body>
-
<script>
-
var ele = document.getElementsByClassName("c1")[0]
-
var ele2 = document.getElementsByClassName("c2")
-
//如何对标签内部的文本进行赋值:此时将会对标签里面的所有内容进行赋值
-
ele2[0].innerHTML = "<a href=''>点击</a>"
-
console.log(ele2[0].innerHTML)
-
console.log(ele2[0].innerText)
-
//即无论怎么赋值,都是用你当前当前的内容替换掉标签里面的所有的内容,但是前者文本渲染,后者按标签去渲染
-
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
运行结果:
9、如何对一个标签的属性进行赋值和取值 |
对于这个知识点,我当年学的时候遇到了很多的坑,每次遇到这里都是各种百度,总之就是各种坑……….
就是上面的这么简单,总结如下:
在JavaScript中:
-
获取属性值的操作:
-
方法1:elementNode.getAttribute(属性名)
-
方法2:elementNode.属性名
-
给属性赋值的操作:
-
方法1:elementNode.setAttribute(属性名,value)
-
方法2:elementNode.属性名 = 属性值
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
到底啥是属性名和属性值啊?(呵呵)
示例程序:
-
<body>
-
<input type="text" id="t1" value="123">
-
</body>
-
<script>
-
var ele = document.getElementById("t1")
-
//获取属性值
-
//第一种方法:elementNode.getAttribute(属性名)
-
console.log(ele.getAttribute("value"))
-
console.log(ele.getAttribute("id"))
-
console.log(ele.getAttribute("type"))
-
//第二种方法:elementNode.属性名
-
console.log(ele.value)
-
console.log(ele.id)
-
console.log(ele.type)
-
//设置属性值
-
//设置属性值1:elementNode.setAttribute(属性名,value)
-
ele.setAttribute("value","456")
-
ele.setAttribute("id","t2")
-
ele.setAttribute("type","button")
-
//设置属性值2:elementNode.属性名 = value
-
ele.value = "789"
-
ele.id = "t6"
-
ele.type = "button"
-
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
10、关于classlist的相关操作 |
-
elementNode.className :查看标签对应的class名字(是个字符串,但是是个数组)
-
elementNode.classList.add:向class列表中添加一个属性
-
elementNode.classList.remove:向class列表中删掉一个属性
- 1
- 2
- 3
- 1
- 2
- 3
示例程序:
-
<body>
-
<input type="text" class="d1 d2" value="python">
-
</body>
-
<script>
-
ele = document.getElementsByTagName("input")[0]
-
console.log(ele.className)
-
console.log(typeof ele.className)
-
//class属性对应的实际上是一个列表(数组)
-
console.log(ele.classList)
-
console.log(ele.classList[0])
-
console.log(ele.classList[1])
-
//给input标签的class增加一个属性
-
ele.classList.add("d3")
-
ele.classList.remove("d1")
-
//class列表中有则不添加,没有删除也不报错
-
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
效果展示:
示例2:class的一个应用(左侧菜单案例)
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title</title>
-
<style>
-
.left_menu{
-
width:20%;
-
height: 500px;
-
background-color: wheat;
-
float: left;
-
}
-
.content_menu{
-
width: 80%;
-
height: 500px;
-
background-color: darkgray;
-
float: left;
-
}
-
.title{
-
/*将标题进行居中*/
-
text-align: center;
-
background-color: crimson;
-
line-height: 40px;
-
color: white;
-
}
-
/*含有con的属性会自动隐藏*/
-
.hide{
-
display: none;
-
}
-
.item{
-
margin: 20px;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="outer">
-
<div class="left_menu">
-
<div class="item">
-
<div class="title">菜单一</div>
-
<div class="con ">
-
<p>111</p>
-
<p>111</p>
-
<p>111</p>
-
</div>
-
</div>
-
<div class="item">
-
<div class="title">菜单二</div>
-
<div class="con hide">
-
<p>222</p>
-
<p>222</p>
-
<p>222</p>
-
</div>
-
</div>
-
<div class="item">
-
<div class="title">菜单三</div>
-
<div class="con hide">
-
<p>333</p>
-
<p>333</p>
-
<p>333</p>
-
</div>
-
</div>
-
</div>
-
<div class="content_menu">哈哈</div>
-
</div>
-
</body>
-
<script>
-
var eles = document.getElementsByClassName("title")
-
for (var i=0;i<eles.length;i++){
-
eles[i].onclick = function(){
-
//将标签的class列表去掉hide这个值
-
this.nextElementSibling.classList.remove("hide")
-
//javascript当中不能拿到坑爹的兄弟标签
-
var arr_item = this.parentElement.parentElement.children
-
console.log(arr_item)
-
var ele_curr_p = this.parentElement
-
for (var i=0;i<arr_item.length;i++){
-
console.log(arr_item[i])
-
// 在这里面判断两个标签是否相同
-
if (arr_item[i] != ele_curr_p){
-
arr_item[i].children[1].classList.add("hide")
-
}
-
}
-
}
-
}
-
</script>
-
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
效果展示:
10、节点操作 |
-
JavaScript当中:
-
创建节点:
-
createElement(标签名) :创建一个指定名称的元素.
-
给节点增加属性,并进行赋值:
-
elementNode.setAttribute(属性名,value)
-
注意:elementNode.属性名 = 属性值 方法将失效
-
添加节点:
-
追加一个子节点(将作为最后的子节点)
-
parentnode.appendChild(newnode)
-
删除节点:
-
parentnode.removeChild(子节点):获得要删除的元素,通过父元素调用删除
-
替换节点:
-
parentnode.replaceChild(newnode, oldnode);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
代码示例:
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title</title>
-
<style>
-
.parent_node{
-
width: 400px;
-
height: 400px;
-
background-color: wheat;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="parent_node">
-
<h1>hello 码农</h1>
-
</div>
-
<button>add_img</button>
-
<button>remove_h1</button>
-
<button>replace_h1</button>
-
</body>
-
<script>
-
//获取到增加、删除、替换按钮
-
var add_button = document.getElementsByTagName("button")[0]
-
var remove_button = document.getElementsByTagName("button")[1]
-
var replace_button = document.getElementsByTagName("button")[2]
-
//获取父节点
-
var ele_div = document.getElementsByClassName("parent_node")[0]
-
add_button.onclick = function(){
-
//创建img节点
-
var img_ele = document.createElement("img")
-
//为节点的属性赋值
-
img_ele.setAttribute("src","biancheng.png")
-
//添加节点
-
ele_div.appendChild(img_ele)
-
//在创建一个input节点: <input type="text" id="t1" value="123" class="item">
-
var ele_input = document.createElement("input")
-
ele_input.setAttribute("type","text")
-
ele_input.setAttribute("id","t1")
-
ele_input.setAttribute("value","123")
-
ele_input.setAttribute("class","123")
-
//在添加节点
-
ele_div.appendChild(ele_input)
-
}
-
remove_button.onclick = function () {
-
//找到h1节点
-
var h1_button = document.getElementsByTagName("h1")[0]
-
//进行删除操作
-
ele_div.removeChild(h1_button)
-
}
-
replace_button.onclick = function () {
-
//找到h1节点
-
var h1_button = document.getElementsByTagName("h1")[0]
-
//创建一个input节点
-
var ele_input = document.createElement("input")
-
ele_input.setAttribute("type","text")
-
ele_input.setAttribute("id","t2")
-
ele_input.setAttribute("value","456")
-
ele_input.setAttribute("class","456")
-
//进行删除操作
-
ele_div.replaceChild(ele_input,h1_button)
-
}
-
</script>
-
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
效果展示:
11、模态对话框 |
代码示例:
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title</title>
-
<style>
-
.back{
-
width: 100%;
-
height: 1200px;
-
background-color: firebrick;
-
}
-
.fade{
-
/*参照物是当前屏幕:绝对脱离文档流*/
-
position: fixed;
-
/*满屏: 0 0 0 0 */
-
top:0;
-
bottom: 0;
-
left: 0;
-
right: 0;
-
background-color: darkgray;
-
/*设置透明度*/
-
opacity: 0.8;
-
}
-
.model{
-
/*绝对脱离文档流,参照物实际上是body*/
-
width: 400px;
-
height: 200px;
-
background-color: wheat;
-
position: absolute;
-
top:50%;
-
left:50%;
-
/*下面的两个值实际上是高和宽的一半*/
-
margin-left:-200px ;
-
margin-top: -100px;
-
border-radius: 5%;
-
}
-
.hide{
-
display: none;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="back">
-
<input type="button" value="show" id="show">
-
</div>
-
<!--fade在这里面表示遮罩层:实际上就是一个大背景-->
-
<div class="fade hide"></div>
-
<!--弹出框:-->
-
<div class="model hide">
-
<input type="button" value="点击" id="click">
-
</div>
-
</body>
-
<script>
-
var ele = document.getElementById("show")
-
var div_fade = document.getElementsByClassName("fade")[0]
-
var div_model = document.getElementsByClassName("model")[0]
-
var ele2 = document.getElementById("click")
-
ele.onclick = function(){
-
div_fade.classList.remove("hide")
-
div_model.classList.remove("hide")
-
}
-
ele2.onclick = function(){
-
//下面这种方式是推荐的
-
this.parentElement.classList.add("hide")
-
this.parentElement.previousElementSibling.classList.add("hide")
-
}
-
</script>
-
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
效果展示:
12、复选框如何表示选中与未选中以及相应的案例 |
代码示例:
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title</title>
-
</head>
-
<body>
-
<button>全选</button>
-
<button>反选</button>
-
<button>取消</button>
-
<hr>
-
<!--border可以设置边框-->
-
<table border="1">
-
<tr>
-
<th> </th>
-
<th>姓名</th>
-
<th>年龄</th>
-
<th>班级</th>
-
</tr>
-
<tr>
-
<!--checkbox代表复选框的意思-->
-
<td><input type="checkbox"></td>
-
<td>111</td>
-
<td>111</td>
-
<td>111</td>
-
</tr>
-
<tr>
-
<!--checkbox代表复选框的意思-->
-
<td><input type="checkbox"></td>
-
<td>222</td>
-
<td>222</td>
-
<td>222</td>
-
</tr>
-
<tr>
-
<!--checkbox代表复选框的意思-->
-
<td><input type="checkbox"></td>
-
<td>333</td>
-
<td>333</td>
-
<td>333</td>
-
</tr>
-
</table>
-
</body>
-
<script>
-
<!--checked == true|"checked"表示复选框被选中-->
-
var button_eles = document.getElementsByTagName("button")
-
var ele_checkbox = document.getElementsByTagName("input")
-
for (var i=0;i<button_eles.length;i++){
-
button_eles[i].onclick = function(){
-
if (this.innerText == "全选")
-
{
-
for (var j=0;j<ele_checkbox.length;j++){
-
ele_checkbox[j].checked = "checked"
-
ele_checkbox[j].checked = true
-
}
-
}
-
else if(this.innerText == "反选")
-
{
-
for (var j=0;j<ele_checkbox.length;j++){
-
if (ele_checkbox[j].checked){
-
ele_checkbox[j].checked = false
-
}
-
else
-
ele_checkbox[j].checked = true
-
}
-
}
-
else{
-
for (var j=0;j<ele_checkbox.length;j++){
-
//复选框不选中的表达方式
-
ele_checkbox[j].checked = false
-
}
-
}
-
}
-
}
-
</script>
-
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
13、如何在JavaScript当中改变css样式 |
-
<p id="p2">Hello world!</p>
-
document.getElementById("p2").style.color="blue";
-
.style.fontSize=48px
- 1
- 2
- 3
- 1
- 2
- 3
代码示例:
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title</title>
-
</head>
-
<body>
-
<div id="d1">
-
<div class="item">hello you</div>
-
</div>
-
<input type="button" value="点我">
-
</body>
-
<script>
-
div_item = document.getElementsByClassName("item")[0]
-
console.log(div_item)
-
input_button = document.getElementsByTagName("input")[0]
-
console.log(input_button)
-
//为点击按钮增加相应的事件监听器:点击字体之后变颜色
-
input_button.onclick = function(){
-
//注意:value值要加双引号
-
div_item.style.color = "blue";
-
div_item.style.fontSize="48px";
-
div_item.style.backgroundColor = "red";
-
}
-
</script>
-
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
效果展示:
14、JavaScript中的事件介绍 |
-
onsubmit:
-
当表单在提交时触发,该属性也只能给form元素使用.
-
应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.(验证在前端与后端都要进行验证,在默认事件发生之前,先进行验证)
-
默认submit作用:在form表单中,当点击这个按钮后,会将form表单中所有的数据打包然后发到server端,这个事件是这个按钮自带的一个事件(默认的提交事件)。
-
阻止默认的提交事件的两种方法:
-
return false;
-
e.preventDefault()
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
onsubmit代码示例(事件默认是这样子的):
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title</title>
-
</head>
-
<body>
-
<form action="" id="form">
-
姓名:<input type="text"><br>
-
密码:<input type="password"><br>
-
<input type="submit">
-
</form>
-
</body>
-
<script>
-
var ele = document.getElementById("form")
-
//e指的是所有事件的状态:e实际上就是发生的事件:event对象封装了我们所有事件的状态
-
ele.onsubmit = function(e){
-
alert("123") //这一行代码可以理解为登陆验证
-
//通过return false可以阻止默认事件的发生(:向服务器端发送form表单的数据)
-
//return false;
-
//e.preventDefault()
-
}
-
</script>
-
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
放行之前的效果:
放行之后的效果:
从效果上我们可以看出,如过在前端验证未通过,数据包将不能发送到服务端。
-
onkeydown:
-
Event 对象:Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
-
事件通常与函数结合使用,函数不会在事件发生前被执行!event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了,需要问下event对象的属性,这里就时KeyCode.
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
代码示例:
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title</title>
-
</head>
-
<body>
-
<input type="text" id="test">
-
</body>
-
<script>
-
var ele = document.getElementById("test")
-
//按下鼠标之后的反应
-
ele.onkeyup = function(event){
-
//先做兼容
-
event = event || window.event
-
//keynum实际上是ASCII编码
-
var keynum = event.keyCode
-
console.log(keynum)
-
var keychar = String.fromCharCode(keynum)
-
if (keychar == "B"){
-
alert("OK")
-
}
-
}
-
</script>
-
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
获取焦点与失去焦点的主要作用是用于提示用户的相关操作
- 1
- 1
代码示例:
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title</title>
-
</head>
-
<body>
-
<!--placeholder在这里面实际上是一个提示的作用-->
-
<input type="text" placeholder="用户名">
-
<input type="text" value="用户名" id="search">
-
</body>
-
<script>
-
var ele = document.getElementById("search")
-
//获取焦点
-
ele.onfocus = function(){
-
this.value = ""
-
}
-
//失去焦点
-
ele.onblur = function(){
-
if (!this.value.trim())
-
this.value = "用户名"
-
}
-
</script>