欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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来说有更简洁,代码量少!