首页 前端知识 JQuery-盘点常用知识点

JQuery-盘点常用知识点

2024-03-11 10:03:00 前端知识 前端哥 246 788 我要收藏

一、选择器

  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");

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3627.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!