700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > jquery按下标获取元素_jquery获取元素的方法

jquery按下标获取元素_jquery获取元素的方法

时间:2021-12-12 17:01:17

相关推荐

jquery按下标获取元素_jquery获取元素的方法

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

1.根据属性获取元素

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

代码如下:

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

1

2.根据属性值获取元素

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

2.1 $

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

1

2

3

jq代码:

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

1

获取结果:

[ , ]

1

2.2 !

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

1

2

3

jq代码:

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

1

结果:

[ ]

1

2.3 *

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

1

2

3

4

jq代码:

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

1

结果:

[ , , ]

1

2.4 @

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

2.5 ^

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

1

2

3

jq代码:

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

1

结果:

[ , ]

1

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

1

2

3

jq代码:

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

1

在jquery中,当使用

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

1

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

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

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

1

2

3

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

1. 根据下标获取元素

0

1

2

3

4

5

6

7

1

2

3

4

5

6

7

8

9

10

jq代码

$(function(){

$("p").eq(2).css("color","red");

$("p").eq(3).css("color","red");

})

1

2

3

4

5

6

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

0

1

2

3

4

5

6

7

1

2

3

4

5

6

7

8

9

10

jq代码

$(function(){

$("p").filter('.center').css("color","red");

})

$(function(){

$("p").slice(5,7).css("color","yellow");

})

1

2

3

4

5

6

7

8

9

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

0

1

2

3

4

5

6

7

1

2

3

4

5

6

7

8

9

10

jq代码

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;

}

})

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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

1号

2号

3号

4号

5号

6号

7号

1

2

3

4

5

6

7

8

9

jq代码

//获取元素的下一个元素

jQuery(function(){

$("p").next(".yes").css("color","red");

})

//获取元素的上一个元素

jQuery(function(){

$("p").prev(".yes").css("color","red");

})

1

2

3

4

5

6

7

8

9

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

1号

2号

3号

4号

5号

6号

7号

1

2

3

4

5

6

7

8

9

jq代码

//获取元素的父元素

jQuery(function(){

$("p").parent().css("color","red");

})

//获取元素的子元素

jQuery(function(){

$("#aa").children(".yes").css("color","red");

})

1

2

3

4

5

6

7

8

————————————————

版权声明:本文为CSDN博主「Java仗剑走天涯」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

原文链接:/baidu_37107022/article/details/73135960

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。