JQuery学习(2)选择器(1)

最新推荐文章于 2025-06-24 10:51:06 发布

原创最新推荐文章于 2025-06-24 10:51:06 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

25 篇文章

订阅专栏

本文深入探讨了如何使用jQuery和JavaScript对DOM元素进行选择、修改样式和层次操作，包括基本选择器、层次选择器、过滤选择器和表单选择器的应用。

通过标签名，属性名或内容对DOM元素进行选择，没有浏览器的兼容问题
选择器类型：
基本选择器
层次选择器
过滤选择器
表单选择器
基本选择器：JQuery中使用最频繁的选择器

使用JQuery：
$('#mydiv').css('background-color','red');
使用js:
document.getElementById('mydiv').style.backgroundColor = 'red';
按照JQuery的习惯，下面的代码应该改成第二种方式
element:根据给定的元素名称匹配所有元素，也就是<后边的元素名称
$(function () {
            $('#but').click(function () {
                //$('#a1').css('background-color', 'blue');
                  $('a').css('background-color','red');
            })
        })
根据类型匹配元素：若多个元素使用的类型相同，则选择多个元素

层次选择器

$('#divMid').css('display', 'block')：设置id为'divMid'的层可见
$('div span').css('display', 'block')：设置id为'divMid'的层里面的所有span元素可见，无论有几级嵌套
$('div>span').css('display', 'block')：设置id为'divMid'的层里面的第一级span元素可见，此span元素里面的span元素不可见

$('#divMid+div').css('display','block')：设置id为'divMid'的层后面的第一个div可见
$('#divMid+span').css('display', 'block')：设置id为'divMid'的层后面的第一个span可见
$('#divMid').next().css('display','block'):设置id为'divMid'的层后面的第一个元素可见,无论是什么元素

$('#divMid').nextAll().css('display', 'block')：设置id为'divMid'的层后面的所有元素可见，无论是什么元素，必须与divMid平级，平级元素里面的嵌套元素不可见
$('#divMid~div').css('display', 'block')：设置id为'divMid'的层后面的所有div元素可见，必须是平级的。
$('#divMid~span').css('display','block');：设置id为'divMid'的层后面的所有span元素可见，必须是平级的。

例:

<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //层次选择器
        $(document).ready(function () {
            $('#Button1').click(function () {
                //$('#divfirst span img').hide(2000); //找到id为divfirst里的span元素下的img元素  
                //$('#divfirst  img').hide(2000);     //找到id为divfirst里所有的img元素
                $('#divfirst>span img').hide(3000)    //找到id为divfirst里第一级span元素里得img元素  注意！ 这个第一级是指所有divfirst下一级span元素
                //$('#divfirst+div img').hide(3000)         //找到和id为divfirst的元素同级的第一个紧邻他的div元素 的img元素
                //$('#divfirst~div img').hide(3000)         //找到和id为divfirst的元素同级的所有div元素 的img元素
                //$('#divfirst').next().hide(3000); //找到和id为divfirst的元素后面的同级的第一个元素
                //$('#divfirst').nextAll().hide(3000); //找到和id为divfirst的元素后面的同级的所有元素
            })
        })
    </script>

<body>
    <input id="Button1" type="button" value="button " />
<div id="divfirst">
<span>第一层<img src="风景/91fe451f6e8081fe492c6ae617a50274.jpg" /></span>
   <span><img src="风景/cda8a8f5b72e165c153fd396db02ab64.jpg" /></span>

</div>
<div>
    <img src="风景/d159717ab855f729066b333d439f630e.jpg" />
第二层
</div>
<div>
    <img src="风景/f6b31d9bca975794bd23fdf71295e1c4.jpg" />
第三层
</div>
<div>
    <img src="风景/f856bd37b432eb532098fa170dfbafd4.jpg" />
第四层
</div>
</body>

过滤选择器

根据某类过滤规则进行元素的匹配

例

<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //$('img:eq(1)').hide(3000);  //第几个
            //$('img:gt(0)').hide(3000);  //大于
            //$('img:lt(2)').hide(3000);  //小于
            //$('img:even').hide(3000);   //偶数下标
            //$('img:odd').hide(3000);    //奇数下标
            //$('img:not(#img1)').hide(3000)  //除了ID为img1
            //$('img:not(.imgclass1)').hide(3000)//除了样式为imgclass1

        })

<body>
    <img src="风景/29b56ef1ecac0a2e23fe73abb8457ed9.jpg" id="img1" class="imgclass1" />
    <img src="风景/3615bd55e6db2d3eb2a45a8369653f12(1).jpg" class="imgclass" />
    <img src="风景/3615bd55e6db2d3eb2a45a8369653f12.jpg" class="imgclass" />
    <img src="风景/837adad119910d349f05149ad4a02ef0.jpg" class="imgclass" />
</body>