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 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
另一个javascript小测验(代码集合)
Jul 27 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
Dec 21 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
基于mysql的bbs设计(五)
2006/10/09 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
python中map()与zip()操作方法
2016/02/27 Python
Python查询IP地址归属完整代码
2017/06/21 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
小学生成长感言
2014/01/30 职场文书
销售内勤岗位职责
2014/04/15 职场文书
批评与自我批评总结
2014/10/17 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
MySQL 分页查询的优化技巧
2021/05/12 MySQL