4.jquery操作样式

来源：互联网发布：python 访问局域网编辑：程序博客网时间：2024/06/08 15:45

一. 属性操作

1.attr()获取与设置属性

jQuery对象.attr("name");//获取name属性 ok

jQuery对象.attr("name","zzy");//设置name属性为zzy ok

jQuery对象.attr("type");//获取属性 ok

jQuery对象.attr("type","password");//设置属性报错 jQuery不允许改type属性

但原生js可以修改dom对象的type属性

2.attr()方法也可以接受JSON数据格式用来修改多个属性

$("#test").attr({"name":"zzy","value":"333"});

3.removeAttr() 移除属性

removeAttr(“属性名”);// 移除属性

学生练习:注册页面,点击”接受协议”按钮才可以使用

演示代码:

<!DOCTYPE html>

<html>

<head>

$(function(){

var $agree = $("#agree");

var $btn1 = $("#btn1");

$agree.click(function(){

if($agree.prop("checked")==true){//复选框被选用了

//按钮可用

$btn1.removeAttr("disabled");

}else{

//按钮不可用

$btn1.attr("disabled","disabled");

}

});

</script>

</head>

<body>

同意该协议<input id="agree" type="checkbox" name="agree"/>

</body>

</html>

二.样式操作

1.修改单一样式

css(“属性名”,”属性值”)

<a id="hello">click me</a>

DOM方式

document.getElementById("hello").style.color = "red";

jQuery方式

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

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

$("#hello").css("color","#ff0000");//写操作

$("#hello").css("color");//读操作

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

演示代码:

$("#div1").css({

"backgroundColor":"yellowgreen",

"color":"red"

});

2.修改整套样式

演示代码参见锋利的jQuery 源代码第三章例子--3-9样式操作3-9-1.html

(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值

演示代码:

$(function(){

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

alert(str);

});

</script>

<body>

<p>

我是div111

</p>

</div>

</body>

阅读全文

0 0