jQuery选择器案例之——index.js

$(function(){
  //alert('a');
  
  ///基本选择器
  //id选择器
  //$("#div1").css("background","red");
  
  //class选择器
  //$(".p1").css("color","red");
  
  //标签选择器
  //$("p").css("color","red");
  
  //并集选择器
  //$("p,li").css("color","red");
  
  //全局选择器
  //$("*").css("color","red");
  
  ///层次选择器
  //1.后代选择器
  //$("#div2 ul").css("color","red");
  
  //2.子选择器
  //$("#div2>p").css("color","red");
  
  //3.相邻选择器
  //$(".p1+p").css("color","red");
  
  //4.同辈元素
  //$(".p1~p").css("color","red");
  
  ///属性选择器
  //1.包含给定属性选择器的元素
  //获取所有含有name属性的元素，颜色设置为红色
  //$("[name]").css("color","red");
  
  //2.name的值等于name的变成红色
  //$("[name='name']").css("color","red");
  
  //3.name的值不是name的变成红色
  //$("[name!='name']").css("color","red");
  
  //4.name的值以p开头的变成红色
  //$("[name^=p]").css("color","red");
  
  //5.name的值以e结尾的颜色变成红色
  //$("[name$=e]").css("color","red");
  
  //6.2019年6月21日11:38:40
  //name的值中包含e的字体颜色变红
  //$("[name*=e]").css("color","red");
  
  //7.选取含有id属性，并且name的值中包含e的元素，，字体颜色变成红色
  //$("[id][name*=e]").css("color","red");
  
  
  ///过滤选择器
  //1.将第一个li变成红色
  //$("li:first").css("color","red");
  
  //2.将最后一个li变成红色
  //$("li:last").css("color","red");
  
  //3.选取class不是p1的元素变成红色
  //$("li:not(.p1)").css("color","red");
  
  //4.所有li的索引是偶数的背景色换一下
  //$("li:even").css("background","red");
  
  //5.所有li的索引是奇数的背景色换一下
  //$("li:odd").css("background","red");
  
  //6.索引等于2的li变成红色
  //$("li:eq(2)").css("color","red");
  
  //7.索引大于1的li变色
  //$("li:gt(1)").css("color","red");
  
  //8.索引小于2的li变色
  //$("li:lt(2)").css("color","red");
  
  //9.所有的标题元素变成红色
  //$(":header").css("color","red");
  
  ///可见性过滤器
  //1.所有可见元素变色
  //$(":visible").css("color","red");
  
  //2.将隐藏的元素变色
  $("h3").hide();
  $(":hidden").css("color","red");
  
})