jQuery 筛选
筛选(查找/树遍历)
| 名称 | 说明 | |
| children([selector ]) | 选取子元素（用的多） | Selector 一个字符串，用于匹配元素的选择器表达式字符串。 |
| parent() | 选取父元素（用的多） | |
| parents() | 选取祖先元素（用的多） | |
| parentsUntil() | 所有父元素，直到遇到匹配的那个元素为止1.6+ | |
| offseParent() | 返回父元素中第一个其position设为relative或absolute的元素，仅对可见元素有效果 | |
| next() | 选择后面紧邻的兄弟元素 | |
| nextAll() | 查找当前元素之后所有的同辈元素 | |
| nextUntil() | 所有的同辈元素，直到遇到匹配的那个元素为止 1.6+ | |
| prev() | 前一个兄弟元素 | |
| prevAll() | 前面所有的兄弟元素 | |
| prevUntil() | 所有的兄弟元素，直到遇到匹配的那个元素为止 1.6+ | |
| siblings() | 前后所有兄弟元素 | |
| closest() | 从元素本身开始,DOM数上逐级向上级元素匹配,并返回最先匹配的祖先元素 | |
| addBack() | 添加堆栈中元素集合到当前集合,一个选择性的过滤选择器 | |
| closest() | 从元素本身开始,DOM数上逐级向上级元素匹配,并返回最先匹配的祖先元素 | |
| find() |
children() 选取子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>children()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
#outer{margin-bottom:30px;}
</style>
</head>
<body>
<div id="outer">
<div id="wrap">
<p>01 p标签</p>
<p>02 p标签</p>
<p id="third">03 p标签</p>
<div>div标签</div>
</div>
</div>
<div>
<span>Hello</span>
<p>Hello Again</p>
<div>And Again</div>
<p>And One Last Time</p>
</div>
<script>
//.find()和.children()方法是相似的，但.children()只是针对向下一个级别的DOM树。
//#wrap下的子元素(div,p),添加yellow背景
$('#wrap').children().css('background' ,'yellow');
//#wrap下子元素p
//$('#wrap').children('p').css('background' ,'yellow');
//含有.second样式的子元素
//$('#wrap').children('.second').css('background' ,'yellow');
//含有#third ID的子元素
//$('#wrap').children('#third').css('background' ,'orange');
//查找含有.selected的子元素
$("div").children(".selected").css("color", "blue");
</script>
</body>
</html>parent() 选取父元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02 parent()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
#outer ,#wrap{margin: 10px;}
</style>
</head>
<body>
<!-- deom 01 -->
<div id="outer">
<div id="wrap">
<p>01 p标签</p>
<p>02 p标签</p>
<p id="third">03 p标签</p>
<div>div标签</div>
</div>
</div>
<!-- deom 02 -->
<div><p>Hello</p></div>
<div class="selected"><p>Hello Again</p></div>
<script>
//查找父元素,只查找上一层
//#wrap被选中
$('#third').parent().css('border' ,'6px solid yellow');
//外层.outer被选中
$('#wrap').parent().css('border' ,'3px solid red');
//dome 02
//最下面的div被选中
$('p').parent('.selected').css('background' ,'yellow');
</script>
</body>
</html>parents() 选取祖先元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>parents()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
#outer ,#wrap{margin: 10px;}
</style>
</head>
<body>
<!--
parents()与parentsUntil()是等价的
-->
<div id="outer">
<div id="wrap">
<p>01 p标签</p>
<p>02 p标签</p>
<p id="third">03 p标签</p>
<div>div标签</div>
</div>
</div>
<span></span>
<script>
//parents()寻找祖先元素
//选中#wrap,#outer,并在DOM树中向上遍历,直到<html>元素
//$('#third').parents().css('border' ,'1px solid red');
//parents('#wrap')等价与parent()
//$('#third').parents('#wrap').css('border' ,'3px solid yellow');
//选中#outer
//$('#third').parents('#outer').css('border' ,'3px solid red');
//查找每个p标签的所有父元素。
var parentEls = $("p").parentsUntil()
.map(function () {
return this.tagName;
})
.get().join(", ");
$("span").append(parentEls);
</script>
</body>
</html>offsetParent()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>offseParent()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
#outer ,#wrap{margin: 10px;height: 100px;width:100px;}
ul{margin-top:60px;}
</style>
</head>
<body>
<!--
offseParent()
取得离指定元素最近的含有定位信息的祖先元素。
含有定位信息的元素指的是，CSS 的 position 属性是 relative, absolute, 或 fixed 的元素。
-->
<div id="outer" style="position: relative;background:yellow;">#outer
<div id="wrap" style="position: absolute; top: 30px; left: 30px;background: gray;">#wrap
<p>01 p标签</p>
<p>02 p标签</p>
<p id="third">03 p标签</p>
<div>div标签</div>
</div>
</div>
<button>button</button>
<ul>
<li>I</li>
<li style="position: relative;">II
<ul>
<li>A</li>
<li>B
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>C</li>
</ul>
</li>
<li>III</li>
</ul>
<script>
//直接把样式添加在最近一个含有position属性是relative, absolute, 或fixed的父元素上
$('button').click(function(){
$('p').offsetParent().css('background','orange');
});
$('li.item-a').offsetParent().css('background-color', 'red');
</script>
</body>
</html>next()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>next()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
div,p{height: 100px;width: 100px;border: 1px solid #ddd;float: left;margin-right:10px; }
</style>
</head>
<body>
<!-- 例子 01：-->
<p>01 p标签</p>
<p>02 p标签</p>
<div>03 div标签</div>
<p>04 p标签</p>
<p>05 p标签</p>
<p>06 p标签</p>
<span style="display:block;clear:both;height: 60px;"><!-- 清除浮动 --></span>
<!-- 例子 02：-->
<button disabled="disabled">First</button> - <span></span><br/>
<button>Second</button> - <span></span></div><br/>
<button disabled="disabled">Third</button> - <span></span>
<script>
//选中紧邻的兄弟元素div标签
$('p.second').next().css('background' ,'yellow');
//例子 2
$('button').not('button[disabled]').click(function(){
$("button[disabled]").next().text("this button is disabled");
}).css('color' ,'red');//选中的button添加css，证明是被选中
</script>
</body>
</html>nextAll()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>nextAll()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
div,p{height: 100px;width: 100px;border: 1px solid #ddd;float: left;margin-right:10px; }
</style>
</head>
<body>
<!--
nextAll()与nextUntil()一样
-->
<div>00 div标签</div>
<p>01 p标签</p>
<p>02 p标签</p>
<div>03 div标签</div>
<p>04 p标签</p>
<div>05 div标签</div>
<p>06 p标签</p>
<script>
//.second之后所有的兄弟元素
$('p.second').nextAll().css('background' ,'yellow');
//next()返回一个元素,给参数也没用
//nextAll()返回一个元素集合
//选中.second后所有的div元素
$('p.second').nextAll('div').css('border' ,'6px solid red');
//选中.second后所有的p元素
$('p.second').nextAll('p').css('border' ,'6px solid orange');
//查找 body 中第二个孩子元素后面的所有段落，并为它们添加样式。
$(":nth-child(1)").nextAll("p").css({'color':'green' ,'font-size':'24px'});
</script>
</body>
</html>prev()
prevAll()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>prev(),prevAll(),prevUntil()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
div,p{height: 100px;width: 100px;border: 1px solid #ddd;float: left;margin-right:10px; }
</style>
</head>
<body>
<p>01 p标签</p>
<p>02 p标签</p>
<div>03 div标签</div>
<p>04 p标签</p>
<div>05 div标签</div>
<p>06 p标签</p>
<p>07 p标签</p>
<script>
//
$('.fifth').prev().css('border' ,'6px solid orange');
$('.fifth').prevAll().css('background','yellow');
$('.fifth').prevAll('div').css({'color':'red','font-size':'24px'});
//Locate all the p preceding the last p and give them a class.
$('p:last').prevAll('p').css('color' ,'blue');
</script>
</body>
</html>prve(),next()小项目练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击左右跳的圆</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;font-size: 16px;}
div,p{height: 100px;line-height:100px;width: 100px;border: 1px solid #ddd;float: left;margin-right:10px;border-radius:50px; text-align:content;}
button{height: 30px;line-height: 30px;width:60px;text-align:content;margin:10px;border-radius:20px;}
</style>
</head>
<body>
<div>00 div标签</div>
<p>01 p标签</p>
<p>02 p标签</p>
<div>03 div标签</div>
<p>04 p标签</p>
<div>05 div标签</div>
<p>06 p标签</p>
<span style="clear:both;height: 60px;display:block;"></span>
<button id="prev">prev</button><button id="next">next</button>
<script>
var curr = $('p:last');
curr.css('background' ,'yellow');
$('#prev').click(function(){
/*
//我这个有点乱
curr = curr.prev();//上一个元素
curr.css('background' ,'');//清空上一个元素
curr.css('background' ,'yellow');//给当前元素增加样式,
curr.nextAll(curr).css('background' ,'');//情况当前元素之后的样式
*/
//这个简洁
curr = curr.prev();
$("div ,p").css("background", "");
curr.css("background", "yellow");
});
$('#next').click(function(index){
//到这没停下来,往后继续走了，问题今后学更多的语法在解决
curr = curr.next();
$("div ,p").css("background", "");
curr.css("background", "yellow");
});
</script>
</body>
</html>siblings()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>siblings()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
div,p{height: 100px;width: 100px;border: 1px solid #ddd;float: left;margin-right:10px; }
</style>
</head>
<body>
<p>01 p标签</p>
<p>02 p标签</p>
<div>03 div标签</div>
<p>04 p标签class="fourth"</p>
<div>05 div标签</div>
<p>06 p标签</p>
<script>
$('.fourth').siblings().css('background' ,'yellow');
//返回一组元素的都可以加参数
//div元素描红色边框
$('.fourth').siblings('div').css('border' ,'3px solid red');
//p元素描绿色边框
$('.fourth').siblings('p').css('border' ,'3px solid pink');
</script>
</body>
</html>addBack()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>addBack()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<styletype="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
div,p{height: 100px;width: 100px;border: 1px solid #ddd;float: left;margin-right:10px; }
</style>
</head>
<body>
<p>01 p标签</p>
<p>02 p标签class="second"</p>
<div>03 div标签</div>
<p>04 p标签</p>
<div>05 div标签</div>
<p>06 p标签</p>
<script>
//选择.second之后的所有兄弟元素
//$('.second').nextAll().css('background' ,'yellow');
//nextAll()包括.second自己与后边的兄弟元素
$('.second').nextAll().addBack().css('background' ,'yellow');
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>addBack()</title>
<style>
p, div { margin:5px; padding:5px; }
.left, .right { width: 45%; float: left;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="left">
<p>left</p>
<div class="before-addback">
<p>First</p>
<p>Second</p>
</div>
</div>
<div class="right">
<p>right</p>
<div class="after-addback">
<p>First</p>
<p>Second</p>
</div>
</div>
<script>
//left ,rigth两组div内子div元素、孙p元素描边
$("div.left, div.right").find('div ,div > p').css("border" ,'solid 1px orange');
//First Example
//没有addback方法的,仅填充了孙元素p标签黄色背景
$("div.before-addback").find("p").css("background" ,'yellow');
//Second Example
//有addback方法的，子元素div也填充的黄色背景
$("div.after-addback").find("p").addBack().css("background" ,'yellow');
</script>
</body>
</html>find()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>find()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
</style>
</head>
<body>
<div>
<p>Success is going</p>
<p>from failurc to failure</p>
<p>without losing enthusiasm</p>
<p>成功是经历一次次失败,<span>却不丧失热情</span></p>
<p>2018 4 11 19:54</p>
<p>The distance between your</p>
<p><span>derams and reality</span></p>
<p>is called action</p>
<p><EM>你梦想和现实之间的距离被称为行动</EM></p>
<p>2018 4 12 19：38 </p>
</div>
<script>
/***
.find()方法允许我们能够通过查找DOM树中的这些元素的后代元素，匹配的元素将构造一个新的jQuery对象。
.find()和.children()方法是相似的，但后者只是再DOM树中向下遍历一个层级(.children()只查找子元素，而不是后代元素)
***/
//开始搜所有后代的span元素，和$("div span")一样
$('div').find('span').css('background' ,'yellow');
$('div').find($('em')).css('background' ,'orange');
$('div').find("span:contains('derams')").css('color' ,'red');
</script>
</body>
</html>筛选(各种遍历/串联)
| 名称 | 说明 | |
| add() | ||
| each() | 遍历一个jquery对象，为每个匹配元素执行一个函 | |
| contents() | 元素的子元素，包括文字和注视节点 | |
| end() | 终止在当前链的最新过滤操作,并返回匹配的元素的以前状态数 |
each()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>each()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
</style>
</head>
<body>
<div>Click here</div>
<div>to iterate through</div>
<div>these divs.</div>
<span style="display: block;clear: both;height: 30px;"></span>
<form action="">
<input type="text" id="" name="" value="姓名"/>
<input type="text" id="" name="" value="性别"/>
<input type="text" id="" name="" value="年龄"/>
<input type="text" id="" name="" value="收入"/>
<input type="text" id="" name="" value="职业"/>
</form>
<script>
/*
分别取值的时候，我们用到each()是在jquery对象上取值
用的不是非常多
后面ajax用$.each不是jquery对象上的each
$.each高效很多
*/
$('input').each(function(){
alert($(this).val());
});
/*
遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each()方法用来让DOM循环结构更简单更不易出错。
它会迭代jQuery对象中的每一个DOM元素。
每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。
更重要的是，回调函数是在当前DOM元素为上下文的语境中触发的。
因此关键字 this 总是指向这个元素。
*/
//下面两种方法,分别为div添加了样式
$("div").each(function(index) {
$(this).css({'height':'100px' ,'width':'100px' ,'border':'1px solid #ddd','float':'left' ,'margin-right':'10px'});
console.log(index +'='+ $(this).text());
});
$('div').css('background' ,'yellow');
</script>
</body>
</html>end()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>end()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
p{margin-bottom:30px;}
</style>
</head>
<body>
<p>
<span>Live beautifully,dream passionately,love completely</span>
生活的美好,梦要梦得热烈,爱要爱的完整.
</p>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<script>
/**
今天是2018年4月14日
1:选中父元素加黄色背景css
2:end返回span元素
3:span元素加橙色字体颜色css
**/
//返回最原始的DOM节点
$('span').parent().css('background', 'yellow').end().css('background' ,'orange');
//$('ul.first').find('.foo').css('background-color', 'red')
//.end().find('.bar').css('background-color', 'green');
$('ul.first').find('.foo')
.css('background-color', 'red')
.end().find('.bar')
.css('background-color', 'pink')
.end();
</script>
</body>
</html>特殊符号的处理/选择器的优化
特殊符号的处理(使用转义符)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>特殊符号的处理，使用转义符</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
</style>
</head>
<body>
<form action="">
<input type="checkbox" id="" name="gender[]" value="男"/>
<input type="checkbox" id="" name="gender[]" value="女"/>
<input type="checkbox" id="" name="gender[]" value="保密"/>
<input type="submit" value="提交"/>
<input type="reset" value="重选"/>
</form>
<script>
/*
//注意要加两个转义字符 \\[\\]
//中括号用两个转义字符
$('input[name=gender\\[\\]]').click(function(){
alert($(this).val());
});
*/
//这里加一个转义字符
//单引号,双引号用一个转义字符
$('input[type=\'checkbox\']').click(function(){
alert($(this).val());
});
</script>
</body>
</html>jquery选择器的优化
1:优先使用ID选择器
直接用ID选择器是最快的
能用ID选择器的不用class选择器
ID选择器要远远高于class选择器,class选择器要遍历整个文档,比如腾讯首页上千行,效率会比较慢。
2:在class选择器前添加标签名
example:
<p class="a">文本</p>
$('.a')这样可以选中但不推荐
$('p.a')只搜p标签内的a,不用每个标签都遍历,提高效率
examlle:
<div id="div1"><div>
$('div#div1')尤其在大项目中这样会很慢
直接$('#div1')就可以了
example:
<div id="div1">
<div id="div2"></div>
<div>
$('#div #div2')这样也会慢，直接写$('#div2')这样就行了
3：采用find(),而不使用上下文查找
find()比children()要快
4：强大的链式操作比缓存更快
<p class="a">文本</p>
var p = $('p');
p.css();
$('p').css()直接这样写会别上面缓存起来的快很多;
如果通过这个p元素查找上下文时，需要缓存。
直接操作就永链式操作
5：从左至右的模型1.3+版本更新
<div class="div1">
<p class="p2"></p>
</div>
$('.div1 p.p2')
$('div.div1 .p2')官方说1.3版本后这样选中比上面的快
隔行变色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隔行变色</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
#table{width: 600px;border-collapse: collapse;}
td{border:1px solid #DDDDDD;text-align: center;font-size:14px;padding:5px;}
</style>
</head>
<body>
<table id="table">
<tr>
<td>爱的默司</td>
<td>班得瑞</td>
<td>MP3</td>
<td>试听</td>
</tr>
<tr>
<td>孤枕難眠</td>
<td>周华健</td>
<td>MP3</td>
<td>试听</td>
</tr>
<tr>
<td>梅花</td>
<td>邓丽君</td>
<td>MP3</td>
<td>试听</td>
</tr>
<tr>
<td>床前明月光</td>
<td>梅艳芳</td>
<td>MP3</td>
<td>试听</td>
</tr>
<tr>
<td>大地</td>
<td>BEYOND</td>
<td>MP3</td>
<td>试听</td>
</tr>
<tr>
<td>游园惊梦</td>
<td>牡丹亭</td>
<td>MP3</td>
<td>试听</td>
</tr>
<tr>
<td>高山流水猎人情</td>
<td>陈诺</td>
<td>MP3</td>
<td>试听</td>
</tr>
<tr>
<td>鬼迷心窍</td>
<td>周华健</td>
<td>MP3</td>
<td>试听</td>
</tr>
<tr>
<td>安妮的仙境</td>
<td>班得瑞</td>
<td>MP3</td>
<td>试听</td>
</tr>
<tr>
<td>断肠梦</td>
<td>许冠杰</td>
<td>MP3</td>
<td>试听</td>
</tr>
</table>
<script>
/**
//js原生态隔行变色
var Totable = document.getElementById('table');
var Tr = Totable.getElementsByTagName('tr');
//alert(Tr.length);//10
for(var i=0;i<Tr.length;i++){
if(i%2==0){
Tr[i].style.background = 'yellow';
}else{
Tr[i].style.background = 'lightyellow';
}
}
**/
$('#table tr').filter(':even').css('background' ,'yellow').end().filter(':odd').css('background' ,'lightyellow');
</script>
</body>
</html>js原生态tab标签页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js原生态tab标签页</title>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
ul{
list-style-type: none;
height: 32px;
width: 300px;
margin-bottom:10px;
}
#ul li{
height: 30px;
width: 80px;
line-height: 30px;
text-align: center;
border: 1px solid #ddd;
float:left;
margin-right:3px;
cursor:pointer;
}
#ul li.current{
background:yellow;
}
#content>div{
width:300px;
height: 200px;
border: 1px solid #ddd;
display: none;
}
#content .show{
display: block;
}
</style>
</head>
<body>
<ul id="ul">
<li class="current">PHP</li>
<li>JS</li>
<li>JQUERY</li>
</ul>
<p style="clear:both;"></p>
<div id="content">
<div class="show">1:php...</div>
<div>2:javascript...</div>
<div>3:jquery...</div>
</div>
<script>
var ul = document.getElementById('ul');
var li = ul.getElementsByTagName('li');
var content = document.getElementById('content');
var div = content.getElementsByTagName('div');
for(var i=0;li.length>i;i++){
li[i].index = i;
li[i].onclick=function(){
for (var i=0;li.length>i; i++) {
li[i].className='';
div[i].style.display='none';
}
this.className="current";
div[this.index].style.display='block';
}
}
</script>
</body>
</html>jquery tab标签页 01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery tab标签页</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
ul{
list-style-type: none;
height: 32px;
width: 300px;
margin-bottom:10px;
}
#ul li{
height: 30px;
width: 80px;
line-height: 30px;
text-align: center;
border: 1px solid #ddd;
float:left;
margin-right:3px;
cursor:pointer;
}
#ul li.current{
background:yellow;
}
#content>div{
width:300px;
height: 200px;
border: 1px solid #ddd;
display: none;
}
#content .show{
display: block;
}
</style>
</head>
<body>
<ul id="ul">
<li class="current">PHP</li>
<li>JS</li>
<li>JQUERY</li>
</ul>
<div id="content">
<div class="show">1:php...</div>
<div>2:javascript...</div>
<div>3:jquery...</div>
</div>
<script>
$('#ul li').click(function(){
//1:点击li的时候要切换样式
//当前点击元素添加current样式,其他兄弟元素移除current样式
$(this).addClass('current').siblings().removeClass('current');
//2:根据li的索引值,来确定那个div显示,其它div隐藏
//eq()索引第几个
//$(this).index()当前div是第几个
$('#content>div').eq($(this).index()).show().siblings().hide();
});
</script>
</body>
</html>jquery tab标签页 再精简两行合成一行
<script>
$('#ul li').click(function(){
//两行组合成一行
//其实就是在之前的例子里，两行代码前加了三个方法
//1：parent()找到父元素ul
//2：next()找到父元素ul的兄弟元素#content
//3：chilrend()找到三个子div元素
//后面接第二个代码
//这是链式操作，不管我还是觉得写两行清楚明白比较好。
$(this).addClass('current').siblings().removeClass('current').parent().next().children().eq($(this).index()).show().siblings().hide();
});
</script>jquery tab标签页 02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery tab标签页</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
ul{
list-style-type: none;
height: 32px;
width: 300px;
margin-bottom:10px;
}
#ul li{
height: 30px;
width: 80px;
line-height: 30px;
text-align: center;
border: 1px solid #ddd;
float:left;
margin-right:3px;
cursor:pointer;
}
#content>div{
width:300px;
height: 200px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<ul id="ul">
<li>PHP</li>
<li>JS</li>
<li>JQUERY</li>
</ul>
<div id="content">
<div>1:php...</div>
<div>2:javascript...</div>
<div>3:jquery...</div>
</div>
<script>
$('#content>div:gt(0)').hide();
$('#ul>li:eq(0)').css('background' ,'yellow');
$('ul li').click(function(){
$(this).css('background' ,'yellow').siblings().css('background' ,'#fff');
$('#content>div').eq($(this).index()).show().siblings().hide();
});
</script>
</body>
</html>
Leave a comment
0 Comments.