Blogger Information
Blog 37
fans 0
comment 1
visits 29646
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jquery操作dom 元素属性和jquery 基本选择器练习-2019-10-24
H先生
Original
644 people have browsed it

          jquery操作dom 元素属性和jquery 基本选择器练习

          jquery操作dom 元素属性和jquery 基本选择器练习          jquery操作dom 元素属性和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>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="div1" style="background-color: red;width: 100%;height: 50px;"></div>
<p class="p1" style="background-color: green;width: 100%;height: 50px;"></p>
<button onclick="change_color_div()">改变div颜色</button>
<button onclick="change_size_p()">改变P的大小</button>
<input id="input_chk" type="checkbox" flag="true"/><button onclick="chk()">选中</button>
<button onclick="ischk()">是否选中</button>

</body>
</html>

<script type="text/javascript">
    function chk(){
        $('#input_chk').attr('checked',true);
    }
    function ischk(){
      var res =  $('#input_chk').attr('checked');
        alert(res);
    }


    // 方法一,改变div颜色 .css({'background':'#0000ff'});
    // function change_color_div() {
    //     $('#div1').css({'background':'#0000ff'});
    // }
    // 方法二,改变div颜色 .css('background','#0000ff');
    // function change_color_div() {
    //     $('#div1').css('background','#00ff00');
    // }
    //
    // function change_size_p() {
    //     $('.p1').css('width','200px');
    // }
    //
    // var res = $('button').length;
    // console.log(res);



</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

1.png








实例

<!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>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="div1" style="background-color: red;width: 100%;height: 50px;"></div>
<p class="p1" style="background-color: green;width: 100%;height: 50px;"></p>
<button onclick="change_color_div()">改变div颜色</button>
<button onclick="change_size_p()">改变P的大小</button>
<input id="input_chk" type="checkbox" flag="true"/><button onclick="chk()">选中</button>
<button onclick="ischk()">是否选中</button>
<button onclick="remove_attr()">移除attr属性</button>

</body>
</html>

<script type="text/javascript">
    function chk(){
        $('#input_chk').attr('checked',true);
    }
    function ischk(){
      var res =  $('#input_chk').attr('checked');
        alert(res);
    }
    function remove_attr() {
        $('#input_chk').removeAttr('flag');
    }


    // 方法一,改变div颜色 .css({'background':'#0000ff'});
    // function change_color_div() {
    //     $('#div1').css({'background':'#0000ff'});
    // }
    // 方法二,改变div颜色 .css('background','#0000ff');
    // function change_color_div() {
    //     $('#div1').css('background','#00ff00');
    // }
    //
    // function change_size_p() {
    //     $('.p1').css('width','200px');
    // }
    //
    // var res = $('button').length;
    // console.log(res);



</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

1.png






实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>js 面向对象</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <style>
        .myClass{width: 140px;height: 50px;background-color: red;}
        .radius{border-radius: 8px}
    </style>
</head>
<body>
    <div class="myClass"><span style="color: red;">sss</span></div>
    <button onclick="add()">addClass</button>
    <button onclick="removes()">removeClass</button>
    <button onclick="toggle()">toggleClass</button>
    <button onclick="clickme()" id="btn">点击获取验证码</button>
    <button onclick="get_html()">获取html</button>
    <input type="text" id="username" />
    <button onclick="get_username()">获取用户名</button>
</body>
</html>

<script type="text/javascript">
    function get_username(){
        $('#username').val('administrator');
        // var username =$('#username').val('administrator');
        // alert(username);
    }


    function get_html(){
        var res = $('.myClass').html();
        console.log(res);
    }

    setTimeout(function () {
        clickme();
    },5000);

    function clickme() {
        var res = $('#btn').text();
        if (res=='点击获取验证码'){
            // 启动倒计时
           set_timer();// 不写参数获取,传参数设置值
        }
    }

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

    function add(){
        $('div').addClass('radius');
        // $('div').css('border-radius','8px');
    }

    function removes(){
        $('div').removeClass('radius');
    }

    function toggle(){
        $('div').toggleClass('radius');

    }


</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

1.png














































































Correction status:qualified

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