JavaScript基础（一篇入门）
Posted 辉常努腻
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript基础（一篇入门）相关的知识，希望对你有一定的参考价值。
1.JS使用的基本语法
页面内单独使用
<script type="text/javascript">
alert("Hello World:js")
</script>
单独写在一个js文件中使用
使用步骤：
1）需要先创建一个.js文件，然后在里面写js代码
2）在需要使用的页面引入刚定义好的.js文件才会起到作用
2.JavaScript解析html：DOM
2.1.JavaScript选择器
2.1.1.id选择器
通过 id 查找 HTML 元素，如果找到该元素，则该方法将以对象的形式返回该元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS的第一个例子</title>
<script type="text/javascript">
function quickStart(){
var x=document.getElementById("te").value
alert(x)
alert("获取到的数据的类型为："+typeof(x))
var afterX=parseInt(x)
alert("获取到的数据的类型为："+typeof(afterX))
}
</script>
</head>
<body>
<input type="text" id="te" value="" />
<input type="button" value="点击" onclick="quickStart()" />
</body>
</html>
2.1.2.name选择器
通过name查找到HTML的元素，如果找到元素了，则会返回一个数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS的第一个例子</title>
<script type="text/javascript">
function quickStart(){
//1.通过name选择器获取到一组元素
var habbies=document.getElementsByName("like")
//2.对数组进行循环
for(var i =0;i<habbies.length;i++){
alert(habbies[i].value)
}
}
</script>
</head>
<body>
<input type="button" value="点击" onclick="quickStart()" />
唱歌 <input type="checkbox" name="like" value="唱歌"/>
打球<input type="checkbox" name="like" value="打球"/>
跳舞<input type="checkbox" name="like" value="跳舞"/>
</body>
</html>
2.1.3.通过标签名找到 HTML 元素
getElementsByTagName("p");
var habbies=document.getElementsByTagName("input")//其他的都与步骤2一样
2.2.事件
2.2.1.常见的HTML事件
-
onchange HTML 元素改变
-
onclick 用户点击 HTML 元素
-
onmouseover 用户在一个HTML元素上移动鼠标
-
onmouseout 用户从一个HTML元素上移开鼠标
-
onkeydown 用户按下键盘按键
-
onload 浏览器已完成页面的加载
-
onmouseover、onmouseout(注重结果)；
-
onmouseenter、onmouseleave(注重过程)；
-
详解
1、onmouseover、onmouseout：
鼠标经过时自身触发事件，经过其子元素时也触发该事件(会冒泡)；（父亲有的东西，儿子也有）
2、onmouseenter、onmouseleave：
鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有）
2.2.23.HTML的事件触发
那么JavaScript 可以做什么？ 答案肯定是响应：
怎样响应：执行函数
<body >
<script type="text/javascript">
function quickEyes()
{
alert("确认过眼神，我就是你最爱的人");
}
</script>
<input type="button" value="函数--求和" onclick="quickEyes()"/>
</body>
2.3.JavaScript 能够改变页面中的所有 HTML 元素
document.getElementById("p1").innerHTML="新文本!";
2.4.改变 HTML 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS解析DOM之更改HTML中元素的属性</title>
<script type="text/javascript">
function res(){
var btn1=document.getElementById("btn1");
btn1.disabled=false; //恢复按钮的点击;
btn1.value="可以点击了"; //更新按钮显示的内容;
}
</script>
</head>
<body>
<input type="button" value="禁用" id="btn1" disabled="disabled" />
<input type="button" value="恢复" onclick="res()" />
</body>
</html>
2.5.改变HTML元素的CSS样式
2.5.1.改变HTML元素的CSS样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function updateHtmlCss(){
alert("进入")
var p1=document.getElementById("p1")
p1.style.color="red"
p1.style.fontSize="28px"
p1.style.fontFamily="微软雅黑"
}
</script>
</head>
<body>
<p id="p1">Hello World!</p>
<input type="button" value="改变 HTML 样式" onclick="updateHtmlCss()" />
</body>
</html>
2.5.2.使用js实现HTML中元素的隐藏或显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function hiddenElement(){
alert("隐藏")
var box=document.getElementById("box")
box.style.display="none"
//box.style.visibility="hidden"
}
function showElement(){
alert("显示")
var box=document.getElementById("box")
box.style.display="block"
//box.style.visibility="visible"
}
</script>
</head>
<body>
<div id="box" style="display: block;">
<p>上海滩</p>
<p>大上海。。。百乐门。。。。</p>
</div>
<input type="button" value="隐藏" onclick="hiddenElement()" />
<input type="button" value="显示" onclick="showElement()" />
</body>
</html>
2.5.3.升级版本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function hiddenAndShow(){
var btn1=document.getElementById('btn');
var box=document.getElementById("box")
alert(btn1.value)
if(btn1.value=="隐藏"){
box.style.display="none"
btn1.value="显示"
}
else{
box.style.display="block"
btn1.value="隐藏"
}
}
</script>
</head>
<body>
<div id="box" >
<p>上海滩</p>
<p>大上海。。。百乐门。。。。</p>
</div>
<input type="button" id="btn" value="隐藏" onclick="hiddenAndShow()" />
</body>
</html>
2.6.JavaScript对HTML元素的增删
2.6.1.创建新的html元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function addElement(){
var div1=document.getElementById('div1');
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落的内容：666");
para.appendChild(node);
div1.appendChild(para)
}
</script>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<input type="button" id="btn" value="增加" onclick="addElement()" />
</body>
</html>
2.6.2.删除HTML元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function removeElement(){
var parent=document.getElementById('div1');
var child=document.getElementById('p1');
parent.removeChild(child)
}
</script>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<input type="button" id="btn" value="删除" onclick="removeElement()" />
</body>
</html>
2.6.扩展–“盖大楼” ( 增 删 )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8以上是关于JavaScript基础（一篇入门）的主要内容，如果未能解决你的问题，请参考以下文章