jQuery操作样式

来源：互联网发布：ubuntu智能手机编辑：程序博客网时间：2024/05/20 15:59

属性操作

演示：

<!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>

这里写图片描述

阅读全文

0 0