jQuery ------ 基础（二）——常用 API

jQuery 选择器

1. $('选择器') 里面选择器直接写 CSS 选择器即可，但要加引号。
2. 常用选择器：
   
   
   class选择器 和 后代选择器

	<div class="nav">我是div nav</div>
    	<ol>
        	<li>我是ol 的</li>
        	<li>我是ol 的</li>
    	</ol>
    <script>
        $(function(){
    
    
            console.log($('.nav'))
            console.log($('ol li'))
        })
    </script>

3. jQuery 设置样式 ：$('div').css('属性','值')

1. 隐式迭代：遍历内部 DOM 元素（伪数组形式储存）的过程就叫做隐式迭代。
2. 就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法。

设置div 的背景颜色：

	<div>jQuery</div>
    <div>jQuery</div>
    <div>jQuery</div>
    <script>
        $(function(){
    
    
            $('div').css('background','pink')
        })
    </script>

设置 ul 里 li 的字体颜色：

	<ul>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>
    </ul>
    <script>
        $(function(){
    
    
            $('ul li').css('color','blue')
        })
    </script>

4. jQuery 筛选选择器

第一个、第二个、奇数行、偶数行：

	<ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>最后一个</li>
    </ul>
    <ol>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>最后一个</li>
    </ol>
    <script>
        $(function(){
    
    
           $('ul li:first').css('color','red') 
           $('ul li:eq(2)').css('color','blue')
           $('ol li:odd').css('color','skyblue')
           $('ol li:even').css('color','pink')
        })
    </script>

5. 实现下拉菜单

1. 鼠标经过展开菜单 鼠标离开隐藏菜单
2. $(this) 指向当前jQuery
3. show() 展示 ，hide()隐藏

<ul class='nav'>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li> 
    </ul>
    <script>
        $(function(){
    
    
            // 鼠标经过
            $('.nav>li').mouseover(function(){
    
    
                // $(this) 表示 jQuery当前元素 this不加引号
                // show() 显示元素 hide()隐藏元素
                $(this).children('ul').show()
            })
            // 鼠标离开
            $('.nav>li').mouseout(function(){
    
    
                $(this).children('ul').hide()
            })
        })
    </script>

5. jQuery 筛选方法

1. 父亲parent()、儿子children()：

	<div class='father'>
        <div class='son'>son</div>
    </div>
    <div class='nav'>
        <p>我是p(儿子)</p>
        <div>
            <p>我是PP(孙子)</p>
        </div>
    </div>
    <script>
        $(function(){
    
    
            // 父亲 parent() 返回的是 最近一级的父级元素 亲爸爸
            $('.son').parent('.father').css('font-size','50px')
            // 亲儿子 children() 子代选择器 ul>li 
            $('.nav').children('p').css('color','red')
            // 选择里面所有的孩子 包括儿子和孙子..  find()
            $('.nav').find('p').css('background','lightblue')
        })
    </script>

2. 兄弟节点 siblings()：除了自身元素之外的所有亲兄弟。

	<ol>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li class='item'>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <script>
        $(function(){
    
    
            $('ol .item').siblings('li').css('color','red')
        })
    </script>

3. 第几个元素 eq(index)。

利用选择器的方式选择：

	<ol>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <script>
        $(function(){
    
    
            $('ol li:eq(2)').css('color','skyblue')
        })
    </script>

利用选择方法的方式选择 (推荐写法)：

	<ol>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <script>
        $(function(){
    
    
            $('ol li').eq(2).css('color','skyblue')
        })
    </script>

4. 是否有某个类名

	<ol>
        <li>我是ol 的li</li>
        <li class="item">我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <script>
        $(function(){
    
    
            console.log($('ol li').eq(1).hasClass('item')) // true
        })
    </script>

jQuery 排他思想

被点击的按钮变色，其余按钮不变

	<button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <script>
        $(function(){
    
    
            // 1.隐式迭代 给所有的按钮都绑定了点击事件
            $('button').click(function(){
    
    
                // 2.当前的元素变化背景颜色
                $(this).css('background','pink')
                // 3.其余的兄弟去掉背景颜色
                $(this).siblings('button').css('background','')
            })
        })
    </script>

tab 栏切换

鼠标经过，显示该部分的图片

	$(function(){
    
    
        // 1.鼠标经过左侧的小li
        $('left li').mouseover(function(){
    
    
            // 2.得到当前小li 的索引号
            var index = $(this).index()
            console.log(index)
            // 3.让右侧的盒子相应索引号的图片显示出来
            $('#content div').eq(index).show()
            // 4.让其余的图片(就是其他的兄弟)
            $('#content div').eq(index).siblings().hide()
        })
    })

不积跬步无以至千里 不积小流无以成江海