JQuery获取元素的N种方法

一.根据标签属性或属性值获取

1.根据属性获取元素

比如要获取页面p标签中属性有id的元素

代码如下:

$("p[id]").css("color","red");  

2.根据属性值获取元素

特殊符号 $ , ! , * , @ , ^ 的灵活使用。


2.1 $

[attribute$=value],匹配给定的属性是以某些值结尾的元素。下面举个例子来说明一下:

<input name="newsletter" /> 
<input name="milkman" /> 
<input name="jobletter" /> 

jq代码:

$("input[name$='letter']") 

获取结果:

[ <input name="newsletter" />, <input name="jobletter" /> ] 

2.2 !

[attribute!=value],匹配所有不含有指定的属性,或者属性不等于特定值的元素,此选择器等价于:not([attr=value]).例子说明一下:

<input type="checkbox" name="newsletter" value="Hot Fuzz" /> 
<input type="checkbox" name="newsletter" value="Cold Fusion" /> 
<input type="checkbox" name="accept" value="Evil Plans" /> 

jq代码:

$("input[name!='newsletter']").attr("checked", true); 

结果:

[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ] 

2.3 *

[attribute*=value],匹配给定的属性是以包含某些值的元素。举个例子说明一下:

<input name="man-news" /> 
<input name="milkman" /> 
<input name="letterman2" /> 
<input name="newmilk" /> 

jq代码:

$("input[name*='man']") 

结果:

[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ] 

2.4 @

匹配包含给定属性的元素。注意,在jQuery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即可。

2.5 ^

[attribute^=value],匹配给定的属性是以某些值开始的元素,下面举个例子来说明一下

<input name="newsletter" /> 
<input name="milkman" /> 
<input name="newsboy" /> 

jq代码:

$("input[name^='news']") 

结果:

[ <input name="newsletter" />, <input name="newsboy" /> ] 

2.6 获取指定属性且设定值中有指定字符串的元素

<input type="checkbox" name="newsletter" value="Hot Fuzz"/> 
<input type="checkbox" name="newsletter" value="Cold Fusion" /> 
<input type="checkbox" name="accept" value="Evil Plans" /> 

jq代码:

$("input[name$='letter'][value$='zz']").attr("checked","true");支持多条件操作 

在jquery中,当使用

$(”input[name='metaId']“).val()

不能直接获得被选择的radio的值,只是获得 radio标签的第一个值,这可能jquery使用xpath语言了进行查找有关,而我们通常是想获得被选中的radio的值,有以下几种方法:

1,使用$(”input[name='metaId']:checked”).val()获得 //name代表radio中name属性名 

2,使用$(”:radio:checked”).val()获得 //限制页面只有一组radio标签

二.根据标签选择器以及父子节点获取指定元素

1. 根据下标获取元素

<div> 
    <p>0</p> 
    <p>1</p> 
    <p>2</p> 
    <p>3</p> 
    <p>4</p> 
    <p>5</p> 
    <p>6</p> 
    <p>7</p> 
</div>

jq代码

<script type="text/javascript"> 
    $(function(){ 
        $("p").eq(2).css("color","red"); 
        $("p").eq(3).css("color","red"); 
    }) 
</script> 

2. 获取指定条件一致和指定范围的元素

<div> 
    <p>0</p> 
    <p>1</p> 
    <p class="center">2</p> 
    <p class="center">3</p> 
    <p>4</p> 
    <p>5</p> 
    <p>6</p> 
    <p>7</p> 
</div> 

jq代码

<script type="text/javascript"> 
    $(function(){ 
        $("p").filter('.center').css("color","red"); 
    }) 

    $(function(){ 
        $("p").slice(5,7).css("color","yellow"); 
    }) 
</script> 

3.获取与条件表达式一致的元素

<div> 
    <p>0</p> 
    <p>1</p> 
    <p class="center">2</p> 
    <p class="center">3</p> 
    <p>4</p> 
    <p class="aa">5</p> 
    <p>6</p> 
    <p>7</p> 
</div> 

jq代码

<script type="text/javascript"> 
    jQuery(function(){ 
        $("p").each(function(){ 
            switch(true){ 
                case $(this).is(".center"): 
                    $(this).css("color","red"); 
                    break; 
                case $(this).is(".aa"): 
                    $(this).css("color","yellow"); 
                    break; 
            } 
        }) 
    }) 
</script>

4.获取元素的上一个元素和下一个元素

<div id="aa"> 
    <p>1号</p> 
    <p class="yes">2号</p> 
    <p>3号</p> 
    <p>4号</p> 
    <p>5号</p> 
    <p class="yes">6号</p> 
    <p class="yes">7号</p> 
</div> 

jq代码

//获取元素的下一个元素 
jQuery(function(){ 
    $("p").next(".yes").css("color","red"); 
}) 

//获取元素的上一个元素 
jQuery(function(){ 
    $("p").prev(".yes").css("color","red"); 
}) 

5.获取元素的父元素和子元素

<div id="aa"> 
    <p>1号</p> 
    <p class="yes">2号</p> 
    <p>3号</p> 
    <p>4号</p> 
    <p>5号</p> 
    <p class="yes">6号</p> 
    <p class="yes">7号</p> 
</div> 

jq代码

//获取元素的父元素 
jQuery(function(){ 
    $("p").parent().css("color","red"); 
}) 
//获取元素的子元素 
jQuery(function(){ 
    $("#aa").children(".yes").css("color","red"); 
}) 
  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值