jQ过滤选择器

基本过滤选择器

<ul>
<h1>飞的飞行员</h1>
 <li>我是飞行员0</li>
 <li class="feiji">我是飞行员1</li>
 <li>我是飞行员2</li>
<li>我是飞行员3</li>
</ul>
<script src="[./jquery-1.12.4.js](./jquery-1.12.4.js)"></script>//导入jq方法
<script>
$(function(){
 $('li:first').css('background','red');//选取第一个元素
 $('li:last').css('background','red');//选取最后一个元素
 
 $('li:not(".feiji")').css('background','red')
 排除指定含有.feiji元素之外的所有元素 :not('')

 $('li:even').css('background','red')
 选取索引是偶数的所有元素（index从0开始）:even 0也是偶数

 $('li:odd').css('background','red')
 选取索引是奇数的所有元素（index从0开始）:odd

 $('li:eq(3)').css('background','red')
 选取索引等于index的元素（index从0开始）:eq(index)

 $('li:gt(2)').css('background','red')
 选取索引大于index的元素（index从0开始）:gt(index)

 $('li:lt(4)').css('background','red')
 选取索引小于index的元素（index从0开始）

 $(':header').css('background','red')
 选取所有标题元素，如h1~h6 :header
})
</script>

可见性过滤选择

<button>点我</button>
<h1 style="display: none;">1</h1>
<script src="[./jquery-1.12.4.js](./jquery-1.12.4.js)"></script>//导入jq方法
<script>
$('botton').click(function(){
 if($('h1:hidden').length){
    $('h1:hidden').show('slow')
    slow慢速显示
    选取所有隐藏的元素 :hidden
  }slse{
       $('h1:visible').hide('slow')
       选取所有可见的元素 :visible
   }
})
</script>

show，hide

<button style="margin:0 auto;display: block;">开关按钮</button>
<div style="display: none;width: 100vw;height: calc(100vh - 22px);"></div>
<script src="[./jquery-1.12.4.js](./jquery-1.12.4.js)"></script>//导入jq方法
 <script>
  $('button').click(function(){
    if($('div').css('display')=='block'){
     $('div').hide(1000)//可以设置时间,必须是数字类型
    }else{
       $('div').show(1000)
     }
  })
  </script>
  .show('slow') 慢速展示
  .show('fast') 快速展示 也有动画效果
  .hide('normal') 普通速度隐藏

利用show和hide制作开关等颜色变化

<button style="margin:0 auto;display: block;">开关按钮</button>
<div style="display: none;width: 100vw;height: calc(100vh - 22px);"></div>
<script src="[./jquery-1.12.4.js](./jquery-1.12.4.js)"></script>//导入jq方法
 <script>
 let count = 1;
 $('button').click(function()}
 //点第一次 显示 打开 显示红色div
  if(count==1){
   $('div').css('background-color','red')
   $('div').show(1000);
   count++
   return;
   }
   //  开点第二次 显示 打开 显示黄色div
    if(count==2){
       $('div').css('background-color','yellow')
       count++
       return;
     }
     //关闭
     if(count==3){
      $('div').hide(1000);
      count=1
     }
   })
   </script>

选项卡

<ul> 
<li>1</li> 
 <li>2</li> 
 <li>3</li> 
 <li>4</li> 
</ul>
<script src="[./jquery-1.12.4.js](./jquery-1.12.4.js)"></script>//导入jq方法
<script>
 //jq方法
  $('li').click(function () {
      $('li').css('background', '');
         })
         
//原生方法
let lis = document.getElementsByTagName('li')
for(let i=0;i<lis.length;i++){
 lis[i].onclick = function(){
  for(let j=0;j<lis.length;j++){
    lis[j].style.background = ''
    }
    lis[i].style.background = 'red'
   }
 }
 </script>