<title>节点属性操作</title>
<style>
.myClass{
width:200px;
height:200px;
background-color:#F39;
border: 1px solid #0C0;
}
</style>
<script src="../jQuery-2.1.0/jquery-2.1.0.js"></script>
<script>
$(function(){
$("button:eq(0)").click(function(){
alert($("p").attr("title"));
});
$("button:eq(1)").click(function(){
$("p").attr("title","mytitle");
});
$("button:eq(2)").click(function(){
$("p").attr({"title":"mytitle","id":"myId"});
});
$("button:eq(3)").click(function(){
$("p").removeAttr("title");
});
$("button:eq(4)").click(function(){
$("p").attr("class","myClass");
});
$("button:eq(5)").click(function(){
$("p").addClass("myClass");
});
$("button:eq(6)").click(function(){
$("p").removeClass("myClass");
});
$("button:eq(7)").click(function(){
$("p").toggleClass("myClass");
});
});
</script>
</head>
<body>
<button>获取属性</button>
<button>添加属性</button>
<button>添加多个属性</button>
<button>删除属性</button>
<button>添加类选择器</button>
<button>添加类选择器2</button>
<button>删除类选择器</button>
<button>切换类选择器</button>
<p>p标签</p>
</body>
<style>
.myClass{
width:200px;
height:200px;
background-color:#F39;
border: 1px solid #0C0;
}
</style>
<script src="../jQuery-2.1.0/jquery-2.1.0.js"></script>
<script>
$(function(){
$("button:eq(0)").click(function(){
alert($("p").attr("title"));
});
$("button:eq(1)").click(function(){
$("p").attr("title","mytitle");
});
$("button:eq(2)").click(function(){
$("p").attr({"title":"mytitle","id":"myId"});
});
$("button:eq(3)").click(function(){
$("p").removeAttr("title");
});
$("button:eq(4)").click(function(){
$("p").attr("class","myClass");
});
$("button:eq(5)").click(function(){
$("p").addClass("myClass");
});
$("button:eq(6)").click(function(){
$("p").removeClass("myClass");
});
$("button:eq(7)").click(function(){
$("p").toggleClass("myClass");
});
});
</script>
</head>
<body>
<button>获取属性</button>
<button>添加属性</button>
<button>添加多个属性</button>
<button>删除属性</button>
<button>添加类选择器</button>
<button>添加类选择器2</button>
<button>删除类选择器</button>
<button>切换类选择器</button>
<p>p标签</p>
</body>