jquery选择器介绍和获取选择器的text,value

  • A+
所属分类:程序设计

选择器介绍

jquery选择器分为:

  • ID选择器
  • 类选择器
  • 元素选择器
  • 全选择器
  • 层级选择器
  • 基本筛选选择器
  • 内容筛选选择器
  • 可见性筛选选择器
  • 属性筛选选择器
  • 子元素筛选选择器
  • 表单元素选择器
  • 表单对象选择器
  • 特殊选择器

假如源码是:

<code class=" hljs xml"><!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery标签切换效果</title>
    <link rel="stylesheet" href="2-17.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<!--代码部分b圈圈中就是选择器对应的选择到的元素:

egin-->
<div id="menu">
    <!--tag标题-->
    <div id="menu_female">
        <h3>女装</h3>
        <div class="tag" style="display: block;">
            <dl>
                <dd>
                    <p>第一类</p>
                    <a>1.衬衫</a>
                    <a>2.T恤</a>
                    <a>3.雪纺衫</a>
                    <a>4.针织衫</a>
                    <a>5.短外套</a>
                    <a>6.卫衣</a>
                    <a>7.小西裤</a>
                    <a>8.风衣</a>
                    <a>9.吊带背心</a>
                    <a>10.连衣裙</a>
                    <a name="setColor">11.蕾丝连衣裙</a>
                    <a>12.复古连衣裙</a>
                    <a>13.印花连衣裙</a>
                    <a>14.真丝连衣裙</a>
                    <a>更多</a>
                </dd>
            </dl>
        </div>
        <div class="tag_More" style="display:block">
            <dl>
                <dd>
                    <p>第二类</p>
                    <a>1.背带裤</a>
                    <a>2.哈伦裤</a>
                    <a>3.牛仔裤</a>
                    <a>4.休闲裤</a>
                    <a>5.小脚裤</a>
                    <a>6.西装裤</a>
                    <a>7.打底裤</a>
                    <a>8.阔脚裤</a>
                    <a>9.短裤</a>
                    <a>10.马甲/背心</a>
                    <a>11.羽绒服</a>
                    <a>12.棉服</a>
                    <a>13.夹克</a>
                    <a>14.POLO衫</a>
                    <a>更多</a>
                </dd>
            </dl>
        </div>>
    </div>
    <div id="menu_con">
        <h3>男装</h3>
        <div class="tag" style="display:block">
            <dl>
                <dd>
                    <p>第一类</p>
                    <a>1.衬衫</a>
                    <a>2.T恤</a>
                    <a>3.牛仔裤</a>
                    <a>4.休闲裤</a>
                    <a>5.短裤</a>
                    <a>6.针织衫</a>
                    <a>7.西服</a>
                    <a>8.西裤</a>
                    <a>9.嘻哈裤</a>
                    <a>10.西服套装</a>
                    <a>11.马甲/背心</a>
                    <a name="setColor">12.羽绒服</a>
                    <a>13.棉服</a>
                    <a>14.夹克</a>
                    <p>更多</p>
                </dd>
            </dl>
        </div>
        <div class="tag_More" style="display:block">
            <dl>
                <dd>
                    <p>第二类</p>
                    <a>1.衬衫</a>
                    <a>2.T恤</a>
                    <a>3.牛仔裤</a>
                    <a name='setColor'>4.休闲裤</a>
                    <a>5.短裤</a>
                    <a>6.针织衫</a>
                    <a>7.西服</a>
                    <a>8.西裤</a>
                    <a>9.嘻哈裤</a>
                    <a>10.西服套装</a>
                    <a>11.马甲/背心</a>
                    <a>12.羽绒服</a>
                    <a>13.棉服</a>
                    <a>14.夹克</a>
                    <p>更多</p>
                </dd>
            </dl>
        </div>>
    </div>
</div>

<script type="text/javascript">
    //找到男装下第一类衣服中的第一个p元素,并改变颜色
    //可以通过子类选择器  p:first-child 筛选出第一个p元素
    $('#menu_con div.tag dd>p:first-child').css('color','red');
</script>

<script type="text/javascript">
    //找到男装下第一类衣服把a元素从顺序1-4加上颜色
    //可以通过基本筛选器lt,选择匹配集合中所有索引值小于给定index参数的元素
    //注意了index是从0开始计算,所以选在1-4,为对应的index就是4
    $('#menu_con>div:first dd:eq(0)>a:lt(4)').css('color','blue');

</script>

<script type="text/javascript">
    //找到男装所有a元素中属性名name="setColor"的元素,并设置颜色
    //这里用的属性选择器[attribute='value']选择指定属性是给定值的元素
    #('menu_con a[name="setColor"]').css('color','#66CD00');
</script>

<script type="text/javascript">
    //不分男女,选中第一类衣服中第9个a元素,并改变颜色
    //这里用了nth-child 选择的他们所有父元素的第n个子元素
    $('#menu div.tag dd a:nth-child(10)').css('color','#C71585');

</script>

<script type="text/javascript">
    //找到女装下第一类衣服,把a元素中包含文字"更多"的节点,改变颜色
    $('.tag:first a:contains("更多")')
</script>



</body>

</html>

然后我们根据源码来看各个选择器的作用


  • 选择男装下所有a标签,并排除不是setcolor的标签,并设置颜色
<script>
    $("#menu_female div.tag dd a[name!=setColor]").css('color','red');
</script>
  • 找到男装下第一类衣服中的第一个p元素,并改变颜色
<script>
    $("#menu_female div.tag dd>p:first-child").css('color','red');
</script>
<script>
    $("#menu_female div.tag dd>p:eq(0)").css('color','red');
</script>
  • 找到男装下第一类衣服把a元素从顺序1-4加上颜色
<script>
    $("#menu_con div.tag dd >a:lt(4)").css('color','red');
</script>
<script>
    $('#menu_con>div:first dd:eq(0)>a:lt(4)').css('color','blue');
</script>
  • 找到男装所有a元素中属性名name="setColor"的元素,并设置颜色
<script>
    $('#menu_con a[name="setColor"]').css('color','#66CD00');
</script>
  • 不分男女,选中第一类衣服中第9个a元素,并改变颜色
<script type="text/javascript">
    //不分男女,选中第一类衣服中第9个a元素,并改变颜色
    //这里用了nth-child 选择的他们所有父元素的第n个子元素
    $('#menu div.tag dd a:nth-child(10)').css('color','#C71585');

</script>
  • 找到女装下第一类衣服,把a元素中包含文字"更多"的节点,改变颜色
<script type="text/javascript">
    //找到女装下第一类衣服,把a元素中包含文字"更多"的节点,改变颜色
    $('.tag:first a:contains("更多")')
</script>

更多选择器说明,请参考https://www.runoob.com/jquery/jquery-ref-selectors.html

获取选择器中的值

  • 获取男装中a标签属性为setColor的text
<script>
    var x=$("#menu_con div.tag_More dd>a[name='setColor']").text();
    console.log(jQuery.type(x));
    console.log(x);
</script>

https://www.cnblogs.com/mmzs/p/8302714.html#_label0

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: