JavaScript(一）
1.JavaScript 基本使用
2.JavaScript简单事件
3.JavaScript修改样式
4.JavaScript数据类型
JavaScript和Java有什么关系
知识点一 JavaScript基本使用
JS写在哪
还有一种写在中间的，也就是<head>里面
JS一些注意事项
JS修改元素内容
#JS获取对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box" id="box1">你好，世界</div>
<div class="box">捡起大王</div>
<input type="text" name="hello" placeholder="在坐的都是弟弟">
<script>
// 变量Id
var Id = document.getElementById('box1');
console.log(Id);
Id.innerText = 'hello world';
//class
var Class = document.getElementsByClassName('box')[1];
console.log(Class);
Class.innerText = '捡起大王666';
// 标签
var None = document.getElementsByTagName('div')[0];
console.log(None);
//name
var Myname = document.getElementsByName('hello');
console.log(Myname)
//css选择器
//取到直接返回，不会往下取
var Select = document.querySelector('.box');
console.log(Select);
//取全部
var Select = document.querySelectorAll('.box');
console.log(Select);
var Select = document.querySelectorAll('#box1');
console.log(Select);
</script>
</body>
</html>知识点二 JS简单事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background: purple;
}
</style>
</head>
<body>
<div id="box"></div>
<select name="" id="">
<option value="nj">南京</option>
<option value="sj">苏州</option>
<option value="cz">常州</option>
</select>
<script>
/*事件 是指JavaScript 捕获到用户的操作，并作出正确的响应。
在事件的数中，有一个关键字this,代表当前触发事件的这个元素
事件 用户操作
元素 事件=函致
鼠标事件:
左键单击 onclick
左键双击 ondblclick
鼠标移入 onmouseover/onmouseenter ***
鼠标移出 onmouseout/onnouseleave ***
*/
var oBox = document.getElementById('box');
oBox.onclick = function (){
this.innerHTML = '我被点击了'
};
oBox.ondblclick = function (){
this.innerHTML = '我被双击了'
};
oBox.onmouseover = function (){
this.innerHTML = '鼠标移入'
this.style.backgroundColor = 'blue'
};
oBox.onmouseout = function (){
this.innerHTML = '鼠标移出'
this.style.backgroundColor = 'red'
};
window.onresize = function (){
console.log('我在变化')
}
var sel = document.querySelector('select');
sel.onchange = function (){
console.log('下拉选择在变化')
}
</script>
</body>
</html>知识点三 修改样式
修改样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="box1" value="捡起">
<div id="box" style="width: 100px;height: 100px;background: red"></div>
<script>
var oBox = document.getElementById('box')
// oBox.style.width = '50px';
oBox.onclick = function (){
// oBox.style.width = '400px';
// oBox.style.height = '400px';
// oBox.style.background = 'blue'
oBox.style.cssText = 'width:400px;height:400px;background:yellow'
};
oBox.style.marginLeft = '100px';
oBox.style['margin-left'] = '50px';
oBox.style['width'] = '400px';
var a = 'width';
var b = '300px';
oBox.style['a'] = 'b';
var In = document.getElementById('box1').value
alert(In)
</script>
</body>
</html>JS操作标签属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="http://baidu.com" id="box" xy = 'jianqi' target="_blank" class="wrap">去百度</a>
<script>
/*
js操作元素的标签属性:
input 标签 value
规范的标签属性:
. 符号直接操作 (可读可写)
不规范(自定义)的标签属性
获取.getAttribute()
设置.setAttribute()
移除.removeAttribute()
注意:
所有的 路径 颜色 获取 的结果不一定是你写的内容
通过Id获取的元素赋值给变量后，假设修改了Id，这个变量还是表示这个元素
自定义标签属性的操作方式，同样可以操作符合规范的属性
*/
var oA = document.getElementById('box');
oA.target = "_self";
// oA.href = 'http://vip.com';
// alert(oA.id)
// alert(oA.className)
alert(oA.getAttribute('xy'));
oA.setAttribute('xy','fufu');
alert(oA.getAttribute('xy'));
oA.removeAttribute('xy');
alert(oA.getAttribute('xy'));
</script>
</body>
</html>知识点四 JavaScript数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// string
console.log(typeof'8');
// number
console.log(typeof 1234.11);
// boolean
console.log(typeof true);
// object
console.log(typeof [1,2,3,4,5]);
console.log(typeof {name:'jianqi'});
console.log(typeof []);
console.log(typeof null);
function f() {
}
console.log(typeof f);
// undefined
var y;
console.log(typeof y);
var v = Symbol(1234);
console.log(typeof v);
</script>
</body>
</html>