JQuery-8. 特殊属性操作

最新推荐文章于 2024-09-30 15:23:15 发布

凡小多

最新推荐文章于 2024-09-30 15:23:15 发布

阅读量107

点赞数

分类专栏： jquery 文章标签： jquery javascript html

本文链接：https://blog.csdn.net/wgh4318/article/details/120382270

版权

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

val方法

val方法用于设置和获取表单元素的值，例如input、textarea的值

//设置值
$("#name").val(“张三”);
//获取值
$("#name").val();

$(function() {
	$("#txt").focus(function() {
		//如果是默认值，清空内容
		if ($(this).val() === "默认值") {
			$(this).val("");
		}
	});
	$("#txt").blur(function() {
		if ($(this).val() === "") {
			$(this).val("默认值");
		}
	});
});

html方法与text方法

html方法相当于innerHTML text方法相当于innerText

//设置内容
$(“div”).html(“<span>这是一段内容</span>”);
//获取内容
$(“div”).html()

//设置内容
$(“div”).text(“<span>这是一段内容</span>”);
//获取内容
$(“div”).text()

区别：html方法会识别html标签，text方法会把内容直接当成字符串，并不会识别html标签。

width方法与height方法

设置或者获取宽度

//带参数表示设置高度
$(“img”).width(200);
//不带参数获取高度
$(“img”).width();
//padding+width
$(“img”).innerWidth();
//padding+width+border
$(“img”).outerWidth();
//padding+width+border+margin
$(“img”).outerWidth(true);

设置或者获取高度

//带参数表示设置高度
$(“img”).height(200);
//不带参数获取高度
$(“img”).height();

获取网页的可视区宽高

//获取可视区宽度
$(window).width();
//获取可视区高度
$(window).height();

scrollTop与scrollLeft

设置或者获取垂直滚动条的位置

//获取页面被卷曲的高度
$(window).scrollTop();
//获取页面被卷曲的宽度
$(window).scrollLeft();

【案例：固定导航栏案例】

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0
			}

			img {
				vertical-align: top;
			}

			.main {
				margin: 10px auto 0;
				width: 1000px;
			}

			.fixed {
				position: fixed;
				top: 0;
				left: 0;
			}
		</style>

		<script src="../jquery-1.12.4.js"></script>
		<script>
			$(function() {
				$(window).scroll(function() {
					//判断卷去的高度超过topPart的高度
					//1. 让navBar有固定定位
					//2. 让mainPart有一个marginTop
					if ($(window).scrollTop() >= $(".top").height()) {
						$(".nav").addClass("fixed");
						$(".main").css("marginTop", $(".nav").height() + 10);
					} else {
						$(".nav").removeClass("fixed");
						$(".main").css("marginTop", 10);
					}
				});

			});
		</script>

	</head>
	<body>
		<div class="top" id="topPart">
			<img src="images/top.png" alt="顶部" />
		</div>
		<div class="nav" id="navBar">
			<img src="images/nav.png" alt="顶部导航栏" />
		</div>
		<div class="main" id="mainPart">
			<img src="images/main.png" alt="内容" />
		</div>
	</body>
</html>

【案例：小火箭返航案例】

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			body {
				height: 8000px;
			}

			a {
				color: #FFF;
			}

			.actGotop {
				position: fixed;
				bottom: 50px;
				right: 50px;
				width: 150px;
				height: 195px;
				display: none;
				z-index: 100;
			}

			.actGotop a,
			.actGotop a:link {
				width: 150px;
				height: 195px;
				display: inline-block;
				background: url(images/gotop.png) no-repeat;
				outline: none;
			}

			.actGotop a:hover {
				width: 150px;
				height: 195px;
				background: url(images/gotop.gif) no-repeat;
				outline: none;
			}
		</style>


	</head>
	<body>
		<!-- 返回顶部小火箭 -->
		<div class="actGotop"><a href="javascript:;" title="Top"></a></div>


		<script src="jquery-1.12.4.js"></script>
		<script>
			$(function() {

				//当页面超出去1000px的时候，让小火箭显示出来,如果小于1000，就让小火箭隐藏
				$(window).scroll(function() {
					if ($(window).scrollTop() >= 1000) {
						$(".actGotop").stop().fadeIn(500);
					} else {
						$(".actGotop").stop().fadeOut(500);
					}
				});

				// function getScroll(){
				//   return {
				//     left:window.pageYOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
				//     top:window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
				//   }
				// }

				//在外面注册
				$(".actGotop").click(function() {
					$("html,body").stop().animate({
						scrollTop: 0
					}, 1000);
					//scrollTop为0
					//$(window).scrollTop(0);
				})

			});
		</script>
	</body>
</html>

offset方法与position方法

offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。

//获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
//获取相对于其最近的有定位的父元素的位置。
$(selector).position();

凡小多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录