前端 jQuery基础理论总结（二）

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>

前端 jQuery基础理论总结（二）

jQuery做选项卡

jQuery操作属性

jQuery循环

元素绝对位置

猜你喜欢