jQuery选择器

最新推荐文章于 2024-07-28 23:04:06 发布

转载最新推荐文章于 2024-07-28 23:04:06 发布 · 68 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yangHS/p/10881696.html

本文介绍了jQuery选择器，其本身是有特定语法规则的字符串，基本语法基于CSS选择器并扩展，需调用$并传入参数才起作用。还详细阐述了基本选择器、层次选择器、过滤选择器和表单选择器等不同类型的jQuery选择器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery选择器

选择器本身只是一个有特定语法规则的字符串，没有实质用处

它的基本语法规则使用的就是CSS的选择器语法，并对基进行了扩展

只有调用$，并将选择器作为参数传入才能起作用

$(selector)作用：

根据选择器规则在整个文档中查找所有匹配的标签的数组，并封装成jQuery对象返回

1.基本选择器

最基本常用的选择器

#id

element

.class

selector1,selector2,selectorN

selector1selector2selectorN

            //1.选择id为div1元素
            // $('#div1').css('background','red')

            // 2.选择所有div元素
            // $('div').css('background','red')

            // 3.选择所有class属性为box的元素
            // $('.box').css({'background':'red'})

            // 4.选择所有的div和span元素
            // $('div,span').css('background','red')

            // 5.选择所有class属性为box的div元素
            // $('div.box').css('background','red')

2.层次选择器

查找子元素，后代元素，兄弟元素的选择器

ancestor descendant

parent > child

prev + next

prev ~ siblings:匹配prev元素之后的所有siblings元素

  //1.选中ul下所有的span
            // $('ul span').css('background','red')
            //2.选中ul下所有的子元素span
            // $('ul>span').css('background','red')
            ///3.选中class为box的下一个li
            // $('.box+li').css('background','red')
            // //4.选中ul下的class为box的元素后面的所有兄弟元素
            // $('ul .box~*').css('background','red')

3.过滤选择器

在原有的选择器匹配的元素中进一步进行过滤的选择器

基本/内容/可见性/属性

            //1.选择最后一个class为box的元素
            // $('div:first').css('background','red')
            //2.选择最后一个class为box的元素
            // $('.box:last').css('background','red')
            //3.选择所有class属性不为box的div
            // $('div:not(.box)').css('background','red')
            //4.选择第二个和第三个li元素
            // $('li:gt(0):lt(2)').css('background','red')
            //5.选择内容为BBBB的li
            // $('li:contains("BBBBB")').css('background','red')
            //6.选择隐藏的li
            // console.log($('li:hidden')[0])
            //7.选择有title属性的li元素
            // $('li[title]').css('background','red')
            //8.选择所有属性title为hello的li元素
            // $('li[title="hello"]').css('background','red')

4.表单选择器

表单/表单对象属性

  /**
         * 1.选择不可用的文本输入框
         * $(':text:disabled').css('background','red')
         * 2.显示选择爱好的个数
         * $(':checkbox:checked').length
         * 3.显示选择的城市的名称
         *  $(':submit').click(function () {
         *  var city = $('select>option:selected').html()
         *  city = $('select').val()//value属性值
         *  })
         */

转载于:https://www.cnblogs.com/yangHS/p/10881696.html