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 相关文章推荐
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
ES6实现图片切换特效代码
Jan 14 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 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
php中随机显示图片的函数代码
2011/06/23 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
php实现算术验证码功能
2018/12/05 PHP
php解压缩zip和rar压缩包文件的方法
2019/07/10 PHP
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
javascript实现简易计算器
2017/02/01 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
python实现划词翻译
2020/04/23 Python
Python实现端口复用实例代码
2014/07/03 Python
Python获取任意xml节点值的方法
2015/05/05 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
python爬取个性签名的方法
2018/06/17 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
python switch 实现多分支选择功能
2020/12/21 Python
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
如何写毕业求职自荐信
2013/11/06 职场文书
总经理职责
2013/12/22 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python