jQuery基本过滤选择器

所有代码需引入jquery才可以运行

基本过滤选择器

1.     $('li:first') 选取第一个li
   

2.     $('li:last')选取最后一个li 
   

3.     $('li:not(.cs)')选取所有li排除class为cs的li
   

4.     $('li:even') 选取偶数li 0也是偶数
   

5.     $('li:odd') 选取奇数li
   

6.     $('li:eq(0)') eq后的数字就是索引填几选第几个
   

7.     $('li:gt(1)') gt表示选中大于某一个索引，不包括本身
   

8.     $('li:lt(1)') lt表示选中小于某一个索引，不包括本身
   

9.     $(':header') 表示选取所有的标题元素h1~h6
   

10.     $(':focus') 表示获取焦点的元素
    

过滤练习

使用jq过滤选择器做出如下图效果：

代码如下：

<style>
    *{margin: 0; padding:0 ;}
    .box{
        border: 1px solid blue;
        width: 350px;
    }
    ul li {
        color: #fff;
        padding: 10px;
        border-bottom: 1px dashed #ccc;
    }
</style>
<div class="box">
    <h1>我是标题</h1>
    <ul>
        <li>我是列表0</li>
        <li>我是列表1</li>
        <li>我是列表2</li>
        <li>我是列表3</li>
        <li>我是列表4</li>
    </ul>
</div>
<script>
    $('li:last').css('border','0');
    $('li:even').css('background','#f0f0f0')
    $('li:odd').css('background','#ccc')
    $('li:gt(2)').css('fontSize','50px')
    $('li:lt(3)').css('fontSize','30px')
    $(':header').css('color','green')
    $('li:eq(0)').css('color','red')
</script>

jq显示与隐藏

hide() / show() 括号中('slow')表示慢速 ('fast')表示快速 ('normal')表示普通
1.hide() 隐藏元素 效果为css的dispaly:none

<div style="background-color: rebeccapurple;">11</div>
    <script>
        $('div').hide(); 
    </script
    

2.show() 显示元素 效果为css的display:block

<div style="background-color: rebeccapurple;">11</div>
    <script>
        $('div').show(); 
    </script

练习制作开关灯

点第一次 显示 打开 显示红色 开点第二次 显示 打开 显示黄色 开点第三次 关闭 要求带一点过渡 代码如下：

<style>
    *{margin: 0;padding: 0;}
    div {
        width: 100%;
        height: 300px;
        display: none;
    }

    .red {
        background-color: red;
    }

    .yellow {
        background-color: yellow;
    }
</style>
<button>开关</button>
<div></div>

<script>
    let count = 1;
    $('button').click(function () {
        if(count == 1){
            $('div').css('background','red');
            $('div').show(2000);
            count++;
            return;
        }
        if(count == 2){
            $('div').css('background','yellow');
            $('div').show(2000);
            count++;
            return;
        }
        if(count == 3){
            $('div').hide(2000);
            count = 1;
            return;
        }
    })

</script>

选取样式可见与不可见样式

 选取所有可见样式 $('div:visible') 选取不可见样式 $('div:hidden')
 

用这个样式选择器做一个开关等，代码如下：

   <div style="width: 200px;height: 300px;background-color: red;display: none;"></div>
<script>
    $('button').click(function(){
        if($('div:hidden').length ){
            $('div:hidden').show('slow');
        }else{
            $('div:visible').hide('slow');
        }
        
    })
    
</script>

jq排他思想

比如有四个li标签 我想让我点击哪个哪个li标签的背景颜色就变成红色，其他li不会变色

html代码如下:

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

jq代码实现如下：

  $('li').click(function(){
        $('li').css('background','');
        $(this).css('background','red')
    })

js原生代码实现如下：

let li = document.getElementsByTagName('li');
    for (var i = 0; i < li.length; i++) {
        li[i].onclick = function () {
            for(var i = 0; i<li.length;i++){
                li[i].style.background = '';
            }
            this.style.background = 'red'
        }
    }