jquery学习三（事件）

最新推荐文章于 2024-08-09 02:16:38 发布

驭乐MJ

最新推荐文章于 2024-08-09 02:16:38 发布

阅读量468

点赞数

分类专栏： JS_jQuery

本文链接：https://blog.csdn.net/mj404/article/details/42777357

版权

JS_jQuery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>learnjQuery-4</title>
	<style type="text/css">
		.bgred{
			background: pink;
		}
		.white {
			color: #fff;
		}

		.test_height {
			height: 30px;
			border: 10px solid red;
			padding: 10px;
			margin: 10px;
		}

		p.test_2 {
			margin: 50px;
		}

		div {
			position: relative;
			left: 20px;
			top: 20px;
			width: 200px;
			height: 200px;
			background: red;
		}
		p.test_3 {
			position: absolute;
			left:100px; 
			top:50px;
			width: 50px;
			height: 50px;
			background: yellow;
		}
		button {
			position: fixed;
			top: 50px;
		}
	</style>
	<script type="text/javascript" src="jquery-2.1.1.js"></script>
</head>

<body style="height:4000px;">

	<button>弹出滚动条离顶部的距离</button>

	<p>
		i am <strong>test strong text</strong>
		p tag
	</p>
	<p class="test_height">111111</p>
	<p class="test_2">2222222</p>
	<div>
		divdivdivdivdiv
		<p class="test_3">
			3333pppp
			<br/>
			ppppp333
		</p>
	</div>

	<script type="text/javascript">
	// $('p').addClass('bgred').addClass('white')
	// $('p').addClass('bgred white')
	// $('p').removeClass('bgred white')


/*	$('p').click(function() {
		$(this).toggleClass('bgred white');
	});*/
// /这两种写法是一样的，演示hasClass方法
/*$('p').click(function() {
	if ($(this).hasClass('bgred')) {
		$(this).removeClass('bgred');
	} else {
		$(this).addClass('bgred')
	}
});*/
//这两种写法是一样的对于添加样式，第二种使用了jason,注意格式的写法逗号的添加!!!
	// $('p').css('background', 'red').css('color', 'white').css('border', '10px solid #abcdef');;
	/*$('p').css({
		'background': 'red',
		'color': 'white',
		'border': '10px solid #abcdef'
	});*/
	
	//高度的方法
	// alert($('p .test_height').height());
	// alert($('p .test_height').outerHeight());
	// alert($('p .test_height').innerHeight());//innerHight计算的高度不把border和margin计算进去但会把padding计算进去
	// alert($('p .test_height').innerHeight(true));//outerHight如果参数不写默认值为false，如果是true就全计算进去
	//宽度方法同高度方法

	//标签加类写法仅次于id写法，之间不能有空格！基础呀！
	// alert($('p.test_2').offset());
	/*var a = $('p.test_2').offset();
	alert(a.left);*/

	/*var b = $('p.test_3').position();
	var c = $('p.test_3').offset();
	alert("position method: "+b.left);
	alert("offset method: "+c.left);*/

	//scroll method
	/*$('button').click(function() {
		alert($(window).scrollTop());
	});*/ 
	//scrollLeft()同理


	//设置和获取文本与html操作
	//text()没有参数会获取匹配元素的文本节点，有参数会修改
	// alert($('p:eq(0)').text())//如果里面有strong标签，还是只会返回文本
	// alert($('p:eq(0)').html())//如果里面有strong标签，返回代码
/*以上的两个方法相应的设置上参数就修改值*/

	</script>
</body>
</html>