4.3jQuery中的选择器 - 作业1

首页 > 博客列表 > 4.3jQuery中的选择器

博主信息

博文 46

粉丝 3

访问量 32346

专题推荐

更多>

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>403</title>
	<style type="text/css">
	.box{
		background-color: #f4f4f4;
		width: 600px;
		height: 450px;
		margin: auto;
		overflow: hidden;
		text-align: center;

	}
	.box ul{
		float: left;
		margin: auto;

	}
	.box ul li{
		padding: 10px 10px;
	}

	.box ul li span{
		width: 30px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		display: block;
	}
	.box ul li a {
		display: block;
		margin-top: -30px;
		margin-left: 60px;
	}
	.color{
		color:lightcoral;

	}


	</style>
</head>
<body>
<div class="box">
<h2>jQuery选择器</h2>
<ul>
	<li>
		<span>1</span><a href="">最新电影</a>
	</li>
	<li>
		<span>2</span><a href="">国语电影</a>
	</li>
	<li>
		<span></span><a href="">外国电影</a>
	</li>
	<li>
		<span>4</span><a href="">高清电影</a>
	</li>
	<li>
		<span>5</span><a href="">动画电影</a>
	</li>
</ul>

<input type="serach " name="serachbox" placeholder="查找影片/动漫">
<button type="submit" name="submit">搜索</button>
<button type="reset" name="reset">重填</button>
</div>

	<script type="text/javascript" src="jQuery/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('li a').addClass('color')
$('li').css('listStyleType','none')
$('li:nth-child(5)~*').css('backgroundColor','lightgreen')
$('span').css('backgroundColor','lightblue')
$(':empty').text('3').css('color','orange')
$('a:contains("外")').css('color','green')
$('li').last().css('color','white')
$('input').css('background-color', 'skyblue')
$('button:reset').css({
		'background-color':'lightblue',
		'color':'white',
		'width':'80px',
		'height':'30px',
		'border-radius':'5px'
	})

</script>
</body>
</html>

运行实例 »

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

微信图片_20180404195806.png