“jquery ”是如何通过 “class ”来获取元素的

“jquery ”是如何通过 “class ”来获取元素的,第1张

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>

第&nbsp;<input type="text" name="num">&nbsp;个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获取第几个元素和判断元素在第几个等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9791150.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-02
下一篇 2023-05-02

发表评论

登录后才能评论

评论列表(0条)

保存