简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > PHP学习第14天 jQuery选择器 2018年4月3日作业
Blogger Information
Blog 16
fans 0
comment 0
visits 9705
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
PHP学习第14天 jQuery选择器 2018年4月3日作业
方圆电脑
Original
708 people have browsed it

PHP学习第14天 jQuery选择器4月3日作业要求：

jQuery常用的选择器函数

要求至少要写出6个常用的选择器函数，发布到博客中。

代码如下：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.层级选择器</title>
    <style type="text/css">
    	.red {color:red;}
    	.green {color:green;}
    </style>
</head>
<body>
	<!-- ul>li{最新电影$$}*10>a{立即播放} -->
	<ul>
		<li>最新电影01<a href="">立即播放</a></li>
		<li>最新电影02<a href="">立即播放</a></li>
		<li>最新电影03<a href="">立即播放</a></li>
		<li>最新电影04<a href="">立即播放</a></li>
		<li>最新电影05<a href="">立即播放</a></li>
		<li>最新电影06<a href="">立即播放</a></li>
		<li>最新电影07<a href="">立即播放</a></li>
		<li>最新电影08<a href="">立即播放</a></li>
		<li>最新电影09<a href="">立即播放</a></li>
		<li>最新电影10<a href="">立即播放</a></li>
	</ul>
</body>
</html>
<script src="../js/jquery-3.3.1.js"></script>
<script>
  //1. 后代: 空格
  $('li a').addClass('green')

  //2. 所有子元素 >
  //仅ul的子元素li前景色变成红色,孙元素<a>文本不会变化
  // $('ul > *').addClass('red')
  //如果用空格分隔,<li><a>的前景色全部会发生变化
  // $('ul  *').css('color','red')

  //3. 相邻兄弟元素 +
  //将第5个li的下一个兄弟:第6个li前景色变更为绿色
  // $('li:nth-child(5) + li').addClass('green')

  //4. 全部兄弟元素 ~
  // $('li:nth-child(5) ~ li').addClass('green')

  //5.第一个与最后一个元素
  $('li:first-child').addClass('green')
  $('li:first').addClass('green')

  $('li:last-child').css('color','red')
  $('li:last').css('color','red')

  //6.直接选中某一个元素
  $('li:nth-child(6)').addClass('red')
  //jquery使用eq(i),i从0开始,注意与css中的不一样
  $('li:eq(5)').addClass('red')

  //7选中大于或小于某个序号的元素
  //先去掉所有元素上的class
  $('*').removeClass()
  //仅去掉li,不包括li下面的a,链接仍为绿色
  $('li').removeClass()

  //选中序号大于4的所有元素,注意从0开始计算
  // $('li:gt(3)').addClass('red')
  //选中序号小于8的所有元素
  // $('li:lt(7)').addClass('red')


  //根据序号特征来选择元素
  //选中所有序号为偶数的元素even
  //因为是从0开始,0,2,,4,所以看上去像是选择了奇数,要注意
  // $('li:even').addClass('red')
  //你可能猜到了,选择奇数用是odd,当然,你是对的
  $('li:odd').addClass('red')

</script>

运行实例 »

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

（未完待续）


Correction status：qualified

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！