jquery如何获取第一个或最后一个子元素

!DOCTYPE html

专注于为中小企业提供成都网站建设、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业城关免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了1000+企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

html lang="en"

head

meta charset="UTF-8"

titleDocument/title

script src="js/jquery-3.2.0.min.js"/script

style

.bg{

color: #fff;

background: #ffda44;

}

li{

}

/style

/head

body

p获取第一个跟最后一个子元素并为他们增加样式./p

ul

li我是1号/li

li我是2号/li

li我是3号/li

li我是4号/li

li我是5号/li

/ul

button class="btn1"确定/button

button class="btn2"获取第三个子元素/button

script

$(function(){

// 为按钮绑定点击事件

$("button.btn1").click(function(event) {

//获取第一个子元素

$("ul").children("li:first").addClass('bg');

//获取最后一个子元素

$("ul").children("li:last").addClass('bg');

});

$("button.btn2").click(function(event) {

//获取第三个子元素

$("ul").children().eq(2).addClass('bg');

});

})

/script

/body

/html

jquery 选择后有多个元素取第一个

我们经常能够用jquery

获取一组dom对象，但是我们只想操作第一个元素时，有什么好方法来用

jquery

第一个元素的呢，用jquery

第一个元素很简单，用到了筛选的方法，假设有这样一段一组列表：

ul

li11/li

li22/li

li33/li

li44/li

li55/li

/ul

我们要取到11

所在的

li

元素，有一下几种方法：

$('ul').find('li:first');

$('ul

li:first');

$('ul

li').eq(0);

这几种方法，就是常用的

jquery

取得第一个元素的方法

转载，仅供参考。

jquery如何获取第一个子元素

下面写个例子来获取id为demo的元素的第一个子元素。

!--加载jquery--

script src=""/script

script

$(function(){//页面加载完成时进入

var firstChild=$("#demo:first");//用选择器的方式获取第一个子元素

firstChild.css('color','red');//将第一个子元素中的文字变为红色，可以看到只有“111”是红色的

});

/script

div id="demo"span111/spanspan222/spanspan333/span/div

说明一下以上例子中用到选择器

#demo是id选择器获取id为demo的元素

是子选择器获取所有子级

:first是首项选择器获取第一个元素

三者结合起来就是获取id为demo的元素的所有子元素中的第一个元素。

其实jquery的选择器有很多，包括：

:last获取最后一个元素

:eq(index)获取第index个选择器

更多可以直接百度搜索“jquery选择器”来查看。

jquery怎么获取一个元素指定属性的值

$(this).parent().find("i[isShow='fou']")

该元素就是属性isshow为fou的i元素，注意引号。

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（ 或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的模块可以分为：入口模块、底层支持模块和功能模块。其核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口。

具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jquery如何获取每一行的最后一列的第一个元素

1.遍历要操作的table的tr；

2.通过选择器td:last获取到本行最后一个单元格td；

3.通过first()获取到第一个元素；

示例代码：

html

head

title/title

script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"/script

script type="text/javascript"

$(document).ready(function () {

var obj;

$("tr").each(function () {

obj = $(this).find("td:last").first();

console.log($(obj).html());

});

});

/script

/head

body

table

tr

td1/td

td2/td

tdh1aaaa/h13/td

/tr

tr

td4/td

td5/td

tdh3bbbb/h36/td

/tr

/table

/body

/html

jquery怎样获取第一个父元素

我们的目的是通过 id 为 item1 的便签a取到 class 为 parent1 的ul元素，有以下几种方法：

1、parent([expr])

取得一个包含着所有匹配元素的唯一父元素的元素集合。

你可以使用可选的表达式来筛选。

代码如下

pre class="brush: js;"$('#item1').parent().parent('.parent1');/pre

2、:parent

匹配含有子元素或者文本的元素

代码如下

pre class="brush: js;"$('li:parent');/pre

3、parents([expr])

取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

代码如下

pre class="brush: js;"$('#items').parents('.parent1');/pre

4、closest([expr])

closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。

closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后 就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0 个，1个，或者多个元素。

closest对于处理事件委派非常有用。

pre class="brush: js;"$('#items1').closest('.parent1');/pre

网站栏目：jquery取第一个元素,jq获取第一个元素
标题路径：http://chengdu.cdxwcx.cn/article/dsigges.html