发布于 2017-04-24 11:14:34 | 119 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例,程序狗速度看过来!

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。


:first:获取第一个元素,在一些特殊情况下还是蛮实用的,下面为大家详细介绍下:first的具体使用,感兴趣的朋友可以参考下
1、:first:获取第一个元素
2、示例
(1)源码
first.html:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>:first选择器</title> 
<script type="text/javascript" src="jquery-2.0.3.js"></script> 
<style type="text/css"> 
body{ 
width:7%; 
height:100%; 
font-size:24px; 
font-weight:bold; 
background-color:#CCCCFF; 
text-align:center; 
} 
</style> 
<script type="text/javascript"> 
$(function(){ 
//设置ul中的第一个li的背景色,运用到:first选择器 
$("li:first").css("background-color","#00DDDD"); 
//设置ol中的第一个li的背景色,运用到:first选择器 
$(".two li:first").css("background-color","#0000CC"); 
//设置ol中的第一个li的字体颜色,运用到:first选择器 
$(".two li:first").css("color","#FFFFFF"); 
}); 
</script> 
</head> 

<body> 
<div> 
<ul class="one"> 
<li>苹果</li> 
<li>梨子</li> 
<li>橘子</li> 
<li>西瓜</li> 
<li>荔枝</li> 
<li>葡萄</li> 
<li>香蕉</li> 
<li>香瓜</li> 
</ul> 
<ol class="two"> 
<li>苹果</li> 
<li>梨子</li> 
<li>橘子</li> 
<li>西瓜</li> 
<li>荔枝</li> 
<li>葡萄</li> 
<li>香蕉</li> 
<li>香瓜</li> 
</ol> 
</div> 
</body> 
</html> 

(2)显示结果如下图


最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务