博客列表 >jQuery常用的选择器函数

jQuery常用的选择器函数

php学习笔记
php学习笔记原创
2018年04月03日 23:24:16852浏览

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 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议