jQuery中:first选择器用法实例


Posted in Javascript onDecember 30, 2014

本文实例讲述了jQuery中first选择器用法。分享给大家供大家参考。具体分析如下:

此选择器匹配指定元素集合中的第一个元素。

语法结构:

$(":first")

在使用中一般要和其他选择器配合使用,比如类选择器和元素选择器等等。例如:

$("li:first").css("color","green")

以上代码能够将li元素集合中的第一个li元素中的字体颜色设置为绿色。
如果不和其他选择器配合使用,则默认状态是和*选择器配合使用,例如$(":first")等同于$("*:first")。

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("li:first").css("color","green") 

  }) 

}) 

</script> 

</head> 

<body> 

<div> 

  <ul> 

    <li class="zhuanqu">html专区</li> 

    <li class="zhuanqu">div+css专区</li> 

    <li class="zhuanqu">jQuery专区</li> 

    <li class="zhuanqu">Javascript专区</li> 

  </ul> 

</div> 

<button>点击查看效果</button> 

</body> 

</html>

以上代码能够将li元素集合中的第一个li元素中的字体颜色设置为绿色。

实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $(":first").css("color","green") 

  }) 

}) 

</script> 

</head> 

<body> 

<div> 

  <ul> 

    <li class="zhuanqu">html专区</li> 

    <li class="zhuanqu">div+css专区</li> 

    <li class="zhuanqu">jQuery专区</li> 

    <li class="zhuanqu">Javascript专区</li> 

  </ul> 

  <div> 

    <span>三水点靠木</span> 

    <span>太阳出来了</span> 

  </div> 

</div> 

<button>点击查看效果</button> 

</body> 

</html>

以上代码由于没有指定与:first选择器匹配的选择器,那么默认将会和*选择器配合使用,所以上面的代码将会将所有元素中的字体颜色设置为绿色。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
js null undefined 空区别说明
Jun 13 Javascript
javascript题目,重写函数让其无限相加
Feb 15 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 Javascript
js实现省市级联效果分享
Aug 10 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
使用rollup打包JS的方法步骤
Dec 05 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 Javascript
JavaScript中的类数组对象介绍
Dec 30 #Javascript
JavaScript中的方法调用详细介绍
Dec 30 #Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 #Javascript
JavaScript中的类(Class)详细介绍
Dec 30 #Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 #Javascript
jQuery实现ichat在线客服插件
Dec 29 #Javascript
jQuery中用dom操作替代正则表达式
Dec 29 #Javascript
You might like
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
2014/05/10 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
Python找出list中最常出现元素的方法
2016/06/14 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
scrapy爬虫完整实例
2018/01/25 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
Python线程同步的实现代码
2018/10/03 Python
对Python中plt的画图函数详解
2018/11/07 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
Django nginx配置实现过程详解
2020/09/10 Python
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
自考毕业自我鉴定范文
2013/10/27 职场文书
大型车展策划方案
2014/02/01 职场文书
运动会入场口号
2014/06/07 职场文书
工作收入住址证明
2014/10/28 职场文书
婚内分居协议书范文
2014/11/26 职场文书
三八节活动主持词
2015/07/04 职场文书
升职自荐书
2019/05/09 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
详解jQuery的核心函数和事件处理
2022/02/18 jQuery