jquery中各个属性的应用
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery_shuxing.html</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//addClass function test
$(".addClassButton").click(function(){
$("p:first").addClass("intro note");//注意第一个p的调用方式
});
//use function in the addClass function
$(".buttonpart_n").click(function(){
$("p").addClass(function(n){
return 'part_'+n;//把遍历的css类返回到addClass里面作为参数
});
});
//use function in the html function
$(".htmlButton").click(function(){
$("p").html(function(n){
return "The index of the p element is " + n;
});
});
//attr function test
$(".imgattr").click(function(){
$(".imgattr").attr("width","1000px");
// alert($(".imgattr").attr("width"));
});
//dbclick funtion test
$(".imgattr").dblclick(function(){//注意dblclick中不能忘记了l
$(".imgattr").attr("width","500");
});
//val function test
$(".textbutton").click(function(){
$(":text").val("good morning.");
});
//elements in val function test
$(".textbutton2").click(function(){
$(":text").val(function(n,c){
return c+"hello.";
});
});
});
</script>
<style type="text/css">
.intro{
font-size:120%;
color:green;
}
.note{
background-color:yellow;
}
.part_0{
color:red;
}
.part_1{
color:blue;
}
.part_2}{
color:green;
}
</style>
</head>
<body>
<div>
<p>This is the first line.</p>
<p>This is the second line.</p>
<p>This is the third lime.</p>
<p>This is the fourth lime.</p>
<button class="addClassButton">add class for the first p</button>
<button class="buttonpart_n">use part_n</button>
<button class="htmlButton">use funtion in the html</button>
</div>
<br/>
<div>
<a href="#"><img class="imgattr" src="tubiao.jpg"/></a>
</div>
<div>
<input type="text" class="inputtext" value="hello world."/>
<button class="textbutton">改变文本域的值</button>
<button class="textbutton2">elements in the val function</button>
</div>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读