一、什么是javascript
javascript它是一种前端的解释性单线程的脚本语言。
解释性语言:
源代码 -> (对于javascript每个浏览器都有一个js引擎) 对源代码进行从上到下逐行解析
二、语法详解
1、变量的声明
声明字符 var
注:
- 变量的第一个字符, 只能使用英文的大小写或者下划线(_)或者$符号
- 除了第一个字符之外, 其他的可以使用上述三种字符和数字
- 不能使用js的保留字和关键字
- 变量名不能超过255个字符4. 变量名不能超过255个字符
- 变量名对大小写是敏感的(y和Y是不同的变量)
2、数据类型:
字符串(String)、
数字(Number)、
布尔(Boolean)、
空(Null)、
未定义(Undefined)
数组(Array)、
对象(Object)、
注:
//1、在js中使用==判断2值是否相等
===:要求值相等且类型相等
2、js提供了一个操作符typeof可以返回变量的具体类型
3、eval处理js中的字符串运算
document.write(eval("10 * 10") + "<br/>");
三、DOM对象
作用:获取标签节点!!通过结点获取或者设置标签属性!
一、获取页面元素节点对象
1、通过标签名称获取页面元素节点对象
获取p标签结点:
var node1 = document.getElementsByTagName("p")[1];//获取单个节点对象
var node2 = document.getElementsByTagName("p").item(1);//获取单个节点对象
1.2、获取标签体里的内容
- innerHTML 2.innerText 3.outHMTL
document.write("node2内容:" + node2.innerHTML + "<br>");
document.write("node2内容:" + node2.innerText + "<br>");
document.write("node2内容:" + node2.outerHTML + "<br>");
2、通过标签元素的id属性获取
document.getElementById("a2");
3、通过标签的name属性获取标签对象
document.getElementsByName("hobby");
4、通过class属性值获取标签节点对象
document.getElementsByClassName("basic");
二、修改标签结点对象
var ulTag = document.getElementsByTagName("ul")[0];
//添加节点
/**
* 1.创建li节点
* 2.将该节点添加到ul中
*/
var templi = document.createElement("li");
//向已创建的结点添加内容
templi.innerText = "无序列表888";
//查参添加之前最后一个元素结点对象
document.write("ul的最后一个元素节点的内容:" + ulTag.lastElementChild.innerText + "<br/>");
//2.将templi添加到ul中
//默认都是从ul的最后添加元素
ulTag.appendChild(templi);
document.write("ul的最后一个元素节点的内容:" + ulTag.lastElementChild.innerText + "<br/>");
//在指定的节点位置添加元素
//ulTag.insertBefore(templi,ulTag.firstChild);
//替换
//ulTag.replaceChild(templi,ulTag.firstElementChild);
//删除节点
//ulTag.removeChild(ulTag.children[2]);
//复制节点
var tempUl = ulTag.cloneNode(true);
//将复制后的节点添加到body节点中
document.body.appendChild(tempUl);
三、修改标签样式
1、添加样式:
//获取节点对象
var pTag = document.getElementsByTagName("p")[0];
//1.单个样式设置
pTag.style.color="#0088CC";
//2.同时设置多个样式
pTag.style.cssText="font-size:30px;text-decoration:underline;";
pTag.style.backgroundColor = "yellow";
//3.通过class
pTag.className = "new";
//4.同时设置多个class属性值
pTag.classList.add("fixedwhidth");
2、删除样式
//删除样式
function delCSS() {
var pTag = document.getElementsByTagName("p")[0];
var divTag = document.getElementsByTagName("div")[0];
//移除所有的class样式
// pTag.className = "";
//移除style属性中的样式
// pTag.style.cssText = "";
//删除部分样式
pTag.style.removeProperty("background-color");
//移除class属性中的某个样式
divTag.classList.remove("white-color");
}
四、鼠标离开事件
Onfocus =》 鼠标获得焦点触发的事件
onblur =》鼠标失去焦点事件
<body>
<form action="#" method="post">
用户名:<input type="text" onblur="checkUname(this)" />
<span>*用户名必须超过10个字符</span><br />
<input type="submit" value="提交"/>
</form>
</body>
<script type="text/javascript">
function checkUname(obj){
if(obj.value.length<10){
document.getElementsByTagName("span")[0].style.visibility = "visible";
}else{
document.getElementsByTagName("span")[0].style.visibility = "hidden";
}
}
</script>