js初识第一节
2019-07-23 本文已影响0人
An的杂货铺
一、 js的组成(javascript)
js的三个主要组成部分是：ECMAScript(核心)，DOM（文档对象模型），BOM（浏览器对象模型）
Bom相关的内容 https://www.jianshu.com/p/0c8b34111e95
Dom相关的内容https://www.jianshu.com/p/9eb00403cc81
ECMAScript的相关内容https://www.jianshu.com/p/2e58f0b9ee99
Dom结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="oul" name = "oul">
<li class="oli">1</li>
<li class="oli">2</li>
<li class="oli">3</li>
<li class="oli">4</li>
<li class="oli">5</li>
<li class="oli">6</li>
<li class="oli">7</li>
<li class="oli">8</li>
</ul>
</body>
</html>
二、原生的js获取dom元素常用的方式
//通过id找元素
console.log(document.getElementById('oul'));
//通过name名来找(得到的是一个集合)
console.log(document.getElementsByName('oul'));
//通过标签名来找元素(得到的是一个集合)
console.log(document.getElementsByTagName('li'));
//通过类名来找元素
console.log(document.getElementsByClassName('oli'));
//通过选择器获取一个元素（querySelector）只得到符合筛选条件的第一个元素
console.log(document.querySelector('.oli'));//还可以查标签名、查id等
//通过选择器获取一组元素（querySelectorAll）得到符合筛选条件的一组元素
console.log(document.querySelectorAll('.oli'));
//获取html的方法（document.documentElement）
console.log(document.documentElement);
//获取body的方法（document.body）
console.log(document.body);
三、原生js通过id绑定事件的方式以及常见的window.onload事件
window.onload = function(){
//写要执行的代码
}//页面加载完后执行相关的操作
原生js通过id绑定事件的方式
document.getElementById('oul').onclick = function(){
//写要执行的代码
}
四、 js通过display来控制元素的显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn1">显示</button>
<button id="btn2">隐藏</button>
<div id="box">
我是div
</div>
</body>
<script type="text/javascript">
//js通过display来控制元素的显示和隐藏
// 找相关元素
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var oBox = document.getElementById("box");
// 操作样式
oBox.style.width = "200px";
oBox.style.height = "200px";
oBox.style.background = "pink";
// 绑定显示按钮事件
oBtn1.onclick = function() {
// 让div显示 display: block
oBox.style.display = "block";
}
// 绑定隐藏按钮事件
oBtn2.onclick = function() {
// 让div显示 display: block
oBox.style.display = "none";
}
</script>
</html>
五、 js通过mouseover和mouseout来控制图片src值切换图片的显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="oneimg.jpg" alt="" style="height:300px">
<ul>
<li>北京</li>
<li>深圳</li>
<li>上海</li>
<li>杭州</li>
<li>广州</li>
</ul>
</body>
<script type="text/javascript">
//js通过mouseover和mouseout来控制图片src值切换图片的显示
var oImg = document.getElementsByTagName("img")[0];
// 2 绑定事件
oImg.onmouseover = function() {
//alert("hello");
oImg.src = "twoimg.jpg";
}
oImg.onmouseout = function() {
oImg.src = "oneimg.jpg";
}
//js通过为元素循环绑定事件添加高亮显示的效果
var olis = document.getElementsByTagName('li');
for(var i = 0;i<olis.length;i++){
olis[i].onmouseover = function(){
this.style.background = 'pink'
}
olis[i].onmouseout = function(){
this.style.background = '';
}
}
</script>
</html>
六·、js通过mouseover和mouseout来实现一个隔行变色的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>北京</li>
<li>深圳</li>
<li>上海</li>
<li>杭州</li>
<li>广州</li>
<li>北京</li>
<li>深圳</li>
<li>上海</li>
<li>杭州</li>
<li>广州</li>
</ul>
<button onclick = 'f1()'>点我</button>
</body>
<script type="text/javascript">
//js通过mouseover和mouseout来实现一个隔行变色的效果
var lis = document.getElementsByTagName('li');
var currentColor;
for(var i = 0;i<lis.length;i++){
if(i%2 == 0){
lis[i].style.background = 'pink';
}else{
lis[i].style.background = 'orange';
}
lis[i].onmouseover = function(){
currentColor = this.style.background;
this.style.background = 'red';
}
lis[i].onmouseout = function(){
this.style.background = currentColor;
}
}
function f1(){
alert('事件生效')
}
//js除了可以外部引入和直接写在script标签之间，还可以直接添加进dom里，如f1()函数
</script>
</html>
