用什么软件做网站最简单,海洋专业做网站,做网站过时了,医院网站建设的规划文章目录 目录 文章目录 本章目标 一.Jquery选择器概述 二.Jquery选择器分类 基本选择器 层次选择器 属性选择器 三.基本过滤选择器 练习 本章目标
会使用基本选择器获取元素会使用层次选择器获取元素会使用属性选择器获取元素会使用过滤选择器获取元素 …文章目录 目录 文章目录 本章目标 一.Jquery选择器概述 二.Jquery选择器分类 基本选择器 层次选择器 属性选择器 三.基本过滤选择器 练习 本章目标
会使用基本选择器获取元素会使用层次选择器获取元素会使用属性选择器获取元素会使用过滤选择器获取元素 会使用基本过滤选择器获取元素 会使用可见性过滤选择器获取元素 一.Jquery选择器概述 JQuery选择器是用于选择DOM元素的一种方式。它可以通过元素的标签名、类名、ID、属性等多种方式来定位元素。选择器提供了一种简单而强大的方式来操作DOM元素并可以将选择到的元素进行操作、修改或删除等操作。 二.Jquery选择器分类 基本选择器 层次选择器 属性选择器 演示案例 要求点击显示全部则显示全部内容点击隐藏则隐藏全部内容点击标题后变色 !DOCTYPE html
html
head langenmeta charsetUTF-8title你是人间的四月天/titlestyle typetext/cssbody,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 idbookimg srcimages/book.gif /h1你是人间的四月天/h1p笑响亮了四面风br/轻灵在春的光艳中交舞看变br/你是一月早天的云烟br/黄昏吹着风的软br/....br/a href# classwhole_1查看全部/anbsp;nbsp;nbsp;a href# classwhole_2隐藏全部/abr/br//pdiv classintroh2内容简介/h2p你是人间四月天是永正图书推出的“比烟花寂寞”系列之三。“比烟花寂寞”系列包括《民国女子》《爱眉小札》《你是人间四月天》《你是我眉心未完的诗》。这系列以前所未有的包装形式推出引起读者尖叫连连。一经上市便引发各大报纸、媒体的一致报道。/pp有人崇拜她把她当做女神、偶像也有人放出话来“喜欢她的女人品行有问题喜欢她的男人脑子有问题。”/pp她是缺乏幽娴品德的女人她喜好与人辩论她用诗句表达她的哀愁她精通文理学贯中西。她对文学和艺术具有本能的、直接的感悟。生长富贵命运坎坷修养让她把热情藏在里面热情却是她生活的支柱。她就是那个万千宠爱于一身的一代才女——林徽因。/pp《你是人间四月天》是林徽因的一本小说、诗歌、散文、剧本集几乎收录了林徽因所有的经典文学作品。其散文成就颇大虽然数量不多但风格独特知识性强。诗歌尤多其诗作融人中国古典诗歌和西方唯美派的一些表现手法每篇文章都是她灵动思绪和满腹才华的凝结。她的语言温婉淡雅如行云流水又如拂面的春风。可以说。她的文字拥有超越时间的魅力。笔下流露出令人惊讶的对民间百态的深谙。/p/div
/div
script src./jq/jquery-3.7.1.js/script
script typetext/javascript$(document).ready(function(){//使用后代选择器选中idbook的标签的后代h1标签并设置点击后调用函数$(#bookh1).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 langenheadmeta charsetUTF-8meta nameGenerator contentEditPlus®meta nameAuthor contentmeta nameKeywords contentmeta nameDescription contenttitle仿冬奥列表内容/titlestyle typetext/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/headbodydiv classcontainh2祝福冬奥/h2ulli 贝克汉姆衷心希望北京能够申办成功/lili 姚明北京申冬奥是个非常棒的机会加油/lili 张虹北京办冬奥大家的热情定超乎想象 /lili 肖恩怀特我爱北京支持北京申办冬奥会/lili 赵宏博北京申办冬奥会是再合适不过了/lili 你喜欢哪些冬季运动项目(点击进入调查页)/li/ulolli 贝克汉姆衷心希望北京能够申办成功/lili 姚明北京申冬奥是个非常棒的机会加油/lili 张虹北京办冬奥大家的热情定超乎想象 /lili 肖恩怀特我爱北京支持北京申办冬奥会/lili 赵宏博北京申办冬奥会是再合适不过了/lili 你喜欢哪些冬季运动项目(点击进入调查页)/li/ol/divscript src../jq/jquery-3.7.1.js/scriptscript typetext/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 练习
