Jquery基础（第一事件）

最新推荐文章于 2024-03-12 20:05:32 发布

jpp411

最新推荐文章于 2024-03-12 20:05:32 发布

阅读量259

点赞数

分类专栏： Jquery基础

本文链接：https://blog.csdn.net/jpp411/article/details/52610021

版权

Jquery基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">

#flip,#panle{
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panle{
padding: 50px;
display: none;
}

</style>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
if($("a[target=_blank]").css("display")=="none"){
$("a[target=_blank]").show();
}else{
$("a[target=_blank]").hide();
}
});
});
//方法同上
$(document).ready(function(){
$("#buttonggl").click(function(){
$("h4").toggle(1000,function(){
alert("执行toggle方法后执行该方法");
});
})

})

$(document).ready(function(){
$("tr:even").css("background-color","blue");
$("tr:odd").css("background-color","red");
})

$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();

});

});

$(document).ready(function(){
$("h2").mouseenter(function(){
// alert("你好，你是鼠标移过时的事件！");
}),
$("h2").mouseleave(function(){
// alert("你好，你是鼠标离开时的事件！");
});

});
//
$(document).ready(function(){
$("h2").hover(function(){
//$("p").css("background-color","red");
$(this).css({ color: "#FFFFFF", background: "#29B6F6" });
});

});
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
})

})

$(document).ready(function(){
$("h3").click(function(){
$("h3").hide(1000,function(){
alert("你好，hide");
})
})
})

$(document).ready(function(){
$("#buttonggfade").click(function(){
//$("h5").fadeIn();
//$("h5").fadeOut();
//$("h5").fadeToggle();
$("h5").fadeTo("slow",0.6);

})
})

$(document).ready(function(){
$("#flip").click(function(){
$("#panle").slideDown();
//$("#panle").slideToggle("slow");

})
})
//jQuery animate() 方法用于创建自定义动画
//$(选择器).animate({params},speed,callback); params 参数定义形成动画的 CSS 属性
/* $(document).ready(function(){
$("#animatediv").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'

});
});
}); */

$(document).ready(function(){
$("#start").click(function(){
$("div").animate({left:'200px'},5000);
$("div").animate({fontSize:'3em'},5000);
});
$("#stop").click(function(){
$("div").stop();
});

$("#stop2").click(function(){
$("div").stop(true);
});

$("#stop3").click(function(){
$("div").stop(true,true);
});

});
//Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
//即：允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。这样的话，浏览器就不必多次查找相同的元素。
$(document).ready(function(){
$("#buttonChaining").click(function(){
$("#p1").css("color","blue").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>

<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p><a href="http://www.runoob.com/html/" target="_blank">HTML 教程</a></p>
<p><a href="http://www.runoob.com/css/" >CSS 教程</a></p>
<p id="p1">Chaining:在相同的元素上运行多条 jQuery 命令，一条接着另一条</p>
<button id="buttonChaining">点我</button></br></br>
用户名：<input type="text" placeholder="请输入用户名"/></br></br>
密码：<input type="text" placeholder="请输入密码"/></br></br>
<h3>你好，我是隐藏hide和显示show方法</h3>
<h4>你好，我是toggle()方法</h4>
<button id="buttonggl" type="button" value="aa">toggle</button>
<h5>淡入淡出fadeIn,fadeOut,fadeToggle,fadeTo</h5>
<button id="buttonggfade" type="button" value="aa">fadetoggle</button>
<div id="flip"> 点击我测试"滑动效果"</div>
<div id="panle"> slideDown(),sildeUp(),sildeToggle()</div>
<button id="animatediv">开发动画</button>
<div style="background: #98bf21;height: 100px;width: 100px;position: absolute;">Hello</div>

<button id="start">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止动画，但完成动作</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">动画stop,start</div>

</br></br>
<table id="outLeftTable" border="1" >
<tr>
<th class="xuanzefir">全选</th>
<th class="appnamefir">姓名</th>
<th class="appcodefir">工号</th>
</tr>
<tr>
<td class="xuanzefir"><input name="checkBoxId" type="checkbox" value='1'/></td>
<td class="appnamefir">晋盼盼</td>
<td class="appcodefir">001</td>
</tr>
<tr>

<td class="xuanzefir"><input name="checkBoxId" type="checkbox" value='2'/></td>
<td class="appnamefir">罗伟</td>
<td class="appcodefir">002</td>

</tr>

</table>
</div>

</body>
</html>

jpp411

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery基础（第一事件）

pageEncoding="UTF-8"%>Insert title here#flip,#panle{padding: 5px;text-align: center;background-color: #e5eecc;border: solid 1px #c3c3c3;}#panle{padding: 50px;display:
复制链接

扫一扫

专栏目录