02.jQuery 选择器及应用

1.选择器案例

a.点击按钮，设置层中的显示内容为：这是一个层，同时设置这个层的背景颜色

(id选择器);

<input type="button" value="好听的歌" id="btn">
<div id="dv"></div>


// 点击按钮，设置层中的显示内容为：这是一个层，同时设置这个层的背景颜色
        // (id选择器);
        $(function() {
            $('#btn').click(function() {
                $('#dv').text('慢慢喜欢你'); //相当于DOM中的innerText或者是textContent
                $('#dv').css('backgroundColor', 'yellow');

            })
        })

b.点击按钮，设置多个p标签中显示内容为：我们都是p(标签选择器)

<!-- 点击按钮，设置多个p标签中显示内容为：我们都是p(标签选择器) -->
    <p>李敏镐</p>
    <p>李敏镐1</p>
    <p>李敏镐2</p>
    <p>李敏镐3</p>
    <p>李敏镐4</p>
    <button id="btn">点我</button>
    <script>
        $(function() {
            $('#btn').click(function() {
                $('p').text('我们都是p标签');
            })
        })
    </script>

2.标签+类样式选择器

<!-- 点击按钮，设置多个p标签中显示内容为：我们都是p(标签选择器) -->
    <ul>
        <li>44444444444444444444</li>
        <li class="cls">5555555555555555555</li>
        <li>666666666666666666</li>
    </ul>
    <button id="btn">点我</button>
    <script>
        $(function() {
            $('#btn').click(function() {
                $('li.cls').css('backgroundColor', 'yellow');
            })
        })
    </script>

3.多条件选择器

$('span,li,div')

4.几个常见的方法

.html() 方法，设置标签中间显示其他标签及内容，类似于innerHTML
.text() 方法，设置标签中间显示的文本内容，类似于innerText
.val() 方法，设置input标签中value的值，类似于value
.css() 方法，设置元素的样式，类似于style

注意：
()中写字符串，一个参数，就是要设置的值，什么也不写，返回的是这个属性的值

.css()写的是键值对

$('#dv').html('<p>这是一个p标签</p>');

5.层次选择器

$('#dv p') //获取的是div中所有的p标签元素
$('#dv>p') //获取的是div中直接的子元素
$('#dv+p') //获取的是div后面的第一个p标签元素
$('#dv~p') //获取的是div后面所有直接的兄弟元素p标签元素

6.奇偶选择器

$('#ul li:even') //偶数选择器
$('#ul li:odd') //奇数选择器

7.索引选择器

eq(3)//获取索引3的元素
gt(3)//索引大于3的所有元素
lt(3)//索引小于3的所有元素你

精品展示案例

$(function(){
    //获取左侧的列表中的li注册鼠标进入的事件
    $("#left>li").mouseover(function(){
    //获取当前li的索引值 .index()方法
    var  index = $(this).index();
    $('#center'>li:eq("+index+")).siblings('li').hide();
    $('#center>li:eq("+index+")).show();
    //获取右侧的列表中的li注册鼠标进入的事件
    $("#right>li").mouseover(function(){
        var  index = $(this).index()+9;
    $('#center'>li:eq("+index+")).siblings('li').hide();
    $('#center>li:eq("+index+")).show();
    });
})