//1.基本选择器
$(function(){
//1.全局选择器
$("*").css(“font-size”,“30px”);
//2.标签选择器
$(“p”).css(“color”,“blue”);
//3.id选择器 id属性赋值要求唯一 #
$("#a").css(“font-weight”,“bold”);
//4.类选择器 class属性赋值可以重复 .
$(".b").css(“font-style”,“italic”);
//5.并集选择器:或者关系 ,
$("#a,.b").css(“background-color”,“yellow”);
//6.交集选择器 并且关系
$(“p#a”).css(“text-indent”,“2em”);
})
//2.层次选择器
$(function(){
//1.后代选择器 父子关系或者后代关系 标识符 :空格
$("div li").css("list-style","none");
//2.子选择器 :必须是直接的父子关系 标志符 :>
$("ul>li").css("color","red");
//3.相邻兄弟选择器:找紧挨着的后面的兄弟标签 标识符:+
$("#er+li").css("background-color","black");
//4.通用兄弟选择器:找后面所有的兄弟标签 标识符:~ 不包括本身
$("#er~li").css("font-size","40px");
})
//3.属性选择器
$(function(){
//1.[name] 包含name属性的标签
$("[name]").css("color","green");
//2.[name=""] name属性赋值为""
$("[name='lyz']").css("color","red");
//3.[name!=""] name属性赋值不等于""
$("[name!='sy']").css("background-color","yellow");
//4.[name^=""] name属性赋值必须以""开头
$("[name^='w']").css("font-family","楷体");
//5.[name$=""] name属性赋值必须以""结尾
$("[name$='z']").css("color","red");
//6.[name*=""] name属性赋值包含""
$("[name*='l']").css("font-size","60px");
})
//4.过滤选择器
$(function(){
//1.li:first 第一个li
$("li:first");
//2.li：last最后一个li
$("li:last");
//3.li:eq(2) 下标为2的li
$("li:eq(2)");
//4.li：gt(2) 下标大于2的li
$("li:gt(2)");
//5.li:lt(2) 下标小于2的li
$("li:lt(2)");
//6.li:even 下标为偶数的li
$("li:even");
//7.li:odd 下标为奇数的li
$("li:odd");
//8.获取所有的标题 :header
$("body :header").css("color","red");
})
//5.可见性过滤选择器 根据标签的状态分类 分为hide和show俩种
$(function(){
//1.给显示按钮添加单击事件
$("[value='显示']").click(function(){
//2.获取被隐藏的div
$("div:hidden").show();
})
//3.给隐藏按钮添加单击事件
$("[value='隐藏']").click(function(){
//2.获取被隐藏的div
$("div:first").hide();
})
})