文章目录
-
目录
文章目录
本章目标
一.Jquery选择器概述
二.Jquery选择器分类
基本选择器
层次选择器
属性选择器
三.基本过滤选择器
练习
本章目标
- 会使用基本选择器获取元素
- 会使用层次选择器获取元素
- 会使用属性选择器获取元素
- 会使用过滤选择器获取元素 会使用基本过滤选择器获取元素 会使用可见性过滤选择器获取元素
一.Jquery选择器概述
JQuery选择器是用于选择DOM元素的一种方式。它可以通过元素的标签名、类名、ID、属性等多种方式来定位元素。选择器提供了一种简单而强大的方式来操作DOM元素，并可以将选择到的元素进行操作、修改或删除等操作。
二.Jquery选择器分类
基本选择器
层次选择器
属性选择器
演示案例
要求：点击显示全部则显示全部内容，点击隐藏则隐藏全部内容，点击标题后变色
你是人间的四月天
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;}
你是人间的四月天
笑响亮了四面风
轻灵在春的光艳中交舞看变
你是一月早天的云烟
黄昏吹着风的软
....
查看全部隐藏全部
内容简介
你是人间四月天是永正图书推出的“比烟花寂寞”系列之三。“比烟花寂寞”系列包括《民国女子》《爱眉小札》《你是人间四月天》《你是我眉心未完的诗》。这系列以前所未有的包装形式推出，引起读者尖叫连连。一经上市，便引发各大报纸、媒体的一致报道。
有人崇拜她，把她当做女神、偶像；也有人放出话来，“喜欢她的女人，品行有问题；喜欢服务器托管网她的男人，脑子有问题。”
她是缺乏幽娴品德的女人，她喜好与人辩论，她用诗句表达她的哀愁，她精通文理，学贯中西。她对文学和艺术，具有本能的、直接的感悟。生长富贵，命运坎坷，修养让她把热情藏在里面，热情却是她生活的支柱。
她，就是那个万千宠爱于一身的一代才女——林徽因。
《你是人间四月天》是林徽因的一本小说、诗歌、散文、剧本集，几乎收录了林徽因所有的经典文学作品。其散文成就颇大，虽然数量不多，但风格独特，知识性强。诗歌尤多，其诗作融人中国古典诗歌和西方唯美派的一些表现手法，每篇文章都是她灵动思绪和满腹才华的凝结。她的语言温婉淡雅，如行云流水，又如拂面的春风。可以说。她的文字拥有超越时间的魅力。笔下流露出令人惊讶的对民间百态的深谙。
$(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();
});
});
点击查看全部后显示全部内容
三.基本过滤选择器
演示案例
仿冬奥列表内容
*{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;}
祝福冬奥
- 贝克汉姆：衷心希望北京能够申办成功！
- 姚明：北京申冬奥是个非常棒的机会！加油！
- 张虹：北京办冬奥，大家的热情定超乎想象！
- 肖恩怀特：我爱北京，支持北京申办冬奥会！
- 赵宏博：北京申办冬奥会是再合适不过了！
- 你喜欢哪些冬季运动项目？(点击进入调查页)
- 贝克汉姆：衷心希望北京能够申办成功！
- 姚明：北京申冬奥是个非常棒的机会！加油！
- 张虹：北京办冬奥，大家的热情定超乎想象！
- 肖恩怀特：我爱北京，支持北京申办冬奥会！
- 赵宏博：北京申办冬奥会是再合适不过了！
- 你喜欢哪些冬季运动项目？(点击进入调查页)
$(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");
});
练习
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
