jQuery :first选择器使用介绍


Posted in Javascript onAugust 09, 2013

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)显示结果如下图
jQuery :first选择器使用介绍
Javascript 相关文章推荐
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 Javascript
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 #Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 #Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
Aug 09 #Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 #Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 #Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 #Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 #Javascript
You might like
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
Python使用贪婪算法解决问题
2019/10/22 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
YUV转为jpg图像的实现
2019/12/09 Python
python如何支持并发方法详解
2020/07/25 Python
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
中软Java笔试题
2012/11/11 面试题
医学生自荐信范文
2013/12/03 职场文书
企业安全标语
2014/06/07 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
2014年妇女工作总结
2014/12/06 职场文书
商场营业员岗位职责
2015/04/14 职场文书
父亲去世追悼词
2015/06/23 职场文书