jquery通过任何选择器取得的对象都是jquery对象而不是JavaScript的dom对象不能用js的方法进行 *** 作而需要使用jquery对象支持的方法如果是通过class的话取得的是jquery对象数组\x0d\ps如果想把jquery对象装换为js对象可以用以下方法\x0d\1varobj=$('#xx')[0]获得dom对象\x0d\2对于数组\x0d\varobj=$('xx')each(function(){\x0d\alert(this)//这里this获得的就是每一个dom对象如果需要jquery对象需要写成$(this)\x0d\});
可以用jquery选择器的:eq选择器或者jquery遍历的eq()方法,下面带那给出ul下第4个li的内容
$("ul li:eq(3)") // 元素的index位置工0开始计数,所以这里的3实际为第4个元素$("ul")find("li")eq(3)
示例代码如下
创建Html元素
<div class="box"><span>点击按钮获取指定位置元素:</span><br>
<div class="content">
<li>梨子</li>
<li>李子</li>
<li>栗子</li>
<li>荔枝</li>
</div>
第 <input type="text" name="num"> 个li元素<input type="button" value="确定">
</div>
设置css样式
divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}divbox span{color:#999;font-style:italic;}
divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
li{margin:10px 0;}
input[type='text']{width:50px;padding:5px 10px;border:1px solid #ff9966;}
input[type='button']{height:30px;margin:10px;padding:5px 10px;}
编写jquery代码
$(function(){$("input:button")click(function() {
num = $("input:text[name='num']")val()-1; // index从0开始计算
str = $("divcontent")find("li")eq(num)text(); // eq()遍历方法
// 或者使用如下:eq()选择器的方法,单数之一要拼接字符串
// str = $("divcontent li:eq("+num+")")text() // :eq()选择器
alert(str);
})
})
观察效果
demo如下:
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>testJquery</title>
<script src="js/jquery-183js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<input type="text" id="input0" value="input元素0" />
<input type="button" id="input1" value="input元素1" />
<input type="checkbox" id="input2" value="input元素2" />
<input type="hidden" id="input3" value="input元素3" />
<br>
<button type="button" onclick="getInputByIndex(0)">获取第1个input元素</button>
<button type="button" onclick="getInputByIndex(1)">获取第2个input元素</button>
<button type="button" onclick="getInputByIndex(2)">获取第3个input元素</button>
<button type="button" onclick="getInputByIndex(3)">获取第4个input元素</button><br>
<button type="button" onclick="JudgeIndex('input3')">根据id判断元素input3的位置</button>
<script type="text/javascript">
function getInputByIndex(n){
var inps=$("input");
alert($(inps[n])val()+" , "+$(inps[n])prop("type"));
}
function JudgeIndex(elementId){
var inps=$("input");
var indx=-1;
for(var i in inps){
if(inps[i]id==elementId){
indx=i;
}
}
if(indx>-1){
alert("元素["+elementId+"]位置是["+indx+"]");
}else{
alert("元素["+elementId+"]未找到!");
}
}
</script>
</body>
</html>
我没有找到js获取元素宽度包含小数点的方法,但是在使用获取到的宽度时,为了保证与原来元素的宽度一致,我在工作中的解决方案是:
var oldw=$(oldElement)width();
$(newElement)css("width",oldw+"px");
$(oldElement)css("width",oldw+"px');
刚看到有getComputedStyle这个方法,还有这个getClientBoundingRect()。可以。
最近做项目,由于zepto使用的功能较少,想将zepto的功能用较少原生实现,其中有个实现zepto的offset()方法取到各种值的难为了我,我百度了下,大体网上千篇一律的这样写到
我本着试试看的态度将这个方法炒了上去,打印出值结果与我需要的值相差甚远,为此我仔细翻了下源码,源码见下面链接
源码
找到如下方法getBoundingClientRect,翻了下caniuse发现兼容性还好(本人移动端),故可以写成以下方式
如果要考虑兼容性,请仔细看zepto源码
另外上述
改成
也可以实现
jquery获取元素索引值index()方法:
jquery的index()方法
搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
如果不给
index()
方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。
如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。
复制代码代码如下:
foo
bar
baz
$('li')index(documentgetElementById('bar'));
//1,传递一个DOM对象,返回这个对象在原先集合中的索引位置
$('li')index($('#bar'));
//1,传递一个jQuery对象
$('li')index($('li:gt(0)'));
//1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置
$('#bar')index('li');
//1,传递一个选择器,返回#bar在所有li中的做引位置
$('#bar')index();
//1,不传递参数,返回这个元素在同辈中的索引位置。
jquery获取元素索引值index()示例
复制代码代码如下:
//用于二级或者三级联动
建站素材
jquery特效
懒人主机
前端路上
$("#nav
a")click(function(){
//四个经典的用法
var
index1
=
$("#nav
a")index(this);
var
index2
=
$("#nav
a")index($(this));
var
index3
=
$(this)index()
var
index3
=
$(this)index("a")
alert(index3);
return
false;
});
以上就是关于“jquery ”是如何通过 “class ”来获取元素的全部的内容,包括:“jquery ”是如何通过 “class ”来获取元素的、jquery 怎样获取某元素以下的第n个元素、JQuery获取第几个元素和判断元素在第几个等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)