网盘资料链接:https://pan.baidu.com/s/1qFRLUOS-d3Ns3_avzXRrhw
提取码:echo
JS是什么
script 既可以写在<head>也可以写在<body>
JS放在哪
1.一般放在<body>里面 因为文本流的引用关系
2.新建一个JS文件 直接导入 在js文件里面不需要script标签[在html中<script src="js文件">]
JS 注意事项
1.严格区分大小写
2.每一行完整的句后面要加分号
3.变量名不能使用关键字和保留字
4.代码要缩进、保持可读性
用法
文字获取元素:var txtdom = document.getElementById('id名'); //var 定义变量
文字修改: txtdom.innerText = "新的内容"
网页修改:txtdom.innerHTML = "新的内容"
script 中设置函数 <script> function 函数名(){函数体 } </script>
例子:
<p id="txt">我是一个段落标签</p>
<button type="button" onclick="hanshu()"> holy shit </button>
<script>
function hanshu(){
document.getElementById("txt").innerText='一给我里giao giao';
}
</script>
js获取元素的方法:
JavaScript有六大数据类型:
1,Number类型 整数和小数
NaN属性 not a number(数字类型中,不是数字的值)
isNaN() 检查,监测参数是不是数字值
2,string 字符串
length 查看长度
3,Boolean 布尔
true,false 区分大小写
4,Undefine类型
只有一个值,就是Undefine,变量声明但未初始化。
5,Null类型
js里面的null属于对象类型的,但是它不具有对象的共性
6,object
js中对象类型一组集合
对象是由花括号分割的,在括号内部。
typeof 查看数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript基本使用+简单事件</title>
</head>
<body>
<!--使用导入script-->
<!--<script src="1.JavaScript基本使用+简单事件.js">-->
<!--// 弹窗-->
<!--// alert("弹窗");-->
<!--</script>-->
<!-------------------------------------------------------------------------------------------------------------------->
<!--通过script改文字内容-->
<p id="txt">我是一个段落标签</p>
<button type="button" onclick="hanshu()"> 点我 </button>
<button type="button" onclick="hanshu2()"> 再点我 </button>
<script>
function hanshu(){
document.getElementById("txt").innerText='一给我里giao giao';
}
function hanshu2(){
document.getElementById("txt").innerText = '我是一个段落标签';
}
</script>
<!-------------------------------------------------------------------------------------------------------------------->
<!--Text 和 Html 的区别-->
<div id="div1">
<p id="txt1" >我是一个段落标签1</p>
<p id="txt2" class="c1">我是一个段落标签2</p>
<p id="txt3" class="c1">我是一个段落标签3</p>
<p id="txt4" class="c2">我是一个段落标签4</p>
</div>
<script>
var box = document.getElementById('div1');
var txtDom1 = document.getElementById('txt1');
var txtDom2 = document.getElementById('txt2');
txtDom1.innerHTML = '我不一样的烟火';
txtDom2.innerText = '一给我里 giao';
// 打印在操控台(innerText 显示文本 innerHTML 显示标签)
console.log(box.innerText);
console.log(box.innerHTML);
// css选择器
var txtDom3 = document.querySelector('#txt1').innerHTML = '标签1';
var txtDom4 = document.querySelectorAll('.c1')[0].innerHTML = '标签2';
var txtDom5 = document.querySelectorAll('p')[2].innerHTML = '标签3';
</script>
<!-------------------------------------------------------------------------------------------------------------------->
<!--监控事件-->
<div id="div2" style="background: #dafffc"> 点击事件 <br>
<script>
// 点击事件
function dj()
{
document.getElementById('p1').innerText = '单击有惊喜';
}
function sj()
{
document.getElementById('p2').innerHTML = '<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2515373747,3366093492&fm=26&gp=0.jpg">'
}
// var box = document.getElementById('div1');
//
// box.onclick=
// function dj(){console.log('单击事件')};
//
// box.ondblclick=
// function dj() {console.log('双击事件')};
</script>
<button onclick="dj()"> 单击 </button>
<button ondblclick="sj()"> 双击有惊喜 </button>
<p id="p1"></p>
<p id="p2"></p>
</div>
<!-------------------------------------------------------------------------------------------------------------------->
<div id="div3" style="width: 100px;height: 100px;background: purple"></div>
<select id="s1">
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
<script>
// 鼠标划入 onmouseenter
var box = document.getElementById('div3');
box.onmouseenter = function ()
{
box.style.backgroundColor = 'red';
};
//鼠标划出 onmouseleave
box.onmouseleave = function ()
{
box.style.backgroundColor = 'pink';
};
// 窗口变化 onresize
window.onresize = function ()
{
console.log('窗口发生变化了!!!');
};
// 下拉框变化 onchange
var sss = document.querySelector('select');
sss.onchange = function () {
console.log('下拉框发生变化了')
};
</script>
</body>
</html>
alert('ahhahahahah');