JS对象和简单的事件 20191023
程序员文章站
2022-03-11 14:15:13
...
学习了JS的简单事件，如何获得html文档中的标签，id标签，class标签，js对象的创建和访问。jQuery的引入和简单事件。
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js基础</title>
</head>
<body>
<p id="p">这是一段文字</p>
<div class="div" style="display:none;">这是一个div</div>
<button onclick="clickShow()" id="buttonShow">点我显示</button>
<button onclick="clickHidden()" id="buttonHidden">点我隐藏</button>
<script>
//第一 原生js获取id
var num=document.getElementById('p');
console.log(num);
//js设置字体颜色
num.style.color='yellow';
//JS获取class
var div=document.getElementsByClassName('div');
console.log(div);
//因为class是数组所以使用了下标
div[0].style.width='300px';
div[0].style.height='200px';
div[0].style.backgroundColor='greenyellow';
document.getElementById('buttonShow').onclick=clickShow;
document.getElementById('buttonHidden').onclick=clickHidden;
function clickShow() {
div[0].style.display = 'block';
}
function clickHidden() {
div[0].style.display = 'none';
}
//对象的创建方式，直接创建
var obj={
'name':'lucy',
'num':[0,1,2,3,4]
};
console.log(obj.name);
//对象创建方式，先创建一个对象，然后添加属性进去
var obj1=new Object();
obj1.name='tom';
obj1.num=[2,3,4,5];
obj1.show=function() {
console.log(this.name);
}
obj1.show();
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<title>js基础</title>
</head>
<body>
<p id="p">这是一段文字</p>
<div class="div" >这是一个div</div>
<button onclick="clickShow()" id="buttonShow">点我显示</button>
<button onclick="clickHidden()" id="buttonHidden">点我隐藏</button>
<script>
//通过jQuery获取id,class 与css中的写法一样
//jQuery修改css一种属性
$('#p').css('color','greenyellow');
//jQuery修改多个css属性
$('.div').css({'width':'200px','height':'200px','background-color':'greenyellow'});
//jQuery显示
function clickShow(){
$('.div').css('display','block');
}
//jQuery隐藏
function clickHidden(){
$('.div').css('display','none');
}
//jQuery的each循环
var num=[1,2,3,4,5,6,7,8];
$.each(num,function(key,value){
console.log(key+'.值是：'+value);
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
jQuery相比JavaScript来说有更简洁，代码量少！