查找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

10K6 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

1K5 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

5K13 0

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

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

1963 0

JQuery 隔行换色实现

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

2511 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 元素绑定一次性事件，点击打印

6.2K5 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元素的样式。

9491 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; })

7.5K2 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设置背景色为红色 <!

4.6K1 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设置背景色为红色 <!

4.7K1 0

jQuery选择器大全(48个代码片段+21幅图演示)1

选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写jQuery...本文配合截图、代码和简单的概括对所有jQuery选择器进行了介绍，也列举出了一些需要注意和区分的地方。一、基本选择器 1. id选择器（指定id元素）将id="one"的元素背景色设置为黑色。...遍历form下的所有元素，将字体颜色设置为红色 $('form *').css('color', '#FF0000'); }); 5....div的一代子元素，颜色保持不变。...tr>td>Btd>tr> tr>td>Ctd>tr> tr>td>Dtd>tr> ——1.4

2K7 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();

2.6K10 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对象。

2.4K0 0

jQuery选择器大全(48个代码片段+21幅图演示)

选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写jQuery...本文配合截图、代码和简单的概括对所有jQuery选择器进行了介绍，也列举出了一些需要注意和区分的地方。一、基本选择器 1. id选择器（指定id元素）将id="one"的元素背景色设置为黑色。...遍历form下的所有元素，将字体颜色设置为红色 $('form *').css('color', '#FF0000'); }); 5....div的一代子元素，颜色保持不变。...tr>td>Btd>tr> tr>td>Ctd>tr> tr>td>Dtd>tr> ——1.4

5K8 0

jQuery选择器大全

选择器是jQuery最基础的东西，本文中列举的选择器基本上囊括了所有的jQuery选择器，也许各位通过这篇文章能够加深对jQuery选择器的理解，它们本身用法就非常简单，我更希望的是它能够提升个人编写...本文配合截图、代码和简单的概括对所有jQuery选择器进行了介绍，也列举出了一些需要注意和区分的地方。...---- 本文已经同步至我的个人博客站点：积累吧|jQuery选择器大全(48个代码片段+21幅图演示) 一、基本选择器 1. id选择器（指定id元素）将id="one"的元素背景色设置为黑色...', '12px'); }); 4. * 选择器（遍历所有元素） $(document).ready(function () { // 遍历form下的所有元素，将字体颜色设置为红色 $( 'form...tr>td>Ctd>tr> tr>td>Dtd>tr> ——1.4 :eq(x) （取指定索引的元素） ?

5.2K1 0

Web前端开发JQuery框架笔记

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

11.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.3K1 0

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

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

5082 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

26.3K2 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）把获取到得奇数行设置为灰色背景色，参考代码如下所示。

831 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭