`

有用的代码片段

CSSjQueryHTML 
阅读更多
<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta name="GENERATOR" content="Zend Studio" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery test</title>
</head>
<style>
.lastp{border:2px solid $red;}
.firstp{color:red;}
.hignlight{background:gray;}
.dd{width:20px;height:20px;border:2px solid}
</style>
note： jequery api 函数区分大小写
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("div.d1").fadeOut("slow");
$("p").filter(".ppp");

$("img.img1").attr(//为之指定元素（组）添加指定属性(名值对方式)
{src:"http://docs.jquery.com/images/hat.gif",title:"http://docs.jquery.com/images/hat.gif",
alt:"jquery logo"}
)
var alt = $("img").attr("alt");//获取指定元素(组)第一个元素的alt属性值
//   alert(alt);
$("img").attr('src','http://www.sinaimg.cn/home/07index/sinahome_ws_009.gif');//为之指定元素（组）添加指定属性(名值对方式)
$("img").attr("title",function(){//指定元素的属性值用一个函数返回的结果代替
   return this.src;
})
$("img").removeAttr("title");//移除指定元素属性值

$("p:last").addClass("lastp");//addclss 为指定元素添加class p：last 为最后一个p元素
$("p:first").addClass('firstp');
$("p:last").removeClass();//移除指定元素class
$("p").toggleClass("highlight");//为指定元素
$("p").toggle(function(){//toggle() 为指定元素按click轮换执行两个函数
   $(this).addClass("hignlight");
},function(){
   $(this).removeClass('hignlight')
})

$("p").click(function(){//html()为指定元素追加内容
   var html = $("p").text();
   $("p").html(html);
})

// $("div").eq(1).addClass("hignlight");//div 按索引添加类

// $("div").text($("img").attr("title"));//为指定元素标签设置内容text（）用法
var text = $("div").text();//获取所有div标签元素内容
var text = $("div.d1").text();//获取指定class为d1的div标签元素内容
//
// $("p > a").hide();//隐藏p元素内的链接
$("p[a]").hide();//隐藏p元素内的链接
$("p:eq(0]").hide();
// $("div:visible").hide();//隐藏所有可见div
// alert(text);

$("p:lt(5)").css('border','2px solid')//:lt(n) 索引小于n的元素
$("p:gt(2)").css('border','7px solid green')//:gt(n) 索引大于n的元素

$("p:parent").css('background','red');
$("div:contains('tt')").hide();//隐藏所有text包行tt的div元素
$("div:contains('ccc')").css('border','3px dotted');//添加calss为所有text包行ccc的div元素

$("input:text").css('border','2px solid');//input元素下text类添加class
$("input:text",'myform').css('border','3px solid');

$("input[@type]")//属性含type的所有input元素
$("input[@type=text]").val("change input type text1");//属性为type属性值为text的所有input元素
$("input[@type=radio]").val("change input type text1");//属性为type属性值为radio的所有input元素
$("img[@src*=sina]").css('border','4px solid');//获取src属性中包含 gif 字符的img元素的所有元素
$("img[@src^=http]").css('color','red');//获取src属性中包口 http 字符开始img元素的所有元素
$("img[@src$=gif]").css('background','green');//获取src属性中 gif 结束字符的img元素的所有元素

})
</script>
<body bgcolor="#FFFFFF" text="#000000" link="#FF9966" vlink="#FF9966" alink="#FFCC99">
<div class="d1" style="height:200px;display:block;background:#cccccc"><span>aa</span>nn</div>
<p class="ppp">dsafasdaf</p>
<p>aaaaaaaa</p>
<Img class="img1" src="#"></img><Img src="#"></img><Img src="#"></img>
<div class="dd">aaa</div>
<div>bbbtt</div>
<div>ccc</div>
<p> <a href="#">aa</a></p>
<p> <a href="#">aa</a></p>
<p> <a href="#">aa</a></p>
<form name="myform">
input type text1:<input type="text" name="t1" value="this is input type is text1"><br />
input type text2:<input type="text" name="t2" value="this is input type is text2"><br />
input type radio1:<input type="radio" name="r1" value="this is input type is radio1">
</form>
<div>tt</div>
<div>aabb</div>
<div>tcccabcv</div>
</body>
</html>
分享到：
| Nutch中MapReduce的分析
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics