JavaScript-1
2019-05-24 本文已影响0人
昆仑草莽
JavaScript的基本使用
JavaScript原名liveScript, 是一门动态类型，弱类型基于原型的脚本语言，他主要是做：页面特效、前后交互、后台开发（node）。在书写上，他主要写在：Script 标签里、外部的 js 文件内。
<head>
<title>js基础</title>
<style>
.div-out{
width: 300px;
height: 400px;
border:1px solid red;
}
.div-in{
width: 100px;
height: 50px;
color: black;
background-color: aqua;
}
</style>
</head>
<body>
<div class="div-out">
<p class="p1">
属性：<input type="text" placeholder="请输入CSS属性"/>
</p>
<p class="p1">
属性值：<input type="text" placeholder="请输入CSS属性值"/>
</p>
<button id="btu" >设置</button>
<div class="div-in">
<p id="p1">我就是我</p>
</div>
</div>
<script src="test.js"></script> //外部引入
<!--<script>--> //写在body底部
<!--var inp = document.getElementsByTagName("input")-->
<!--var btu = document.getElementById("btu")-->
<!--var box = document.getElementsByClassName("div-in")-->
<!--var a = document.getElementById("p1");-->
<!--a.onmouseenter = function () {-->
<!--a.innerHTML = "大家好"-->
<!--a.style.color = "white"-->
<!--}-->
<!--a.onmouseleave = function () {-->
<!--a.innerHTML = "我就是我"-->
<!--a.style.color = "black"-->
<!--}-->
<!--btu.onclick = function () {-->
<!--var inn = inp[0].value-->
<!--var ins = inp[1].value-->
<!--box[0].style[inn] = ins-->
<!--}-->
<!--</script>-->
</body>
</html>
.js文件
var inp = document.getElementsByTagName("input")
var btu = document.getElementById("btu")
var box = document.getElementsByClassName("div-in")
var a = document.getElementById("p1");
a.onmouseenter = function () {
a.innerHTML = "大家好"
a.style.color = "white"
}
a.onmouseleave = function () {
a.innerHTML = "我就是我"
a.style.color = "black"
}
btu.onclick = function () {
var inn = inp[0].value
var ins = inp[1].value
box[0].style[inn] = ins
}
可以根据属性，和属性值的修改，来改变CSS样式。
JS的一些注意事项：
1、JS严格的区分大小写。
2、每一行完整语句后面加分号 。
3、变量名不能使用关键字和保留字。
4、代码要缩进，保持可读性。
修改元素属性：
1、获取元素内容：
var Demo = document.getElementsByTagName(""); //通过标签获取元素
var Demo = document.getElementById(""); //通过ID获取元素
var Demo = document.getElementsByClassName(""); //通过类获取元素
var Demo = document.getElementsByName(""); //通过name获取元素
var Demo = document.querySelector (""); 通过CSS选择器获取一个
var Demo = document.querySelectorAll("");通过CSS选择器获取所有
2、简单事件：JS基础事件
| 参数 | 描述 |
|---|---|
| onclick | 单击事件 |
| ondblclick | 双击事件 |
| onmouseenter | 鼠标滑入 |
| onmouseleave | 鼠标划出 |
| onresize | 窗口变化 |
| onchange | 改变下拉框 |
<head>
<title>Title</title>
</head>
<body>
<div id="div1" class="div321">
<p class="p1">我是第一句话</p>
<p class="p1">我是第二句话</p>
<p name="p123">我是第三句话</p>
</div>
<select>
<option value="1">111</option>
<option value="2">222</option>
<option value="3">333</option>
</select>
<script type="text/javascript">
//通过ID获取元素
var a = document.getElementById("div1");
//通过class类名获取元素
var a = document.getElementsByClassName("p1");
console.log(a);
//通过标签名获取元素
var a = document.getElementsByTagName("p");
//通过name属性名获取元素
var a = document.getElementsByName("p123");
//通过CSS选择器获取元素
var a = document.querySelector("p");
var a = document.querySelectorAll(".p1")[0];
a[0].innerHTML = '123123'
console.log(a[0].innerText);
//单击事件
a[0].onclick = function () {
alert(123)
}
//双击事件
a.ondblclick = function () {
alert(123123)
}
//鼠标移入移出
a.onmouseenter = function () {
alert("我是划入")
};
a.onmouseleave = function () {
alert("我是划出")
}
//窗口变化
window.onresize = function () {
console.log("我是窗口，我变了")
}
//下拉框改变
var sel = document.getElementsByTagName("select")[0];
sel.onchange = function () {
console.log("下拉框变动了、、、")
}
</script>
</body>
</html>
3、JS修改样式
请注意：标签属性分为两种属性，合法属性和自定义属性。
// 通过ID获取元素
var box = document.getElementById("div1");
// 通过获取到的元素对象修改CSS样式
box.style.width = '200px';
box.style.height = '200px';
box.style.border = '1px solid red';
// 第二种修改的方法
box.style['color'] = 'red'
// 操作标签属性|合法属性与自定义属性
// 无则增有则改
box.className = 'div123';
// 查
console.log(box.className);
// 删
box.removeAttribute("id");
// 无则增有则改
box.setAttribute('class','div_box');
//查
box.hasAttribute("class")
4、数据类型：
| 参数 | 描述 |
|---|---|
| string | 字符串 |
| number | 数字 |
| boolean | 布尔 |
| ubdefined | 未定义 |
| null | 空值 |
| object | 对象 |
var name = 'apple';
var age = 18;
var a = true;
var b;
var c = null;
var arr = [1,2,3,4,5];
var dic = {'a':1,'b':2};
console.log(typeof name);//string
console.log(typeof age);//number
console.log(typeof a);//boolean
console.log(typeof b);//undefined
console.log(typeof c);//object
console.log(typeof arr);//object
console.log(typeof dic);//object
