jQuery在js里动态修改样式和hover()方法 (入门)

第一、动态修改css样式

1、第一种写法，动态修改样式和按钮名字，绑定按钮

html代码

<button id = "buttonem">邮箱登录</button>

js代码

// 加载 LayUI 提供的相关模块
layui.use(['layer', 'jquery'], function () {
    // 得到模块实例对象
    var layer = layui.layer;
    var $ = layui.jquery;

    // 绑定登录按钮
    $('#buttonem').on('click', function () {

        // 动态修改样式
        //$('#buttonem').text("用户名登录").css("color",'red');

        //还可以在css()后面在添加css()样式
        $('#buttonem').text("用户名登录").css("color",'red').css('font-size','30px');

    });
});

点击之后

2、第二种写法 ，动态修改样式，创建 一个对象来存储 css 样式，效果和上面第一种写法时一样的

// 加载 LayUI 提供的相关模块
layui.use(['layer', 'jquery'], function () {
    // 得到模块实例对象
    var layer = layui.layer;
    var $ = layui.jquery;

    // 绑定登录按钮
    $('#buttonem').on('click', function () {


        //创建对象，存储css样式
        var cs = {
            color: 'blue',
            textDecoration: 'underline',
        }
        // 动态修改样式
        $('#buttonem').text("用户名登录").css(cs);

    });
});

第二、hover()方法的使用

1、第一种写方法,触碰改变text字体样式

html代码

<h1 id= "id">靓仔<h1>

js代码

// 加载 LayUI 提供的相关模块
layui.use(['layer', 'jquery'], function () {
    // 得到模块实例对象
    var layer = layui.layer;
    var $ = layui.jquery;

 
        //动态触碰变色
        $(function(){
            $('#id').hover(function(){
                $(this).css('color','green');
            },function(){
                $(this).css('color','blue');
            });
        });
});

 没触碰之前是蓝色

触碰之后是绿色

 

1、第二种写法，触碰div隐藏，移开显示

html代码

   <div style="border:10px solid red;width:300px;height:300px" id = "xxxx" >
            <span>帅气</span>
    </div>

js 代码

// 加载 LayUI 提供的相关模块
layui.use(['layer', 'jquery'], function () {
    // 得到模块实例对象
    var layer = layui.layer;
    var $ = layui.jquery;

        //动态触碰变色
        $(function(){
            $('#xxxx').mouseover(function(){
                $(this).hide();
            }).mouseout(function(){
                $(this).show();
            });
    });
});

半杯不啰嗦，希望能够帮助有需要的那个人！