最近写了一个员工管理作业,暴露了一些问题就是。
JS的查找标签的时候,要确定返回的是DOM对象还是数组,document对象可以是任意dom对象,将查询范围限制在当前dom对象,
1、直接查找标签
document.getElementsByTagName("标签名")
document.getElementById("id值")
document.getElementsByClassName("类名")
2、导航查找标签
elementNode.parentElement // 父节点标签元素
elementNode.children // 所有子标签
elementNode.firstElementChild // 第一个子标签元素
elementNode.lastElementChild // 最后一个子标签元素
elementNode.nextElementSibling // 下一个兄弟标签元素
elementNode.previousElementSibling // 上一个兄弟标签元素
3、CSS选择查找器
document.querySelector("css选择器") //根据css选择符来获取查找到的第一个元素,返回标签对象(dom对象)
document.querySelectorAll("css选择器"); // 根据css选择符来获取查找到的所有元素,返回数组
尤其注意在返回多个DOM对象,后形成数组后,还会返回HTMLCollection,这在循环的时候需要特别注意。
而在DOM对象(document Object Model 文档对象模型)下,每个部分都是节点,例如元素节点、属性节点等,DOM 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
拿到这些元素节点后,我们可以对这些节点进行绑定事件。
1、静态绑定:直接把事件写在标签元素中。
一般会直接调用对应的函数,例如
<div id="div" onclick="foo(this)">click</div>
<script>
function foo(self){ // 形参不能是this;
console.log("foo函数");
console.log(self);
}
</script>
2、动态绑定:在js中通过代码获取元素对象,然后给这个对象进行后续绑定。一般会用到匿名函数。
<p id="i1">试一试!</p>
<script>
var ele=document.getElementById("i1");
ele.onclick=function(){
console.log("ok");
console.log(this); // this直接用
};
</script>
当然绑定事件不止这些,例如:
1、onload事件
2、onsubmit事件
3、onchange事件
4、onmouse事件
5、onkey事件
6、onfocus事件与onblur事件
拿到标签、绑定事件,我们会进行操作标签,一般有文本操作、value操作(只限input、select、textarea标签)、CSS的样式操作、属性操作等。
当然JS里面还有一些基础语法会经常用到,例如
1、最基础的变量声明:
// 方式1 先声明再赋值
var 变量名; // 声明的变量如果没有进行赋值,或者没有被定义的变量,值默认是undefined
变量名 = 变量值;
// 方式2 声明并赋值
var 变量名 = 变量值;
// 方式3 一行可以声明多个变量.并且可以是不同类型
var name="yuan", age=20, job="lecturer";
2、数据类型以及数据类型之间的转换,这里就简单放一些,注意JS也会有时会自动转换,且JS的数据类型有空值(Undefined和Null)。
// 1. 转换数据为数值类型
// parseInt 把数据转换成整数
// parseFloat 把数据转换成小数
// Number 把数据转换成数值
// 2. 转换数据为字符串
// 变量.toString()
// String(数据)
// 3. 转换数据成布尔类型
// Boolean()
3、流程控制语句,则分为if分支语句和switch语句
if(条件1){
// 条件1为true时,执行的代码
}else if(条件2){
// 条件2为true时,执行的代码
}....
}else{
// 上述条件都不成立的时候,执行的代码
}
switch(条件){
case 结果1:
满足条件执行的结果是结果1时,执行这里的代码..
break;
case 结果2:
满足条件执行的结果是结果2时,执行这里的代码..
break;
.....
default:
条件和上述所有结果都不相等时,则执行这里的代码
}
4、还有JS的Object对象,多用于应用程序之间存储和传输数据。
var person = {
name : "alvin",
age : 18
};
Object可以通过. 和 []来访问。
console.log(person["age"]);
console.log(person.age)
5、JS的function对象
// 函数的定义方式1
function 函数名 (参数){
函数体;
return 返回值;
}
// 函数的定义方式2
用 Function 类直接创建函数的语法如下:
var 函数名 = new Function("参数1","参数n","function_body");
虽然由于字符串的关系,第二种形式写起来有些困难,但有助于理解函数只不过是一种引用类型,它们的行为与用 Function 类明确创建的函数行为是相同的。
还有函数调用、函数参数、返回值等,JS预编译等这里就不一一细讲了。
另外放一个JS预编译面试题,有空的时候可以多回顾一下。
<script>
var num3 = 10;
function func3(){
console.log(num3);
var num3 = 20;
}
func3();
console.log(num3);
</script>
答案为:undefined,10
今天就写在这里,最后贴上自己的javaScript的课程总结