jQuery :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)显示结果如下图
相关推荐
-
Jquery 过滤器(first,last,not,even,odd)的使用
复制代码 代码如下: $(function(){ $("#menu li:first").click(function(){ $(this).addClass("b"); }); $("#menu li:last").text("最后");//id为menu的li列表中最后一个li元素插入文字"最后" $("#menu li:first").text("第一");//
-
浅谈jQuery中对象遍历.eq().first().last().slice()方法
eq(index):将集合中的索引为index的元素提取出来. first():返回集合中的第一个元素. .last():防护集合中的最后一个元素. .slice(start[,end]):返回集合中的给定区间段的元素. first()和last()调用eq(),eq()通过slice()实现,slice()通过 .pushStack()实现. 相关源码 285行:用法很奇特,通过一个"+"把可能为字符串的i转换成一个数值. 300~301:先借用数组方法slice()从当前jQuer
-
jquery中eq和get的区别与使用方法
举个例子: <p style="color:yellow">绯雨</p>使用eq来获得第一个p标签的color值: $("p").eq(0).css("color") //因为eq(num)返回的是个jq对象,所以可以用jq的方法css使用get来获得第一个p标签的color值: $("p").get(0).style.color //因为get(num)返回的是个html对象,所以要使用传统的HTML
-
初识JQuery 实例一(first)
完整代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <style type="text/css"> .highlight { background-color: yellow; } .gray { background-color: Gray; } </style> <script src="http://code.jquery.com/jquery-1.5.js&qu
-
jquery last-child 列表最后一项的样式
今天突然灵感来了,用JQuery一句话就搞定了 复制代码 代码如下: $(".con ul li:last-child").addClass("no_btm_border");
-
jquery层次选择器的介绍
jquery层次选择器 jquery层次选择器,包括空格.>.next.+.nextAll.~.siblings.prev().prevAll()等函数或表达式. 1.空格表示获取所有子孙后代元素 2. >表示获取一级子元素 3.next函数获取紧接在之后的同辈元素列表 4.nextAll函数表示获取之后的所有同辈元素列表 5.siblings函数表示获取所有同辈元素列表,无论前后 6.+表示紧接在之后的同辈列表 7.~表示匹配之后所有的同辈元素 8.prev()获取之前的同辈元素列表 9.p
-
jQuery :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"&
-
jQuery选择器用法介绍
目录 一.jQuery选择器 二.基本选择器 三.层次选择器 四.属性选择器 五.过滤选择器 1.基本过滤选择器 2.可见性过滤选择器 3.内容过滤器 六.表单选择器 七.补充 1.特殊符号的转义 2.选择器中的空格 jQuery选择器类似于CSS选择器,用来选取网页中的元素.例如: $("h3").css("background-color","red"); 说明: 获取并设置网页中所有<h3>元素的背景色. “h3”为选择器语法,
-
基于JQuery 选择器使用说明介绍
jQuery 元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择. jQuery 元素选择器:jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 <p> 元素. $("p#demo") 选取 id="demo" 的第一个 <p> 元素
-
jQuery层次选择器选择元素使用介绍
复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 1.层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代.父子.相邻.兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器.层次选择器.过滤选择器.表单选择器四大类.其中,在过滤选择器中有可以分为:简单过滤选择器.
-
jQuery基本选择器选择元素使用介绍
复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 1.基本选择器:是jQuery中使用最频繁的选择器,它由元素Id.Class.元素名.多个选择符组成,通过基本选择器可以实现大多数页面元素的查找 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器.层次选择器.过滤选择器.表单选择器四大类.其中,在过滤选择器中有可以分为:简单过滤选择
-
jquery css 选择器演示代码
效果如图所示:核心代码: 复制代码 代码如下: <script type="text/javascript"> $('#one').css("background","#fff"); $('div').css("background","#fff"); $('body div').css("background","#bbffaa");//改变body内所
-
jQuery中选择器的基础使用教程
其实选择器就像开罐器一样,会用这个工具的人,自然吃的到甜头,但不会用这个工具的人,不管罐头里面的面筋土豆有多美味,吃不到就是吃不到,就如同jquery再怎么强大,也只能看着荧幕,而不知该如何下手,不过虽然选择器不难,也容易上手,但老实说,我用了一年多下来,还是觉得自己只有用皮毛而已,所以希望藉着这一系列的笔记,让自己能更长进一些 DOM怎么吃 DOM可以说是JavaScript与网页之间的联系管道,他提供了一个模型,让JavaScript能藉由此模型来改变或操作整个网页, <div class=
-
jquery标签选择器应用示例详解
本文实例为大家分享了jquery标签选择器应用的具体代码,供大家参考,具体内容如下 1.统一设置div内容 可以用标签选择器来选择所有的 div 元素; <!DOCTYPE html> <html> <head> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> &
-
jQuery基本选择器和层次选择器学习使用
本文实例为大家分享了jQuery选择器的具体实现代码,供大家参考,具体内容如下 1. 基本选择器 <html> <head> <meta charset="utf-8"> <title>jQuery基本选择器</title> <script type="text/javascript" src="js/jquery-1.x.js"> </script> </
随机推荐
- JavaScript实现使用Canvas绘制图形的基本教程
- SQL Server在AlwaysOn中使用内存表的“踩坑”记录
- 不错的dos批处理命令详解第1/2页
- 分享几个提高Java性能的高效用法
- 解读ASP.NET 5 & MVC6系列教程(17):MVC中的其他新特性
- 防止MySQL注入或HTML表单滥用的PHP程序
- Yii统计不同类型邮箱数量的方法
- Python 多线程抓取图片效率对比
- asp 小偷采集程序原理与常用函数方法
- c语言链表基本操作(带有创建链表 删除 打印 插入)
- Android仿知乎日报开屏页效果
- Android中Listview点赞功能的实现
- 一个好用的分页函数
- JQuery1.8 判断元素是否绑定事件的方法
- nginx,apache的alias和认证功能
- 深入理解JQuery keyUp和keyDown的区别
- jquery 插件 人性化的消息显示
- javascript实现网页端解压并查看zip文件
- javascript数组排序汇总
- JS去除iframe滚动条的方法