jQuery 选择器中 :last 表示最后一个元素,所以表示含有某类属性的最后一个元素可用如下代码表示
$("test-class:last") // 表示最后一个属于test-class类的元素示例如下:
创建Html元素
<div class="top"><ul>
<li>list-1</li>
<li class="selected">list-2</li>
<li class="selected">list-3</li>
<li>list-4</li>
<li class="selected">list-5</li>
</ul>
<span>红色列表项表示属于selected类,d出框显示了最后一个属于selected类的元素的内容</span>
</div>
设置css样式
divtop{margin:50px;padding:10px;width:300px;height:250px;border:2px dashed #ebbcbe;}li{padding:5px;}
liselected{color:red;font-weight:bold;}
span{color:#999;}
编写jquery代码
$(function(){$("ul")click(function() {
alert($("liselected:last")text());
});
})
观察显示效果
js获取html元素的方式
+通过ID获取:getElementById('id属性值')
+通过标签名:getElementsByTagName('标签名')
+通过类名:getElementsByClassName('类名')
+通过name属性:getElementsByName('name属性值')
+通过选择器获取一个元素:querySelector
+通过选择器获取一组元素:querySelectorAll
1获取id值为d1的html元素
将获取到的html元素称为DOM节点对象,必须传参数,参数是string类型,是获取元素的id。返回值只获取到一个元素,没有找到返回null。
2通过标签名:getElementsByTagName('标签名')
参数是是获取元素的标签名属性,不区分大小写,根据标签名获取html元素, 返回的是一个数组(伪数组)
通过类名:getElementsByClassName('类名')
参数是元素的类名,返回值是一个类数组,没有找到返回空数组。
通过类名:getElementsByClassName('类名')
必须传参数,参数是是获取元素的name属性,返回值是一个类数组,没有找到返回空数组。
通过选择器获取一个元素:querySelector
参数是选择器,返回值只获取到第一个元素。
通过选择器获取一组元素:querySelectorAll
参数是选择器,返回值是一个数组。
1、比如我们要得到或者获取到这个div元素。
2、我们就可以这样做,使用$("div"),这就是直接通过元素名来获取,注意要加引号哦。
3、或者你可以给元素添加类,如图,我就加了一个bd类。
4、然后我们这样$("bd")也是可以得到div元素的哦,注意类名是需要一个点的哦。
5、此外,id也是一个不错的方法,不过id只能有一个,不能重名哦。
6、jQuery中id要加#号才会有效哦。
7、最后我就整理好jQuery一些比较常用的获取元素的方法。
实现方法:在jquery代码中,首先使用attr()方法获取某元素的class,然后使用addClass()方法为另一个元素添加这个class,或者使用attr()方法为另一个元素的class赋值。下面进行实例演示:
1、新建一个HTML文件,输入如下的HTML结构。为了演示本问题,假设了一个带有背景色样式的A元素和一个红色的B元素,实现在点击按钮后将A元素的类样式(背景色)应用到B元素上。
<style>
red{color:red !important;} /红色css样式/
bg_green{background:#00cc00;} /背景色类样式/
</style>
<div id="test">
<div id="a" class="bg_green">A(我是bg_green类)</div>
<div id="b" class="red">B(我是red类)</div>
</div>
三个 根据id获取 getElementById
根据标签名获取 getElementByTagName
根据class获取 getElementByClassname
以上就是关于JQUERY怎么获取一个类中的最后一个元素。全部的内容,包括:JQUERY怎么获取一个类中的最后一个元素。、js获取html元素的方式、Jquery如何获得div下的元素等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)