JavaScript基础作业练习_1024 - JS

首页 > 博客列表 > JavaScript基础作业练习_1024

博主信息

博文 77

粉丝 0

访问量 52192

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

JavaScript基础作业练习_1024

Jet的博客

原创

1215人浏览过

<!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>
    <style>
        .myclass {
            width: 200px;
            height: 50px;
            background: red;
        }
        
        .radius {
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <!--<div id="div1" style="background:red; width:100%; height:50px;"></div>-->
    <p class="p1" style="background:green; width:100%; height:50px;"></p>
    <p>second</p>
    <img id='img1' width="180" src="http://e.hiphotos.baidu.com/image/pic/item/4610b912c8fcc3cef70d70409845d688d53f20f7.jpg">
    <br />
    <input id="input_chk" type="checkbox" flag="true" /><button onclick="chk()">选中</button>
    <button onclick="ischk()">是否选中</button>
    <br />
    <button onclick="remove_attr()">移除attr属性</button>
    <button onclick="chk_prop()">prop增加图片高度</button>
    <button onclick="remove_prop()">移除prop属性</button>
    <br />
    <br />
    <div class="myclass"><span style="color:green;">PHP中文网</span></div>
    <div class="myclass1"><span style="color:green;">wwwphpcn</span><span>PHP中文网</span></div>
    <button onclick="add()">addClass</button>
    <button onclick="removes()">removeClass</button>
    <button onclick="toggleClass()">toggleClass</button>
    <br />
    <br />
    <button id="btn" onclick="chickme()">点击获取验证码</button>
    <br />
    <br />
    <button onclick="get_html()">获取html</button>
    <br />
    <br />
    <input type="text" id='username' placeholder="请输入用户名">
    <button onclick="get_username()">获取用户名</button>
    <br />
    <br />
    <button onclick="get_size()">获取div的宽度高度</button>
    <br />
    <br />
    <button onclick="get_input_div()">获取input和div</button>
    <div class="radius"></div>


</body>

</html>
<script type="text/javascript">
    // var res = $('button');
    // $.each(res, function(i, v)) {
    //     console.log(v);
    // }

    // 统计元素多少个
    var res1 = $('div').length;
    console.log(res1);

    $('img').prop('width', 280);
    //获取图片css.width属性
    console.log($('img').css('width'));

    //给元素加属性
    $('p').attr('flag', '123');
    var res = $('p').attr('flag');
    console.log(res);

    //checked问题，checked、true（attr）

    /*
    function chk() {
        $('#input_chk').attr('checked', true);
    }

    function ischk() {
        alert($('#input_chk').attr('checked'));
    }
*/
    //attr返回结果是属性值/undefined
    //prop返回结果是布尔值
    function chk() {
        $('#input_chk').prop('checked', true);
    }

    function ischk() {
        alert($('#input_chk').prop('checked'));
    }

    function remove_attr() {
        $('#input_chk').removeAttr('flag');
    }

    //removeProp不能移除固有元素
    function chk_prop() {
        $('#img1').prop('heigh', 120);
        var lll = $('#img1').prop('heigh');
        alert(lll);
    }

    function remove_prop() {
        $('#img1').removeProp('heigh');
        var lll = $('#img1').prop('heigh');
        alert(lll);
    }

    //增加class
    function add() {
        $('div').addClass('radius');
    }
    //移除class
    function removes() {
        $('div').removeClass('radius');
    }
    //判断是否有此class，增加删除
    function toggleClass() {
        $('div').toggleClass('radius');
    }

    //倒计时执行任务
    /*
    setTimeout(function() {
        chickme();
    }, 5000);
    */

    //验证码倒计时
    //定时器
    function set_timer() {
        $('#btn').attr('disabled', true);
        var i = 10;
        var timer = setInterval(function() {
            $('#btn').text(i);
            if (i == 0) {
                $('#btn').text('点击获取验证码');
                //清除定时器
                clearInterval(timer);
                //$('#btn').removeAttr('disabled');
                $('#btn').attr('disabled', false);
            }
            i--;
        }, 1000);
    }

    function chickme() {
        var res = $('#btn').text();
        if (res == '点击获取验证码') {
            //启动倒计时
            set_timer();
        }
    }


    //获取HTML
    //html会识别样式内容
    //text会把所有内容当做字符
    function get_html() {
        var res = $('.myclass').html('<span style="color:yellow;">asdasdsd</span>');
        console.log(res);
    }

    //获取用户名 val
    function get_username() {
        //获取
        var res = $('#username').val();
        alert(res);
        //设置
        //$('#username').val('administrator');
    }

    //获取div高度宽度
    function get_size() {
        var width = $('.myclass').width();
        var height = $('.myclass').height();
        alert('宽度：' + width + ' ；高度：' + height);
        //设置高度
        $('.myclass').height(100);
    }

    //类选择器
    function get_input_div() {
        //类选择器
        var res = $('div.radius,input');
        $.each(res, function(i, v) {
            console.log(v);
        })
    }

    //层级选择器
    var result = $('.myclass span').text();
    console.log(result);

    var result1 = $('.myclass1 span')
    $.each(result1, function(i, v) {
        console.log($(v).text());
    })
</script>

总结：

今天主要学习了Jquery属性、css、定时器、类选择器、层级选择器

1、attr、prop、removeAttr、removeProp

attr：给元素添加属性（可显示结果）

prop：给元素添加属性（隐藏结果不可见）

removeAttr：移除属性

removeProp：移除属性（不能移除固有属性：如width、height等）

2、addClass、removeClass、toggleClass

addClass：增加class样式

removeClass：移除class样式

toggleClass：自判断增加移除class样式，如果结果有就移除，否则增加

3、获取HTML内容

html：会一别样式内容

text：会把所有内容当作字符串

如：var res = $('.myclass').html('asdasdsd'); 结果显示黄色的asdasdsd

如：var res = $('.myclass').text('asdasdsd'); 结果显示整个字符 asdasdsd

4、val、width、height

val：读取内容值； // $('#username').val(); 读取id为username的value，如果val('admin')，括号里面添加内容，就是设置值；

width：获取宽度

height：获取高度

5、类选择器、层级选择器

类选择期：div.radius , input //选择 div.radius 和 input

var res = $('div.radius,input');
        $.each(res, function(i, v) {
            console.log(v);
        })

层级选择器：.myclass span //选择 .myclass 下的 span

<div class="myclass1"><span style="color:green;">wwwphpcn</span><span>PHP中文网</span></div>
    var result1 = $('.myclass1 span')
    $.each(result1, function(i, v) {
        console.log($(v).text());
    })

6、定时器

 <button id="btn" onclick="chickme()">点击获取验证码</button>
    //Jquery
    //定时器开启 ②
    function set_timer() {
        //设置id为btn的disabled值为true，不能再点击
        $('#btn').attr('disabled', true);
        //设置倒计时秒数
        var i = 10;
        //定时器： setInterval ( function() { 代码内容 }, 秒数 )；
        var timer = setInterval(function() {
            //设置id为btn文本的值为i
            $('#btn').text(i);
            //当 i==0
            if (i == 0) {
                //重新赋值为 点击获取验证码
                $('#btn').text('点击获取验证码');
                //清除定时器
                clearInterval(timer);
                //开启可以点击
                $('#btn').attr('disabled', false);
            }
            //每次减1
            i--;
        }, 1000);
    }    
    //点击开启定时器 ①
    function chickme() {
        //获取id为btn的text值
        var res = $('#btn').text();
        如果等于xxx，开始定时器
        if (res == '点击获取验证码') {
            //启动倒计时
            //调用set_timer方法
            set_timer();
        }
    }

批改状态：合格

老师批语：没有总结 , 没有编程思路分析, 下次注意了

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

匿名函数与命名空间_0929

2019-10-08 13:01:48

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

php8，我来也

细说PHP(2021版)第一季

TP6.0 搭建个人博客实战（玉女心经版）

2018前端入门_HTML5

JavaScript极速入门_玉女心经系列

独孤九贱(1)_HTML5视频教程

CSS视频教程-玉女心经版

30分钟学会网站布局

Thinkphp6.0正式版视频教程

php8，我来也

PHP实战天龙八部之微信支付视频教程

CI框架30分钟极速入门

MySQL权威开发指南（教程）

Redis基础视频课程

尚观Oracle入门到精通视频教程

PDO操作极速入门,今天你用了吗？

你的第一行UNI-APP代码

Uniapp简爱读书项目开发--第一季

公益直播：Uniapp微信小程序1:1仿饿了么首页

Flutter从零到APP上架

phpStudy V8 视频教程

兄弟连新版Linux视频教程

Git教程(60分钟全程无废话版)

vscode其实很简单

AXURE 9视频教程(适合产品经理交互产品设计 UI)

零基础精通 PS 视频教程

16天带你入门UI视频教程

PS技法与切片技术视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述—程序员必须掌握的基础知识

程序员入门必备教程—HTTP协议详解

Websocket视频教程