<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>feng</title>
</head>
<body>
<div class="div1" con="c1"></div>
<input type="checkbox" checked="checked">是否可见
<input type="checkbox">是否可见
<div id="id1">
111111111111111111
<p>ppppp</p>
</div>
<input type="text" value="11111">
<div value="22222"></div>
<script src="jquery-3.1.1.js"></script>
<script>
/*console.log($("div").hasClass("div1"))
//取出
console.log($("div").attr("con"))
//设置
console.log($("div").attr("con","c2"))
console.log($(":checkbox:first").attr("checked"));
console.log($(":checkbox:last").attr("checked"));
console.log($(":checkbox:first").prop("checked"));
console.log($(":checkbox:last").prop("checked"));*/
//prop处理固有的属性，比如说 class。。。
//attr处理一些自己创建的一些属性比如说 con 。。。
// console.log($("div").prop("class"))
/*console.log($("#id1").html());
console.log($("#id1").text());
console.log($("#id1").html("<h1>FengFeng</h1>"));
console.log($("#id1").text("<h1>FengFeng</h1>"));*/
console.log($(":text").val(666666666));
//非固有属性value，无法获取。。。。
console.log($(":text").next().val());
$("div").css({"color":"red","background-color":"green"})
</script>
</body>
</html>
文档操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档操作</title>
</head>
<body>
<button>add</button>
<div class="c1">
<p>PPP</p>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
$("button").click(function () {
//内部插入
//$(".c1").append("<h1>HELLO fengfeng</h1>");
var $ele = $("<h1>");
$ele.html("zhang yafeng");
$ele.css("color","red");
//相同用法（从后面追加）
//$(".c1").append($ele);
//$ele.appendTo(".c1");
//从开始追加
//$(".c1").prepend($ele);
//$ele.prependTo(".c1");
//外部插入
/*$(".c1").after($ele);
$(".c1").before($ele);
$ele.insertAfter(".c1");
$ele.insertBefore(".c1");*/
//替换
// $("p").replaceWith($ele);
//删除和清空
//$(".c1").empty();
//将标签也删除
//$(".c1").remove();
var $ele_new = $(".c1").clone();
$(".c1").after($ele_new);
})
</script>
</body>
</html>
clone使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clone</title>
</head>
<body>
<div class="outer">
<div class="item">
<button>+</button>
<input type="text">
</div>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
$("button").click(function () {
var $txt = $(this).parent().clone();
$txt.children("button").text("-").attr("onclick","action2(this)");
$(".outer").append($txt);
})
function action2(self) {
// alert("fengfeng");
$(self).parent().remove();
}
</script>
</body>
</html>
css操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css操作</title>
<style>
*{
margin: 0;
padding: 0;
}
.div1,.div2{
width: 200px;
height: 100px;
}
.div1{
border: 5px solid red;
padding: 20px;
margin: 2px;
background-color: antiquewhite;
}
.div2{
background-color: rebeccapurple;
}
.outer{
position: relative;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="outer">
<div class="div2"></div>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
//相对于视图的偏移量
/*console.log($(".div1").offset().top);
console.log($(".div1").offset().left);
console.log($(".div2").offset().top);
console.log($(".div2").offset().left);
//position:相对于已经定位的父标签的偏移量
console.log($(".div1").position().top);
console.log($(".div1").position().left);
console.log($(".div2").position().top);
console.log($(".div2").position().left);
console.log($("body").scrollTop())*/
//内容的宽高
console.log($(".div1").height());
//修改
//console.log($(".div1").height("300px"));
//带padding的宽高
console.log($(".div1").innerHeight());
//带padding 和 border的宽高
console.log($(".div1").outerHeight());
//带padding 和 border 和 margin的宽高
console.log($(".div1").outerHeight(true));
</script>
</body>
</html>
返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style>
*{
margin: 0;
padding: 0;
}
.div1,.div2{
width: 100%;
height: 800px;
}
.div1{
background-color: antiquewhite;
}
.div2{
background-color: rebeccapurple;
}
.returnTop{
position: fixed;
right: 20px;
bottom: 40px;
height: 30px;
width: 100px;
color: white;
text-align: center;
background-color: #99aecb;
line-height: 30px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="returnTop hide" onclick="returnTop()">返回顶部</div>
<script src="jquery-3.1.1.js"></script>
<script>
//窗口滚动的时候触发的事件
window.onscroll=function () {
console.log($(window).scrollTop());
if ($(window).scrollTop()>100){
$(".returnTop").removeClass("hide");
} else {
$(".returnTop").addClass("hide");
}
}
//
function returnTop() {
$(window).scrollTop(0);
}
</script>
</body>
</html>
