jQuery排他思想（siblings）

1、了解siblings

语法：siblings(selector)

用法：$(".frist").siblings(“li”)

说明：查找兄弟节点，不包括自身元素

2、排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。

例子：

html：

<body>

<table>

<tr>

<th>项目</th>

<th colspan="5">上课</th>

<th colspan="2">休息</th>

</tr>

<tr>

<td>星期</td>

<td>星期一</td>

<td>星期二</td>

<td>星期三</td>

<td>星期四</td>

<td>星期五</td>

<td>星期六</td>

<td>星期天</td>

</tr>

<tr>

<td rowspan="4">星期</td>

<td>星期一</td>

<td>星期二</td>

<td>星期三</td>

<td>星期四</td>

<td>星期五</td>

<td>星期六</td>

<td rowspan="4">星期天</td>

</tr>

<tr>

<td>星期</td>

<td>星期一</td>

<td>星期二</td>

<td>星期三</td>

<td>星期四</td>

<td>星期五</td>

</tr>

<tr>

<td>星期</td>

<td>星期一</td>

<td>星期二</td>

<td>星期三</td>

<td>星期四</td>

<td>星期五</td>

</tr>

<tr>

<td>星期</td>

<td>星期一</td>

<td>星期二</td>

<td>星期三</td>

<td>星期四</td>

<td>星期五</td>

</tr>

<tr>

<td rowspan="2">星期</td>

<td>星期一</td>

<td>星期二</td>

<td>星期三</td>

<td>星期四</td>

<td>星期五</td>

<td>星期六</td>

<td rowspan="2">星期天</td>

</tr>

<tr>

<td>星期</td>

<td>星期一</td>

<td>星期二</td>

<td>星期三</td>

<td>星期四</td>

<td>星期五</td>

</tr>

</table>

</body>

css：

<style>

table {

width: 600px;

height: 300px;

border: 2px solid blue;

margin: 100px auto;

}

th {

border: 1px solid blue;

text-align: center;

}

td {

border: 1px solid blue;

text-align: center;

}

</style>

JS：

<script src="jquery.min.js"></script>

<script>

$(function() {

$('td').mouseover(function() {

$(this).siblings('td').css('color', '');

$(this).css("color", 'red');

});

$('td').mouseout(function() {

$(this).css("color", '');

});

$('th').mouseover(function() {

$(this).siblings('th').css('color', '');

$(this).css("color", 'red');

});

$('th').mouseout(function() {

$(this).css("color", '');

});

})

</script>

jQuery排他思想（siblings）相关推荐

Jquery排他思想实现
我们先来温习一下js里面的排他思想的写法,给五个按钮,点击某一个按钮这个按钮就变成粉红色,其余按钮都是白色,若采用js实现这个案例需要采用循环判断来写,代码如下: <!-- jquery排他思想 ...
jquery排他思想
效果展示: 代码展示: <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
jQuery 里面的排他思想
jQuery 里面的排他思想 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
jQuery的排他思想
因为jQuery具备隐式迭代,所以在写排他思想的时候不需要循环遍历,直接用下面这个就能实现. <html><button>变色</button><butto ...
[转]jQuery设计思想
转自:http://kb.cnblogs.com/page/109875/ jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远 ...
借鉴--阮一峰博客之Jquery设计思想
jquery常用方法--阮一峰博客借鉴由于自身以前一直只是止步于看别人的博客,这是我的第一篇博客(感觉好高大上),这次博客我是借鉴于阮一峰网络日志关于Jquery设计思想的部分. 首先关于此篇博客我 ...
什么是排他思想算法？（源码解析）
排他思想算法 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
编程思维---排他思想
排他思想:就是排除掉其他的(包括自己),然后再给自己设置想要实现的效果.总而言之,排他思想的实现步骤就是所有元素全部清除再设置当前元素. 大白话---简单总结:干掉兄弟,复活自己使用场景:1.Tab ...
android 排他button,javascript排他思想
排他思想: 干掉所有人,设置我自己,先将所有人全设置为"",然后再设置当前的值 1.含义: 关于排他思想,我的理解就是先排除掉其他的(包括自己) ,最后再给自己(this)加想要的 ...
DOM系列之排他思想
文章の目录 1.什么是排他思想 2.示例写在最后 1.什么是排他思想如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法所有元素全部清除样式(干掉其他人) 给当前元素设 ...

jQuery排他思想（siblings）

jQuery排他思想（siblings）相关推荐

最新文章

热门文章