jQuery操作样式

最新推荐文章于 2022-12-29 11:24:18 发布

夏虫语冰彡

最新推荐文章于 2022-12-29 11:24:18 发布

阅读量323

点赞数

文章标签： jquery 属性操作 attr 修改整套样式 html-val

本文链接：https://blog.csdn.net/qq_34283987/article/details/78034587

版权

属性操作

演示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../../jsJava库/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function () {
                $("#btn2").click(function () {
                    //1.修改单一样式
                    $("#btn").attr("type","password");
                    //2.通过json数据格式修改多个属性
                    $("#btn").attr({"id":"btn1","value":"11111111"});
                    //3.移除属性
                    $("#btn1").removeAttr("value");
                });

            });
        </script>
    </head>
    <body>
        <input type="text" name="btn" id="btn" value="请输入" />
        <input type="button" name="btn2" id="btn2" value="修改属性值" />
    </body>
</html>

样式操作

修改单一样式
修改整套样式
补充：

1.css(“属性名”,”属性值”)
css()方法也可以接受json对象来同时修改多个样式

$("#hello").css("color","#ff0000");


同一个方法名字既表示读操作，又表示写操作

css()方法也可以接受JSON对象来同时修改多个属性
演示代码:

$("#div1").css({
        "backgroundColor":"yellowgreen",
        "color":"red"
});

2.修改整套样式
(1)通过attr()方法

DOM方式
document.getElementById(“hello”).className=”样式名”;

jQuery方式
$(“p”).attr(“class”,”high”);

(2)addClass()添加样式
给class属性增加一个样式,如果以前有样式比如
class=”hello”
调用$(“p”).addClass(“high”);后
样式修改为class=”hello high”

注意:相同样式以定义在css文件后面的为准

(3)removeClass()移除样式
removeClass(“样式名”);//移除一个样式
removeClass();//移除所有样式

(4)toggleClass()样式切换
$(“p”).toggleClass(“another”);//有就删除,没有就添加

(5)hasClass()或is()判断是否含有样式
1.$(“p”).hasClass(“another”)

2.$(“p”).is(“.another”)

补充: 对象.is(“:checked”) 判断复选框是否被选择中
对象.is(“:animated”) 判断当前元素是否正处在动画当中

html()、text()、val()区别

html() 相当于 innerHTML 内部的HTML代码
text() 相当于 innerText 内部的文本  不包括HTML代码
val() 相当于  value 值  得到dom对象的value值

演示代码:
<script type="text/javascript">
    $(function(){

        var str = $("#username").val();
        alert(str);

    });
</script>

<body>
    <div id="div1">
        <p>
            我是div111
        </p>
    </div>

    <input id="username" type="text" value="111" />
</body>