首页 / JQUERY / jQuery中first()选择器的基本介绍及实例展示

jQuery中first()选择器的基本介绍及实例展示

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery中first()选择器的基本介绍及实例展示，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1698字，纯文字阅读大概需要3分钟。

内容图文

定义和用法

first() 将匹配元素集合缩减为集合中的第一个元素。

语法

.first()

详细说明

如果给定一个表示 DOM 元素集合的 jQuery 对象，.first() 方法会用第一个匹配元素构造一个新的 jQuery 对象。

请思考下面这个带有简单列表的页面：

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

我们可以对这个列表项集合应用该方法：

$('li').first().css('background-color', 'red');

实例展示：

<!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>

以上就是jQuery中first()选择器的基本介绍及实例展示的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的jQuery中first()选择器的基本介绍及实例展示全部内容，希望文章能够帮你解决jQuery中first()选择器的基本介绍及实例展示所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/300709.html

来源：【匿名】