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 相关文章推荐
js下用gb2312编码解码实现方法
Dec 31 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
javascript填充默认头像方法
Feb 22 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
vue实现Toast组件轻提示
Apr 10 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和XSL stylesheets转换XML文档
2006/10/09 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
php操作MongoDB类实例
2015/06/17 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
学习ExtJS border布局
2009/10/08 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
轮播图组件js代码
2016/08/08 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
2020/03/16 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
微信小程序实现购物车小功能
2020/12/30 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
python连接mysql并提交mysql事务示例
2014/03/05 Python
Python函数中定义参数的四种方式
2014/11/30 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
使用python实现简单五子棋游戏
2019/06/18 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
励志广播稿300字(5篇)
2014/09/15 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python