12月19日- jQuery简单选择器

1、ID选择器$(#name)

<button id="btn">按钮</button>
<script>
    $(function () {
        // 点击按钮改变按钮的颜色
        $('#btn').click(function () {
            $(this).css('color','red');
        });
    });
</script>

2、类选择器$(.name)

<p class="text">这里是一段文字</p>
<button id="btn">按钮</button>
<script>
    $(function () {
        // 点击按钮隐藏文字
        $('#btn').click(function () {
            $('.text').hide();
        });
    });
</script>

3、元素选择器$('元素')

<ul>
    <li>网站首页</li>
    <li>产品中心</li>
    <li>新闻资讯</li>
    <li>文档下载</li>
</ul>
<script>
    $(function () {
        // hover 菜单改变颜色
        $('li').hover(function () {
            $(this).css('color','#df8348');
        },function () {
            $(this).css('color','#666666');
        });
    });
</script>

4、兄弟选择器$('~')

<ul>
    <h2>中文网</h2>
    <p>php中文网</p>
    <li>网站首页</li>
    <li>产品中心</li>
    <li>新闻资讯</li>
    <li>文档下载</li>
</ul>
<script>
    $(function () {
        // p后面所有的li 被选中
        $('p ~ li').hover(function () {
            $(this).css('color','#df8348');
        },function () {
            $(this).css('color','#666666');
        });
    });
</script>

5、子代选择器$('ul > p')

<ul>
    <h2>中文网</h2>
    <p>php中文网</p>
    <li>网站首页</li>
    <li>产品中心</li>
    <li>新闻资讯</li>
    <li>文档下载</li>
</ul>
<script>
    $(function () {
        $('ul > p').hover(function () {
            $(this).css('color','#df8348');
        },function () {
            $(this).css('color','#666666');
        });
    });
</script>

6、后代选择器$('ul li')

<ul>
    <div>
        <li>菜单一</li>
        <li>菜单二</li>
    </div>
    <li>网站首页</li>
    <li>产品中心</li>
    <li>新闻资讯</li>
    <li>文档下载</li>
</ul>
<form action="">
    用户：<input type="text">
    密码：<input type="password">
</form>
<script>
    $(function () {
        //ul元素里面所有的li被选中
        $('ul li').hover(function () {
            $(this).css('color','#df8348');
        },function () {
            $(this).css('color','#666666');
        });
    });
</script>

7、紧邻选择器$('h2 + p')

<ul>
    <h2>标题</h2>
    <p>段落</p>
    <li>网站首页</li>
    <li>产品中心</li>
    <li>新闻资讯</li>
    <li>文档下载</li>
</ul>
<script>
    $(function () {
        //h2后面的p被选中
        $('h2 + p').hover(function () {
            $(this).css('color','#df8348');
        },function () {
            $(this).css('color','#666666');
        });
    });
</script>

THE END !