jQuery1.x版本和jQuery2.x版本有什么区别？
- jQuery1.x支持IE6,7,8，但是jQuery2.x不再对IE8或者更早的浏览器支持。
介绍常见的选择器，以及以下API的用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<header id="top">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="ok">ok</div>
</header>
<script>
$('.child').eq(2) // 获得结果集中的第三个jQuery对象
$('.child').next() // next取得匹配的元素集合中每个元素紧邻的后面同辈元素的集合，previous相反，获取元素之前的同辈元素
$('.child').nextAll() // 获得每个匹配元素集合中每个元素所有后面的同辈元素，选择性筛选的选择器。prevAll与之相反，获取元素前面的同辈元素
$('.child').siblings() // 获得匹配元素集合中每个元素的兄弟元素，可以提供一个可选的选择器。
$('.child').parent() // 取得匹配元素集合中，每个元素的父元素
$('.child').parents() // 获得集合汇总每个匹配元素的祖先元素
$('.child').children() // 获得匹配元素集合中每个元素的直接子元素，选择器选择性筛选。
$('.child').find() // 查找符合选择器的后代元素
$('.child').filter(selector) // 筛选当前结果集合中符合条件的对象，参数可以是一个选择器
$('.child').filter(function（index）) //筛选当前结果集合中符合条件的对象，参数可以是一个函数
$('.child').has() // 筛选匹配元素集合中的那些有相匹配的选择器
$('.child').is(selector) // 判断当前匹配的元素集合中的元素是否为一个选择器
</script>
</body>
</html>
使用 jQuery 实现 Tab 切换效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
* {
padding: 0;
margin:0;
font: 14px/1.5
}
.tap-number {
float: left;
padding: 5px 20px;
border-top: black 1px solid;
border-left: black 1px solid;
background-color: #dddddd
}
.tap-number:last-child{
border-right: black 1px solid;
}
.nav::after{
content:'';
display: block;
width: 100%;
clear:both;
}
.nav {
padding-left: 10px;
padding-top: 10px;
}
.panel{
padding: 30px;
background-color: white;
height: 200px;
width: 300px;
border:black 1px solid;
display: none
}
.content{
padding-left: 10px;
}
.panel.active{
display: block;
}
.tap-number.active{
background: white;
}
</style>
</head>
<body>
<div class = 'whole'>
<div class= 'tap-whole'>
<div class= 'nav '>
<div class= 'tap-number active'>1</div>
<div class= 'tap-number'>2</div>
<div class= 'tap-number'>3</div>
<div class= 'tap-number'>4</div>
</div>
<div class = 'content'>
<div class= 'panel active'>panel1</div>
<div class= 'panel'>panel2</div>
<div class= 'panel'>panel3</div>
<div class= 'panel'>panel4</div>
</div>
</div>
<div class= 'tap-whole'>
<div class= 'nav '>
<div class= 'tap-number active'>1</div>
<div class= 'tap-number'>2</div>
<div class= 'tap-number'>3</div>
<div class= 'tap-number'>4</div>
</div>
<div class = 'content'>
<div class= 'panel active'>panel1</div>
<div class= 'panel'>panel2</div>
<div class= 'panel'>panel3</div>
<div class= 'panel'>panel4</div>
</div>
</div>
</div>
<script>
$('.tap-number').on('click',function(){
$(this).addClass('active').siblings().removeClass('active');
$(this).parents('.tap-whole').find('.panel').eq( $(this).index()).addClass('active').siblings().removeClass('active');
})
</script>
</body>
</html>
使用 原生 js 实现 Tab 切换效果
<script>
document.querySelectorAll('.mod-tab .tab').forEach(function(node){
node.addEventListener('click', function(){
var index
this.parentElement.querySelectorAll('.tab').forEach(function(tab, idx){
tab.classList.remove('active')
if(node === tab){
index = idx
}
})
this.classList.add('active')
this.parentElement.nextElementSibling.querySelectorAll('.panel').forEach(function(panel){
panel.classList.remove('active')
})
this.parentElement.nextElementSibling.querySelectorAll('.panel')[index].classList.add('active')
})
})
</script>
网友评论