jQuery——jQuery特殊属性操作
jQuery特殊属性操作val方法
val方法用于设置和获取表单元素的值，例如input、textarea的值
//设置值
$("#name").val(“张三”);
//获取值
$("#name").val();
案例：京东搜索.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>搜索框</title>
</head>
<body>
<input type="button" value="搜索" id="btn">
<input type="text" value="内容，你一点我我就没了" id="txt">
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$("#txt").focus(function () {
//如果是默认值，清空内容
if($(this).val() === "内容，你一点我我就没了"){
$(this).val("");
}
});
$("#txt").blur(function () {
if($(this).val() === ""){
$(this).val("内容，你一点我我就没了");
}
});
});
</script>
</body>
</html>
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”).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(1000);
}else {
$(".actGotop").stop().fadeOut(1000);
}
});
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},3000);
scrollTop为0
$(window).scrollTop(0);
})
});
</script>
</body>
</html>
offset方法与position方法
offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。
//获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
//获取相对于其最近的有定位的父元素的位置。
$(selector).position();
页:
[1]