jQuery选择器

jQuery选择器对网页制作效果上至关重要。他的用途广泛，具体选择器种类和例子可参考http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

1、先说明本文需要实现的具体功能

如上图所示，假设当网页右边可以根据左边的勾选进行筛选，进而呈现相关内容。

 

2、代码分析：

2.1点击btn1时生效

<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    //功能实现，例如隐藏勾选框
    //$(":checked").hide();
    //通过$(":checked")指已经勾选的按钮
  });
});
</script>
</head>

ps:$(document).ready(function(){});是指当网页已经准备好了的时候

2.2直接生效

<script type="text/javascript">
$(document).ready(function(){
  $(":checked").hide();
});
</script>

这样，若网页是效果是刷新，那么上述代码产生的效果是网页在不停地刷新，因为页面一直都是准备好的状态。

2.3点击勾选生效

<script type="text/javascript">
  $(document).ready(function(){
    $(":checked").on('click', function(event) {
      $(this).hide();
    });
  });
</script>

2.4 checked 和checkbox的区别

checked是过去时，是指页面准备好时已经勾选好了，而checkbox是在页面准备好时还未勾选，勾选后生效。