HTML---Jquery选择器

文章目录

目录

文章目录

本章目标

一.Jquery选择器概述

二.Jquery选择器分类

基本选择器

层次选择器

属性选择器

三.基本过滤选择器

练习

本章目标

会使用基本选择器获取元素
会使用层次选择器获取元素
会使用属性选择器获取元素
会使用过滤选择器获取元素会使用基本过滤选择器获取元素会使用可见性过滤选择器获取元素

一.Jquery选择器概述

JQuery选择器是用于选择DOM元素的一种方式。它可以通过元素的标签名、类名、ID、属性等多种方式来定位元素。选择器提供了一种简单而强大的方式来操作DOM元素，并可以将选择到的元素进行操作、修改或删除等操作。

二.Jquery选择器分类

基本选择器

层次选择器

属性选择器

演示案例

要求：点击显示全部则显示全部内容，点击隐藏则隐藏全部内容，点击标题后变色

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>你是人间的四月天</title>
    <style type="text/css">
		body,h1,h2,p,div{margin: 0; padding: 0;}
		body{font-size: 14px; line-height: 28px; font-family: "微软雅黑";}
		#book{
		    margin: 0 auto;width: 800px;
		    overflow: hidden;padding-top: 10px;
			}
		img{float: left; margin-right: 10px;}
		h1{font-size: 32px; line-height: 45px;}
		.intro{clear: both; display: none;}
		h2{line-height: 45px; background: #999999; padding-left: 15px; color: #ffffff;}
		.intro p{text-indent: 2em;}
		.title{font-size: 24px;color: #0000ff;}
	</style>
</head>
<body>
<div id="book">
    <img src="images/book.gif" />
	<h1>你是人间的四月天</h1>
    <p>
        笑响亮了四面风<br/>
        轻灵在春的光艳中交舞看变<br/>
        你是一月早天的云烟<br/>
        黄昏吹着风的软<br/>
        ....<br/>
        <a href="#" class="whole_1">查看全部</a>&nbsp;&nbsp;&nbsp;<a href="#" class="whole_2">隐藏全部</a><br/><br/>
    </p>
    <div class="intro">
        <h2>内容简介</h2>
        <p>你是人间四月天是永正图书推出的“比烟花寂寞”系列之三。“比烟花寂寞”系列包括《民国女子》《爱眉小札》《你是人间四月天》《你是我眉心未完的诗》。这系列以前所未有的包装形式推出，引起读者尖叫连连。一经上市，便引发各大报纸、媒体的一致报道。
        </p><p>有人崇拜她，把她当做女神、偶像；也有人放出话来，“喜欢她的女人，品行有问题；喜欢她的男人，脑子有问题。”
		</p><p>她是缺乏幽娴品德的女人，她喜好与人辩论，她用诗句表达她的哀愁，她精通文理，学贯中西。她对文学和艺术，具有本能的、直接的感悟。生长富贵，命运坎坷，修养让她把热情藏在里面，热情却是她生活的支柱。
        她，就是那个万千宠爱于一身的一代才女——林徽因。
    </p><p>《你是人间四月天》是林徽因的一本小说、诗歌、散文、剧本集，几乎收录了林徽因所有的经典文学作品。其散文成就颇大，虽然数量不多，但风格独特，知识性强。诗歌尤多，其诗作融人中国古典诗歌和西方唯美派的一些表现手法，每篇文章都是她灵动思绪和满腹才华的凝结。她的语言温婉淡雅，如行云流水，又如拂面的春风。可以说。她的文字拥有超越时间的魅力。笔下流露出令人惊讶的对民间百态的深谙。</p>
    </div>
</div>
<script src="./jq/jquery-3.7.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//使用后代选择器选中id="book"的标签的后代h1标签并设置点击后调用函数
		$("#book>h1").click(function(){
			$(this).addClass("title").next().css("color","green");
		}); 
		//点击"查看全部"后调用函数
		$(".whole_1").click(function(){
			$(".intro").show();
		});
		//点击"隐藏全部"后调用函数
		$(".whole_2").click(function(){
			$(".intro").hide();
		});
	});
</script>
</body>
</html>

点击查看全部后显示全部内容

三.基本过滤选择器

演示案例


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>仿冬奥列表内容</title>
	<style type="text/css">
		*{padding:0;margin:0;}
		html,body{font-family:"微软雅黑";}
		.contain{width:320px;margin:5px auto; border: 1px solid #2a65ba;}
		ul{list-style:none;}
		li{padding-left:15px;line-height:40px;font-size:12px;color:#000;border-bottom:1px #aaaaaa dashed;}
		h2{font-size:16px;padding-left:20px;line-height:40px;}
	</style>
 </head>
 <body>
	<div class="contain">
		<h2>祝福冬奥</h2>
		<ul>
			<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
			<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
			<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>
			<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
			<li> 赵宏博：北京申办冬奥会是再合适不过了！</li>
			<li> 你喜欢哪些冬季运动项目？(点击进入调查页)</li>
		</ul>
		<ol>
			<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
			<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
			<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>
			<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
			<li> 赵宏博：北京申办冬奥会是再合适不过了！</li>
			<li> 你喜欢哪些冬季运动项目？(点击进入调查页)</li>
		</ol>
	</div>
	<script src="../jq/jquery-3.7.1.js"></script>
	<script type="text/javascript">
		$(function(){
			/**选择了class属性值为contain元素内的 所有h1--h6元素*/
			$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
			/**选择了class属性值为contain元素内的 所有li后代中的最后一个*/
			$(".contain li:last").css("background","yellowgreen");
			/**选择了class属性值为contain元素内的 所有li后代中的第一个*/
			$(".contain li:first").css({"font-size":"16px","color":"#e90202"});
			/**选择了class属性值为contain元素内的 所有li后代中的第8个*/			
			$(".contain li:eq(8)").css({"font-size":"16px","color":"#e90202"});
			/**选择了class属性值为contain元素内的 所有li后代中的偶数序列*/			
			$(".contain li:even").css("background","skyblue");
			/**选择了class属性值为contain元素内的 所有li后代中的奇数序列*/			
			$(".contain li:odd").css("background","yellowgreen");
			/**选择了class属性值为contain元素内的 所有li后代中小于3的序列*/			
			$(".contain li:lt(3)").css("background","yellowgreen");
			/**选择了class属性值为contain元素内的 所有li后代中大于3的序列*/			
			$(".contain li:gt(3)").css("background","goldenrod");
		});	
	</script>
 </body>
</html>