jQuery :first选择器使用介绍
更新时间：2013年08月09日 11:41:14 作者：
: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）显示结果如下图
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）显示结果如下图
相关文章
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
jQuery.Autocomplete 是jquery的流行插件，能够很好的实现输入框的自动完成(autocomplete)、建议提示(input suggest)功能，支持ajax数据加载。2009-10-10
这篇文章主要介绍了小编日常收集整理的关于jQuery中常用动画效果函数的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
这篇文章主要介绍了详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题 的相关资料,需要的朋友可以参考下2015-12-12
鼠标经过导航条改变背景图的效果很是好看，下面为大家介绍下使用jquery是如何实现的，感兴趣的朋友可以参考下2013-12-12
这篇文章主要介绍了jquery控制表单输入框显示默认值的方法,可实现输入框出现出现默认值的效果,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了jquery实现清新实用的网页菜单效果,涉及jquery通过鼠标事件控制页面元素的动态隐藏与显示实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
本文整理了一些jquery入门必备的基本知识及相关实例，适合初学者学习，另附一些jquery的常用事件，感兴趣的各位可不要错过了哈2013-06-06
想在网上找一个插件用用，可是，网上的插件看起来都比较杂乱，我参考了网上的一些插件，自己用jquery写了一个多选下拉框2014-05-05
本文给大家分享的是一个经常需要碰到的问题的解决方案，如何才能让一个页面中同时存在多个jQuery呢，这就是今天我们需要探讨的话题了。2015-03-03
jQuery插件bgStretcher.js实现全屏背景特效
可以自动动态更换网页背景图片的jQuery插件bgstretcher.js，sharejs.com推荐的这个插件，可以自定义多种方式让网页背景自动切换，效果流畅，非常难得，调用代码也非常简单。2015-06-06
最新评论