关于JavaScript的一点使用心得。

时间:2021-02-11 16:43:09

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 描述了以下内容: 
语法 
类型 
语句 
关键字 
保留字 
运算符 
对象 (封装 继承 多态) 基于对象的语言,使用对象. 
关于JavaScript的一点使用心得。 
本篇博客将围绕上面三部分进行叙述。

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中字符串的操作和JavaPython基本差不都,下面截取一张Java中常见字符串的操作。 
关于JavaScript的一点使用心得。 
关于JavaScript的一点使用心得。 
关于JavaScript的一点使用心得。 
代码示例:

<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

运行结果: 
关于JavaScript的一点使用心得。

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))

//数组中的插入和删除的方法:pushpop
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

运行结果: 
关于JavaScript的一点使用心得。

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

运行效果: 
关于JavaScript的一点使用心得。

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
关于JavaScript的一点使用心得。
  • 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">&nbsp;<button>start</button>&nbsp;<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

部分截图: 
关于JavaScript的一点使用心得。

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

运行结果: 
关于JavaScript的一点使用心得。 
代码示例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

效果: 
关于JavaScript的一点使用心得。 
示例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

效果展示: 
关于JavaScript的一点使用心得。 
示例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

运行结果: 
关于JavaScript的一点使用心得。

9、如何对一个标签的属性进行赋值和取值

对于这个知识点,我当年学的时候遇到了很多的坑,每次遇到这里都是各种百度,总之就是各种坑………. 
关于JavaScript的一点使用心得。 
就是上面的这么简单,总结如下: 
在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

到底啥是属性名和属性值啊?(呵呵) 
关于JavaScript的一点使用心得。 
示例程序:

<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

效果展示: 
关于JavaScript的一点使用心得。 
示例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

效果展示: 
关于JavaScript的一点使用心得。

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

效果展示: 
关于JavaScript的一点使用心得。

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

效果展示: 
关于JavaScript的一点使用心得。

12、复选框如何表示选中与未选中以及相应的案例

关于JavaScript的一点使用心得。 
代码示例:

<!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

效果展示: 
关于JavaScript的一点使用心得。

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

放行之前的效果: 
关于JavaScript的一点使用心得。 
放行之后的效果: 
关于JavaScript的一点使用心得。 
从效果上我们可以看出,如过在前端验证未通过,数据包将不能发送到服务端。

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>

</html>

相关文章