Blogger Information
Blog 38
fans 0
comment 2
visits 24186
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery选择器的运用—4月3日
→忆指凡尘&的博客
Original
605 people have browsed it

实例

大家好:

       以下是我对jQuery选择器的简单的运用,如有错误望大家指出,谢谢

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery选择器的应用</title>
	<style type="text/css">
		.eq {
			color: red;
		}
	</style>
</head>
<body>
	<h2>天天关注</h2>
	<ul>
		<li>新闻:<a href="">习近平举行仪式欢迎津巴布韦总统</a></li>
		<li>军事:<a href="">中国空军有大动作</a></li>
		<li>证券:<a href="">创指险守5日线沪指跌0.84%</a></li>
		<li>科技:<a href="">盯上摩拜的还有软银和滴滴</a></li>
		<li>社会:<a href="">甘肃金昌出租车停运维权</a></li>
		<span></span>
		<h2>最新新闻</h2>
	</ul>
	<p>更多关注 <img src="images/fbb.jpg" alt="" width="150"></p>
	<p>敬请期待</p>
</body>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	// 选择第三个‘li’标签
	$('li').eq(2).addClass('eq')
    // 选择文本中含有‘敬’子的p标签
	$('p:contains("敬")').css('color','blue')
	// 选择li标签下的所有a标签,不分层级
	$('ul').find('a').css('background-color','green')
	// 选择ul标签下的直接子元素h2标签
    $('ul').children('h2').css('color','green')
    // 选取页面中的空标签(什么都没有)并插入文本
    $(':empty').text('昨日关注').css('color','red')
    // 选择有img标签(图片)的p元素
    $('p:has("img")').css('background-color','yellow')
    // 选择第四个li标签下面的第一个同级元素
    $('li').eq('3').next().css('color','orange')
    // 选择li标签中奇数位(实际页面中看到的效果是偶数位,因为在JS中是从0开始的)
    $('li:odd').css('color','lightblue')
</script>

运行实例 »

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

                                                                                 课程总结

          通过这节jQuery选择器的课程,使我了解了它与css选择器的相同点和不同点,以下是我对这节课程的理解:

          1. eq()的运用,它可以制定元素,与nth-child异曲同工— $('li:nth-child(6)')=$('li:eq(5)')

          2. 偶数位和奇数位I的选择:选中所有序号为偶数用元素‘even’、‘奇数用元素odd’(注意:实际页面中看到的效                  果正好相反,因为在JS中是从0开始的)— $('li:even')、$('li:odd')

          3.表单过滤器$(':input')的用法

          4.初步了解find()、children()、next()、siblings()、prev()等等的用法

Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post