JQuery-盘点常用知识点

一、选择器

1. 基础选择器： 类选择器 元素选择器 ID选择器 子元素选择器 后代元素选择器
2. 属性选择器 ：完美匹配 包含 前缀 开头 结尾 空格
3. jQuery扩展选择器： eq even odd first last gt lt

示例代码：

 <div class="container"></div>
    <div id="box"></div>
    <span></span>
    <ul id="nav">
        <li>1</li>
        <li>2</li>
        <li>
            <ul>
                <li>1</li>
                <li>2</li>
            </ul>
        </li>
    </ul>

        //id选择器
        $('#box').html("我是box");
        //类选择器
        $('.container').html("我是container")
        //元素选择器
        $("span").html("我是span")
        // 后代选择器
        $("#nav li").css("border", "1px solid red")
        //子代选择器 
        $("#nav>li").css("border", "2px solid green")

        // :eq(index) Selector 在匹配的集合中选择索引值为index的元素。
        $("li:eq(2)").css("border", "4px solid red")

        // :even Selector 选择所引值为偶数的元素
        // $("li:even").css("border", "1px solid blue")

        // :odd Selector 选择索引值为奇数元素
        $("li:odd").css("border", "2px solid yellow")

        // :first Selector 选择第一个匹配的元素
        // $("li:first").css("border", "1px solid red");

        // :last Selector 选择最后一个匹配的元素
        // $("li:last").css("border", "1px solid red");

        // :gt(index) Selector 选择匹配集合中所有大于给定index（索引值）的元素。
        // $("li:gt(1)").css("border", "1px solid red");

        // :lt(index) Selector 选择匹配集合中所有索引值小于给定index参数的元素
        // $("li:lt(3)").css("border", "4px solid red");