jQuery-DOM操作2
2017-11-16 本文已影响14人
charlotte2018
01-样式操作（css方法）.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//样式操作方法1(设置样式)： css(json);
// $("div").css({"width":100,"height":100,"background-color":"pink"});
//样式操作方法2(设置样式)： css(属性，值);
$("div").css("background-color","red");
//样式操作方法2(获取样式)： css(属性);
//获取的时候如果有很多，那么获取jquery对象中的第一个
alert($("div").css("width"));
})
</script>
</head>
<body>
<div></div>
<div style="width: 200px;height:300px;background: yellow"></div>
<div style="width: 200px;height:300px;background: yellow"></div>
<div style="width: 200px;height:300px;background: yellow"></div>
</body>
</html>
02-类操作（添加删除切换判断）.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.current {
background-color: red;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
//添加类
$("div").addClass("current");
//判断类
alert($("div").hasClass("current"));//has是have的单三
});
$("button").eq(1).click(function () {
//删除类
$("div").removeClass("current");
//判断类
alert($("div").hasClass("current"));//has是have的单三
});
//alert($("div").hasClass("current"));//jquery对象中有一个带有类名的也是true，所有都不带才是false；
})
</script>
</head>
<body>
<button>添加</button>
<button>删除</button>
<div></div>
<div></div>
<div></div>
<div class="current"></div>
</body>
</html>
03-切换背景.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
.current {
background-color: green;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
$("button").click(function () {
//需求：点击按钮 ，切换背景
// if($("div").hasClass("current")){
// //如果有类名，那么删除
// $("div").removeClass("current")
// }else{
// //如果没有类名，那么添加
// $("div").addClass("current")
// }
//切换类（toggleCLass）
$("div").toggleClass("current");
});
})
</script>
</head>
<body>
<button>切换</button>
<div></div>
</body>
</html>
04-动画之显示和隐藏.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
display: none;
background-color: pink;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//点击按钮后产生动画
$("button:eq(0)").click(function () {
// //显示动画用法1: show(); 不加参数
$("div").show(); //通过这个方法实现的：display: block;
// //显示动画用法2: show(2000); 毫秒值
// $("div").show(2000); //通过这个方法实现的：display: block;
// //通过控制 宽高透明度和display
//显示动画用法3: show(字符串); slow慢：600ms normal正常:400ms fast快：200ms
// $("div").show("slow");
// $("div").show("fast");
// $("div").show("normal");
//显示动画用法4: show(毫秒值，回调函数[显示完毕执行什么]);
// $("div").show(5000,function () {
// alert("动画执行完毕！");
// });
})
//隐藏动画
$("button:eq(1)").click(function () {
// //显示动画用法1: hide(); 不加参数
$("div").hide(); //通过这个方法实现的：display: none;
// //显示动画用法2: hide(2000); 毫秒值
// $("div").hide(2000); //通过这个方法实现的：display: none;
// //通过控制 宽高透明度和display
//显示动画用法3: hide(字符串); slow慢：600ms normal正常:400ms fast快：200ms
// $("div").hide("slow");
// $("div").hide("fast");
// $("div").hide("normal");
//显示动画用法4: hide(毫秒值，回调函数[显示完毕执行什么]);
// $("div").hide(2000,function () {
// alert("动画执行完毕！");
// });
})
$("button:eq(2)").click(function () {
//显示隐藏切换
//同样有四种用法
$("div").toggle(2000);
})
})
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
</body>
</html>
05-动画之滑入和滑出.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
display: none;
background-color: pink;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//点击按钮后产生动画
$("button:eq(0)").click(function () {
// //滑入动画用法1: slideDown(); 不加参数
$("div").slideDown();
// //滑入动画用法2: slideDown(2000); 毫秒值
// $("div").slideDown(2000);
// //通过控制 高和display
//滑入动画用法3: slideDown(字符串); slow慢：600ms normal正常:400ms fast快：200ms
// $("div").slideDown("slow");
// $("div").slideDown("fast");
// $("div").slideDown("normal");
//滑入动画用法4: slideDown(毫秒值，回调函数[显示完毕执行什么]);
// $("div").slideDown(5000,function () {
// alert("动画执行完毕！");
// });
})
//滑出动画
$("button:eq(1)").click(function () {
// //滑出动画用法1: slideUp(); 不加参数
// $("div").slideUp();
// //滑出动画用法2: slideUp(2000); 毫秒值
// $("div").slideUp(2000); //通过这个方法实现的：display: none;
// //通过控制 高和display
//滑出动画用法3: slideUp(字符串); slow慢：600ms normal正常:400ms fast快：200ms
// $("div").slideUp("slow");
// $("div").slideUp("fast");
// $("div").slideUp("normal");
//滑出动画用法1: slideUp(毫秒值，回调函数[显示完毕执行什么]);
$("div").slideUp(2000,function () {
alert("动画执行完毕！");
});
})
$("button:eq(2)").click(function () {
//滑入滑出切换
//同样有四种用法
$("div").slideToggle(1000);
})
})
</script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切换</button>
<div></div>
</body>
</html>
06-动画之淡入和淡出.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
display: none;
/*opacity: 1;*/
background-color: pink;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//点击按钮后产生动画
$("button:eq(0)").click(function () {
// //淡入动画用法1: fadeIn(); 不加参数
$("div").fadeIn();
// //淡入动画用法2: fadeIn(2000); 毫秒值
// $("div").fadeIn(2000);
// //通过控制 透明度和display
//淡入动画用法3: fadeIn(字符串); slow慢：600ms normal正常:400ms fast快：200ms
// $("div").fadeIn("slow");
// $("div").fadeIn("fast");
// $("div").fadeIn("normal");
//淡入动画用法4: fadeIn(毫秒值，回调函数[显示完毕执行什么]);
// $("div").fadeIn(5000,function () {
// alert("动画执行完毕！");
// });
})
//滑出动画
$("button:eq(1)").click(function () {
// //滑出动画用法1: fadeOut(); 不加参数
// $("div").fadeOut();
// //滑出动画用法2: fadeOut(2000); 毫秒值
// $("div").fadeOut(2000); //通过这个方法实现的：display: none;
// //通过控制 透明度和display
//滑出动画用法3: fadeOut(字符串); slow慢：600ms normal正常:400ms fast快：200ms
// $("div").fadeOut("slow");
// $("div").fadeOut("fast");
// $("div").fadeOut("normal");
//滑出动画用法1: fadeOut(毫秒值，回调函数[显示完毕执行什么]);
// $("div").fadeOut(2000,function () {
// alert("动画执行完毕！");
// });
})
$("button:eq(2)").click(function () {
//滑入滑出切换
//同样有四种用法
$("div").fadeToggle(1000);
})
$("button:eq(3)").click(function () {
//改透明度
//同样有四种用法
$("div").fadeTo(1000,0.5, function () {
alert(1);
});
})
})
</script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>改透明度为0.5</button>
<div></div>
</body>
</html>
07-自定义动画.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
position: absolute;
left: 20px;
top: 30px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
jQuery(function () {
$("button").click(function () {
var json = {"width":500,"height":500,"left":300,"top": 300,"border-radius":100};
var json2 = {"width":100,"height":100,"left":100,"top": 100,"border-radius":100,"background-color":"red"};
//自定义动画
$("div").animate(json,1000, function () {
$("div").animate(json2,1000, function () {
alert("动画执行完毕！");
});
});
// //自定义动画
// $("div").animate({"display":"none","opacity":0,"width":0,"height":0},2000);
// $("div").animate({"height":0},2000);
// $("div").animate({"opacity":0},2000);
})
})
</script>
</head>
<body>
<button>动画</button>
<div></div>
</body>
</html>
08-停止动画.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
display: none;
background-color: pink;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//点击按钮后产生动画
$("button:eq(0)").click(function () {
$("div").slideDown(2000);
})
//滑出动画
$("button:eq(1)").click(function () {
$("div").slideUp(2000);
})
$("button:eq(2)").click(function () {
$("div").stop(); //都不写，默认两个都是false;
// 第一个参数表示后续动画是否要执行
//（true:后续动画不执行 ;false:后续动画会执行）
// 第二个参数表示当前动画是否执行完
//（true:立即执行完成当前动画 ;false:立即停止当前动画）
//四种情况：情况1：true,true
//（后续动画不执行，立即执行完成当前动画）
// $("div").stop(true,true);
//四种情况：情况2：false,true
//（后续动画会执行，立即执行完成当前动画）
// $("div").stop(false,true);
//四种情况：情况3：true,false
//（后续动画不执行，立即停止当前动画`）
// $("div").stop(true,false);
//四种情况：情况4：true,false
//（后续动画会执行，立即停止当前动画`）
// $("div").stop(false,false);
})
})
</script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>停止</button>
<div></div>
</body>
</html>
09-下拉菜单案例（children+this）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrap {
width: 330px;
height: 30px;
margin: 100px auto 0;
padding-left: 10px;
background-image: url(imgs/bg.jpg);
}
.wrap li{
background-image: url(imgs/libg.jpg);
}
.wrap > ul > li {
float: left;
margin-right: 10px;
position: relative;
}
.wrap a {
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul {
position: absolute;
top: 30px;
display: none;
}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script>
//入口函数
$(document).ready(function () {
//需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
var jqli = $(".wrap>ul>li");
//绑定事件
jqli.mouseenter(function () {
$(this).children("ul").stop().slideDown(1000);
});
//绑定事件(移开隐藏)
jqli.mouseleave(function () {
$(this).children("ul").stop().slideUp(1000);
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">一级菜单1</a>
<ul>
<li><a href="javascript:void(0);">二级菜单1</a></li>
<li><a href="javascript:void(0);">二级菜单2</a></li>
<li><a href="javascript:void(0);">二级菜单3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
10-右下角的弹出广告（slideDown+slideUp+fadeIn+fadeOut）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ad {
position: fixed;
right: 0;
bottom: 0;
width: 230px;
height: 120px;
background-image: url(imgs/ad.jpg);
display: none;
}
.ad span {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 18px;
background-image: url(imgs/h.jpg);
cursor: pointer;
}
</style>
<script src="../jquery-1.11.1.js"></script>
<script>
$(function () {
//需求：然广告ad部分，先滑入，在滑出，在淡入。然后绑定事件，点击span弹出
//步骤：
$(".ad").slideDown(1000).slideUp(1000).fadeIn(1000).children("span").click(function () {
$(this).parent().fadeOut(1000);
});
// $(".ad").slideDown(1000, function () {
// $(".ad").slideUp(1000, function () {
// $(".ad").fadeIn(1000, function () {
// $(".ad").children("span").click(function () {
// $(this).parent().fadeOut(1000, function () {
// alert("执行完毕！");
// });
// });
// });
// });
// })
})
</script>
</head>
<body>
<div class="ani">我是内容</div>
<div class="ad">
<span></span>
</div>
</body>
</html>
11-节点的操作之创建JQ对象.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul></ul>
<script src="jquery-1.11.1.js"></script>
<script>
//创建节点1: $("标签") :类比于js中的document.createElement("li");
console.log($("<li class='aaa'>我是li标签</li>"));
//创建节点2: $("ul").html(""); :类比innerHTML属性。因为此属性，识别标签。
$("ul").html("<li>我是html方法穿件出来的li标签</li>")
</script>
</body>
</html>
12-节点的操作之添加节点.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.js"></script>
<script>
jQuery(document).ready(function () {
$("button").click(function () {
//创建一个新的jquery对象li
var jqNewLi = $("<li>我是jquery创建出来的li。用的是append方法添加</li>");
// append(); 在盒子的最末尾添加一个元素。
//在盒子末尾添加
// $("ul").append(jqNewLi); //把新创建的li塞进ul中
// jqNewLi.appendTo($("ul")); //把新创建的li塞进ul中
//在盒子最前面添加
// $("ul").prepend(jqNewLi);
// jqNewLi.prependTo($("ul"));
//下面两个方法是操作兄弟元素的。放在兄弟元素之后或者之前
//after();
$("li").after(jqNewLi);
//before();
// $("li").before(jqNewLi);
})
});
</script>
</head>
<body>
<button>添加li</button>
<ul>
<li>我是土著li</li>
</ul>
</body>
</html>
12-节点的操作之添加节点.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.js"></script>
<script>
jQuery(document).ready(function () {
$("button").click(function () {
//创建一个新的jquery对象li
var jqNewLi = $("<li>我是jquery创建出来的li。用的是append方法添加</li>");
// append(); 在盒子的最末尾添加一个元素。
//在盒子末尾添加
// $("ul").append(jqNewLi); //把新创建的li塞进ul中
// jqNewLi.appendTo($("ul")); //把新创建的li塞进ul中
//在盒子最前面添加
// $("ul").prepend(jqNewLi);
// jqNewLi.prependTo($("ul"));
//下面两个方法是操作兄弟元素的。放在兄弟元素之后或者之前
//after();
$("li").after(jqNewLi);
//before();
// $("li").before(jqNewLi);
})
});
</script>
</head>
<body>
<button>添加li</button>
<ul>
<li>我是土著li</li>
</ul>
</body>
</html>
13-节点的操作之删除和清空节点.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.js"></script>
<script>
jQuery(document).ready(function () {
$("button").eq(0).click(function () {
//清空li所在的ul
//方法1：.html("");
// $("ul").html("");
//方法1：.empty();
$("ul").empty();
})
$("button").eq(1).click(function () {
//删除指定的li。 --- 自杀！
$("li:eq(0)").remove();
})
});
</script>
</head>
<body>
<button>清空li</button>
<button>删除第一个li</button>
<ul>
<li>我是土著li1</li>
<li>我是土著li2</li>
<li>我是土著li3</li>
<li>我是土著li4</li>
</ul>
</body>
</html>
14-节点的操作之复制节点.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.js"></script>
<script>
jQuery(document).ready(function () {
$("button").eq(0).click(function () {
//复制节点： clone();
var newUl = $(".box ul").clone();
$(".box").append(newUl);
})
});
</script>
</head>
<body>
<button>复制节点</button>
<div class="box">
<ul>
<li>我是土著li1</li>
<li>我是土著li2</li>
<li>我是土著li3</li>
<li>我是土著li4</li>
</ul>
</div>
</body>
</html>
