jQuery学习:html与text、width与height、
2019-05-07 本文已影响0人
Merbng
val方法
val方法用于获取表单元素的值，例如input、textare的值
<script>
$(function () {
//val方法用于获取表单元素的值，例如input、textare的值
$("#txt").focus(function () {
//获取值
if ($(this).val() == "洋酒") {
//设置值
$(this).val("");
}
});
$("#txt").blur(function () {
if ($(this).val() == "") {
$(this).val("洋酒");
}
});
});
</script>
html与text方法
html: innerHTML text: innerText
- 获取
console.log($("div").html());
console.log($("div").text());
- 设置
$("div").html("<h4>这是测试</h4>");
$("div").text("这是text的值啊");
$("div").text("<h4>这是测试</h4>");
- 区别
html方法会识别html标签
text方法会把内容直接当成字符串，不会识别html标签
width方法与height方法
$(function () {
// 获取div的宽度
console.log($("div").css("width"));//200px
// 设置
$("div").css("width", "200px");
console.log($("div").css("width"));//200px
console.log("width:" + $("div").width());//200
console.log("innerWidth:padding + width========>" + $("div").innerWidth());//220 padding + width
console.log("outerWidth:padding + width + border====>" + $("div").outerWidth());//240 padding + width + border
//跟margin无关
//获取屏幕的可视宽度
console.log($(window).width());
//获取屏幕的可视高度
console.log($(window).height());
});
scrollTop与scrollLeft
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
height: 4000px;
width: 4000px;
}
</style>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
$(window).scroll(function () {
//获取页面被卷曲的高度
console.log("===========scrollTop========:" + $(window).scrollTop());
//获取页面被卷曲的宽度
console.log("===========scrollLeft========:" + $(window).scrollLeft());
});
});
</script>
</body>
</html>
offset方法与position方法
-
获取元素相对于document的位置
console.dir($(".son").offset());//返回值为对象：{left:100, top:100} -
获取元素相对于有定位的父元素的位置
console.dir($(".son").position());
案例：小火箭返回顶部
<!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的时候，让小火箭显示，如果小于1000px，隐藏
$(window).scroll(function () {
if ($(window).scrollTop() >= 1000) {
$(".actGotop").stop().fadeIn(1000);
} else {
$(".actGotop").stop().fadeOut(1000);
}
});
$(".actGotop").click(function () {
$("html,body").stop().animate({scrollTop: 0}, 2000);
// 瞬间到顶部
// $(window).scrollTop(0);
});
});
</script>
</body>
</html>
固定导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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>
</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>
<script src="../jquery-1.12.4.js"></script>
<script>
$(function () {
$(window).scroll(function () {
//判断卷曲去的高度是否超过topPart的高度
// 1，让navBar有固定定位
// 2.让mainPart有一个marginTop
if ($(window).scrollTop() >= $(".top").height()) {
console.log("============");
$(".nav").addClass("fixed");
$(".main").css("marginTop", $(".nav").height() + 10);
} else {
console.log("+++++++++++++");
$(".nav").removeClass("fixed");
$(".main").css("marginTop", 10);
}
});
});
</script>
</body>
</html>
jquery事件机制
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
- 简单事件
给自己注册的事件 缺点：一次只能注册一个事件 不支持动态事件绑定
$("div").click(function () {
alert("简单事件");
});
- delegate ：代理，委托
要给div注册一个委托事件，但是最终不是由他执行，而是p执行
动态创建的也有事件，缺点：只能注册委托事件
//参数1：selector，事件最终由谁来执行
//参数2：事件的类型
//参数3：函数，要做什么
$("box").delegate("p", "click", function () {
alert("代理");
console.log(this);
})
on注册事件的两种方式
jQuery1.7之后，用on统一了所有事件的处理方法
- on注册简单事件
表示给(selector)绑定事件，并且由自己触发，不支持动态绑定
$(selector).on("click",function(){}); - on注册委托事件
表示给$(selector)绑定代理事件，当必须是它的内部因素span才能触发这个事件，支持动态绑定
$(selector).on("click","span",function () {}); - on 注册事件的语法：
参数1：events 绑定事件的名称，可以是由空格分割的多个事件（标准事件或自定义事件）
参数2：selector 执行事件的后代元素（可选），如果没有后代元素，那么事件将由自己执行
参数3：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);
