通过children方法,children("input:first-child")

1
2
$(this).children("input:first-child").val();
$(this).children("input:last-child").val();

通过>选择器,$(".items>input:first")

在这里转一篇《jQuery选择元素的方法大全》

1. 先说说通过位置选择的几个操作:

:first:默认情况下是相对整个页面来说的第一个,如:li:first表示整个页面的第一个li元素,而ul li:first表示整个页面的第一个li元素,并且是在ul下的子元素;

:last:同上了,只是是最后一个而已;

:first-
child:为每个父元素匹配第一个子元素,如li:first-child返回每个ul的第一个li元素。可以这样理解,页面中的元素有相同的父元素
的,并且里面又包含li元素的,那么就取第一个li元素,每个子类集合都要进行判断,直到找出所有符合要求的li元素;

:last-child:这个也与上面相对了,只是取的是最后一个;

:
only-
child:返回所有没有兄弟节点的元素,注意,文本元素不是,也就是说类似这样的<div>hello<a href="">jquery</a></div>,对于这段会选出<a>元素;对 于$(”label:only-child“)会选出是label元素,同时它是它父类唯一的子元素的label元素;

:nth-child(n):返回第n个子节点,n从1开始,如果n取0,那么就会选择所有的元素。如:[*]li:nth-child(2)返回li元素,并且该元素是其父元素的第二个子元素;

:nth-child(even|odd):返回偶数或奇数的子节点;

:nth-child(An+B):返回满足表达式An+B的所有子节点,比如3n+1返回所处位置为父节点子元素的是3的倍数加1的那个子元素;

:even:页面范围内的处于偶数位置的元素,如:li:even返回全部偶数li元素;

:odd:页面范围内的处于奇数位置的元素;

:eq(n):第n个匹配的元素(n从0开始),如:li:eq(3)返回整个页面的第四个li元素,ul li:eq(1)返回页面中第一个ul元素下的第二个li元素,注意:只匹配一次就返回了;

:gt(n):第n个匹配元素(不包括)之后的元素(n从0开始),如:ul:gt(2)返回从第3个ul开始的所有ul元素(含第三个);

:lt(n):第n个匹配元素(不包括)之前的元素(n从0开始),如:ul:lt(2)返回从第0个和第1个ul元素;

2. 利用css选择器进行选择:

元素标签名:比如说$(”a“)会选出所有链接元素;

#id:通过元素id进行选择,比如说$("#form1")会选择id为form1的元素;

.class:通过元素的CSS类来选择,比如说$(".boldstyle")会选择CSS为boldstyle类的元素;

标签
名#id.class:通过某类元素的id属性和class属性来选择,如:$(a#blog.boldStyle)会选择id为blog并且CSS类型
为.boldStyle类型的链接元素(<a id='blog' class='.boldStyle'>);

父标签名 子标签名.class:通过选择父标签下的某种CSS类型的子元素,如:$(p a.redStyle)会选择p段落元素中的链接子元素a,且其css类型为.redStyle;

3. 通过子选择器,容器选择器和属性选择器进行选择:

*:匹配所有的元素,比如说:$(*)会把页面中的所有元素都返回;

E:匹配标签名为E的所有元素,如$("a")返回所有链接元素;

E F:匹配父元素E下的标签名为F的所有子元素(F可以为E的子类的子类,甚至更远);

E>F:匹配父元素E下的所有标签名为F的直接子元素;

E+F:匹配所有标签名为F的元素,并且有E类型的兄弟节点在该F元素之前(E,F紧挨着);

E~F:匹配前面是任何兄弟节点E的所有元素F(E,F不必紧挨着);

E:has(F):匹配标签名为E,至少有一个标签名为F的后代节点的所有元素E;

E.C:匹配带有类名C的所有元素E。.C等效于*.C;

E#I:匹配id为I的所有元素E,#I等效于*#I;

E[A]:匹配带有属性A的所有元素E;

E[A=V]:匹配所有属性A的值为V的元素E;

E[A^=V]:匹配所有元素E,且A的属性值是V开头的;

E[A$=V]:匹配所有元素E,且A的属性值是V结尾的;

E[A*=V]:匹配所有元素E,且A的属性值中包含有V;

4.利用jQuery自定义的选择器进行选择:

:button:选择任何按钮类型的元素,包括input[type=submit]等等;

:checkbox:选择复选框元素;

:file:选择所有文件类型元素,即input[type=file];

:image:选择表单中的图像元素,即input[type=image],注意此处和前面根据标签img选择图像有点不同哈;

:input:选择表单元素,如<input>,<select>,<textarea>,<button>等;

:radio:选择单选按钮元素;

:reset:选择复位按钮元素,如input[type=reset],button[type=reset];

:submit:选择提交按钮元素;

:text:选择文本字段元素,即input[type=text];

:animated:选择当前处于动态控制下的元素;

:contains(hello):选择包含文本hello的元素;

:header:选择标题元素,如<h1>;

:parent:选择拥有后代节点(包括文本)的元素,而排除空元素;

:selected:选择已选中的选项元素;

:visible:选择可见元素;

:enable:选择界面上已经可以使用的表单元素;

:disabled:选择界面上被禁用的表单元素;

:checked:选择已选中的复选框或单选按钮

jquery如何获取第一个或最后一个子元素?的更多相关文章

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

      jquery如何获取第一个或最后一个子元素? 通过children方法,children("input:first-child") $(this).children(" ...

  2. js jquery获取当前元素的兄弟级 上一个 下一个元素 jquery如何获取第一个或最后一个子元素

    var chils= s.childNodes;  //得到s的全部子节点 var par=s.parentNode;   //得到s的父节点 var ns=s.nextSbiling;   //获得 ...

  3. jquery 如何获取有多个class名的元素

      1.情景展示 如何使用jquery获取带有多个class样式的元素? 2.解决方案 $("p.opinion.mb15.gray2e.max2line.mr20:contains('大摩 ...

  4. 使用jquery实现获取除this(当前选定)以外的元素

    今天做项目时,要求完成功能评价的分类,即好评,差评,中评.遇到一个问题,如何在选定一个评论类型时,该div颜色改变,其他评论类型的div颜色不变. 在使用$(this).attr()时,表示当前元素的 ...

  5. jQuery中获取特定顺序子元素(子元素种类不定)的方法

    提出问题:只已知父元素和父元素中子元素的次序,怎么通过jQuery方法获得该元素? <p>第一部分:</p> <ul> <li>1</li> ...

  6. Jquery 获取第一个子元素

    <ul>  <li>John</li>  <li>Karl</li>  <li>Brandon</li></u ...

  7. Jquery 获取所有对象的第一个子元素

    转自:http://blog.sina.com.cn/s/blog_5fdbd0410100pmnn.html <ul>  <li>John</li>  <l ...

  8. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  9. jQuery常用方法一览及JQuery选择器获取表格中按钮所在行的其他列值

    Attribute: $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式$(”img”).attr({src:”test.jpg”,alt:”test Image”}); ...

随机推荐

  1. Java笔记:文件夹操作

    创建目录: File类中有两个方法可以用来创建文件夹: mkdir( )方法创建一个文件夹,成功则返回true,失败则返回false.失败表明File对象指定的路径已经存在,或者由于整个路径还不存在, ...

  2. jQuery- 表单验证插件-Validation

      ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法, ...

  3. 51nod1459(带权值的dijkstra)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1459 题意:中文题诶- 思路:带权值的最短路,这道题数据也没 ...

  4. Toad for Sqlserver

    # 设置制表符 从sqlserver拷贝的存储过程粘贴到Toad,代码变得不整齐了,这就需要设置下制表符的大小.

  5. 一个 Q-learning 算法的简明教程

    本文是对 http://mnemstudio.org/path-finding-q-learning-tutorial.htm 的翻译,共分两部分,第一部分为中文翻译,第二部分为英文原文.翻译时为方便 ...

  6. 解决Trauncate table没权限

    错误信息Cannot find the object "TableName" because it does not exist or you do not have permis ...

  7. 从零起步搭建Wordpress个人博客——Windows 平台篇(上)

    本文以 Windows Server R2 64bit 标准版 为基础,其他windows版本可能会略有不同. 参考资料: https://codex.wordpress.org/Installing ...

  8. linux进程通信

    e14: 进程间通信(进程之间发送/接收字符串/结构体): 传统的通信方式: 管道(有名管道 fifo,无名管道 pipe) 信号 signal System V(基于IPC的对象):         ...

  9. 【Apache RocketMQ】RocketMQ捐赠给Apache那些鲜为人知的故事-转自阿里中间件

    序言 今年的双十一对阿里巴巴中间件消息团队来说,注定是个不平凡的日子.在这一天,稳定性小组重点攻克的低延迟存储解决方案成功地经受住了大考.整个大促期间,99.996%的延迟落在了10ms以内,极个别由 ...

  10. JAVA基础研究

    package Test; public class L3_1 { public static void main(String[] args) { C c1=new C(100); C c2=new ...