2、jQuery操作DOM元素、CSS样式、事件绑定、one

基础DOM和CSS操作

html、text、val

方法名描述
html()获取元素中HTML内容
html(value)设置元素中HTML内容
text()获取元素中文本内容
text(value)设置元素中文本内容
val()获取表单中的文本内容
val(value)设置表单中的文本内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span></span><br>
    <span></span><br>
    <button>按钮</button>
    <script src="js/jquery-3.5.1.js"></script>

    <script>
        // 对$('span')数组中的所有DOM对象的文本内容都进行设置
        $('span').text('Hello text');

        // 给button按钮绑定单击事件,获取第一个span标签,设置元素文本内容
        $('button').on('click', function(){
            $('span:eq(0)').text('How are you? text');
        })

        // 无参调用,获取数组中所有DOM对象的元素内容,拼接为一个字符串返回
        console.log($('span').text());

        $('span:first').html('<b>人生需要加粗。</b>');
        // 设置元素的html

        $('span').last().html('<i>千万不要斜着走路</i>')
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" value="耿耿">
    <input type="text" value="余淮">
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        // val() 无参调用,取出数组中第一个对象的value值
        console.log($('input[type=text]').val());
        // 耿耿

        // val(value) 有参调用,设置数组中所有DOM对象的value值
        $('input[type]').val('耿耿余淮');
    </script>
</body>
</html>

attr、removeAttr

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        div标签
    </div>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        // attr(key,value) 设置元素的属性
        $('div').attr('title','active');

        // attr(key) 获取元素的属性
        console.log($('div').attr('title'));
        // active

        // attr({key:value,key:value}) 设置多个元素属性
        $('div').attr({id:'div1',class:'demo'});

        // removeAttr(key) 移除元素的key属性
        $('div').removeAttr('class');
    </script>
</body>
</html>

css、addClass

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <div></div>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        // 设置元素样式
        $('div').first().css('width','200px');
        $('div:first').css('height','100px');
        $('div').eq(0).css('backgroundColor','orange');

        // 同时设置元素多个样式
        $('div').last().css({width:'200px',height:'100px',backgroundColor:'green',marginTop:'30px'});

        // 获取元素样式
        console.log($('div:last').css('backgroundColor'));
        // rgb(0, 128, 0)
        console.log($('div:eq(1)').css('marginTop'));
        // 30px


        // addClass() 和 removeClass()
        $('div:eq(0)').addClass('active');
        $('div:eq(1)').addClass('demo');
    </script>
</body>
</html>

在这里插入图片描述

each

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="d1"></div>
    <div></div>
    <div></div>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $('#d1').css({width:'200px',height:'100px',backgroundColor:'yellowgreen'});

        // 获取元素的多个css样式,获取到的是一个对象,键值对的形式,键是属性名,值是属性值
        var box = $('#d1').css(['width','height','backgroundColor']);

        // JS的遍历对象的方式,i是键
        for(var i in box) {
            console.log(i,'----',box[i]);
        }
        // width ---- 200px
        // height ---- 100px
        // backgroundColor ---- rgb(154, 205, 50)

        // jQuery的遍历,使用$.each()方法可以遍历JS的原生对象
        $.each(box, function(attr, value){
            console.log(attr,':',value);
        })
        // width : 200px
        // height : 100px
        // backgroundColor : rgb(154, 205, 50)

        // 如果是遍历jQuery对象的数组
        $('div').each(function(index, element){
            console.log(index,element);
        })

        console.log($('div').length);
        // $(选择器)返回的一直都是一个数组(由选择器决定这个数组的length),这个数组的元素类型为DOM对象,比如$('div').get(0)方法

        console.log($('div')[0]);

        console.log($('div').get(1));
    </script>
</body>
</html>

在这里插入图片描述

事件绑定

事件绑定简写方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <div></div>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $('button').click(function(){
            $('div').first().css({width:'400px',height:'100px',backgroundColor:'orange'});
            $('div:first').html(`<b>据确切消息称,邓紫棋在本次金曲奖入围名单中,她的专辑
            《摩天动物园》入选了“年度专辑奖、年度歌曲奖、最佳作曲人奖、最佳国语女歌手奖
            和最佳国语专辑奖”五项大奖,真是可喜可贺!</b>`);
        })

        // 绑定事件的简写方式 $(选择器).事件(function(){}匿名函数)

        // 事件的event对象和JS中一致
    </script>
</body>
</html>

在这里插入图片描述

on、off、one

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#" method="GET">
        用户名:<input type="text" name="username"><br>
        密码:<input type="password" name="password"><br>
        <input type="submit" value="提交">
    </form>
    <button>off</button>
    <button>one</button>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        // 事件绑定的新方式:on
        $('form').on('submit', function(e) {
            e.preventDefault();
            // 阻止事件的默认行为
        })


        // 事件解绑:off
        $('button:first').on('click', function(){
            $('form').off('submit');
            // 点击off按钮,解绑form表单的阻止默认提交
        })


        // 事件只触发一次:one
        $('button:last').one('dblclick',function(){
            console.log('哈哈,我只打印一次哟!');
        })
    </script>
</body>
</html>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页