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 相关文章推荐
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
Sep 10 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 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程序员编程注意事项
2008/04/10 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
跟老齐学Python之类的细节
2014/10/13 Python
python操作mongodb根据_id查询数据的实现方法
2015/05/20 Python
python多进程读图提取特征存npy
2019/05/21 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
毕业生实习鉴定
2013/12/11 职场文书
酒店副总经理岗位职责范本
2014/02/04 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
汇源肾宝广告词
2014/03/20 职场文书
少儿节目主持串词
2014/04/02 职场文书
企业晚会策划方案
2014/05/29 职场文书
爱心助学感谢信
2015/01/21 职场文书
实习证明格式范文
2015/06/16 职场文书
高温慰问简报
2015/07/21 职场文书