设置元素的宽和高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
background-color: darkorchid;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
//元素的宽和高,jQuery中封装了方法
/**
* .width()可以获取也可以设置元素的宽
* .height()可以获取也可以设置元素的高
*/
// 把获取元素计算后的样式属性值的兼容代码:
// window.getComputedStyle();
// document.getElementById("btn").currentStyle
$(function(){
$("#btn").click(function(){
// 点击按钮,设置div的宽和高为原来的2倍
// .css方法获取的宽和高实际上是字符串类型
// 获取div的宽和高
// var w = $("#dv").css("width");
// var h = $("#dv").css("height");
// // console.log(w);
// // 设置div的宽和高
// $("#dv").css("width",(parseInt(w)*2)+"px");
// $("#dv").css("height",(parseInt(h)*2)+"px");
// 先获取
// var w = $("#dv").width();
// var h = $("#dv").height();
// console.log(w);
// $("#dv").css("width",w*2);
// $("#dv").css("height",h*2);
// $("#dv").width("500px");
// $("#dv").height("500px");
});
});
</script>
</head>
<body>
<input type="button" value="设置元素的宽和高" id="btn">
<div id="dv"></div>
</body>
</html>元素的left和top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 100px;
background-color: indianred;
margin-top: 20px;
position: absolute;
left: 100px;
top: 200px;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
// 点击按钮,设置div的left和top的值是原来的2倍
$(function(){
$("#btn").click(function(){
// 获取left和top ---- 获取的仍然是字符串类型
// var l = $("#dv").css("left");
// var t = $("#dv").css("top");
// // console.log(l);
// var left1 = parseInt(l)*2
// var top1 = parseInt(t)*2;
// $("#dv").css("left",left1+"px");
// $("#dv").css("top",top1+"px");
// 该方法获取的是一个对象,该对象中有两个属性,left和top
// left和top包含left和margin-left和top和margin-top的值
// console.log($("#dv").offset().left);
// $("#dv").css("left",$("#dv").offset().left*2);
// $("#dv").css("top",$("#dv").offset().top*2);
// $("#dv").offset({"left":500,"top":250});
});
});
/**
* 可以设置,也可以获取
* .width()是元素的宽
* .height()是元素的高
*
* .offset()---->获取的是对象,可以设置,也可以获取
* .offset({"left":值,"top":"值"});设置
*/
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv"></div>
</body>
</html>元素卷曲出去的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
overflow: auto;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
// scroll系列:
/**
* DOM中的
* scrollLeft:向左卷曲出去距离的值
* scrollTop:向上卷曲出去距离的值
* scrollWidth:元素中内容的实际的宽
* scrollHeight:元素中内容的实际的高
*
*/
</script>
<script>
// $(function(){
// $("#btn").click(function(){
// // $("#dv").scroll();
// // console.log($("#dv").scrollLeft());
// // console.log($("#dv").scrollTop());
// // 获取元素向上卷曲出去的距离,scrollTop()---->方法,数字类型
// // 获取元素向左卷曲出去的距离,scrollLeft()---->方法,数字类型
// // console.log($("#dv").scrollWidth());
// });
// });
// div滚动上下滚动条的时候,一直获取他的向上卷曲出去的值
$(function(){
$("#dv").onscroll = function(){
console.log($(this).scrollTop());
console.log("哈哈");
};
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv">
哈哈,我让你先得瑟一会
哈哈,我让你先得瑟一会
哈哈,我让你先得瑟一会
哈哈,我让你先得瑟一会
哈哈,我让你先得瑟一会
哈哈,我让你先得瑟一会
哈哈,我让你先得瑟一会
哈哈,我让你先得瑟一会
哈哈,我让你先得瑟一会
哈哈,我让你先得瑟一会
哈哈,我让你先得瑟一会
哈哈,我让你先得瑟一会
哈哈,我让你先得瑟一会
</div>
</body>
</html>为元素绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.12.1.js"></script>
<script>
$(function(){
// 为按钮绑定鼠标进入,鼠标离开,点击事件
// 第一种写法
// $("#btn").mouseenter(function(){
// $(this).css("backgroundColor","red");
// });
// $("#btn").mouseleave(function(){
// $(this).css("backgroundColor","green");
// });
// $("#btn").click(function(){
// alert("我被点了");
// });
// 第二种写法
// $("#btn").mouseenter(function(){
// $(this).css("backgroundColor","red");
// }).mouseleave(function(){
// $(this).css("backgroundColor","green");
// }).click(function(){
// alert('被点了');
// });
// 第三种方法:bind方法绑定
// $("#btn").bind("click",function(){
// alert('oh oh');
// });
// $("#btn").bind("mouseenter",function(){
// $(this).css("backgroundColor","red");
// });
// $("#btn").bind("mouseleave",function(){
// $(this).css("backgroundColor","green");
// });
// 第四种写法
// $("#btn").bind("click",function(){
// alert("click me");
// }).bind("mouseenter",function(){
// $(this).css("backgroundColor","red");
// }).bind("mouseleave",function(){
// $(this).css("backgroundColor","green");
// });
$("#btn").bind({"click":function(){
alert("click bind");
},"mouseenter":function(){
$(this).css("backgroundColor","red");
},"mouseleave":function(){
$(this).css("backgroundColor","green");
}});
});
</script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
</body>
</html>