web前端知识点四、JavaScript入门（二）
2019-08-17 14:35
621 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40558166/article/details/99692385
-----------------------------------------目录--------------------------------------------
一、函数
二、对象的使用
三、js操作获取html元素和修改css样式
四、js修改元素的属性：增删改
五、鼠标键盘常用的事件
六、综合练习一—网页计算器
七、综合练习二—全选反选
八、综合练习三—选项卡练习
本节知识点具体解析都在代码给出，可以使用右侧目录栏快速找到自己想学的知识
一、函数
1.函数命名、匿名函数和自运行函数
| 函数 | 特点 |
|---|---|
| 命名函数 | ①函数：一段特点功能的代码块②函数定义使用关键字 function③这种函数任何位置都可以调用 |
| 匿名函数 | ①采用变量赋值形式②只可在定义完只会使用 |
| 自运行函数 | 无需调用会自动运行的函数 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数</title>
</head>
<body>
<script>
//--------------------命名函数--------------------
function func1(){
console.log('我是一个函数');
// 函数的返回值
return '哈哈哈';
}
//调用函数(注意：如果函数无返回值，默认返回undefined)
func1();
b=func1();
console.log(b);
//-------------------匿名函数--------------------
var func2=function(){
console.log('我是匿名函数')
}
console.log(func2);
//调用
func2();
//-----------------自运行函数------------------------
(function(){
console.log('我是自运行函数');
})()
</script>
</body>
</html>
2.函数的参数
- 形参少，传多个实参
- 形参多，传少量实参
- 不传形参，传实参
- 不传实参，写形参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数的参数</title>
</head>
<body>
<script>
//------------------定义了有参数的函数，传入的参数传多或传少--
function fun(a,b){
console.log(a,b);
//那如果想拿到自己传参的值，如何获取呢？在函数使用内置功能
for(i in arguments){
console.log(arguments[i]);
}
}
//1.定义函数时候有形参，调用函数时候不传参数
fun();//undefined undefined
//2.传多个实参，按照位置传参，多余的实参自动忽略
fun(1,2,3);//1,2,3
//3.定义函数2个形参，只传一个实参
fun(1);//1 undefined
//---------------定义了无形参的函数，却传入参数------------
function fun1(){
console.log('没有形参的函数');
}
fun1(1,2,3);//没有形参的函数
</script>
</body>
</html>
3.参数的作用域
1.全局变量：在函数外部定义的变量和在函数内部不使用var定义的变量是全局变量（在任何位置都可以使用）
2.局部变量：在函数内部使用var定义的变量（只在当前函数内部可以使用）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>参数的作用域</title>
</head>
<body>
<script>
//----------------参数的作用域----------------------
var a=1;//函数外部定义一个全局变量
function fun3(){
a+=1//js可以直接修改全局变量
console.log(a);
b=2;//函数内部定义一个全局变量
console.log(b);
}
console.log(a);
//console.log(b);//此处报错，函数没执行，还没有声明b
fun3();
console.log(a);//全局变量被修改
b+=2;
console.log(b);
</script>
</body>
</html>
二、对象的使用
对象的三种声明方法和关键字this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象</title>
</head>
<body>
<script>
//1.使用系统提供的object（）实例化对象
var obj1= new Object();
//对象的操作
//添加成员属性和成员方法
obj1.name='张三';
obj1.say=function(){
console.log('我太难了');
}
//修改name属性的值
obj1.name='李四';
//删除
delete obj1.name;
console.log(obj1);
//2.直接定义
var obj2={
name:'萌萌'
,say:function(){console.log('我太难了');
}
}
console.log(obj2);
//3.使用构造函数实例化对象
function Student(){
this.name='小哈';
this.say=function(){
console.log('我是一头驴');
}
}
//实例化
var haha=new Student();//类似python中的class
console.log(haha);
console.log(haha.name);
//this关键字,谁调用this，this就指向谁，在全局中指向window
console.log(this);
//什么时候用[]
//①当键存在变量中时，使用[]，其实是给字符串定义了一个变量名
var obj4={name:1,age:2};
var key='gender';
obj4[key]='男';
console.log(obj4);
console.log(obj4[key]);
console.log(obj4.gender);
//②当键是字符串时候，使用[]
// obj4.'height'='180';//报错
obj4['height']='100';
console.log(obj4);
</script>
</body>
</html>
三、js操作获取html元素和修改css样式
| 获取元素 | 方法 |
|---|---|
| 通过标签名 | document.getElementsByTagName() |
| 通过id名 | document.getElementById() |
| 通过类名 | doucument.getElementsByClassName() |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js操作html元素</title>
</head>
<body>
<div id='box' class="item1">1</div>
<div id='box' class="item1">2</div>
<script type="text/javascript">
//----------------------获取元素------------------------------
//1.通过id获取元素对象，返回元素对象，多个id同名会只获取第一个，每天返回null
var oDiv=document.getElementById('box');//获取元素
console.log(oDiv,typeof(oDiv));
//2.通过标签名获取元素，反回类数组对象(因为可能有多个标签名)
var oDivs=document.getElementsByTagName('div');
console.log(oDivs,typeof(oDivs));
//3.通过类名获取元素,返回类数组对象(因为可能有多个类名)
var oDivcs=document.getElementsByClassName('item1');
console.log(oDivcs,typeof(oDivcs));
//--------------------设置元素的样式-------------------
//设置js设置的都是行间样式
oDiv.style.width='200px';
oDiv.style.height='200px';
oDiv.style.backgroundColor='red';//中划线要去掉换为小驼峰
//注意通过标签或类名获取的需要先遍历获取某个元素，再设置样式
for(var i =0;i<oDivs.length;i++){
// console.log(oDivs[i]);
if(i%2==0){
oDivs[i].style.width='200px';
oDivs[i].style.height='200px';
oDivs[i].style.backgroundColor='yellow';//中划线要去掉换为小驼峰
oDivs[i].style.border='1px solid black';
oDivs[i].style.textAlign='center';
oDivs[i].style.lineHeight='30px';}
else{
oDivs[i].style.width='400px';
oDivs[i].style.height='400px';
oDivs[i].style.backgroundColor='blue';//中划线要去掉换为小驼峰
oDivs[i].style.border='5px dotted black';
oDivs[i].style.textAlign='center';
oDivs[i].style.lineHeight='30px'
}
}
</script>
</body>
</html>
四、js修改元素的属性：增删改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js获取元素的增删改</title>
<style>
#Div{
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<img src="电视.png" id='img' name='haha'>
<input type="text" value="12333" id='tex'>
<div id='Div'>哈哈哈哈哈哈哈哈</div>
<script type="text/javascript">
//-----getAttribute(),setAttribute(),removeAttribute()
//-------------------操作图片-----------------------------
var Img=document.getElementById('img');
console.log(Img);
//获取src属性
console.log(Img.getAttribute('src'));
//src本身就是img的默认属性
console.log(Img.src);
//设置属性,修改属性
Img.setAttribute('data','电视');
Img.name='xixi';
//删除属性
Img.removeAttribute('data');
//---------------------操作表单值----------------------
var Tex=document.getElementById('tex');
console.log(Tex.value);
Tex.value='456';
console.log(Tex.value);
//----------------文本值的操作--------------------
var oDiv=document.getElementById('Div');
console.log(oDiv.innerHTML);//会连标签一起获取
console.log(oDiv.innerText);//值获取纯文本
//设置文本内容
//修改的时候会覆盖原先内容，但是还能加入标签并且解析
oDiv.innerHTML='<h1>切断了所有退路</h1>';
//修改的时候会覆盖原先内容，不能解析标签
// oDiv.innerText='<h1>我的心情已落幕</h1>';
</script>
</body>
</html
五、鼠标键盘常用的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的事件</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id='box'>点击触发变色，移入移出触发提醒，键盘按下抬起触发提醒</div>
<form action="" id="form">
客户名：<input type="text" name="username">
<select name='sel'>
<option value="小张">小张</option>
<option value="小李">小李</option>
<option value="小王">小王</option>
</select>
<input type="submit" name="sub" value="完事了，走人">
</form>
<script type="text/javascript">
var oDiv=document.getElementById('box');
//绑定鼠标单击事件
var flag=1;
oDiv.onclick=function(){
if(flag==1){
//改变背景颜色
oDiv.style.background='red';
flag=0
}else{
oDiv.style.background='white';
flag=1;
}
}
//鼠标事件
//绑定鼠标移入事件
oDiv.onmouseover=function(){
console.log('我进来了');
}
//绑定鼠标移出事件
oDiv.onmouseout=function(){
console.log('我出来了');
}
//绑定鼠标移动事件
oDiv.onmousemove=function(){
console.log('我移动了');
}
//键盘事件
//键盘按下事件
window.onkeydown=function(){
console.log('按下键盘了');
}
//键盘抬起事件
window.onkeyup=function(){
console.log('抬起键盘了');
}
//表单事件
var Form=document.getElementById('form');
//获取焦点
Form.username.onfocus=function(){
console.log('你得到我了');
}
//失去焦点
Form.username.onblur=function(){
console.log('掏完钱再走');
}
//onchange 当value值发生变化时候触发
Form.sel.onchange=function(){
console.log('选我啊');
//获取当前选中的value值,谁触发的事件，this就代表哪个元素对象
console.log(this.value);
}
//提交事件，一般绑定给form元素，当单击提交按钮时候则触发
Form.onsubmit=function(){
alert(Form.sel.value+':靓仔还没给钱');
}
</script>
</body>
</html>
六、综合练习一—网页计算器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级计算器</title>
<style type="text/css">
.box{
border: 1px solid red;
width: 400px;
height:510px;
box-sizing: border-box;
margin:0 auto;
}
input{
width: 398px;
height: 100px;
font-size: 60px;
}
button{
height: 100px;
width: 99px;
font-size: 80px;
background: yellow;
border-radius: 30px;
box-sizing: border-box;
float: left;
}
.sf{
background: blue;
}
</style>
</head>
<body>
<div class="box">
<input type="text">
<button class="num" id='but' onclick="func('7')">7</button>
<button class="num" id='but' onclick="func('8')">8</button>
<button class="num" id='but' onclick="func('9')">9</button>
<button class="sf" id='but' onclick="func('/')">/</button>
<button class="num" id='but' onclick="func('4')">4</button>
<button class="num" id='but' onclick="func('5')">5</button>
<button class="num" id='but' onclick="func('6')">6</button>
<button class="sf" id='but' onclick="func('*')">*</button>
<button class="num" id='but' onclick="func('1')">1</button>
<button class="num" id='but' onclick="func('2')">2</button>
<button class="num" id='but' onclick="func('3')">3</button>
<button class="sf" id='but' onclick="func('-')">-</button>
<button class="num" id='but' onclick="func('0')">0</button>
<button class="num" id='but' onclick="func('.')">.</button>
<button class="sf" id='but' onclick="func('=')">=</button>
<button class="sf" id='but' onclick="func('+')">+</button>
</div>
<script type="text/javascript">
var Num='';
var Tex=document.getElementsByTagName('input');
function func(msg){
if(msg!='='){
Num+=msg;
console.log(Num);
Tex[0].value=Num;
}
else{
var str=eval(Num);
str=Num+'='+str;
Tex[0].value=str;
Num='';
}
}
</script>
</body>
</html>
七、综合练习二—全选反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选反选全不选练习</title>
<style type="text/css">
</style>
</head>
<body>
<input type="checkbox" name="choice" value="0" >唱<br>
<input type="checkbox" name="choice" value="1" >跳<br>
<input type="checkbox" name="choice" value="2" >rap<br>
<input type="checkbox" name="choice" value="3" >篮球<br>
<button onclick="func(1)">全选</button>
<button onclick="func(2)">全不选</button>
<button onclick="func(3)">反选</button>
<script type="text/javascript">
var Int=document.getElementsByTagName('input');
var But=document.getElementsByTagName('button');
function func(msg){
if(msg==1){
for(var i=0;i<Int.length;i++){
Int[i].checked=true;
}
}
else if(msg==2){
for(var i=0;i<Int.length;i++){
Int[i].checked=false;
}
}
else{
for(var i=0;i<Int.length;i++){
if(Int[i].checked==false){
Int[i].checked=true;
}
else{
Int[i].checked=false;
}
}
}
}
</script>
</body>
</html>
八、综合练习三—选项卡练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;list-style:none;}
.wrap{
width:300px;
height:300px;
border:1px solid #c4c4c4;
}
.title{
overflow: hidden;
}
.title li{
float:left;
width:100px;
height:50px;
background: #c4c4c4;
text-align:center;
line-height: 50px;
}
.title .active1{
background:#c4c4c4;
}
.content li{
height:250px;
border:1px solid red;
background: yellow;
text-align: center;
font-size: 30px;
/*默认给所有的内容隐藏*/
display:none;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="title">
<li class="active1" onclick="func('0')">话费</li>
<li class="active1" onclick="func('1')">机票</li>
<li class="active1" onclick="func('2')">酒店</li>
</ul>
<ul class="content">
<li class="active2" >话费的内容</li>
<li class="active2" >机票的内容</li>
<li class="active2" >酒店的内容</li>
</ul>
</div>
<script type="text/javascript">
var Act1=document.getElementsByClassName('active1');
var Act2=document.getElementsByClassName('active2');
Act2[0].style.display='block';
Act1[0].style.background='red';
var flag=0;
function func(msg){
for(var i=0;i<Act1.length;i++){
if(msg==i){
Act2[i].style.display='block';
Act1[i].style.background='red';
}else{
Act2[i].style.display='none';
Act1[i].style.background='#c4c4c4';
}
}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- web前端知识点五、JavaScript入门（三）
- 【前端知识点】webpack 打包 + es6 + react入门（一）webpack打包
- 7个知识点快速入门，Web前端初学者必备
- 7个知识点快速入门，Web前端初学者必备
- web前端面试-------javaScript基础知识点之数据类型
- web前端-关于javascript开发的重要知识点
- Web前端知识点：JavaScript简介！
- web前端初学者对于JavaScript的首个知识点理解记录
- Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
- Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
- web前端－－知识点，笔记叠加（javascript,jquery,html5+css3.0,ajax）
- 《Web 前端面试指南》1、JavaScript 闭包深入浅出
- WEB前端开发学习----12. JavaScript 选项卡效果
- web前端javaScript仿京东淘宝图片鼠标浮动图片上移效果
- [Web] 被遗忘的知识点 - JavaScript加载管理最佳实践
- Web前端技巧_HTML+CSS+JavaScript (个人经验)
- Web前端从入门到精通-8 css简介——清除浮动
- web前端开发常用代码段及知识点
- 小熊进阶之WEB前端javascript的基础知识汇总
- 强力推荐!web前端小白最常用的5个学习网站,让你快速入门!