博主信息
博文 31
粉丝 3
评论 1
访问量 40660
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
jQuery常用的选择器函数
php学习笔记
原创
1031人浏览过

jQuery有很多选择器函数,这里我介绍比较常用的6种选择器函数。

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.nav ul li{
			width: 100px;
			height: 30px;
			list-style: none;
			float: left;
		}
	</style>
</head>
<body>
	<div class="nav">
		<ul>
		<li>首页</li>
		<li>公司简介</li>
		<li>公司文化</li>
		<li>产品介绍</li>
		<li>企业新闻</li>
		<li>联系方式</li>
	    </ul>
	</div>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		$('li').get(1).style.color = 'red'
		$('li').eq(2).css('color','green')
		$('li').first().css('color','blue')
		$('li').last().css('color','pink')
		$('ul').find('li').css('background-color','gray')
		$('ul').children('li').css('font-size','1.2em')
	</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

运行结果:

运行结果.png

以上jQuery代码解释:

1:get()将jquery对象转为DOM对象:将第二个li标签的字体颜色设置为红色

2.eq():获取指定序号为2的li标签元素,将它的字体颜色设置为绿色

3.first():获取到第一个li标签,将它的字体颜色设置为蓝色

4.last():获取到最后一个li标签,将它的字体颜色设置为粉红色

5.find():获取到ul下面的所有后代元素,将它们的背景颜色设置为灰色

6.children():获取到ul下面所有的直接子元素,将它们的字体大小设置为1.2em

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学