jQuery做选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery索引值</title>
<style type="text/css">
.list li{
height: 30px;
margin-bottom: 10px;
background-color: gold;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('.list li').click(function(){
// alert(this.innerHTML);//弹出标签中的内容
alert($(this).index());//弹出下标
})
})
</script>
</head>
<body>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
jQuery操作属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery属性操作</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
/*
alert($('.box').html());//这是一个div元素
$('.box').html('<a href="http://www.baidu.com">百度网</a>');
*/
/*
读写值为布尔类型的属性用prop方法
读写值为非布尔类型的属性用attr方法
*/
/*
$('.box').attr({title:'这是一个div!'});//写入title属性,并赋值
alert($('.box').attr('class'));//读属性class的值,弹出box
*/
/*
var $src = $('#img1').attr('src');
alert($src);//img/1.png
$('#img1').attr({
src:'img/2.gif',
alt:'图片二'
});
*/
/*
alert($('#check').prop('checked'));//选中为true,非选中为false
$('#check').prop({checked:true});//设置默认勾选
*/
// alert($('.box2').html());//<span>这是div元素内的span</span>
alert($('.box2').text());//这是div元素内的span
})
</script>
</head>
<body>
<div class="box">这是一个div元素</div>
<img id="img1" src="img/1.png" alt="一张图片">
<input type="checkbox" id="check">多选
<div class="box2">
<span>这是div元素内的span</span>
</div>
</body>
</html>
jQuery循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery循环</title>
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
// //给全部的li设置内容和样式
// $('.list li').html('111');
// $('.list li').css({background:'gold'});
//第一个参数index是索引值
$('.list li').each(function(index) {
// alert(index);//弹出索引值
//$(this)是每一个li
$(this).html(index);
});
})
</script>
</head>
<body>
<ul class="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
元素绝对位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素绝对位置</title>
<style type="text/css">
.con{
width: 600px;
height: 600px;
margin: 50px auto 0;
}
.box{
width: 100px;
height: 100px;
background-color: gold;
margin-bottom: 10px;
}
.pos{
margin-left: 500px;
}
.pop{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
left:0;
top: 0;
display: none;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $pos = $('.pos');
//offset()是获取相对于页面左上角的绝对位置,即使外面再包一层con居中层,也不影响效果
var pos = $pos.offset();
// console.log(pos);
// alert(pos.left + "," + pos.top);
var w = $pos.outerWidth();
var h = $pos.outerHeight();
// alert(w);
$('.pop').css({left:pos.left + w,top:pos.top});
$pos.mouseover(function() {
$('.pop').show();
});
$pos.mouseout(function() {
$('.pop').hide();
});
})
</script>
</head>
<body>
<div class="con">
<div class="box"></div>
<div class="box"></div>
<div class="box pos"></div>
<div class="box"></div>
</div>
<div class="pop">提示信息!</div>
</body>
</html>