js引入
<style>
#box, #wrap, #temp, #res {
width: 200px;
height: 200px;
background-color: red;
margin-top: 10px;
}
</style>
<!--1.行间式: 就是代码块书写在全局事件属性中-->
<!--this就是激活该代码块(脚本)的页面标签(页面元素对象)-->
<div id="box" onclick="this.style.borderRadius = '10px'"></div>
<div id="wrap" ondblclick="this.style.backgroundColor = 'orange'"></div>
<div id="temp"></div>
<!--2.内联式-->
<script>
temp.onclick = function () {
this.style.width = "400px";
}
</script>
<div id="res"></div>
<!--3.外联式-->
<script src="js/1.js">
============================================================
res.onclick = function () {
this.style.height = "100px";
this.style.backgroundColor = "yellow";
this.style.borderRadius = "50%";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>引入</title>
<style>
#box,#wrap,#temp,#res {
width: 200px;
height: 200px;
background-color: red;
margin-top: 10px;
}
</style>
<script>
alert('hello js')
</script>
</head>
<body>
<!--1.行间式-->
<div id="box" onclick="this.style.borderRadius = '10px'"></div>
<div id="wrap" ondblclick="this.style.backgroundColor = 'orange'"></div>
<div id="temp"></div>
<!--2.内联式-->
<script>
temp.onclick = function () {
this.style.width = '400px'
}
</script>
<div id="res"></div>
</body>
<!--3.外联式-->
<script src="js/1.js">
</script>
</html>
================================1.js==========================
res.onclick = function () {
this.style.height = '100px'
this.style.backgroundColor = 'yellow'
this.style.borderRadius = '50%'
}
js选择器
<div id='box' class="bb"></div>
<div class='box1 bb'></div>
<div class='box1 bb'></div>
<script>
var box = document.getElementById('box');
var boxs = document.getElementsByClassName('box1');
var divs = document.getElementsByTagName('div');
</script>
<script>
var div = document.querySelector('.bb');
var divs = document.querySelectorAll('body .box1.bb');
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js选择器</title>
<style>
#box, .box1, .box2 {
background-color: orange;
width: 200px;
height: 200px;
margin-top: 2px;
}
</style>
</head>
<body>
<div id="box"></div>
<!--虽然id可以重复,但是js中就无法唯一标识识别,所以约定俗成标签id名一定不能重复-->
<div id="box"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box2">1</div>
<div class="box2">2</div>
</body>
<script>
document.getElementById('box').onclick = function () {
this.style.borderRadius = "50%";
}
var num = 10;
var a = num;
var box = document.getElementById('box');
box.onclick = function () {
this.style.backgroundColor = "green";
}
var boxs = document.getElementsByClassName('box1');
console.log(boxs);
boxs[0].onclick = function () {
this.style.backgroundColor = 'blue'
}
boxs[1].onclick = function () {
this.style.backgroundColor = 'pink'
}
var divs = document.getElementsByTagName('div');
console.log(divs);
divs[1].ondblclick = function () {
divs[1].style.borderRadius = "50%";
}
</script>
<script>
var box2s = document.querySelectorAll('body .box2');
console.log(box2s);
var box2 = document.querySelector('body .box2');
console.log(box2);
</script>
</html>
操作页面文档
var box = document.querySelector('.box');
box.onclick = function () {
this.className += " box1";
this.className = "";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作页面文档</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: orange;
font: 900 30px/200px "STSong";
text-align: center;
color: red!important;
margin: 0 auto;
}
.box.box1 {
color: greenyellow!important;
font-size: 12px;
font-weight: lighter;
}
</style>
</head>
<body>
<div class="box">文本内容</div>
</body>
<script>
var box = document.querySelector('.box');
box.onclick = function () {
this.className += " box1";
this.className = "";
}
</script>
</html>
计算后样式
.box {
font-size: 100px;
}
var box = document.querySelector('.box');
var ftSize = getComputedStyle(box, null).fontSize;
console.log(ftSize);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算后样式</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: orange;
font-size: 100px;
}
</style>
</head>
<body>
<!--<div class="box" style="font-size: 30px">12345</div>-->
<div class="box">12345</div>
</body>
<script>
var box = document.querySelector('.box');
var ftSize = box.style.fontSize;
console.log(">>>>>>>>>>>>>>>>" + ftSize);
ftSize = getComputedStyle(box, null).fontSize;
console.log("=================" + ftSize);
</script>
</html>
js基础语法
var a1 = 10;
var a2 = 3.14
var s1 = "123";
var s2 = '456';
var u1;
var u2 = undefined;
var b1 = true;
var b2 = false;
var obj = {};
var func = function(){}
var n = null;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js基础语法</title>
</head>
<body>
js基础语法
<div id="box"></div>
</body>
<script>
var num =10;
var s = 'hello js';
console.log(num,'<<>>',s);
console.log("%d %s",num,s);
box.innerText = s;
var a = 10;
console.log(a,typeof(a));
a = 3.14;
console.log(a,typeof(a));
a = '123'
console.log(a,typeof(a));
a = '456'
console.log(a,typeof(a));
var b;
console.log(b);
a = undefined;
console.log(a,typeof(a));
a = true;
console.log(a,typeof(a));
b = false
console.log(b,typeof(b));
a = function () {
return 0;
}
console.log(a,typeof(a));
a = {
name:'Bob',
age:18
}
console.log(a,typeof(a))
a = null;
console.log(a,typeof(a))
a = new Array(1,2,3,4,5);
console.log(a,typeof(a));
a = [5,4,3,2,1];
console.log(a,typeof(a));
a = new Date();
a = new Date('2019-3-1 12:00:00');
console.log(a,typeof(a));
var year = a.getFullYear();
console.log(year)
console.log(a.getDay())
console.log(a.getMonth())
console.log(a.getDate())
var re = new RegExp('\\d{3}', 'g');
var res = "abc123abc123".match(re);
console.log(res);
re = /\d{2}/g;
res = 'a1b23c456'.match(re);
console.log(res);
re = /[abc]/gi;
res = 'aBc'.match(re);
console.log(res);
var arr = [3, 5, 2, 1, 4];
console.log(arr[2]);
var dic = {
"name": "Bob",
age: 18,
"little-name": "b"
}
console.log(dic['name']);
console.log(dic['age']);
console.log(dic.name);
console.log(dic.age);
console.log(dic["little-name"])
</script>
</html>