博客列表 >4月3号左右jquery常用选择器函数-2018年4月13号补

4月3号左右jquery常用选择器函数-2018年4月13号补

改变从心开始
改变从心开始原创
2018年04月13日 11:52:33639浏览

作业演示:http://111.231.88.20/front/html/0403/1.html

本作业代码使用了7种jquery内的选择器函数

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>4月3号jquery过滤器作业</title>
	</head>
	<style type="text/css">
		.li{
			float: left;
			margin-right: 30px;
			font-weight: bold;
		}
	</style>
	<body>
		<ul>
			<li><a href=""><img src="images/cs.png"/></a></li>
			<li><a href=""><img src="images/gj.png"/></a></li>
			<li><a href="">天猫会员</a></li>
			<li><a href="">电器城</a></li>
			<li><a href="">喵鲜生</a></li>
			<li><a href="">医药馆</a></li>
			<li><a href="">营业厅</a></li>
			<li><a href="">魅力惠</a></li>
			<li><a href="">飞猪旅行</a></li>
			<li><a href="">苏宁易购</a></li>
		</ul>
	</body>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
	<script type="text/javascript">
		//标签选择器
		$('ul').css({
			'list-style-type':'none',
			'overflow':'hidden',
			'border-bottom':'2px solid #f00',
			'min-width':'1190px',
		})
		//后代过滤器
		$('ul').find('li').addClass('li')
		//元素遍历+后代过滤器
		$('li').eq(1).nextAll().find('a').css({
			'display': 'inline-block',
			'padding-top': '28px',
			'text-decoration':'none',
			'color': 'inherit',//使a标签的字体颜色继承父元素
		})
		//get()将指定索引的元素选中并转换为DOM对象
		$('li').get(2).style.color = '#f00'
		//eq()返回指定索引的元素
		$('li').eq(7).css('color','#c08462')
		//直接选中最后一个元素
		$('li').last().css('color','#f7b500')
		//slice()从集合中选择索引为4,5,6的元素
		$('li').slice(4,7).css('color','#1B64F8')
	</script>
</html>

运行实例 »

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

效果图

Snipaste_2018-04-13_11-30-43.png

总结:

通过对这些选择器函数的练习使用,对于jquery的基本选择器和常用过滤器都有一些了解!

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议