jQuery13(相对元素的练习)

最新推荐文章于 2022-08-04 20:44:29 发布
最新推荐文章于 2022-08-04 20:44:29 发布
阅读量271 收藏
点赞数
分类专栏： JS-Dom-Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xbc1213/article/details/50639678
版权

相对元素的练习

关键词:this
语法:$('td:odd',$(this)).css('backgroundColor','yellow');
实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#tb tr').click(function () {
                //$('td', $(this).siblings()).css('backgroundColor', '');
                //$('td:even', $(this)).css('backgroundColor', 'red');
                $('td:odd', $(this)).css('backgroundColor', 'yellow');
                // $(this 'td:even').css('backgroundColor', 'red');
                //因为使用了this.无法加引号,所以上述语句是错误的,显示无
                //总之因为this
                //1注意, 小手属于样式,在style中
                //2注意相对元素的写法
            });
        });
    </script>
</head>
<body>
    <table id='tb' border="1" style='cursor: pointer;'>
        <tr>
            <td>
                乔布斯
            </td>
            <td>
                乔布斯1
            </td>
            <td>
                乔布斯2
            </td>
            <td>
                乔布斯3
            </td>
            <td>
                乔布斯4
            </td>
        </tr>
        <tr>
            <td>
                乔布斯5
            </td>
            <td>
                乔布斯6
            </td>
            <td>
                乔布斯7
            </td>
            <td>
                乔布斯8
            </td>
            <td>
                乔布斯9
            </td>
        </tr>
        <tr>
            <td>
                乔布斯10
            </td>
            <td>
                乔布斯11
            </td>
            <td>
                乔布斯12
            </td>
            <td>
                乔布斯13
            </td>
            <td>
                乔布斯14
            </td>
        </tr>
        <tr>
            <td>
                乔布斯20
            </td>
            <td>
                乔布斯21
            </td>
            <td>
                乔布斯22
            </td>
            <td>
                乔布斯23
            </td>
            <td>
                乔布斯24
            </td>
        </tr>
        <tr>
            <td>
                乔布斯30
            </td>
            <td>
                乔布斯31
            </td>
            <td>
                乔布斯32
            </td>
            <td>
                乔布斯33
            </td>
            <td>
                乔布斯34
            </td>
        </tr>
        <tr>
            <td>
                乔布斯40
            </td>
            <td>
                乔布斯41
            </td>
            <td>
                乔布斯42
            </td>
            <td>
                乔布斯43
            </td>
            <td>
                乔布斯44
            </td>
        </tr>
    </table>
</body>
</html>

个人总结:相对元素是想要寻找的元素写在前面,范围写在后面.因为中间采用逗号的方式连接,所以可以在范围中直接写上this.更简洁!

天赋进行时
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery综合案例小练习——巩固jquery基础知识
春和的博客
03-07 1246
学习玩jquery的基础知识 做一些小的案例练习巩固一下基础知识的运用 在学了jquery后对比发现jquery的功能十分的强大！ 一、隔行换色 1.1、原生js实现隔行换色 原生js实现隔行换色 首先要获取到表格 在获取到表格中的每一行 通过%2判断是奇数行还是偶数行 再通过控制样式实现背景色的变换 准备一个表格 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g.
北大青鸟jquery第十章上机练习_jquery easyui
weixin_31423913的博客
02-05 546
的作二者用完样全一，太一的方样接受只是参数式不。先来性选现的的样用域来实e中择器方式过属说说实现式作是通，我们名是的里的这里主要怎么楚这分配搞清是要属性，同样一个例如类名。被引如果都只用一组件次，我们道就知，通常的样式存在干扰是不，如果面中但是多次一个组件在一复用个页，的可依然样式能干扰是有，面的据上知识储备]根。本文详细家介非常给大绍的，需要的朋友可以参考下哈喽，学习对大定的有一或工家的借鉴价值...
13.jQuery
lt的博客
05-14 172
1.JSON的结构-名称/值 对的集合。不同的语言理解为对象，记录，结构，字典，哈希表等-值的有序列表。大部分语言中理解为数组使用JSON表示一个对象 {属性名：属性值，属性名：属性值....}注意：属性值可以使string,number,boolean(true,false),null,object属性名必须使用双引号引起来属性值如果是字符串，必须使用双引号括起来使用JSON表示一个数组[val...
jquery 相对元素
weixin_30652271的博客
03-26 66
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> ...
相对元素或者内容自适应
eason zhang的博客
03-01 200
如何实现元素高度自适应？ 先思考这两个问题： a、如果想实现元素高度自适应，高度能不能设置成固定的值？ b、如果高度不能固定，那该怎么设置呢？ 第一种情况： 1）非浮动元素的父元素高度自适应 实现方法： 1、不设置高度，或者高度设置成 ： height:auto； 2、通过最小高度实现高度自适应 ： min-height:300px;_height:300px; 注：;_heig...
元素定位（绝对、相对、粘滞、固定）
comegoing_xin_lv的博客
08-04 1254
绝对、相对、粘滞、固定定位，非文档流、浮动
JQuery练习集合
02-05
在这个"jQuery练习集合"中，我们将会探讨一系列与jQuery相关的实践案例，包括但不限于节点操作、链式编程、选择器以及属性选择等核心概念。** 1. **节点遍历**：在jQuery中，遍历DOM元素是常见的任务。例如，`...
jquery实现简单的轮换出现效果实例
10-23
对于初学者，这是一个很好的起点，了解如何用jQuery控制DOM元素的样式和行为。同时，对于更复杂的轮播图需求，开发者通常会使用像`carousel`这样的jQuery插件，或者现代前端框架如Bootstrap、Vue等提供的轮播组件。
原生JS和jQuery操作DOM对比总结
10-20
**jQuery** 提供更简洁的语法，使用`$()`或`jQuery()`函数创建元素，如下所示： ```javascript var $p = $('<p></p>'); ``` ### 二、创建并添加文本节点 **原生JavaScript** 创建文本节点使用`document....
基于Jquery编写的背单词app
12-13
Jquery简化了DOM操作，使得开发者能够轻松地实现页面元素的动态交互，从而在这款app中创建出流畅的用户体验。 在描述中提到，尽管该应用的界面设计可能相对简洁，但其功能完备，实用性极强。这表明开发者专注于核心...
jQuery实现图片轮播
03-14
- 使用jQuery选择器选取相关元素，实现图片的自动播放、切换、前后控制等交互功能。 - 利用`setInterval()`函数设置定时任务，定时执行图片切换动作。 - 监听用户的交互事件（如点击按钮），动态调整`.imageBox`...
Dom7(动态创建标签,获取页面元素)
xbc1213的博客
01-25 2068
动态创建标签关键字:wirite 语法:document.write(‘内容’); 注意:该方法可以动态创建标签,里面的内容可以直接写标签语句.可以用作镶嵌广告,如果在页面加载后执行,那么页面的其他标签都将会小时. 实例: <script type="text/javascript"> onload=function(){ //第一个作用,可以动态创建标签
Dom6(复制粘贴事件及剪切板操作)
xbc1213的博客
01-25 1425
复制事件关键词:oncopy 在复制时触发,可以使用return false去除. 实例:<script type='text/javascript'> //复制的事件 onload=function(){ document.getElementById('bd').oncopy = function () { alert('禁止复制');
jQuery22(替换元素,包裹元素)
xbc1213的博客
02-07 1115
替换元素第一种方式: 原节点.replaceWith(新节点). 实例:$('br').replaceWith('<hr color="red" />')第二种: 新节点.replaceAll(原节点) 实例: $('<hr color="red" />').replaceAll('br')完整实例:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
jQuery2(JQuery实现onload)
xbc1213的博客
02-05 999
JQuery实现onload注意:dom中的onload,是全部资源加载完后在进行执行,且只能执行一个.而jQuery中是基础元素加载完后就执行,且能执行多个(效率高). 语法:$(function(){});完整的实例:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm
jQuery4(3种选择器,选择器获取元素)
xbc1213的博客
02-05 974
该内容所将选择器都是出现在style中;id选择器实例: #dv //id选择器 { width:300px; height:200px; background-color:Gray; }知识点::将id为dv的标签设置为该样式标签选择器实例:div { width:300px; height:200p
Dom9(美女时钟)
xbc1213的博客
01-25 899
所用知识点: 建立时间对象. var date=new Date(); 获取小时 var hour=date.getHours(); 获取分钟 var minu=date.getMinutes(); 获取秒 var sec=date=getSeconds(); 设置图片src属性: 实例:<!doctype html> <html lang="en"> <head> <
jQuery教程：元素操作详解
本文将深入讲解jQuery中的元素操作方法，包括创建元素、内部和外部插入元素、替换元素、删除元素、克隆元素以及包裹元素等核心功能。" 在jQuery中，元素操作是其强大的特性之一，它提供了简洁的API来简化DOM操作。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值