jquery第六期：位置选择器

最新推荐文章于 2024-05-18 21:57:13 发布
最新推荐文章于 2024-05-18 21:57:13 发布
阅读量43 收藏
点赞数
文章标签： javascript ViewUI 
<html>
<head>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
   $(function()
   {    
	alert($("tr:first").html());
	alert($("tr:last").html())
   });
</script>
</head>
<body>
<table width="300" border="1" align="center" >
    <tr>
	   <td>用户标识</td>
	   <td>用户姓名</td>
	   <td>用户年龄</td>
	   <td>用户密码</td>
    </tr>
    <tr>
	   <td>A</td>
	   <td>张三</td>
	   <td>12</td>
	   <td>hehe1</td>
    </tr>
	<tr>
	   <td>B</td>
	   <td>李四</td>
	   <td>13</td>
	   <td>hehe2</td>
    </tr>
	<tr>
	   <td>C</td>
	   <td>王五</td>
	   <td>14</td>
	   <td>hehe3</td>
    </tr>
	<tr>
	   <td>D</td>
	   <td>牛六</td>
	   <td>15</td>
	   <td>hehe4</td>
    </tr>
</body>
</html>

tr：first 第一个与tr标签匹配 

tr：last 最后一个与tr标签匹配

运行结果，连续两个提示框：



first-child：

 

<html>
<head>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
   $(function()
   {    
	$("tr:first-child").css("color","red");
   });
</script>
</head>
<body>
<table width="300" border="1" align="center" >
    <tr>
	   <td>用户标识</td>
	   <td>用户姓名</td>
	   <td>用户年龄</td>
	   <td>用户密码</td>
    </tr>
    <tr>
	   <td>A</td>
	   <td>张三</td>
	   <td>12</td>
	   <td>hehe1</td>
    </tr>
	<tr>
	   <td>B</td>
	   <td>李四</td>
	   <td>13</td>
	   <td>hehe2</td>
    </tr>
	<tr>
	   <td>C</td>
	   <td>王五</td>
	   <td>14</td>
	   <td>hehe3</td>
    </tr>
	<tr>
	   <td>D</td>
	   <td>牛六</td>
	   <td>15</td>
	   <td>hehe4</td>
    </tr>
</table>
 </body>
</html>


获取第一个匹配的tr

 

运行结果：


last-child：

<html>
<head>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
   $(function()
   {    
	$("tr:last-child").css("color","red");
   });
</script>
</head>
<body>
<table width="300" border="1" align="center" >
    <tr>
	   <td>用户标识</td>
	   <td>用户姓名</td>
	   <td>用户年龄</td>
	   <td>用户密码</td>
    </tr>
    <tr>
	   <td>A</td>
	   <td>张三</td>
	   <td>12</td>
	   <td>hehe1</td>
    </tr>
	<tr>
	   <td>B</td>
	   <td>李四</td>
	   <td>13</td>
	   <td>hehe2</td>
    </tr>
	<tr>
	   <td>C</td>
	   <td>王五</td>
	   <td>14</td>
	   <td>hehe3</td>
    </tr>
	<tr>
	   <td>D</td>
	   <td>牛六</td>
	   <td>15</td>
	   <td>hehe4</td>
    </tr>
</table>
</body>
</html>


运行结果：

 


nth-child（n）：

 

<html>
<head>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
   $(function()
   {    
	$("tbody tr:nth-child(2)").css("color","red");
   });
</script>
</head>
<body>
<table width="300" border="1" align="center" >
    <tr>
	   <td>用户标识</td>
	   <td>用户姓名</td>
	   <td>用户年龄</td>
	   <td>用户密码</td>
    </tr>
	<tbody>
    <tr>
	   <td>A</td>
	   <td>张三</td>
	   <td>12</td>
	   <td>hehe1</td>
    </tr>
	<tr>
	   <td>B</td>
	   <td>李四</td>
	   <td>13</td>
	   <td>hehe2</td>
    </tr>
	<tr>
	   <td>C</td>
	   <td>王五</td>
	   <td>14</td>
	   <td>hehe3</td>
    </tr>
	<tr>
	   <td>D</td>
	   <td>牛六</td>
	   <td>15</td>
	   <td>hehe4</td>
    </tr>
	</tbody>
</table>
</body>
</html>

运行结果：

 



 

weixin_34365417
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Perfect-DateTimePicker：日期和时间选择器的jQuery插件
01-30
用于日期和时间选择器的jQuery插件（基于jQuery的日期时间选择器） 演示： : 功能（特性） 简单交互。 简洁的界面。 Bootstrap样式。 预览（预览图） API（接口） options（属性配置） 财产 类型（类型） ...
jQuery中 :first 和 :last 选择器诡异问题
Java仗剑走天涯
06-17 2440
jQuery中 :first 和 :last 选择器诡异问题 last作用有效次数问题
jquery奇偶选择器_jQuery选择器
weixin_36486395的博客
12-31 821
1.基本选择器(3种):$("标签名"),如$("p")是选取了所有的p标签节点$("#id名"),如$("#test")是选取了id为test的标签节点$(".class名"),如$(".test")是选取了所有class为test的标签节点上面的$("标签名")和$(".class名")返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,如eq,gt,lt等等.*：匹配所有元素2.组选择...
jQuery 入门&选择器
SAME_LOVE的博客
03-23 527
jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
jquery简单选择器:属性过滤器
03-04 167
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script> <script type="text/javascript".
猴子也能学会的jQuery第四期——jQuery选择器大全
黛琳ghz的博客，期待你的关注。
11-01 449
上期讲到，编写了第一个jQuery程序，在上述代码中，使用$("div")来获取div元素，这种方式就是通过jQuery选择器来获取元素，语法为$("选择器")。在$()函数中传入的字符串“div”就是一个选择器。由于原生的JavaScript获取元素的方式很多，而且兼容性也不一致，jQuery为我们提供了更强大的选择器。
jQuery选择器上机练习题及答案.rar
12-02
（24）选择表格中第3行,标题行不算(要求用nth-child()过滤器) 上机任务3 用chrome打开dom.sample2.html页面，该页面中内嵌有几个CSS类：.red .green .blue .yellow .thickBorder .seeThrough 在chrome的控制台...
jQuery Selectors(选择器)的使用(六、属性篇)
01-19
本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。 本篇讲解：[attribute],[attribute=value],[attribute!... 运行后，请刷新下代码，以便加载jquery
jquery.caret:jQuery插件来操纵输入和textarea元素的插入符位置和选择范围
05-12
元素的光标位置和选择范围，以及突出显示页面上的文本。 浏览器兼容性 经过测试： IE6 + Chrome合金 火狐浏览器 特征 获取/设置光标位置和所选范围 在光标位置插入文本 用文字替换所选范围 处理浏览器之间的行尾...
《JQuery 能干点啥~》第6讲 CSS 选择器
04-07
NULL 博文链接：https://mmmzzc.iteye.com/blog/1579593
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 195
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 231
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 755
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
setImmediate不能在浏览器中执行
Keep trying, keep going
05-14 163
的延迟时间设置为 0，但实际的延迟可能会因浏览器的最小延迟时间限制而稍有不同。函数实现类似的效果。函数不是浏览器的标准 API，而。
Vue3详细讲解
贫僧法号依平
05-15 853
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。
echarts的柱状图使用
qq_45331969的博客
05-15 187
【代码】echarts的柱状图使用。
vue3专栏项目 -- 五、权限管理（下）
m0_64931189的博客
05-15 819
我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
最新发布
SongZhengxing_的博客
05-18 180
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
从零开始开发企业培训APP：在线教育系统源码剖析
meihusdk的博客
05-14 355
开发企业培训APP并非一朝一夕之功，需要全面的需求分析、合理的技术选型和系统的架构设计。在实际开发过程中，应不断根据用户反馈优化系统功能和用户体验。希望本文的剖析能够为有志于开发企业培训APP的开发者提供一些启示和帮助。
jquery 选择器
11-21
以下是一些常见的jQuery选择器： 1. 根据元素类型选择：$("p") 选取所有 <p> 元素。 2. 根据元素ID选择：$("#id") 选取 ID 为 "id" 的元素。 3. 根据元素类选择：$(".class") 选取所有 class 为 "class" 的元素。 4....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值