jquery操作属性_php.cn手记

abstract：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .box{color: red;} .box1{font-size: 50px;} </style&g

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
.box{color: red;}
.box1{font-size: 50px;}
</style>
<body>
<p>php中文网</p>
<input type="text" id="input" value="111"/>
<input type="text" id="input1" value="请输入"/>
<button class="btn">点击变色</button>
</body>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js" ></script>
<script>
$(document).ready(function(){
//样式操作
//addClass()被选中的元素添加一个类（样式）  多个类之间用空格分开   不用点号
$("p").addClass("box box1")
//removeClass()移除一个或多个类
$("p").removeClass("box")
//attr()设置或返回被选中元素的属性值
alert($("#input").attr("type")+$("input").attr("value"))
//$("属性值"，"属性名")设置元素的属性值
$("#input").attr("type","password")
//removeAttr()移除某个属性
$("#input").removeAttr("value")
//hasclass()检查被选中的元素是否包含指定class   返回值true或者false
alert($("input").hasClass("btn"))
alert($("button").hasClass("btn"))
//toggleClass()对选中元素进行添加和删除类的切换操作  可切换
$("button").click(function(){
$("p,input").toggleClass("box box1")
})


//内容操作
//text()设置或返回元素的文本内容
alert($("p").text())
//设置元素的文本内容
$("p").text("我爱php中文网")
//html()设置或返回元素的文本内容    与text()不同在于可以输出带html标签的文本内容
$("p").html("<i>php中文网</i>")
//val()设置或返回被选中元素的值
alert($("#input1").val())
})
</script>
</html>

总结：使用选择器找到要操作的元素,然后通过jquery方法操作此元素,改变该元素的样式以及内容，其中html()方法可以返回带标签的文本内容，hasClass()方法返回值为true或者false

jquery操作属性

Popular Entries