Blogger Information
Blog 77
fans 0
comment 0
visits 55249
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JavaScript基础作业练习_1023
Jet的博客
Original
816 people have browsed it
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>

<body>
    <div id="div1" style="background:red;width:100%;height:50px;"></div>
    <p class="p1" style="background:green;width:100%;height:50px;"></p>
    <button onclick="change_color_div1()">改变div颜色</button>
    <button onclick="change_size_p1()">改版p的大小</button>
</body>

</html>

<script type="text/javascript">
    //对象
    var obj = new Object();
    //属性
    obj.rand = function() {
        console.log(Math.random());
    }
    obj.rand();

    //定义对象
    var obj1 = {};
    //属性
    obj1.name = 'php';
    obj1.rand = function() {
            console.log(Math.random());
        }
        //调用属性的方法
    obj1.rand();

    //对象
    var obj2 = {
        name: 'php',
        rand: function() {
            console.log(Math.random());
        },
        sum: function(num1, num2) {
            return num1 + num2;
        }
    };
    console.log(obj2.sum(2, 5));

    //对象
    var obj3 = {
        table: 'php',
        find: function() {
            return this.table;
        },
        where: function() {
            return this;
        }
    };
    //传地址,只有一个值,修改就修改了
    var obj4 = obj3;
    obj4.table = 'name';

    var res = obj4.where().find();
    console.log(res);
    var res1 = obj3.where().find();
    console.log(res1);

    //Jquery 遍历循环
    var arr = [1, 3, 4, 5, 6, 7];
    $.each(arr, function(i, v) {
        /*
        if (i > 2) {
            return false;
        }
        */
        //true 相当于 continue;
        //false 相当于 break;
        if (v == 3 || v == 6) {
            return true;
        }
        console.log('索引:' + i + ' ');
    });

    //# 选择ID
    function change_color_div1() {
        $('#div1').css('background', 'blue');
    }
    //. 选择class
    function change_size_p1() {
        $('.p1').css('width', '200px');
    }
</script>

 

总结:

1、今天学习了js对象、属性、方法,Jquery

2、自定义对象可以使用两种方法:

    2.1 var obj = new Object();   

    2.2 var obj1 = {};

    2.3 定义对象后,可以直接使用对象添加属性和方法:如 obj.name='php中文网'; obj1.rand=function(){console.log(Math.random())};

3、Jquery遍历:$.each( 数组,function( 索引,值 ) {  方法 } );

    例子:

    var arr = [1, 3, 4, 5, 6, 7];

    $.each(arr, function(i, v) {

        if (i > 2) {

            return false;

        }

        console.log('索引:' + i + ' ');

    });

    注意: true 相遇于 php 的continue; false相当于php 的 break;

4、Jquery选择器,#选择id, . 选择class

    例子:

    function change_color_div1(){

        $ ( '#div1').css('background','blue');

    }

    选择id为div1的样式,赋值background为blue

    function change_size_p1() {

        $('.p1').css('width', '200px');

    }

    选择class为p1的样式,赋值width为200px

5、注意一个知识点:

    var obj3 = { table: 'php', name='php中文网' };

    var obj4 = obj3;

    obj4.table = 'name';

    此时obj4和obj3的 table 值都是 name;因为这个是传地址,只有一个值,修改一个就是修改了。


PS:老师误会啦,其实都是看着视频理解,然后手动敲了两次才复制过来的,代码里面也有简单注释解释,不过下次会注意总结的哈,另外2个作业,等会有空也重新写总结。

Correction status:unqualified

Teacher's comments:加作业说明, 作业总结
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post