jQuery:first选择器使用介绍
jQuery 使用 介绍 选择器 First
2023-06-13 09:15:04 时间
1、:first:获取第一个元素
2、示例
(1)源码
first.html:
复制代码代码如下:
2、示例
(1)源码
first.html:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>:first选择器</title>
<scripttype="text/javascript"src="jquery-2.0.3.js"></script>
<styletype="text/css">
body{
width:7%;
height:100%;
font-size:24px;
font-weight:bold;
background-color:#CCCCFF;
text-align:center;
}
</style>
<scripttype="text/javascript">
$(function(){
//设置ul中的第一个li的背景色,运用到:first选择器
$("li:first").css("background-color","#00DDDD");
//设置ol中的第一个li的背景色,运用到:first选择器
$(".twoli:first").css("background-color","#0000CC");
//设置ol中的第一个li的字体颜色,运用到:first选择器
$(".twoli:first").css("color","#FFFFFF");
});
</script>
</head>
<body>
<div>
<ulclass="one">
<li>苹果</li>
<li>梨子</li>
<li>橘子</li>
<li>西瓜</li>
<li>荔枝</li>
<li>葡萄</li>
<li>香蕉</li>
<li>香瓜</li>
</ul>
<olclass="two">
<li>苹果</li>
<li>梨子</li>
<li>橘子</li>
<li>西瓜</li>
<li>荔枝</li>
<li>葡萄</li>
<li>香蕉</li>
<li>香瓜</li>
</ol>
</div>
</body>
</html>
(2)显示结果如下图
相关文章
- jquery中ajax的使用(java)详解编程语言
- 使用 jquery 获取一组或者单个 checkbox 的选中状态的值详解编程语言
- JQuery初体验(建议学习jquery)
- jquery与googlemapapi结合使用控件,监听器
- jQuery对象和DOM对象使用说明
- 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
- jQuery事件delegate()使用方法介绍
- jQuery插件-jRating评分插件源码分析及使用方法
- jQuery.clean使用方法及思路分析
- js弹出框轻量级插件jquery.boxy使用介绍
- 让图片旋转任意角度及JQuery插件使用介绍
- jQuery布局插件UILayout简介及使用方法
- jQuery基本过滤选择器使用介绍
- jQuery基本选择器选择元素使用介绍
- jquery拖动插件(jquery.drag)使用介绍
- JQuery之focus函数使用介绍
- Jquery的outerHeight方法使用介绍
- jquery等宽输出文字插件使用介绍
- jQuery的attr与prop使用介绍
- 使用CSS和jQuery模拟select并附提交后取得数据的代码
- 使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
- asp.net使用jQuery获取RadioButtonList成员选中内容和值示例
- jQuery的选择器中的通配符使用介绍
- jquery$.trim()方法使用介绍
- jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析