欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-05-21 11:17:52
通过标签名，属性名或内容对DOM元素进行选择，没有浏览器的兼容问题 选择器类型： 基本选择器 层次选择器 过滤选择器 表单选择器 基本选择器：JQuery中使用最频繁的...

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


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

 

层次选择器

 

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

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

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

例:

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

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


[html]
<body> 
    <input id="Button1" type="button" value="button " /> 
<p id="pfirst"> 
<span>第一层<img src="风景/91fe451f6e8081fe492c6ae617a50274.jpg" /></span> 
   <span><img src="风景/cda8a8f5b72e165c153fd396db02ab64.jpg" /></span> 
 
</p> 
<p> 
    <img src="风景/d159717ab855f729066b333d439f630e.jpg" /> 
第二层 
</p> 
<p> 
    <img src="风景/f6b31d9bca975794bd23fdf71295e1c4.jpg" /> 
第三层 
</p> 
<p> 
    <img src="风景/f856bd37b432eb532098fa170dfbafd4.jpg" /> 
第四层 
</p> 
</body> 

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

</p>
<p>
    <img src="风景/d159717ab855f729066b333d439f630e.jpg" />
第二层
</p>
<p>
    <img src="风景/f6b31d9bca975794bd23fdf71295e1c4.jpg" />
第三层
</p>
<p>
    <img src="风景/f856bd37b432eb532098fa170dfbafd4.jpg" />
第四层
</p>
</body>
过滤选择器

 

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

例

[javascript]
<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  
 
        }) 

<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

        })
 

[html]
<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> 

<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>

 

上一篇： maven添加阿里云镜像与常用配置

下一篇： 生日蛋糕多少钱，自制生日蛋糕让你不仅少花钱而且还无比美味！

推荐阅读