jQuery 选择器

1.基本选择器

  • jQuery可以通过标签名，id，类名来获取jquery对象，也可以将原生dom对象转换成jquery对象。
<script>
    $(function(){
        //获取所有的元素
        var $all = $("*")
        // 获取所有的p标签
        var $p = $("p")
        // 获取class为redFont的元素
        var $redFont = $(".redFont")
        // 获取id为name的元素
        var $name = $("#name")
        //将dom对象转换成jquery对象
        var box = document.querySelector('.box')
        var $box = $(box)
    })
</script
  • jQuery支持css选择器
<script>
    $(function(){
        // 根据属性获取元素
        var $a = $("[href]")
        // 根据属性和属性值获取元素
        var $button = $("[type=button]")
        // 选中#box的子级p元素
        var $p2 = $("#box>p")
        //  选中#box的后代p元素
        var $p3 = $("#box p")
        // css伪类选择器(选中#box下的第一个元素且这个元素必须是p元素)
        var $p4 = $("#box>p:first-child")
    })
</script>
  • size()：返回被 jQuery 选择器匹配的元素的数量（length属性也可以返回匹配的元素的数量）
<script>
    $(function(){
        var $p = $("p")
        console.log($p.length) //3
        console.log($p.size()) //3
    })
</script>
  • 根据下标选择对应的jq元素 eq(index)
var $li = $('li').eq(0);

2.子，兄弟，父选择器

  • 子选择器 children() ：可传入参数对子元素做进一步筛选（可选）
$box.children("p")
//等价于
$('#box>p')
  • 后代选择器 find(filter)：参数必选，根据参数筛选匹配的后代元素
$box.find("p")
//等价于
$('#box p')
  • 父级选择器 parent()：选择直接父级元素
  • 祖先选择器 parents(query)：选择祖先元素，传入参数可进行进一步筛选
  • 最近的祖先选择器 closest(query)：选择目标祖先元素，参数必传
var $parent = $('#one').parent()
  • 兄弟选择器 siblings() ：选择同级的兄弟元素，传入参数可进行进一步筛选
$('ul_li#test').siblings('li')
  • 相邻选择器：next() prev() nextAll() prevAll()
<script>
    $(function(){
        //第3个li标签（一共5个）
        var $li_3 = $('li').eq(2)


        console.log($li_3.next()) //li4
        console.log($li_3.prev()) //li2
        console.log($li_3.nextAll()) //li4 li5
        console.log($li_3.prevAll()) //li2 li1
    })
</script>

3.限定查找范围

  • 查找元素时，可传入第二个参数来限定元素的查找范围，这个参数可以是jq对象，也可以是类名，id等css选择器
<body>
    <h3>我是外面的h3</h3>
    <div class="box">
        <h3>我是里面的h3</h3>
    </div>
</body>
</html>
<script>
    $(function(){
        var $box = $('.box')
        $('h3',$box).css({
            color:"red" //文字设置成红色
        })
        //等价
        $('h3','.box').css({
            color:"red" //文字设置成红色
        })
    })
</script>

4.end()

  • 作用：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态
<body>
    <div id="box">
        <ul>
            <li>
                <p>我是段落</p>
            </li>
        </ul>
    </div>
</body>

<script>
    $(function(){
        //给p元素设置样式
        $('#box').find('ul').find('li').find('p').css('color','red')
        //给li元素设置样式
        $('#box').find('ul').find('li').find('p').end().css('color','red')
    })
</script>
posted @   ---空白---  阅读(231)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
点击右上角即可分享
微信分享提示