<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<style>
#one{
width:300px;height:300px;border: 1px solid red;
}
#two{
width:200px;height:200px;border: 1px solid red; margin: 50px auto;
}
#san{
width:100px;height:100px;border: 1px solid red;margin: 50px auto;
}
#ruihan{
width: 100px;height: 500px;border: 1px solid red; background: RED;
}
#jesse{
width: 100px;height: 100px;border: 1px solid blue; background: blue;position: absolute; left: 200px;top: 40px;
}
</style>
<script>
$(function(){
$("#one").click(function(){
console.log("one");
});
$("#two").click(function(){
console.log("two");
});
$("#san").click(function(e){
console.log("san");
e.stopPropagation();
});
//隐藏和显示的三种方法
//第一种
$("input[value='hide']").click(function(){
$("#ruihan").hide(500);
});
$("input[value='show']").click(function(){
$("#ruihan").show(500);
});
//第二种
$("input[value='slideUp']").click(function(){
$("#ruihan").slideUp(500);
});
$("input[value='slideDown']").click(function(){
$("#ruihan").slideDown(500);
});
//第三种
$("input[value='fadeOut']").click(function(){
$("#ruihan").fadeOut(500);
});
$("input[value='fadeIn']").click(function(){
$("#ruihan").fadeIn(500);
});
//animate动画是可以组合的,可以多写几条
//尝试组合
$("input[value='animate']").click(function(){
for(var i=1;i<50;i++){
$("#jesse").animate({width:"100px",height:"100px",left:"800px",top:"500px",background:"#000"},5000).html("这是第"+i+"次循环");
$("#jesse").animate({width:"100px",height:"100px",left:"0px",top:"40px",background:"#000"},5000).html("这是第"+i+"次循环");
}
});
//组合结束
// $("input[value='animate']").click(function(){
// $("#jesse").animate({width:"100px",height:"100px",left:"800px",top:"500px",background:"#000"},5000);
// });
// $("input[value='animate']").click(function(){
// $("#jesse").animate({width:"100px",height:"100px",left:"0px",top:"40px",background:"#000"},5000);
// });
// $("input[value='animate']").click(function(){
// $("#jesse").animate({width:"100px",height:"100px",left:"800px",top:"40px",background:"#000"},5000);
// });
// $("input[value='animate']").click(function(){
// $("#jesse").animate({width:"100px",height:"100px",left:"0px",top:"500px",background:"#000"},5000);
// });
// var $li=$("ul li"); //获取索引的li
// console.log("元素个数为:"+$li.length);
// $li.each(function(i){
// //i表示当前遍历的元素索引
// //this表示当前遍历出来的dom元素
// console.log("索引:"+i);
// console.log("DOM元素:"+this);
// console.log("转化为jq元素:"+$(this));
// $(this).html($(this).html()+i);
// console.log("当前元素的索引为:"+$li.index(this));
// });
// $("input[type='button']").click(function(){
// var index=parseInt($("#txtindex").val());
// var $li=$("li").eq(index);
// document.write($li.html());
// console.log($li.html());
// });
});
</script>
</head>
<body>
<!-- <button id="dianji" value="123">点击</button>
<div id="one">
<div id="two">
<div id="san"></div>
</div>
</div> -->
<input type="text" id="txtindex"/>
<input type="button" value="打印"/>
<ul>
<li>美国</li>
<li>中国</li>
<li>日本</li>
<li>新加坡</li>
</ul>
<input type="button" value="hide">
<input type="button" value="show">
<input type="button" value="slideUp">
<input type="button" value="slideDown">
<input type="button" value="fadeOut">
<input type="button" value="fadeIn">
<input type="button" value="animate">
<div id="ruihan"></div>
<div id="jesse">快来抓我啊,com on!</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<style>
#one{
width:300px;height:300px;border: 1px solid red;
}
#two{
width:200px;height:200px;border: 1px solid red; margin: 50px auto;
}
#san{
width:100px;height:100px;border: 1px solid red;margin: 50px auto;
}
#ruihan{
width: 100px;height: 500px;border: 1px solid red; background: RED;
}
#jesse{
width: 100px;height: 100px;border: 1px solid blue; background: blue;position: absolute; left: 200px;top: 40px;
}
</style>
<script>
$(function(){
$("#one").click(function(){
console.log("one");
});
$("#two").click(function(){
console.log("two");
});
$("#san").click(function(e){
console.log("san");
e.stopPropagation();
});
//隐藏和显示的三种方法
//第一种
$("input[value='hide']").click(function(){
$("#ruihan").hide(500);
});
$("input[value='show']").click(function(){
$("#ruihan").show(500);
});
//第二种
$("input[value='slideUp']").click(function(){
$("#ruihan").slideUp(500);
});
$("input[value='slideDown']").click(function(){
$("#ruihan").slideDown(500);
});
//第三种
$("input[value='fadeOut']").click(function(){
$("#ruihan").fadeOut(500);
});
$("input[value='fadeIn']").click(function(){
$("#ruihan").fadeIn(500);
});
//animate动画是可以组合的,可以多写几条
//尝试组合
$("input[value='animate']").click(function(){
for(var i=1;i<50;i++){
$("#jesse").animate({width:"100px",height:"100px",left:"800px",top:"500px",background:"#000"},5000).html("这是第"+i+"次循环");
$("#jesse").animate({width:"100px",height:"100px",left:"0px",top:"40px",background:"#000"},5000).html("这是第"+i+"次循环");
}
});
//组合结束
// $("input[value='animate']").click(function(){
// $("#jesse").animate({width:"100px",height:"100px",left:"800px",top:"500px",background:"#000"},5000);
// });
// $("input[value='animate']").click(function(){
// $("#jesse").animate({width:"100px",height:"100px",left:"0px",top:"40px",background:"#000"},5000);
// });
// $("input[value='animate']").click(function(){
// $("#jesse").animate({width:"100px",height:"100px",left:"800px",top:"40px",background:"#000"},5000);
// });
// $("input[value='animate']").click(function(){
// $("#jesse").animate({width:"100px",height:"100px",left:"0px",top:"500px",background:"#000"},5000);
// });
// var $li=$("ul li"); //获取索引的li
// console.log("元素个数为:"+$li.length);
// $li.each(function(i){
// //i表示当前遍历的元素索引
// //this表示当前遍历出来的dom元素
// console.log("索引:"+i);
// console.log("DOM元素:"+this);
// console.log("转化为jq元素:"+$(this));
// $(this).html($(this).html()+i);
// console.log("当前元素的索引为:"+$li.index(this));
// });
// $("input[type='button']").click(function(){
// var index=parseInt($("#txtindex").val());
// var $li=$("li").eq(index);
// document.write($li.html());
// console.log($li.html());
// });
});
</script>
</head>
<body>
<!-- <button id="dianji" value="123">点击</button>
<div id="one">
<div id="two">
<div id="san"></div>
</div>
</div> -->
<input type="text" id="txtindex"/>
<input type="button" value="打印"/>
<ul>
<li>美国</li>
<li>中国</li>
<li>日本</li>
<li>新加坡</li>
</ul>
<input type="button" value="hide">
<input type="button" value="show">
<input type="button" value="slideUp">
<input type="button" value="slideDown">
<input type="button" value="fadeOut">
<input type="button" value="fadeIn">
<input type="button" value="animate">
<div id="ruihan"></div>
<div id="jesse">快来抓我啊,com on!</div>
</body>
</html>