查找TR内的所有TD元素并使用jquery应用背景颜色 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

与Ajax同样重要的jQuery（1）

² 设置含有文本内容 ”传智播客” 的 div 的字体颜色为红色 ² 设置没有子元素的div元素文本内容 ”这是一个空DIV“ ² 设置包含p元素的 div 背景色为黄色 ² 设置所有含有子元素的...： ² 为表单中所有隐藏域添加 class属性，值为itcast ² 设置table所有可见 tr 背景色黄色 ² 设置table所有隐藏tr 字体颜色为红色，显示出来，并输出tr中文本值 <...","yellow"); // 设置table所有隐藏tr 字体颜色为红色，显示出来，并输出tr中文本值 $("tr:hidden").each(function(){ alert($(this)....[attribute *= value] 选取属性值包含value的所有元素练习6： ² 设置所有含有id属性的div，字体颜色红色 ² 设置所有class属性值含有itcast元素背景色为黄色...下3的倍数行，字体颜色为红色 ² 表格奇数行背景色黄色 ² 表格偶数行背景色灰色 ² 只有一个td的 tr元素字体为蓝色 <scripttype="text/javascript"src

11.5K6 0

学习jQuery这一篇就够了

目前超过 90% 的网站都使用了 jQuery 库，jQuery 的宗旨：写的更少，做得更多！...="en"]').css('background', 'red'); 需求描述：查找 hreflang 属性值是 en 或者以 en 开头的所有超链接，设置其背景为红色的背景颜色为红色，字体颜色为白色我是div $('div').css({ 'background': 'red', 'color': '...white' }); 需求描述：获取 div 的背景颜色和字体颜色并输出我是div console.log...需求描述：查找所有 id 为 two 的 li 标签设置其背景为红色列表项1 列表项2 列表项3</li

3.5K5 0

您找到你想要的搜索结果了吗？

是的

没有找到

脚本语言知识总结.

练习4： ² 设置含有文本内容 ”传智播客” 的 div 的字体颜色为红色 ² 设置没有子元素的div元素文本内容 ”这是一个空DIV“ ² 设置包含p元素的 div 背景色为黄色 ² 设置所有含有子元素的...，值为itcast ² 设置table所有可见 tr 背景色黄色 ² 设置table所有隐藏tr 字体颜色为红色，显示出来，并输出tr中文本值 <script type="text/javascript...","yellow"); // 设置table所有隐藏tr 字体颜色为红色，显示出来，并输出tr中文本值 $("tr:hidden").each(function(){ alert($(this)....[attribute *= value] 选取属性值包含value的所有元素练习6： ² 设置所有含有id属性的div，字体颜色红色 ² 设置所有class属性值含有itcast元素背景色为黄色...，但是为了提高jQuery的查询效率，可以结合jQuery的内置查找函数一起使用 ①：查询 children([expr]) 获取指定的子元素 find(expr) 获取指定的后代元素 parents

6.7K13 0

【Java 进阶篇】JQuery 案例：优雅的隔行换色

隔行换色是一种简单却十分实用的设计手法，它通过改变表格、列表等元素的背景色，使页面看起来更加清晰有序。在 JQuery 的世界中，实现隔行换色是一项非常简单而有效的任务。...JQuery 隔行换色实现原理隔行换色的实现原理很简单，即通过 JQuery 为目标元素添加或移除特定的样式，使得相邻行具有不同的背景色。...下面是一个基本的实现步骤：选择目标元素：使用 JQuery 选择器选择需要隔行换色的目标元素，可以是表格的行、列表的项等。使用each()方法遍历选中的元素。...JQuery 隔行换色的实际应用隔行换色不仅可以应用在表格上，还可以用于列表、文章内容等各种元素，使页面看起来更加清晰有序。...总结通过本篇博客，我们详细地学习了如何使用 JQuery 实现隔行换色，提升页面的美观性和用户体验。通过简单的代码示例，我们了解了隔行换色的基本实现原理和实际应用场景。

6063 0

JQuery 隔行换色实现

隔行换色是一种简单却十分实用的设计手法，它通过改变表格、列表等元素的背景色，使页面看起来更加清晰有序。在 JQuery 的世界中，实现隔行换色是一项非常简单而有效的任务。...JQuery 隔行换色实现原理隔行换色的实现原理很简单，即通过 JQuery 为目标元素添加或移除特定的样式，使得相邻行具有不同的背景色。...下面是一个基本的实现步骤：选择目标元素：使用 JQuery 选择器选择需要隔行换色的目标元素，可以是表格的行、列表的项等。使用each()方法遍历选中的元素。...JQuery 隔行换色的实际应用隔行换色不仅可以应用在表格上，还可以用于列表、文章内容等各种元素，使页面看起来更加清晰有序。...总结通过本篇博客，我们详细地学习了如何使用 JQuery 实现隔行换色，提升页面的美观性和用户体验。通过简单的代码示例，我们了解了隔行换色的基本实现原理和实际应用场景。

9051 0

与Ajax同样重要的jQuery（2）

表单选中元素配合基本过滤选择器，缩小选中的范围 4.jQuery的DOM操作使用jQuery的九种选择器可以基本选中需要操作的对象，但是为了提高jQuery的查询效率，可以结合jQuery的内置查找函数一起使用...]) 获取下一个兄弟元素 prev([expr]) 获取前一个兄弟元素 siblings([expr]) 获取所有兄弟元素在XML 解析中 find 方法使用最多对查找结果进行遍历操作 each(function.../jquery-1.8.3.min.js"> $(function(){ // 点击button，使一个div的背景颜色变为...练习1： ² 为页面内所有p 元素绑定一次性事件，点击打印p元素中内容 ² 页面内有两个按钮，点击按钮1，触发按钮2的 click事件执行 jquery-1.8.3.min.js"> $(function(){ //为页面内所有p 元素绑定一次性事件，点击打印

7.4K5 0

JQuery 入门学习(完结)

最后一篇是对Jquery的实际应用，以及一些平时我注意到的细节。最后对Jquery进行总结。 ...在这里，我来说一下我们获得的这个DOM对象。在Jquery中，有对html操作的一些函数，比如$(xx).html()，获取某元素内的内容。...比如，有的同学直接使用event.target.css('background-color','red')，想这样更改它的背景颜色。这样浏览器是会报错的，错误是td对象不含有css方法。 ...所以大家可以看到，我使用的是DOM中的方法event.target.parentNode.style.backgroundColor，首先用parentNode获得td元素的父元素tr元素（因为我是要一行都改变颜色...，而不是只让鼠标所在的格子改变颜色），再用style属性，改变tr元素的样式。

1.3K1 0

jQuery的基本操作

>] 　　:header //概述 //匹配如：h1,h2,h3之类的标题元素描述给页面内所有标题加上背景颜色 HTML代码 Header 1 Contents 1<...描述查找所有包含有子元素或者文本的td元素 HTML代码 tr>td>Value 1td>td>td>tr> tr>td>Value...:hidden //概述 //匹配所有不课件元素,或者type为hidden的元素描述查找隐藏的tr HTML代码 tr style="display:none">...="display:none">td>Value 1td>tr>] 　　:visible //概述 //匹配所有可见的元素描述查找所有可见的tr元素 HTML代码 ...; 回调函数描述使用函数来设置所有匹配元素的内容 jQuery代码 $("p").html(function(n){ return "这个p元素的 index是:" +n; })

8.8K2 0

jQuery 选择器使用方法

id选择器（指定id元素）将 id="divOne" 的元素背景色设置为红色。...（id选择器返单个元素） $('#divOne').css('background', 'red'); class选择器（遍历css类元素）将 class="divTwo" 的元素背景色设为蓝色 $(...* 选择器（遍历所有元素）将ul下的所有元素字体设置成黄色 $('ul *').css('color', 'yellow'); 并列选择器将 id = spanOne 或 class = 'pTwo...', 'red'); // 偶数行颜色 $('tr:odd').css('background', 'blue'); // 奇数行颜色 :eq(x) （取指定索引的元素...='test3' 元素的span设置背景色为红色 <!

5.1K1 0

jQuery 选择器使用方法

id选择器（指定id元素）将 id="divOne" 的元素背景色设置为红色。...（id选择器返单个元素） $('#divOne').css('background', 'red'); class选择器（遍历css类元素）将 class="divTwo" 的元素背景色设为蓝色 $(...* 选择器（遍历所有元素）将ul下的所有元素字体设置成黄色 $('ul *').css('color', 'yellow'); 并列选择器将 id = spanOne 或 class = 'pTwo...', 'red'); // 偶数行颜色 $('tr:odd').css('background', 'blue'); // 奇数行颜色 :eq(x) （取指定索引的元素...='test3' 元素的span设置背景色为红色 <!

5.2K1 0

01-老马jQuery教程-jQuery入口函数及选择器

并集选择器 $("div,p,li"); 使用逗号分隔，只要符合条件之一就可。...p标签且具有attr属性的节点 $("p[attr=a_value]") 选取所有p标签且具有attr属性并满足属性值为a_value的节点 $("p[attr^=a_value_head]") 选取所有...nextAll([expr]) $("div:first").nextAll() 查找当前元素之后所有的同辈元素。...prevtAll([expr]) $("div:first").prevAll() 查找当前元素之前所有的同辈元素 hasClass(class) $('div').hasClass("protected...td'); 搜索tr.la的所有的兄弟标签 $('tr.la').siblings();

3.2K10 0

01-老马jQuery教程-jQuery入口函数及选择器

并集选择器 $("div,p,li"); 使用逗号分隔，只要符合条件之一就可。...p标签且具有attr属性的节点 $("p[attr=a_value]") 选取所有p标签且具有attr属性并满足属性值为a_value的节点 $("p[attr^=a_value_head]") 选取所有...nextAll([expr]) $("div:first").nextAll() 查找当前元素之后所有的同辈元素。...prevtAll([expr]) $("div:first").prevAll() 查找当前元素之前所有的同辈元素 hasClass(class) $('div').hasClass("protected...// 点击了当前行，那么让当前行背景高亮，让其他的兄弟节点背景不高亮。 // jQuery的事件处理程序中。 this依然指向绑定事件dom对象。

3K0 0

Web前端开发JQuery框架笔记

jQuery 是一个写的更少,但做的更多的轻量级 JavaScript 库 JQuery 常用选择器 ID选择器: 通过使用简单的$(#id)标识前缀,实现快速匹配指定ID的元素对象,具体用法如下....: 通过使用$("element")标识前缀,匹配页面中所有P标签,并设置成红色....> 后代选择器: 该选择器常用于批量修改,匹配所有的后代,所有选中的DIV标签后代都会应用变化....> 相邻选择器: 在所有匹配的元素后选择同级别相邻元素,如下匹配所有跟在.outer后面的所有P标签,并设置成红色....","red"); siblings(): 查找标签的所有兄弟标签,查找所有的同辈标签.

12.8K2 0

Web前端学习笔记之jQuery选择器

JQuery过滤器经过一晚上的查找整理，终于整理出一套应该算最全面的JQuery选择过滤器的方法了。所有代码均经过测试。...; }); 4.JQuery(selector[,context]):在指定范围内查找符合条件的JQuery包装集，context为查找范围，context可以是DOM对象集也可以是JQuery包装集...在所有tr标签中查找id为text11元素的JQuery包装集 var text11_query=$("#text11","tr"); ===================jQuery选择器====...1.从所有tr标签中获取其下面的所有id值为text11的元素 var text11_query=$("tr #text11"); 2.获取所有td标签下的所有直接input子元素 var input_query...; 2.获取所有不含子标签或html内容为空的td元素 var td_query=$("td:empty"); 3.查找所有含有input子元素的td元素 var td_query=$("td:has

1.7K1 0

【原创】bootstrap框架的学习第七课 -

表格标题行的容器元素（tr>），用来标识表格列。表格主体中的表格行的容器元素（tr>）。...tr> 一组出现在单行上的表格单元格的容器元素（td> 或）。 td> 默认的表格单元格。特殊的表格单元格，用来标识列或行（取决于范围和位置）。...必须在内使用。关于表格存储内容的描述或总结。...让表格更加紧凑尝试一下联合使用所有表格类尝试一下实例： td> 类类描述实例 .active 将悬停的颜色应用在行或者单元格上尝试一下 .success 表示成功的操作尝试一下 .info 表示信息变化的操作尝试一下 .warning

7932 0

Web阶段：第五章：JQuery库

4.JQuery好处: jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。...Jquery 的初体验需求：使用Jquery和javascript给一个按钮绑定单击事件注意：使用Jquery之前要将第三方jar包导入查找标签对象 2…class 选择器：根据class查找标签对象 3.element 选择器：根据标签名查找标签对象 4.* 选择器：表示任意的，所有的元素 5.selector1...,只传递一个start表示从start开始直至结束查找 children([expr]) 查找所有子元素，传入表达式，表示满足表达式的子元素 closest(expr,[con]|obj|ele)1.6...* 表示查找和当前元素最接近的元素 find(expr|obj|ele) 表示查找元素，查找的是后代元素 next([expr]) 查找下一个元素 nextall([expr]) 查找下面所有的元素 nextUntil

28.8K2 0

高质量jQuery代码的十二条经验

在整个DOM中查找class为home的a元素，性能可想而知。...方法2，为要查找的元素添加了上下文，在这里变为查找id为nav的子元素，查找性能得到了很大提升。方法3，使用了find方法，它的速度更快，所以方法三最好。...隐藏一个元素或者改变一个元素的背景色时都将导致一次重绘。当对页面结构进行更新时，将导致页面重布局。...显然，你需要考虑你要支持的代码的兼容性。例如，2.0版本不支持ie 6/7/8。摒弃弃用方法关注每个新版本的废弃方法是非常重要的并尽量避免使用这些方法。...或许javascript微型框架或jQuery的定制版是更好的选择。虽然都是陈词滥调，但是我发现还不能很好得做到上述所有，记录下来希望自己能够全部做到。

1.5K4 0

WEB入门之十三 jQuery选择器

核心技能部分 4.1 jQuery选择器 jQuery选择器的主要功能是查找、匹配并获取页面元素，这是进行任何操作的前提。jQuery提供了众多功能强大且使用方便的选择器，完全能满足开发需求。...表4-1-4 表单属性选择器名称说明 :enabled 匹配并获得所有正常使用的元素 :disabled 匹配并获得所有禁用的元素 :checked 匹配并获得所有被选中的复选框 :selected...2：实现表单验证训练技能点 jQuery表单选择器需求说明按照图4.2.2所示的界面实现一个简单的表单，并使用jQuery表单选择器进行表单验证，要求:所有项都不能为空，密码长度必须大于等于8...").get(0).checked; } ) } 4：表格隔行加背景色训练技能点 jQuery过滤选择器需求说明按照图界面，使用jQuery过滤选择器实现表格隔行背景变色的效果...实现步骤（1）实现图4.2.4所示的界面（2）使用jQuery过滤选择器获取把表格中的奇数行(标题行除外) （3）把获取到得奇数行设置为灰色背景色，参考代码如下所示。

1.4K1 0

WEB入门之十三 jQuery选择器

核心技能部分 4.1 jQuery选择器 jQuery选择器的主要功能是查找、匹配并获取页面元素，这是进行任何操作的前提。jQuery提供了众多功能强大且使用方便的选择器，完全能满足开发需求。...表4-1-4 表单属性选择器名称说明 :enabled 匹配并获得所有正常使用的元素 :disabled 匹配并获得所有禁用的元素 :checked 匹配并获得所有被选中的复选框...2：实现表单验证训练技能点 jQuery表单选择器需求说明按照图4.2.2所示的界面实现一个简单的表单，并使用jQuery表单选择器进行表单验证，要求:所有项都不能为空，密码长度必须大于等于..."#all").get(0).checked; } ) } 4：表格隔行加背景色训练技能点 jQuery过滤选择器需求说明按照图界面，使用jQuery过滤选择器实现表格隔行背景变色的效果...实现步骤（1）实现图4.2.4所示的界面（2）使用jQuery过滤选择器获取把表格中的奇数行(标题行除外) （3）把获取到得奇数行设置为灰色背景色，参考代码如下所示。

1.5K1 0

重学SpringBoot系列之整合静态资源与模板引擎

Thymeleaf：最后 web应用开发之整合jsp 通过Maven坐标集成jsp 配置JSP查找位置代码测试运行方法测试 web应用开发之整合freemarker Freemarker简介整合...文件在html内访问静态资源可以使用如下方式： jquery/3.5.1/jquery.min.js "> 的使用规范，将展示内容放在标签内，而不是作为标签属性存在。...为奇数行单独设置背景颜色 .odd{ background-color: #7d7d7d; } ----...：标签（代码片段）内引入的JS里面能使用内联表达式吗？

5.9K3 1

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭