首先，要用jquery获取到这个元素，用attr方法可以输出这个元素的标签属性。例如：
<div id='id1' class='class2'></div>
$('#id1') 获取到这个元素，有很多种获取元素方法，可参考jquery的文档。
$('#id1')attr('id')，就是获取到ID
$('#id1')attr('class')，就是获取到整个的class样式，多个样式可以自行用空格split一下。
思路：利用jQuery选择器直接根据类名获取对象→遍历对象→使用 attr() 方法获取id属性值。下面实例演示——获取所有class为test的元素的id值：
1、HTML结构
<div class="test" id="div_id">我的类是test，id是div_id</div><input type="text" class="test" id="input_id" value="我的类是test，id是input_id" />
<div class="test">我的类是test，没有id属性</div>
<li class="test" id="li_id">我的类是test，id是li_id</li>
<input type="button" value="确定">
2、jQuery代码
$(function(){$("input[type='button']")click(function() {
var ids = [];
$("test")each(function(index, el) {
var id = $(this)attr("id");
if(typeof(id)!=='undefined'){
idspush(id)
}
});
alert(ids);
});
});
3、效果演示
css方法：
1、取得第一个段落的color样式属性的值。
$("p")css("color");2、将所有段落的字体颜色设为红色并且背景为蓝色。
$("p")css({ color: "#ff0011", background: "blue" });<html><head>
<title>JQuery中如何获取样式属性的值</title>
<script type="text/javascript" src="jqueryjs"></script>
<style>
top {
background: url(Tupianjpg) no-repeat;
width: 75px;
height: 90px;
}
</style>
<script type="text/javascript">
$(function () {
var url = $("divtop")css("background-image");
alert(url);
})
</script>
</head>
<body>
<div class="top"></div>
</body>
</html>
<script type="text/javascript">
windowonload=function(){
//你必须给div设置id
var kk=documentgetElementById("在这填写div的id");
if(kkinnerHTML=="1"){
alert("div中的内容是1");
}else if(kkinnerHTML=="2"){
alert("div中的内容是2,我们可以把他设为其他值");
kkinnerHTML='<a href="#">我在里面放个链接</a>';
}
}
</script>
文本框属于表单字段，jQuery
提供了val()
方法用以设置或返回表单字段的值，语法为$(selector)val()。下面根据不同情形，演示获取div下面一个文本框的值的方法：
1、如果已知文本框的某些属性，例如id，class，name：
$("#demo_text")val();
//
直接根据id获取
$("#test
:textdemo_text")val();
//
根据class获取
$("#test
:text[name='demo_text']")val();
//
根据name获取
2、如果已知文本框的相对位置
$("#test
:text")first()val();
//
第一个
$("#test
:text")last()val();
//
最后一个
$("#test
:text")eq(1)val();
//
#test下的第2个文本框
以上就是关于如何用Jquery获取某一个Div的Class或者ID全部的内容，包括:如何用Jquery获取某一个Div的Class或者ID、jquery怎样在获取同一个div下的类的ID、JQuery中如何获取样式属性的值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）