当前位置 : 主页 > 网页制作 > JQuery >

jquery获取元素的方法

来源:互联网 收集:自由互联 发布时间:2021-06-15
一.根据标签属性或属性值获取 1.根据属性获取元素 比如要获取页面p标签中属性有id的元素 代码如下: $("p[id]").css("color","red"); 1 2.根据属性值获取元素 特殊符号 $ , ! , * , @ , ^ 的灵

一.根据标签属性或属性值获取
1.根据属性获取元素
比如要获取页面p标签中属性有id的元素

代码如下:

$("p[id]").css("color","red");
1
2.根据属性值获取元素
特殊符号 $ , ! , * , @ , ^ 的灵活使用。

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

<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
1
2
3
jq代码:

$("input[name$=‘letter‘]")
1
获取结果:

[ <input name="newsletter" />, <input name="jobletter" /> ]
1
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" />
1
2
3
jq代码:

$("input[name!=‘newsletter‘]").attr("checked", true);
1
结果:

[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]
1
2.3 *
[attribute*=value],匹配给定的属性是以包含某些值的元素。举个例子说明一下:

<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
1
2
3
4
jq代码:

$("input[name*=‘man‘]")
1
结果:

[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
1
2.4 @
匹配包含给定属性的元素。注意,在jQuery 1.3中,前导的@符号已经被废除!如果想要兼容最新版本,只需要简单去掉@符号即可。

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

<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
1
2
3
jq代码:

$("input[name^=‘news‘]")
1
结果:

[ <input name="newsletter" />, <input name="newsboy" /> ]
1
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" />
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. 根据下标获取元素
<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>
1
2
3
4
5
6
7
8
9
10
jq代码

<script type="text/javascript">
$(function(){
$("p").eq(2).css("color","red");
$("p").eq(3).css("color","red");
})
</script>
1
2
3
4
5
6
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>
1
2
3
4
5
6
7
8
9
10
jq代码

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

$(function(){
$("p").slice(5,7).css("color","yellow");
})
</script>
1
2
3
4
5
6
7
8
9
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>
1
2
3
4
5
6
7
8
9
10
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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>
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.获取元素的父元素和子元素
<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>
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 版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/baidu_37107022/article/details/73135960

网友评论