亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 77
粉絲 0
評(píng)論 0
訪問量 80471
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
JavaScript基礎(chǔ)作業(yè)練習(xí)_1024
Jet的博客
原創(chuàng)
1420人瀏覽過
<!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中文網(wǎng)</span></div>
    <div class="myclass1"><span style="color:green;">wwwphpcn</span><span>PHP中文網(wǎng)</span></div>
    <button onclick="add()">addClass</button>
    <button onclick="removes()">removeClass</button>
    <button onclick="toggleClass()">toggleClass</button>
    <br />
    <br />
    <button id="btn" onclick="chickme()">點(diǎn)擊獲取驗(yàn)證碼</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);
    // }

    // 統(tǒng)計(jì)元素多少個(gè)
    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返回結(jié)果是屬性值/undefined
    //prop返回結(jié)果是布爾值
    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');
    }

    //倒計(jì)時(shí)執(zhí)行任務(wù)
    /*
    setTimeout(function() {
        chickme();
    }, 5000);
    */

    //驗(yàn)證碼倒計(jì)時(shí)
    //定時(shí)器
    function set_timer() {
        $('#btn').attr('disabled', true);
        var i = 10;
        var timer = setInterval(function() {
            $('#btn').text(i);
            if (i == 0) {
                $('#btn').text('點(diǎn)擊獲取驗(yàn)證碼');
                //清除定時(shí)器
                clearInterval(timer);
                //$('#btn').removeAttr('disabled');
                $('#btn').attr('disabled', false);
            }
            i--;
        }, 1000);
    }

    function chickme() {
        var res = $('#btn').text();
        if (res == '點(diǎn)擊獲取驗(yàn)證碼') {
            //啟動(dòng)倒計(jì)時(shí)
            set_timer();
        }
    }


    //獲取HTML
    //html會(huì)識(shí)別樣式內(nèi)容
    //text會(huì)把所有內(nèi)容當(dāng)做字符
    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);
        //設(shè)置
        //$('#username').val('administrator');
    }

    //獲取div高度寬度
    function get_size() {
        var width = $('.myclass').width();
        var height = $('.myclass').height();
        alert('寬度：' + width + ' ；高度：' + height);
        //設(shè)置高度
        $('.myclass').height(100);
    }

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

    //層級(jí)選擇器
    var result = $('.myclass span').text();
    console.log(result);

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

 

總結(jié)：

今天主要學(xué)習(xí)了Jquery屬性、css、定時(shí)器、類選擇器、層級(jí)選擇器

1、attr、prop、removeAttr、removeProp

    attr：給元素添加屬性（可顯示結(jié)果）

    prop：給元素添加屬性（隱藏結(jié)果不可見）

    removeAttr：移除屬性

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

2、addClass、removeClass、toggleClass

    addClass：增加class樣式

    removeClass：移除class樣式

    toggleClass：自判斷增加移除class樣式，如果結(jié)果有就移除，否則增加

3、獲取HTML內(nèi)容

    html：會(huì)一別樣式內(nèi)容

    text：會(huì)把所有內(nèi)容當(dāng)作字符串

    如：var res = $('.myclass').html('<span style="color:yellow;">asdasdsd</span>');  結(jié)果顯示 黃色的asdasdsd

    如：var res = $('.myclass').text('<span style="color:yellow;">asdasdsd</span>');  結(jié)果顯示整個(gè)字符 <span style="color:yellow;">asdasdsd</span>

4、val、width、height

    val：讀取內(nèi)容值； // $('#username').val();    讀取id為username的value，如果val('admin')，括號(hào)里面添加內(nèi)容，就是設(shè)置值；

    width：獲取寬度

    height：獲取高度

5、類選擇器、層級(jí)選擇器

    類選擇期：div.radius , input    //選擇 div.radius 和 input  

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

    層級(jí)選擇器：.myclass span    //選擇 .myclass 下的 span

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

6、定時(shí)器

 <button id="btn" onclick="chickme()">點(diǎn)擊獲取驗(yàn)證碼</button>
    //Jquery
    //定時(shí)器開啟 ②
    function set_timer() {
        //設(shè)置id為btn的disabled值為true，不能再點(diǎn)擊
        $('#btn').attr('disabled', true);
        //設(shè)置倒計(jì)時(shí)秒數(shù)
        var i = 10;
        //定時(shí)器： setInterval ( function() { 代碼內(nèi)容 }, 秒數(shù) )；
        var timer = setInterval(function() {
            //設(shè)置id為btn文本的值為i
            $('#btn').text(i);
            //當(dāng) i==0
            if (i == 0) {
                //重新賦值為 點(diǎn)擊獲取驗(yàn)證碼
                $('#btn').text('點(diǎn)擊獲取驗(yàn)證碼');
                //清除定時(shí)器
                clearInterval(timer);
                //開啟可以點(diǎn)擊
                $('#btn').attr('disabled', false);
            }
            //每次減1
            i--;
        }, 1000);
    }    
    //點(diǎn)擊開啟定時(shí)器 ①
    function chickme() {
        //獲取id為btn的text值
        var res = $('#btn').text();
        如果等于xxx，開始定時(shí)器
        if (res == '點(diǎn)擊獲取驗(yàn)證碼') {
            //啟動(dòng)倒計(jì)時(shí)
            //調(diào)用set_timer方法
            set_timer();
        }
    }


批改狀態(tài)：合格

老師批語：沒有總結(jié) , 沒有編程思路分析, 下次注意了
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)